'use client';
import Link from 'next/link';
import { useCallback, useEffect, useState } from 'react';
import { Bars } from '@/components/charts/bars';
import { SensorTierBadge, StatusBadge } from '@/components/ui/badges';
import { LiveAgo } from '@/components/ui/live';
import { Note } from '@/components/ui/section';
import { SkeletonRows } from '@/components/ui/skeleton';
import { useAdminToken } from '@/lib/admin';
import { adminApi } from '@/lib/client-api';
import { fmt1, fmtBytes, fmtDateTime, fmtInt, fmtPct, fmtScore, fmtUsd, pathOf } from '@/lib/format';
import { routes } from '@/lib/site';
import type { AdminCompany, AdminConnector, AdminCosts, AdminFailure, AdminLlmJob, AdminOverview, AdminQuality, AdminQueueItem, AdminReview, AdminSensor, Page } from '@/lib/types';
import { AdminError, AdminShell, AdminTable, KpiRow } from './admin-shell';

/** Generic loader: fetches with the admin token, exposes refresh; children render data. */
function useAdminData<T>(loader: (api: ReturnType<typeof adminApi>, signal: AbortSignal) => Promise<T>, deps: unknown[] = []) {
  const token = useAdminToken();
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [tick, setTick] = useState(0);
  const refresh = useCallback(() => setTick((t) => t + 1), []);
  useEffect(() => {
    if (!token) return;
    const ctrl = new AbortController();
    setLoading(true);
    loader(adminApi(token), ctrl.signal)
      .then((d) => {
        setData(d);
        setError(null);
      })
      .catch((e: Error) => {
        if (e.name !== 'AbortError') setError(e.message);
      })
      .finally(() => setLoading(false));
    return () => ctrl.abort();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [token, tick, ...deps]);
  return { data, error, loading, refresh, token };
}

const entries = (o: Record<string, number> | undefined) => Object.entries(o ?? {}).sort((a, b) => b[1] - a[1]);

/* -------------------------------------------------------------------------------------------------------------- overview */
export function OverviewModule() {
  const { data, error, loading, refresh } = useAdminData<AdminOverview>((api, s) => api.overview(s));
  return (
    <AdminShell title="Overview" onRefresh={refresh} refreshing={loading}>
      <AdminError error={error} />
      {!data ? (
        <SkeletonRows />
      ) : (
        <div className="space-y-6">
          <KpiRow
            items={[
              { label: 'Queue pending', value: fmtInt(data.queue.pending), hint: `${fmtInt(data.queue.running)} running · oldest ${fmtInt(data.queue.oldest_pending_s)} s`, tone: data.queue.oldest_pending_s && data.queue.oldest_pending_s > 300 ? 'warning' : undefined },
              { label: 'Dead jobs', value: fmtInt(data.queue.dead), tone: data.queue.dead ? 'danger' : undefined },
              { label: 'Fetch / h', value: fmtInt(data.fetch_rate_1h) },
              { label: 'Changes / h', value: fmtInt(data.change_rate_1h), hint: `${fmtInt(data.meaningful_rate_1h)} meaningful` },
              { label: 'LLM pending', value: fmtInt(data.llm.pending), hint: `${fmtInt(data.llm.done_today)} done · ${fmtInt(data.llm.failed_today)} failed today` },
              { label: 'Cost today', value: fmtUsd(data.cost_today.fetch + data.cost_today.browser + data.cost_today.llm), hint: `fetch ${fmtUsd(data.cost_today.fetch)} · browser ${fmtUsd(data.cost_today.browser)} · llm ${fmtUsd(data.cost_today.llm)}` },
            ]}
          />
          <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
            <div>
              <p className="eyebrow mb-2">Sensors by status</p>
              <Bars dense rows={entries(data.sensors_by_status).map(([k, v]) => ({ key: k, label: k, value: v, color: k === 'failing' ? 'var(--danger)' : k === 'active' ? 'var(--positive)' : undefined }))} />
            </div>
            <div>
              <p className="eyebrow mb-2">Sensors by tier</p>
              <Bars dense rows={entries(data.sensors_by_tier).map(([k, v]) => ({ key: k, label: `Tier ${k}`, value: v }))} />
            </div>
            <div>
              <p className="eyebrow mb-2">Failures 24 h by class</p>
              <Bars dense rows={entries(data.failures_24h_by_class).map(([k, v]) => ({ key: k, label: k, value: v, color: 'var(--danger)', href: `/admin/failures?class=${k}` }))} />
            </div>
            <div>
              <p className="eyebrow mb-2">Companies by status</p>
              <Bars dense rows={entries(data.companies_by_status).map(([k, v]) => ({ key: k, label: k, value: v }))} />
            </div>
          </div>
          <div className="grid gap-6 md:grid-cols-2">
            <div>
              <p className="eyebrow mb-2">Workers</p>
              <AdminTable
                head={
                  <tr>
                    <th>Name</th>
                    <th>Last seen</th>
                    <th className="num">In flight</th>
                  </tr>
                }
              >
                {data.workers.map((w) => (
                  <tr key={w.name}>
                    <td className="mono primary">{w.name}</td>
                    <td className="text-xs">
                      <LiveAgo at={w.last_seen_at} tick={5000} />
                    </td>
                    <td className="num tnum">{w.inflight}</td>
                  </tr>
                ))}
              </AdminTable>
            </div>
            <div>
              <p className="eyebrow mb-2">Storage</p>
              <p className="tnum text-sm">
                {fmtInt(data.storage.objects)} objects · {fmtBytes(data.storage.bytes)} · LLM budget left {data.llm.budget_left === null ? '—' : fmtPct(data.llm.budget_left, 0)}
              </p>
            </div>
          </div>
        </div>
      )}
    </AdminShell>
  );
}

/* -------------------------------------------------------------------------------------------------------------- connectors */
export function ConnectorsModule() {
  const { data, error, loading, refresh } = useAdminData<{ items: AdminConnector[] }>((api, s) => api.connectors(s));
  return (
    <AdminShell title="Connector control center" onRefresh={refresh} refreshing={loading}>
      <AdminError error={error} />
      {!data ? (
        <SkeletonRows />
      ) : (
        <AdminTable
          head={
            <tr>
              <th>Connector</th>
              <th>Version</th>
              <th>Category</th>
              <th>Enabled</th>
              <th className="num">Active</th>
              <th className="num">Failing</th>
              <th className="num">Success 24 h</th>
              <th className="num">Latency</th>
              <th className="num">Change rate</th>
              <th className="num">Errors 24 h</th>
              <th>Last run</th>
            </tr>
          }
        >
          {data.items.map((c) => (
            <tr key={c.id}>
              <td className="primary">
                <Link href={`/admin/sensors?connector=${c.id}`} className="row-link">
                  {c.name}
                </Link>
                <span className="mono block text-[11px] font-normal text-ink-3">{c.id}</span>
              </td>
              <td className="mono text-xs">{c.version}</td>
              <td className="text-ink-2">{c.category}</td>
              <td>{c.enabled ? <StatusBadge status="active" /> : <StatusBadge status="paused" />}</td>
              <td className="num tnum">{fmtInt(c.sensors_active)}</td>
              <td className={`num tnum ${c.sensors_failing ? 'text-danger' : ''}`}>{fmtInt(c.sensors_failing)}</td>
              <td className="num tnum">{fmtPct(c.success_rate_24h, 1)}</td>
              <td className="num tnum">{c.avg_latency_ms === null ? '—' : `${fmtInt(c.avg_latency_ms)} ms`}</td>
              <td className="num tnum">{fmtPct(c.change_rate_24h, 1)}</td>
              <td className="num tnum">{fmtInt(c.errors_24h)}</td>
              <td className="text-xs text-ink-3">
                <LiveAgo at={c.last_run_at} tick={10000} />
              </td>
            </tr>
          ))}
        </AdminTable>
      )}
    </AdminShell>
  );
}

/* -------------------------------------------------------------------------------------------------------------- sensors */
const SENSOR_FILTERS = ['', 'healthy', 'failing', 'stale', 'blocked', 'redirected', 'low_quality', 'high_activity'];
const ACTIONS = ['pause', 'resume', 'retry', 'rediscover', 'retire', 'run_now'];
export function SensorsModule({ initial }: { initial: Record<string, string> }) {
  const [filter, setFilter] = useState(initial.filter ?? '');
  const [domain, setDomain] = useState(initial.domain ?? '');
  const [connector, setConnector] = useState(initial.connector ?? '');
  const [page, setPage] = useState(1);
  const [msg, setMsg] = useState<string | null>(null);
  const { data, error, loading, refresh, token } = useAdminData<Page<AdminSensor>>((api, s) => api.sensors({ filter: filter || undefined, domain: domain || undefined, connector: connector || undefined, page, per_page: 50 }, s), [filter, domain, connector, page]);
  const act = async (id: string, action: string) => {
    if (!token) return;
    const body: Record<string, unknown> = {};
    if (action === 'set_interval') {
      const v = prompt('New interval in seconds');
      if (!v) return;
      body.interval_s = Number(v);
    }
    try {
      await adminApi(token).sensorAction(id, action, body);
      setMsg(`${action} → ${id}`);
      refresh();
    } catch (e) {
      setMsg(`failed: ${(e as Error).message}`);
    }
  };
  return (
    <AdminShell title="Sensor control center" onRefresh={refresh} refreshing={loading}>
      <AdminError error={error} />
      <div className="mb-3 flex flex-wrap items-center gap-2">
        <div className="no-scrollbar -mx-4 flex gap-1 overflow-x-auto px-4 md:mx-0 md:px-0">
          {SENSOR_FILTERS.map((f) => (
            <button key={f || 'all'} type="button" onClick={() => { setFilter(f); setPage(1); }} className="chip-btn" data-on={filter === f}>
              {f ? f.replace('_', ' ') : 'all'}
            </button>
          ))}
        </div>
        <input value={domain} onChange={(e) => { setDomain(e.target.value); setPage(1); }} placeholder="domain contains…" className="field h-9 w-44 text-xs" aria-label="Domain filter" />
        <input value={connector} onChange={(e) => { setConnector(e.target.value); setPage(1); }} placeholder="connector id" className="field h-9 w-40 text-xs" aria-label="Connector filter" />
        {msg && <span className="mono text-xs text-ink-3">{msg}</span>}
      </div>
      {!data ? (
        <SkeletonRows rows={10} />
      ) : (
        <>
          <AdminTable
            head={
              <tr>
                <th>Company</th>
                <th>Surface</th>
                <th>URL</th>
                <th>Status</th>
                <th>Tier</th>
                <th className="num">Q</th>
                <th className="num">Fails</th>
                <th>Last success</th>
                <th className="num">Interval</th>
                <th>Actions</th>
              </tr>
            }
          >
            {data.items.map((s) => (
              <tr key={s.id}>
                <td className="primary">
                  <Link href={routes.company(s.company.slug)} className="row-link">
                    {s.company.display_name}
                  </Link>
                </td>
                <td>
                  <Link href={routes.sensor(s.id)} className="row-link">
                    {s.surface}
                  </Link>
                </td>
                <td className="mono text-xs text-ink-2">{pathOf(s.url)}</td>
                <td>
                  <StatusBadge status={s.status} />
                  {s.last_failure_class && <span className="mono ml-1 text-[10px] text-danger">{s.last_failure_class}</span>}
                </td>
                <td>
                  <SensorTierBadge tier={s.tier} />
                </td>
                <td className="num tnum">{fmtScore(s.quality_score)}</td>
                <td className={`num tnum ${s.consecutive_failures ? 'text-danger' : ''}`}>{s.consecutive_failures}</td>
                <td className="text-xs text-ink-3">
                  <LiveAgo at={s.last_success_at} tick={30000} />
                </td>
                <td className="num tnum text-xs">{fmtInt(s.current_interval_s)} s</td>
                <td>
                  <span className="flex flex-wrap gap-1">
                    {ACTIONS.filter((a) => (s.status === 'paused' ? a !== 'pause' : a !== 'resume')).map((a) => (
                      <button key={a} type="button" onClick={() => act(s.id, a)} className="border border-rule px-1.5 py-0.5 text-[11px] text-ink-2 hover:border-rule-strong hover:text-ink">
                        {a.replace('_', ' ')}
                      </button>
                    ))}
                    <button type="button" onClick={() => act(s.id, 'set_interval')} className="border border-rule px-1.5 py-0.5 text-[11px] text-ink-2 hover:text-ink">
                      interval
                    </button>
                  </span>
                </td>
              </tr>
            ))}
          </AdminTable>
          <div className="mt-2 flex items-center justify-between text-xs text-ink-3">
            <span className="tnum">
              page {data.page} / {data.pages} · {fmtInt(data.total)} sensors
            </span>
            <span className="flex gap-1">
              <button type="button" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1} className="btn btn-sm">
                ‹ Prev
              </button>
              <button type="button" onClick={() => setPage((p) => Math.min(data.pages, p + 1))} disabled={page >= data.pages} className="btn btn-sm">
                Next ›
              </button>
            </span>
          </div>
        </>
      )}
    </AdminShell>
  );
}

/* -------------------------------------------------------------------------------------------------------------- companies */
export function CompaniesModule() {
  const [status, setStatus] = useState('');
  const [page, setPage] = useState(1);
  const [form, setForm] = useState({ website: '', display_name: '', country: '', industries: '' });
  const [msg, setMsg] = useState<string | null>(null);
  const { data, error, loading, refresh, token } = useAdminData<Page<AdminCompany>>((api, s) => api.companies({ onboarding_status: status || undefined, page, per_page: 50 }, s), [status, page]);
  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!token || !form.website) return;
    try {
      await adminApi(token).createCompany({ website: form.website, display_name: form.display_name || undefined, country: form.country || undefined, industries: form.industries ? form.industries.split(',').map((s) => s.trim()).filter(Boolean) : undefined });
      setMsg(`queued discovery for ${form.website}`);
      setForm({ website: '', display_name: '', country: '', industries: '' });
      refresh();
    } catch (err) {
      setMsg(`failed: ${(err as Error).message}`);
    }
  };
  return (
    <AdminShell title="Companies" onRefresh={refresh} refreshing={loading}>
      <AdminError error={error} />
      <form onSubmit={submit} className="mb-4 grid gap-2 border border-rule p-3 sm:grid-cols-[2fr_1.5fr_0.7fr_1.5fr_auto]">
        <input value={form.website} onChange={(e) => setForm({ ...form, website: e.target.value })} placeholder="https://example.com (required)" className="field text-sm" aria-label="Website" required />
        <input value={form.display_name} onChange={(e) => setForm({ ...form, display_name: e.target.value })} placeholder="Display name" className="field text-sm" aria-label="Display name" />
        <input value={form.country} onChange={(e) => setForm({ ...form, country: e.target.value.toUpperCase() })} placeholder="CC" maxLength={2} className="field text-sm" aria-label="Country code" />
        <input value={form.industries} onChange={(e) => setForm({ ...form, industries: e.target.value })} placeholder="industries, comma-separated" className="field text-sm" aria-label="Industries" />
        <button type="submit" className="btn btn-primary">
          Add company
        </button>
      </form>
      {msg && <p className="mono mb-2 text-xs text-ink-3">{msg}</p>}
      <div className="mb-2 flex gap-1">
        {['', 'pending', 'discovering', 'active', 'failed'].map((s) => (
          <button key={s || 'all'} type="button" onClick={() => { setStatus(s); setPage(1); }} className="chip-btn" data-on={status === s}>
            {s || 'all'}
          </button>
        ))}
      </div>
      {!data ? (
        <SkeletonRows rows={10} />
      ) : (
        <AdminTable
          head={
            <tr>
              <th>Company</th>
              <th>Domain</th>
              <th>Country</th>
              <th>Status</th>
              <th>Onboarding</th>
              <th className="num">Tier</th>
              <th className="num">Sensors</th>
              <th className="num">Events</th>
              <th>Last observed</th>
              <th />
            </tr>
          }
        >
          {data.items.map((c) => (
            <tr key={c.id}>
              <td className="primary">
                <Link href={routes.company(c.slug)} className="row-link">
                  {c.display_name}
                </Link>
              </td>
              <td className="mono text-xs">{c.canonical_domain}</td>
              <td className="mono text-xs">{c.country ?? '—'}</td>
              <td>
                <StatusBadge status={c.status} />
              </td>
              <td>
                <StatusBadge status={c.onboarding_status} />
              </td>
              <td className="num tnum">{c.tier}</td>
              <td className="num tnum">{fmtInt(c.counts.sensors)}</td>
              <td className="num tnum">{fmtInt(c.counts.events)}</td>
              <td className="text-xs text-ink-3">
                <LiveAgo at={c.last_observed_at} tick={30000} />
              </td>
              <td>
                <button type="button" onClick={() => token && adminApi(token).rediscover(c.slug).then(() => setMsg(`rediscover queued for ${c.slug}`)).catch((e: Error) => setMsg(e.message))} className="border border-rule px-1.5 py-0.5 text-[11px] text-ink-2 hover:text-ink">
                  rediscover
                </button>
              </td>
            </tr>
          ))}
        </AdminTable>
      )}
    </AdminShell>
  );
}

/* -------------------------------------------------------------------------------------------------------------- failures */
export function FailuresModule({ initialClass }: { initialClass?: string }) {
  const [cls, setCls] = useState(initialClass ?? '');
  const { data, error, loading, refresh } = useAdminData<Page<AdminFailure>>((api, s) => api.failures({ class: cls || undefined, per_page: 100 }, s), [cls]);
  return (
    <AdminShell title="Failures" onRefresh={refresh} refreshing={loading}>
      <AdminError error={error} />
      <div className="mb-2 flex flex-wrap items-center gap-2">
        <input value={cls} onChange={(e) => setCls(e.target.value.toUpperCase())} placeholder="class (TIMEOUT, HTTP_4XX, BOT_CHALLENGE…)" className="field h-9 w-72 text-xs" aria-label="Failure class" />
      </div>
      {!data ? (
        <SkeletonRows rows={10} />
      ) : (
        <AdminTable
          head={
            <tr>
              <th>When</th>
              <th>Class</th>
              <th className="num">HTTP</th>
              <th>Company</th>
              <th>Domain</th>
              <th>Message</th>
              <th>Retry</th>
            </tr>
          }
        >
          {data.items.map((f) => (
            <tr key={f.id}>
              <td className="tnum text-xs">{fmtDateTime(f.occurred_at)}</td>
              <td className="mono text-xs text-danger">{f.failure_class}</td>
              <td className="num tnum">{f.status_code || '—'}</td>
              <td>{f.company ? <Link href={routes.company(f.company.slug)} className="row-link">{f.company.display_name}</Link> : '—'}</td>
              <td className="mono text-xs">{f.domain ?? '—'}</td>
              <td className="wrap text-xs text-ink-2">{f.message ?? '—'}</td>
              <td className="text-xs text-ink-3">{f.retry_at ? <LiveAgo at={f.retry_at} tick={30000} /> : '—'}</td>
            </tr>
          ))}
        </AdminTable>
      )}
    </AdminShell>
  );
}

/* -------------------------------------------------------------------------------------------------------------- queue */
export function QueueModule() {
  const [kind, setKind] = useState('');
  const [status, setStatus] = useState('');
  const [msg, setMsg] = useState<string | null>(null);
  const { data, error, loading, refresh, token } = useAdminData<{ items: AdminQueueItem[]; counts?: Record<string, number> } | Page<AdminQueueItem>>((api, s) => api.queue({ kind: kind || undefined, status: status || undefined }, s), [kind, status]);
  const items = data?.items ?? [];
  const counts = data && 'counts' in data ? data.counts : undefined;
  return (
    <AdminShell title="Crawl queue" onRefresh={refresh} refreshing={loading}>
      <AdminError error={error} />
      <div className="mb-3 flex flex-wrap items-center gap-2">
        <select value={kind} onChange={(e) => setKind(e.target.value)} className="field h-9 text-xs" aria-label="Kind">
          <option value="">all kinds</option>
          {['fetch', 'discover', 'enrich', 'metrics', 'daily'].map((k) => (
            <option key={k}>{k}</option>
          ))}
        </select>
        <select value={status} onChange={(e) => setStatus(e.target.value)} className="field h-9 text-xs" aria-label="Status">
          <option value="">all statuses</option>
          {['pending', 'running', 'done', 'dead'].map((k) => (
            <option key={k}>{k}</option>
          ))}
        </select>
        {counts && <span className="mono text-xs text-ink-3">{Object.entries(counts).map(([k, v]) => `${k} ${v}`).join(' · ')}</span>}
        <button type="button" onClick={() => token && adminApi(token).requeueDead().then((r) => { setMsg(JSON.stringify(r)); refresh(); }).catch((e: Error) => setMsg(e.message))} className="btn btn-sm ml-auto">
          Requeue dead
        </button>
        {msg && <span className="mono text-xs text-ink-3">{msg}</span>}
      </div>
      {!data ? (
        <SkeletonRows rows={10} />
      ) : (
        <AdminTable
          head={
            <tr>
              <th>Id</th>
              <th>Kind</th>
              <th>Status</th>
              <th className="num">Prio</th>
              <th className="num">Attempts</th>
              <th>Scheduled</th>
              <th>Worker</th>
              <th>Ref</th>
              <th>Error</th>
            </tr>
          }
        >
          {items.map((j) => (
            <tr key={j.id}>
              <td className="mono text-[11px] text-ink-3">{j.id}</td>
              <td>{j.kind}</td>
              <td>
                <StatusBadge status={j.status} />
              </td>
              <td className="num tnum">{j.priority}</td>
              <td className="num tnum">{j.attempts}</td>
              <td className="text-xs text-ink-3">
                <LiveAgo at={j.scheduled_at} tick={10000} />
              </td>
              <td className="mono text-xs">{j.worker ?? '—'}</td>
              <td className="mono text-[11px] text-ink-3">{j.ref ?? '—'}</td>
              <td className="text-xs text-danger">{j.error ?? ''}</td>
            </tr>
          ))}
        </AdminTable>
      )}
    </AdminShell>
  );
}

/* -------------------------------------------------------------------------------------------------------------- llm */
export function LlmModule() {
  const [status, setStatus] = useState('');
  const { data, error, loading, refresh } = useAdminData<Page<AdminLlmJob>>((api, s) => api.llm({ status: status || undefined, per_page: 100 }, s), [status]);
  return (
    <AdminShell title="LLM jobs" onRefresh={refresh} refreshing={loading}>
      <AdminError error={error} />
      <div className="mb-2 flex gap-1">
        {['', 'pending', 'done', 'failed'].map((s) => (
          <button key={s || 'all'} type="button" onClick={() => setStatus(s)} className="chip-btn" data-on={status === s}>
            {s || 'all'}
          </button>
        ))}
      </div>
      {!data ? (
        <SkeletonRows rows={10} />
      ) : (
        <AdminTable
          head={
            <tr>
              <th>Created</th>
              <th>Kind</th>
              <th>Status</th>
              <th>Model</th>
              <th>Prompt</th>
              <th className="num">Tokens in / out</th>
              <th className="num">Cost</th>
              <th>Change</th>
              <th>Event</th>
              <th>Error</th>
            </tr>
          }
        >
          {data.items.map((j) => (
            <tr key={j.id}>
              <td className="tnum text-xs">{fmtDateTime(j.created_at)}</td>
              <td>{j.kind}</td>
              <td>
                <StatusBadge status={j.status} />
              </td>
              <td className="mono text-xs">{j.model ?? '—'}</td>
              <td className="mono text-xs text-ink-3">{j.prompt_version ?? '—'}</td>
              <td className="num tnum text-xs">
                {fmtInt(j.tokens_in)} / {fmtInt(j.tokens_out)}
              </td>
              <td className="num tnum text-xs">{j.cost_estimate === null ? '—' : `$${j.cost_estimate.toFixed(3)}`}</td>
              <td>{j.change_id ? <Link href={routes.change(j.change_id)} className="link mono text-[11px]">{j.change_id.slice(0, 12)}…</Link> : '—'}</td>
              <td>{j.event_id ? <Link href={routes.event(j.event_id)} className="link mono text-[11px]">{j.event_id.slice(0, 12)}…</Link> : '—'}</td>
              <td className="text-xs text-danger">{j.error ?? ''}</td>
            </tr>
          ))}
        </AdminTable>
      )}
    </AdminShell>
  );
}

/* -------------------------------------------------------------------------------------------------------------- reviews */
export function ReviewsModule() {
  const [status, setStatus] = useState('open');
  const [msg, setMsg] = useState<string | null>(null);
  const { data, error, loading, refresh, token } = useAdminData<{ items: AdminReview[] } | Page<AdminReview>>((api, s) => api.reviews({ status: status || undefined }, s), [status]);
  const resolve = async (id: string, resolution: 'accepted' | 'rejected') => {
    if (!token) return;
    try {
      await adminApi(token).resolveReview(id, resolution);
      setMsg(`${resolution}: ${id}`);
      refresh();
    } catch (e) {
      setMsg((e as Error).message);
    }
  };
  const retract = async (eventId: string) => {
    if (!token) return;
    const reason = prompt('Retraction reason (kept in the audit history)');
    if (!reason) return;
    try {
      await adminApi(token).retractEvent(eventId, reason);
      setMsg(`retracted ${eventId}`);
    } catch (e) {
      setMsg((e as Error).message);
    }
  };
  return (
    <AdminShell title="Review queue" onRefresh={refresh} refreshing={loading}>
      <AdminError error={error} />
      <div className="mb-2 flex items-center gap-1">
        {['open', 'resolved', ''].map((s) => (
          <button key={s || 'all'} type="button" onClick={() => setStatus(s)} className="chip-btn" data-on={status === s}>
            {s || 'all'}
          </button>
        ))}
        {msg && <span className="mono ml-2 text-xs text-ink-3">{msg}</span>}
      </div>
      {!data ? (
        <SkeletonRows rows={8} />
      ) : (
        <ul className="divide-y divide-rule border-y border-rule">
          {data.items.map((r) => (
            <li key={r.id} className="py-3">
              <div className="flex flex-wrap items-center gap-2 text-sm">
                <span className="mono text-[11px] uppercase tracking-wider text-ink-3">{r.kind.replace(/_/g, ' ')}</span>
                <StatusBadge status={r.status} />
                {r.company && (
                  <Link href={routes.company(r.company.slug)} className="font-medium text-ink hover:text-accent">
                    {r.company.display_name}
                  </Link>
                )}
                <span className="ml-auto text-xs text-ink-3">{fmtDateTime(r.created_at)}</span>
              </div>
              <p className="mt-1 text-[14px] text-ink">{r.subject}</p>
              {r.reason && <p className="text-xs text-ink-3">reason: {r.reason}</p>}
              {r.status === 'open' && (
                <div className="mt-2 flex flex-wrap gap-1.5">
                  <button type="button" onClick={() => resolve(r.id, 'accepted')} className="btn btn-sm">
                    Accept
                  </button>
                  <button type="button" onClick={() => resolve(r.id, 'rejected')} className="btn btn-sm">
                    Reject
                  </button>
                  {r.ref_id?.startsWith('evt_') && (
                    <>
                      <Link href={routes.event(r.ref_id)} className="btn btn-sm">
                        Open event
                      </Link>
                      <button type="button" onClick={() => retract(r.ref_id as string)} className="btn btn-sm text-danger">
                        Retract event
                      </button>
                    </>
                  )}
                </div>
              )}
            </li>
          ))}
        </ul>
      )}
    </AdminShell>
  );
}

/* -------------------------------------------------------------------------------------------------------------- quality */
export function QualityModule() {
  const { data, error, loading, refresh } = useAdminData<AdminQuality>((api, s) => api.quality(s));
  return (
    <AdminShell title="Data quality" onRefresh={refresh} refreshing={loading}>
      <AdminError error={error} />
      {!data ? (
        <SkeletonRows />
      ) : (
        <div className="space-y-6">
          <KpiRow
            items={[
              { label: 'Companies active', value: fmtPct(data.coverage.companies_active_pct, 1) },
              { label: 'Sensors active', value: fmtPct(data.coverage.sensors_active_pct, 1) },
              { label: 'Checked in 24 h', value: fmtPct(data.freshness.sensors_checked_24h_pct, 1), hint: `${fmtInt(data.freshness.stale)} stale` },
              { label: 'Duplicate rate', value: fmtPct(data.duplicate_rate, 2), tone: (data.duplicate_rate ?? 0) > 3 ? 'warning' : undefined },
              { label: 'Event confidence', value: data.event_confidence_avg === null ? '—' : fmt1(data.event_confidence_avg * 100) + ' %' },
              { label: 'Failed sensors', value: fmtInt(data.failed_sensors), tone: data.failed_sensors ? 'danger' : undefined, hint: `${fmtInt(data.unknown_surfaces)} unknown surfaces` },
            ]}
          />
          <div className="max-w-md">
            <p className="eyebrow mb-2">Calibration (human-labelled sample)</p>
            <Bars rows={Object.entries(data.calibration).map(([k, v]) => ({ key: k, label: k, value: v, color: k === 'correct' ? 'var(--positive)' : k === 'misclassified' ? 'var(--danger)' : 'var(--warning)' }))} />
          </div>
          <Note>Calibration counts feed the evaluation set used before changing extractors, normalisers or prompts.</Note>
        </div>
      )}
    </AdminShell>
  );
}

/* -------------------------------------------------------------------------------------------------------------- costs */
export function CostsModule() {
  const [days, setDays] = useState(30);
  const { data, error, loading, refresh } = useAdminData<AdminCosts>((api, s) => api.costs(days, s), [days]);
  const byDim: Record<string, { units: number; cost: number }> = {};
  for (const i of data?.items ?? []) {
    const k = `${i.dimension} · ${i.key}`;
    byDim[k] ??= { units: 0, cost: 0 };
    byDim[k].units += i.units;
    byDim[k].cost += i.cost_estimate;
  }
  return (
    <AdminShell title="Cost accounting" onRefresh={refresh} refreshing={loading}>
      <AdminError error={error} />
      <div className="mb-3 flex gap-1">
        {[7, 30, 90].map((d) => (
          <button key={d} type="button" onClick={() => setDays(d)} className="chip-btn" data-on={days === d}>
            {d} d
          </button>
        ))}
      </div>
      {!data ? (
        <SkeletonRows />
      ) : (
        <div className="space-y-6">
          <KpiRow
            items={[
              { label: 'Per 1 000 companies', value: fmtUsd(data.per_1000_companies) },
              { label: 'Per 1M observations', value: fmtUsd(data.per_million_observations) },
              { label: 'Per meaningful event', value: data.per_meaningful_event === null ? '—' : `$${data.per_meaningful_event.toFixed(4)}` },
              { label: `Total ${days} d`, value: fmtUsd(Object.values(byDim).reduce((a, b) => a + b.cost, 0)) },
            ]}
          />
          <AdminTable
            head={
              <tr>
                <th>Dimension</th>
                <th className="num">Units</th>
                <th className="num">Cost estimate</th>
              </tr>
            }
          >
            {Object.entries(byDim)
              .sort((a, b) => b[1].cost - a[1].cost)
              .map(([k, v]) => (
                <tr key={k}>
                  <td className="primary">{k}</td>
                  <td className="num tnum">{fmtInt(v.units)}</td>
                  <td className="num tnum">{fmtUsd(v.cost)}</td>
                </tr>
              ))}
          </AdminTable>
        </div>
      )}
    </AdminShell>
  );
}