import Link from "next/link";
import { listTools } from "@/lib/admin/tools";
import { fmtDate, label } from "@/lib/utils";
import { Badge } from "@/components/ui/badge";
export default async function AdminTools({ searchParams }: { searchParams: Promise<Record<string, string | undefined>> }) {
  const sp = await searchParams; const res = await listTools({ q: sp.q, status: sp.status, visibility: sp.visibility, linkState: sp.linkState, depth: sp.depth, category: sp.category, page: Number(sp.page ?? 1), sort: sp.sort as any });
  const qs = (patch: Record<string, string | undefined>) => { const p = new URLSearchParams(); for (const [k, v] of Object.entries({ ...sp, ...patch })) if (v) p.set(k, v); return `/admin/tools?${p}`; };
  return (
    <div>
      <div className="flex flex-wrap items-end justify-between gap-3"><div><h1 className="display h1">Tools</h1><p className="mt-1 text-sm text-fg-2">{res.total} records</p></div><Link href="/admin/tools/new" className="btn-primary">New record</Link></div>
      <form className="mt-4 flex flex-wrap gap-2" method="get">
        <input name="q" defaultValue={sp.q} placeholder="Search name, slug, URL" className="input w-56" aria-label="Search records" />
        {[["status", ["draft", "reviewed", "published", "deprecated"]], ["visibility", ["public", "private"]], ["linkState", ["ok", "redirected", "broken", "unchecked"]], ["depth", ["deep", "standard"]], ["sort", ["updated", "name", "quality", "checked"]]].map(([k, opts]) => (
          <select key={k as string} name={k as string} defaultValue={sp[k as string] ?? ""} className="input w-40" aria-label={k as string}><option value="">{k as string}: any</option>{(opts as string[]).map((o) => <option key={o} value={o}>{label(o)}</option>)}</select>
        ))}
        <button className="btn-ghost">Filter</button>
      </form>
      <div className="mt-4 overflow-x-auto rounded-2xl border border-line bg-bg-2">
        <table className="table min-w-[60rem]"><thead><tr><th>Name</th><th>Category</th><th>Status</th><th>Depth</th><th>Quality</th><th>Links</th><th>Checked</th><th>Owner</th><th>Updated</th></tr></thead>
          <tbody>{res.items.map((t: any) => (
            <tr key={t.id} className="hover:bg-bg-3/50"><td><Link href={`/admin/tools/${t.id}`} className="font-medium hover:text-accent">{t.name}</Link><span className="block text-xs text-fg-3">{t.slug}{t.visibility === "private" ? " · private" : ""}{t.featured ? " · featured" : ""}</span></td><td className="text-fg-2">{t.category ?? "—"}</td>
              <td><Badge tone={t.editorialStatus === "published" ? "ok" : t.editorialStatus === "deprecated" ? "bad" : "warn"}>{t.editorialStatus}</Badge></td><td>{label(t.depth)}</td><td><span className={t.qualityScore < 40 ? "text-bad" : t.qualityScore < 70 ? "text-warn" : "text-ok"}>{t.qualityScore}</span></td>
              <td><Badge tone={t.linkState === "ok" ? "ok" : t.linkState === "broken" ? "bad" : "neutral"}>{label(t.linkState)}</Badge></td><td className="text-fg-3">{fmtDate(t.checkedAt)}</td><td className="text-fg-2">{t.useState ?? "—"}</td><td className="text-fg-3">{fmtDate(t.updatedAt)}</td></tr>
          ))}</tbody></table>
      </div>
      <div className="mt-4 flex items-center gap-2 text-sm">{res.page > 1 && <Link href={qs({ page: String(res.page - 1) })} className="btn-ghost">Previous</Link>}<span className="text-fg-3">Page {res.page} / {res.pages}</span>{res.page < res.pages && <Link href={qs({ page: String(res.page + 1) })} className="btn-ghost">Next</Link>}</div>
    </div>
  );
}