import Link from 'next/link';
import { requireAdmin } from '@/lib/admin/auth';
import { dashboard } from '@/lib/admin/queries';
import { queueDepths } from '@/lib/admin/queue';
import { adminLogout } from '@/lib/admin/actions';
import { AdminShell, Kpi, StatusPill, fmtTs, n } from '@/components/admin/shell';
import { Table, th, td, tdNum } from '@/components/ui/primitives';
import { getRouter } from '@rareindex/ai';

export default async function AdminHome() {
  await requireAdmin();
  const [{ counts, recentRuns, recentEvents }, queues] = await Promise.all([dashboard(), queueDepths()]);
  const c = (counts ?? {}) as Record<string, unknown>;
  const ai = getRouter();
  return (
    <AdminShell
      current="/admin"
      title="Pipeline overview"
      subtitle="Counts, lag and freshness across ingestion, canonical data and analytics"
      actions={
        <form action={adminLogout}>
          <button type="submit" className="rounded-md border border-border px-2.5 py-1 text-xs hover:bg-inset">Sign out</button>
        </form>
      }
    >
      <div className="grid grid-cols-2 gap-3 md:grid-cols-4 xl:grid-cols-6">
        <Kpi label="Assets" value={n(c.assets)} sub={`${n(c.variants)} variants`} />
        <Kpi label="Sales" value={n(c.sales)} sub={`${n(c.sales_flagged)} flagged · ${n(c.sales_excluded)} excluded`} />
        <Kpi label="Live listings" value={n(c.listings_live)} />
        <Kpi label="Price observations" value={n(c.observations)} />
        <Kpi label="Raw records" value={n(c.raw_records)} sub={`${n(c.raw_unprocessed)} unprocessed · ${n(c.raw_errors)} errors`} tone={Number(c.raw_errors) > 0 ? 'alert' : undefined} />
        <Kpi label="Normalized pending" value={n(c.normalized_pending)} sub={`${n(c.normalized_unmatched)} unmatched`} tone={Number(c.normalized_pending) > 1000 ? 'alert' : undefined} />
        <Kpi label="Connectors" value={`${n(c.connectors_active)} active`} sub={`${n(c.connectors_paused)} paused · ${n(c.connectors_unhealthy)} unhealthy`} tone={Number(c.connectors_unhealthy) > 0 ? 'loss' : undefined} />
        <Kpi label="Taxonomy proposals" value={n(c.proposals_pending)} sub="pending review" />
        <Kpi label="Latest fetch" value={fmtTs(c.latest_fetch).slice(0, 16)} />
        <Kpi label="Latest sale" value={fmtTs(c.latest_sale).slice(0, 10)} sub={`valuation ${fmtTs(c.latest_valuation).slice(0, 16)}`} />
        <Kpi label="Latest index date" value={c.latest_index ? String(c.latest_index).slice(0, 10) : '—'} />
        <Kpi label="Spend 24h" value={`$${n(c.cost_24h_usd, 2)}`} sub={`FC ${n(c.firecrawl_credits_24h)} · SF ${n(c.scrapfly_credits_24h)} credits`} />
      </div>

      <div className="mt-6 grid gap-6 lg:grid-cols-3">
        <section className="card lg:col-span-2">
          <header className="flex items-center justify-between border-b border-border px-4 py-2.5">
            <h2 className="text-sm font-semibold">Recent connector runs</h2>
            <Link href="/admin/connectors" className="text-xs text-muted hover:text-fg">Control center →</Link>
          </header>
          <Table>
            <thead><tr><th className={th}>Connector</th><th className={th}>Status</th><th className={th}>Trigger</th><th className={th}>Started</th><th className={`${th} text-right`}>Pages</th><th className={`${th} text-right`}>Raw</th><th className={`${th} text-right`}>Norm.</th><th className={`${th} text-right`}>Dup.</th><th className={th}>Error</th></tr></thead>
            <tbody>
              {recentRuns.length === 0 ? <tr><td className={td} colSpan={9}><span className="text-subtle">No runs yet. Trigger one from the control center.</span></td></tr> : null}
              {recentRuns.map((r) => (
                <tr key={String(r.id)}>
                  <td className={td}><Link href={`/admin/connectors/${String(r.connector_id)}`} className="font-medium hover:underline">{String(r.connector_id)}</Link></td>
                  <td className={td}><StatusPill status={String(r.status)} /></td>
                  <td className={td}>{String(r.trigger)}</td>
                  <td className={td}>{fmtTs(r.started_at)}</td>
                  <td className={tdNum}>{n(r.pages_success)}/{n(r.pages_attempted)}</td>
                  <td className={tdNum}>{n(r.records_raw)}</td>
                  <td className={tdNum}>{n(r.records_normalized)}</td>
                  <td className={tdNum}>{n(r.records_duplicate)}</td>
                  <td className={`${td} max-w-[240px] truncate text-loss`} title={String(r.error ?? '')}>{r.error ? String(r.error) : ''}</td>
                </tr>
              ))}
            </tbody>
          </Table>
        </section>
        <div className="space-y-6">
          <section className="card">
            <header className="border-b border-border px-4 py-2.5"><h2 className="text-sm font-semibold">Queues (pg-boss)</h2></header>
            <ul className="divide-y divide-border text-xs">
              {queues.length === 0 ? <li className="px-4 py-3 text-subtle">Queue tables not initialised yet (the worker creates them on first start).</li> : null}
              {queues.map((q) => (
                <li key={q.name} className="flex items-center justify-between px-4 py-2"><span className="font-mono">{q.name}</span><span className="num text-muted">{q.queued} queued · {q.active} active · {q.failed} failed</span></li>
              ))}
            </ul>
          </section>
          <section className="card">
            <header className="border-b border-border px-4 py-2.5"><h2 className="text-sm font-semibold">Events (24h)</h2></header>
            <ul className="divide-y divide-border text-xs">
              {recentEvents.length === 0 ? <li className="px-4 py-3 text-subtle">No events yet.</li> : null}
              {recentEvents.map((e) => (
                <li key={String(e.type)} className="flex items-center justify-between px-4 py-2"><span className="font-mono">{String(e.type)}</span><span className="num text-muted">{n(e.n)}</span></li>
              ))}
            </ul>
          </section>
          <section className="card">
            <header className="border-b border-border px-4 py-2.5"><h2 className="text-sm font-semibold">AI model routing</h2></header>
            <ul className="divide-y divide-border text-xs">
              {ai.table().map((r) => (
                <li key={r.role} className="flex items-center justify-between px-4 py-2"><span>{r.role}</span><span className="font-mono text-muted">{r.provider ? `${r.provider} · ${r.model}` : 'not configured'}</span></li>
              ))}
            </ul>
          </section>
        </div>
      </div>
    </AdminShell>
  );
}