import { Dialog, DialogContent } from "@/components/ui/dialog";
import { Search, Users, Server, Newspaper, ShoppingBag, ScrollText, Gavel, LifeBuoy } from "lucide-react";
import { Link } from "@tanstack/react-router";
import { useState } from "react";
import { players, servers, news, products, punishments } from "@/features/_mock/data";

const CATEGORIES = [
  { key: "players", label: "Players", icon: Users },
  { key: "servers", label: "Servers", icon: Server },
  { key: "news", label: "News", icon: Newspaper },
  { key: "products", label: "Store", icon: ShoppingBag },
  { key: "rules", label: "Rules", icon: ScrollText },
  { key: "punishments", label: "Punishments", icon: Gavel },
  { key: "support", label: "Support", icon: LifeBuoy },
] as const;

export function GlobalSearch({ open, onOpenChange }: { open: boolean; onOpenChange: (v: boolean) => void }) {
  const [q, setQ] = useState("");
  const term = q.toLowerCase();
  const playerHits = players.filter((p) => p.name.toLowerCase().includes(term)).slice(0, 4);
  const serverHits = servers.filter((s) => s.name.toLowerCase().includes(term) || s.map.includes(term)).slice(0, 3);
  const newsHits = news.filter((n) => n.title.toLowerCase().includes(term)).slice(0, 3);
  const productHits = products.filter((p) => p.name.toLowerCase().includes(term)).slice(0, 3);

  const anyResults = q && (playerHits.length + serverHits.length + newsHits.length + productHits.length > 0);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl gap-0 overflow-hidden p-0">
        <div className="flex items-center gap-3 border-b border-border px-4 py-3">
          <Search className="h-5 w-5 text-muted-foreground" />
          <input
            autoFocus
            value={q}
            onChange={(e) => setQ(e.target.value)}
            placeholder="Search players, servers, news, products…"
            className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
          />
          <kbd className="rounded border border-border bg-background px-1.5 py-0.5 text-[10px] font-mono">ESC</kbd>
        </div>
        <div className="max-h-[60vh] overflow-y-auto p-2">
          {!q && (
            <div>
              <div className="px-3 py-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">Categories</div>
              <div className="grid grid-cols-2 gap-1 sm:grid-cols-4">
                {CATEGORIES.map((c) => (
                  <button key={c.key} className="flex flex-col items-center gap-1 rounded-md p-3 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground">
                    <c.icon className="h-5 w-5" />
                    {c.label}
                  </button>
                ))}
              </div>
              <div className="mt-3 px-3 py-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">Recent</div>
              <div className="px-3 text-sm text-muted-foreground">de_mirage · v1p3r · VIP</div>
            </div>
          )}
          {q && !anyResults && (
            <div className="px-4 py-10 text-center text-sm text-muted-foreground">No results for "{q}"</div>
          )}
          {anyResults && (
            <div className="space-y-3">
              {playerHits.length > 0 && (
                <Group title="Players">
                  {playerHits.map((p) => (
                    <Row key={p.id} to={`/players/${p.id}`} onClick={() => onOpenChange(false)} icon="👤" label={p.name} meta={p.rank} />
                  ))}
                </Group>
              )}
              {serverHits.length > 0 && (
                <Group title="Servers">
                  {serverHits.map((s) => (
                    <Row key={s.id} to={`/servers/${s.id}`} onClick={() => onOpenChange(false)} icon="🎮" label={s.name} meta={`${s.map} · ${s.players}/${s.maxPlayers}`} />
                  ))}
                </Group>
              )}
              {newsHits.length > 0 && (
                <Group title="News">
                  {newsHits.map((n) => (
                    <Row key={n.id} to={`/news/${n.slug}`} onClick={() => onOpenChange(false)} icon="📰" label={n.title} meta={n.category} />
                  ))}
                </Group>
              )}
              {productHits.length > 0 && (
                <Group title="Store">
                  {productHits.map((p) => (
                    <Row key={p.id} to={`/store/products/${p.id}`} onClick={() => onOpenChange(false)} icon="🛒" label={p.name} meta={`$${p.price}`} />
                  ))}
                </Group>
              )}
              <div className="border-t border-border p-2">
                <Link
                  to="/search"
                  onClick={() => onOpenChange(false)}
                  className="block rounded-md p-2 text-center text-sm text-primary hover:bg-accent"
                >
                  View all results for "{q}"
                </Link>
              </div>
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}

function Group({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div>
      <div className="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{title}</div>
      <div>{children}</div>
    </div>
  );
}
function Row({ to, onClick, icon, label, meta }: { to: string; onClick?: () => void; icon: string; label: string; meta?: string }) {
  return (
    <Link to={to} onClick={onClick} className="flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent">
      <span>{icon}</span>
      <span className="flex-1 truncate">{label}</span>
      {meta && <span className="text-xs text-muted-foreground">{meta}</span>}
    </Link>
  );
}