import { requireAdmin } from '@/lib/admin/auth';
import { taxonomyQueue } from '@/lib/admin/queries';
import { proposeTaxonomyNode, taxonomyDecision } from '@/lib/admin/actions';
import { AdminShell, ActionButton, StatusPill, fmtTs, n } from '@/components/admin/shell';

export default async function TaxonomyAdminPage() {
  await requireAdmin();
  const { pending, decided, families } = await taxonomyQueue();
  return (
    <AdminShell current="/admin/taxonomy" title="Taxonomy proposals" subtitle="Category discovery queue (§101): approve to insert a node under the chosen parent; the category becomes available to connectors and pages immediately">
      <div className="grid gap-6 lg:grid-cols-[1fr_320px]">
        <section className="card">
          <header className="border-b border-border px-4 py-2.5"><h2 className="text-sm font-semibold">Pending ({pending.length})</h2></header>
          <ul className="divide-y divide-border">
            {pending.length === 0 ? <li className="px-4 py-6 text-center text-xs text-subtle">Queue empty. The discovery worker files proposals here when it finds recurring product clusters outside the taxonomy.</li> : null}
            {pending.map((p) => (
              <li key={String(p.id)} className="px-4 py-3 text-sm">
                <div className="flex flex-wrap items-start justify-between gap-3">
                  <div>
                    <p className="font-medium">{String(p.name)} <span className="font-mono text-xs text-muted">{String(p.proposed_slug)}</span></p>
                    <p className="text-xs text-muted">parent {String(p.parent_slug ?? '—')} · est. volume {n(p.volume_estimate)} · {fmtTs(p.created_at)}</p>
                    <pre className="mt-1 max-h-32 overflow-auto rounded-md bg-sunken p-2 text-[10px] text-muted">{JSON.stringify(p.evidence ?? {}, null, 1)}</pre>
                  </div>
                  <div className="flex items-center gap-2">
                    <form action={taxonomyDecision} className="flex items-center gap-1">
                      <input type="hidden" name="id" value={String(p.id)} />
                      <input type="hidden" name="decision" value="approved" />
                      <select name="parent" defaultValue={String(p.parent_slug ?? '')} className="rounded-md border border-border bg-sunken px-1.5 py-0.5 text-xs">
                        <option value="">(new family)</option>
                        {families.map((f) => <option key={String(f.slug)} value={String(f.slug)}>{String(f.name)}</option>)}
                      </select>
                      <ActionButton label="approve" tone="primary" />
                    </form>
                    <form action={taxonomyDecision}>
                      <input type="hidden" name="id" value={String(p.id)} />
                      <input type="hidden" name="decision" value="rejected" />
                      <ActionButton label="reject" tone="danger" />
                    </form>
                  </div>
                </div>
              </li>
            ))}
          </ul>
          <header className="border-y border-border px-4 py-2.5"><h2 className="text-sm font-semibold">Decided</h2></header>
          <ul className="divide-y divide-border text-xs">
            {decided.map((p) => <li key={String(p.id)} className="flex items-center justify-between px-4 py-2"><span>{String(p.name)} <span className="font-mono text-muted">{String(p.proposed_slug)}</span></span><span className="flex items-center gap-2 text-subtle"><StatusPill status={String(p.status)} />{fmtTs(p.decided_at)}</span></li>)}
          </ul>
        </section>
        <section className="card self-start">
          <header className="border-b border-border px-4 py-2.5"><h2 className="text-sm font-semibold">Propose manually</h2></header>
          <form action={proposeTaxonomyNode} className="space-y-2 p-4 text-xs">
            <label className="block text-muted">Slug<input name="slug" required placeholder="riftbound" className="mt-1 w-full rounded-md border border-border bg-sunken px-2 py-1.5 text-sm" /></label>
            <label className="block text-muted">Name<input name="name" required placeholder="Riftbound (League of Legends TCG)" className="mt-1 w-full rounded-md border border-border bg-sunken px-2 py-1.5 text-sm" /></label>
            <label className="block text-muted">Parent<select name="parent" className="mt-1 w-full rounded-md border border-border bg-sunken px-2 py-1.5 text-sm"><option value="">(new family)</option>{families.map((f) => <option key={String(f.slug)} value={String(f.slug)}>{String(f.name)}</option>)}</select></label>
            <ActionButton label="Add to queue" small={false} tone="primary" />
          </form>
        </section>
      </div>
    </AdminShell>
  );
}