import { createFileRoute } from "@tanstack/react-router";
import { PageHeader } from "@/components/common/PageHeader";
import { Input } from "@/components/ui/input";
import { Search } from "lucide-react";
import { players, servers, news, products } from "@/features/_mock/data";
import { Link } from "@tanstack/react-router";
import { z } from "zod";
import { zodValidator, fallback } from "@tanstack/zod-adapter";

const schema = z.object({ q: fallback(z.string(), "").default("") });

export const Route = createFileRoute("/_public/search/")({
  validateSearch: zodValidator(schema),
  head: () => ({ meta: [{ title: "Search — Purple Zone" }] }),
  component: SearchPage,
});

function SearchPage() {
  const { q } = Route.useSearch();
  const nav = Route.useNavigate();
  const term = q.toLowerCase();
  return (
    <div className="mx-auto max-w-5xl px-4 py-6">
      <PageHeader title="Search results" description={q ? `Results for "${q}"` : "Type to search everything on Purple Zone."} />
      <div className="relative mb-6"><Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" /><Input autoFocus value={q} onChange={(e) => nav({ to: ".", search: { q: e.target.value } })} className="pl-9 h-11 text-base" placeholder="Search…" /></div>
      <Section title="Players">{players.filter((p) => p.name.toLowerCase().includes(term)).slice(0, 5).map((p) => <Link key={p.id} to="/players/$playerId" params={{ playerId: p.id }} className="block rounded-md p-2 hover:bg-accent">{p.name} — {p.rank}</Link>)}</Section>
      <Section title="Servers">{servers.filter((s) => s.name.toLowerCase().includes(term) || s.map.includes(term)).slice(0, 5).map((s) => <Link key={s.id} to="/servers/$serverId" params={{ serverId: s.id }} className="block rounded-md p-2 hover:bg-accent">{s.name} — {s.map}</Link>)}</Section>
      <Section title="News">{news.filter((n) => n.title.toLowerCase().includes(term)).slice(0, 5).map((n) => <Link key={n.id} to="/news/$slug" params={{ slug: n.slug }} className="block rounded-md p-2 hover:bg-accent">{n.title}</Link>)}</Section>
      <Section title="Store">{products.filter((p) => p.name.toLowerCase().includes(term)).slice(0, 5).map((p) => <Link key={p.id} to="/store/products/$productId" params={{ productId: p.id }} className="block rounded-md p-2 hover:bg-accent">{p.name} — ${p.price}</Link>)}</Section>
    </div>
  );
}
function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return <div className="mb-6 rounded-xl border border-border bg-card p-3"><div className="px-1 pb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">{title}</div>{children}</div>;
}