import type { Metadata } from "next";
import Link from "next/link";
import { searchTools, facets, type Filters } from "@/lib/public/queries";
import { parseFilters, toQuery, toggle, type SP } from "@/lib/public/params";
import { ToolCard } from "@/components/tool-card";
import { Pagination } from "@/components/pagination";
import { Breadcrumbs } from "@/components/breadcrumbs";
import { SearchBox } from "@/components/search-box";
import { label } from "@/lib/utils";
import { X, SlidersHorizontal } from "lucide-react";

export const dynamic = "force-dynamic";
export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {
  const sp = await searchParams; const f = parseFilters(sp);
  const title = f.q ? `Search: ${f.q}` : "Directory";
  const hasFilters = Object.values(sp).some((v) => v !== undefined);
  return { title, description: "Browse and filter the full directory of tools by category, platform, license, pricing model and more.", robots: hasFilters ? { index: false, follow: true } : undefined, alternates: { canonical: "/tools" } };
}

const GROUPS: { key: keyof Filters; title: string; facet: string }[] = [
  { key: "category", title: "Category", facet: "category" }, { key: "exec", title: "Runs", facet: "exec" }, { key: "source", title: "Source model", facet: "source" }, { key: "pricing", title: "Pricing model", facet: "pricing" },
  { key: "iface", title: "Interface", facet: "iface" }, { key: "os", title: "Operating system", facet: "os" }, { key: "status", title: "Product status", facet: "status" }, { key: "depth", title: "Editorial depth", facet: "depth" },
];

export default async function Directory({ searchParams }: { searchParams: Promise<SP> }) {
  const f = parseFilters(await searchParams);
  const [res, fc] = await Promise.all([searchTools(f), facets(f)]);
  const active: { key: keyof Filters; value: string; text: string }[] = [];
  for (const g of GROUPS) for (const v of (f[g.key] as string[]) ?? []) active.push({ key: g.key, value: v, text: fc[g.facet]?.find((x) => x.value === v)?.label ?? label(v) });
  for (const v of f.tag ?? []) active.push({ key: "tag", value: v, text: `#${v}` });
  for (const v of f.use ?? []) active.push({ key: "use", value: v, text: label(v) });
  const base = toQuery(f, { page: 1 });
  return (
    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6">
      <Breadcrumbs items={[{ label: "Directory" }]} />
      <div className="mt-3 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div><h1 className="display h1">{f.q ? <>Results for <span className="text-accent">“{f.q}”</span></> : "Directory"}</h1>
          <p className="mt-1 text-sm text-fg-2" aria-live="polite">{res.total} {res.total === 1 ? "tool" : "tools"}{res.mode !== "browse" && <> · {res.mode} search · {res.tookMs} ms</>}</p></div>
        <div className="lg:w-[28rem]"><SearchBox size="sm" defaultValue={f.q ?? ""} ariaLabel="Search within the directory" /></div>
      </div>

      {active.length > 0 && (
        <div className="mt-4 flex flex-wrap items-center gap-2" aria-label="Active filters">
          {active.map((a) => <Link key={`${a.key}-${a.value}`} href={`/tools${toggle(f, a.key, a.value)}`} className="chip chip-accent hover:bg-accent/20" rel="nofollow">{a.text} <X className="h-3 w-3" aria-hidden /><span className="sr-only">remove filter</span></Link>)}
          {f.selfhost && <Link href={`/tools${toQuery(f, { selfhost: false, page: 1 })}`} className="chip chip-accent" rel="nofollow">Self-hostable <X className="h-3 w-3" aria-hidden /></Link>}
          <Link href={f.q ? `/tools?q=${encodeURIComponent(f.q)}` : "/tools"} className="text-xs text-fg-3 underline-offset-4 hover:underline" rel="nofollow">Clear all</Link>
        </div>
      )}

      <div className="mt-6 grid gap-8 lg:grid-cols-[16rem_1fr]">
        <aside className="lg:sticky lg:top-20 lg:self-start" aria-label="Filters">
          <details className="lg:hidden rounded-xl border border-line bg-bg-2" open={active.length > 0}>
            <summary className="flex cursor-pointer items-center gap-2 px-4 py-3 text-sm font-medium"><SlidersHorizontal className="h-4 w-4" aria-hidden /> Filters {active.length ? `(${active.length})` : ""}</summary>
            <div className="px-4 pb-4"><FilterGroups f={f} fc={fc} /></div>
          </details>
          <div className="hidden lg:block"><FilterGroups f={f} fc={fc} /></div>
        </aside>
        <section aria-labelledby="results-h"><h2 id="results-h" className="sr-only">Results</h2>
          <div className="mb-4 flex flex-wrap items-center gap-2 text-sm">
            <span className="text-fg-3">Sort</span>
            {(["relevance", "name", "updated", "quality"] as const).filter((s) => s !== "relevance" || f.q).map((s) => (
              <Link key={s} href={`/tools${toQuery(f, { sort: s, page: 1 })}`} rel="nofollow" aria-current={(f.sort ?? (f.q ? "relevance" : "name")) === s ? "true" : undefined} className={`rounded-lg px-2.5 py-1 ${(f.sort ?? (f.q ? "relevance" : "name")) === s ? "bg-bg-3 font-medium text-fg" : "text-fg-2 hover:text-fg"}`}>{label(s)}</Link>
            ))}
          </div>
          {res.items.length === 0 ? (
            <div className="card p-10 text-center">
              <p className="display text-2xl">No tools match{f.q ? ` “${f.q}”` : ""}.</p>
              <p className="mt-2 text-sm text-fg-2">Try fewer filters, a broader term, or browse by <Link href="/categories" className="text-accent underline underline-offset-4">category</Link>. Missing something? <Link href="/about#corrections" className="text-accent underline underline-offset-4">Suggest a tool</Link>.</p>
            </div>
          ) : (
            <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">{res.items.map((t) => <ToolCard key={t.id} t={t} />)}</div>
          )}
          <Pagination page={res.page} pages={res.pages} makeHref={(p) => `/tools${toQuery(f, { page: p })}`} />
          <p className="sr-only">Page {res.page} of {res.pages}</p>
          <p className="mt-6 text-xs text-fg-3">{base ? <>Share this view: <code className="font-mono">/tools{base}</code></> : null}</p>
        </section>
      </div>
    </div>
  );
}

function FilterGroups({ f, fc }: { f: Filters; fc: Record<string, { value: string; label: string; count: number }[]> }) {
  return (
    <div className="space-y-5">
      <div><Link href={`/tools${toQuery(f, { selfhost: !f.selfhost, page: 1 })}`} rel="nofollow" className={`flex items-center justify-between rounded-xl border px-3 py-2 text-sm ${f.selfhost ? "border-accent/40 bg-accent/10 text-accent" : "border-line bg-bg-2 text-fg-2 hover:bg-bg-3"}`}><span>Self-hostable only</span><span className={`h-4 w-7 rounded-full p-0.5 ${f.selfhost ? "bg-accent" : "bg-line-2"}`}><span className={`block h-3 w-3 rounded-full bg-white transition-transform ${f.selfhost ? "translate-x-3" : ""}`} /></span></Link></div>
      {GROUPS.map((g) => {
        const items = fc[g.facet] ?? []; if (!items.length) return null;
        const sel = (f[g.key] as string[]) ?? [];
        return (
          <fieldset key={g.key} className="min-w-0">
            <legend className="label">{g.title}</legend>
            <ul className="max-h-64 space-y-0.5 overflow-auto pr-1">
              {items.slice(0, g.key === "category" ? 40 : 12).map((it) => {
                const on = sel.includes(it.value);
                return (
                  <li key={it.value}>
                    <Link href={`/tools${toggle(f, g.key, it.value)}`} rel="nofollow" aria-current={on ? "true" : undefined} className={`flex items-center gap-2 rounded-lg px-2 py-1 text-sm ${on ? "bg-accent/10 text-accent" : "text-fg-2 hover:bg-bg-3 hover:text-fg"}`}>
                      <span className={`grid h-4 w-4 shrink-0 place-items-center rounded border ${on ? "border-accent bg-accent text-accent-fg" : "border-line-2"}`} aria-hidden>{on && <svg viewBox="0 0 12 12" className="h-3 w-3" fill="none" stroke="currentColor" strokeWidth="2"><path d="M2 6l3 3 5-6" /></svg>}</span>
                      <span className="min-w-0 flex-1 truncate">{it.label === it.value ? label(it.value) : it.label}{on && <span className="sr-only"> (selected)</span>}</span><span className="text-xs text-fg-3">{it.count}</span>
                    </Link>
                  </li>
                );
              })}
            </ul>
          </fieldset>
        );
      })}
    </div>
  );
}