import type { Metadata } from 'next';
import Link from 'next/link';
import { AdminTitle, JsonPre, Mono, StatusChip, Trunc } from '@/components/admin/ui';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { LiveAgo } from '@/components/ui/live';
import { Stat, StatGrid } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { adminApi, load, requireAdmin } from '@/lib/admin/admin-api';
import { fmtBytes, fmtDuration, fmtInt, num } from '@/lib/format';

export const metadata: Metadata = { title: 'Overview', robots: { index: false, follow: false } };
export const dynamic = 'force-dynamic';

export default async function AdminOverviewPage() {
  await requireAdmin();
  const res = await load(adminApi.overview());
  if (!res.ok) {
    return (
      <>
        <AdminTitle title="Overview" />
        <Unavailable what="Overview" reason={res.error} />
      </>
    );
  }
  const o = res.data;
  const s = o.stats ?? {};
  const hb = Object.entries(o.heartbeats ?? {});
  const queue = Object.entries(o.queue ?? {});
  const health = Object.entries(o.connectors ?? {});
  return (
    <>
      <AdminTitle title="Overview" lede={s.computed_at ? <>stats computed <LiveAgo at={String(s.computed_at)} /></> : undefined} />
      <StatGrid cols={4}>
        <Stat label="Entities" value={fmtInt(s.entities_total)} />
        <Stat label="Documents" value={fmtInt(s.documents)} hint={`${fmtInt(s.snapshots)} snapshots`} />
        <Stat label="Current claims" value={fmtInt(s.claims_current)} hint={`${fmtInt(s.claims)} total`} />
        <Stat label="Events · 24 h" value={fmtInt(s.change_events_24h)} hint={`${fmtInt(s.change_events)} total`} />
        <Stat label="Current prices" value={fmtInt(s.prices_current)} />
        <Stat label="Benchmark results" value={fmtInt(s.benchmark_results)} />
        <Stat label="Review pending" value={fmtInt(o.review_pending)} href="/admin/review" />
        <Stat label="Recent errors" value={fmtInt(o.recent_errors)} href="/admin/errors" />
      </StatGrid>

      <div className="mt-8 grid gap-8 lg:grid-cols-3">
        <section>
          <p className="eyebrow mb-2">Queue depth</p>
          {queue.length === 0 ? (
            <p className="text-sm text-ink-3">Queue empty.</p>
          ) : (
            <DataTable compact stack={false} caption="Queue depth">
              <thead>
                <tr>
                  <Th>Kind</Th>
                  <Th>Status</Th>
                  <Th num>n</Th>
                </tr>
              </thead>
              <tbody>
                {queue.flatMap(([kind, byStatus]) =>
                  Object.entries(byStatus).map(([st, n]) => (
                    <tr key={`${kind}-${st}`}>
                      <Td><Mono>{kind}</Mono></Td>
                      <Td><StatusChip value={st} /></Td>
                      <Td num className="tnum">{fmtInt(n)}</Td>
                    </tr>
                  )),
                )}
              </tbody>
            </DataTable>
          )}
          <p className="mt-2 text-xs"><Link href="/admin/jobs" className="link">Jobs →</Link></p>
        </section>
        <section>
          <p className="eyebrow mb-2">Connector health</p>
          <ul className="divide-y divide-rule border-y border-rule text-sm">
            {health.map(([k, n]) => (
              <li key={k} className="flex items-center justify-between py-1.5">
                <StatusChip value={k} />
                <span className="tnum">{fmtInt(n)}</span>
              </li>
            ))}
            {health.length === 0 && <li className="py-2 text-ink-3">No connectors.</li>}
          </ul>
          <p className="mt-2 text-xs"><Link href="/admin/connectors" className="link">Connectors →</Link></p>
          {o.review_by_kind && (
            <>
              <p className="eyebrow mt-6 mb-2">Review by kind</p>
              <ul className="divide-y divide-rule border-y border-rule text-sm">
                {Object.entries(o.review_by_kind).map(([k, n]) => (
                  <li key={k} className="flex items-center justify-between py-1.5">
                    <Link href={`/admin/review?kind=${encodeURIComponent(k)}`} className="mono text-xs text-ink-2 hover:text-accent">{k}</Link>
                    <span className="tnum">{fmtInt(n)}</span>
                  </li>
                ))}
              </ul>
            </>
          )}
        </section>
        <section>
          <p className="eyebrow mb-2">Heartbeats</p>
          {hb.length === 0 ? <p className="text-sm text-ink-3">None reported (scheduler / workers have not written a heartbeat).</p> : <JsonPre value={o.heartbeats} maxHeight="14rem" />}
          {o.archive && (
            <>
              <p className="eyebrow mt-6 mb-2">Archive</p>
              <p className="tnum text-sm text-ink-2">
                raw {fmtBytes(o.archive.raw_bytes)} · {fmtInt(o.archive.raw_files)} files · text {fmtBytes(o.archive.text_bytes)} · {fmtInt(o.archive.text_files)} files
              </p>
            </>
          )}
        </section>
      </div>

      <section className="mt-8">
        <p className="eyebrow mb-2">
          LLM factory · 24 h {o.llm?.available === false && <StatusChip value="unavailable" className="ml-2" />}
        </p>
        <p className="tnum text-sm text-ink-2">
          {fmtInt(o.llm?.jobs_24h)} jobs · {fmtInt(o.llm?.tokens_24h)} tokens{o.llm?.failed_24h !== undefined && <> · <span className={num(o.llm.failed_24h) ? 'text-danger' : ''}>{fmtInt(o.llm.failed_24h)} failed</span></>}
        </p>
        {o.llm?.by_stage?.length ? (
          <DataTable compact stack={false} caption="LLM jobs by stage" className="mt-2 max-w-md">
            <thead>
              <tr>
                <Th>Stage</Th>
                <Th>Status</Th>
                <Th num>n</Th>
              </tr>
            </thead>
            <tbody>
              {o.llm.by_stage.map((r, i) => (
                <tr key={i}>
                  <Td><Mono>{r.stage}</Mono></Td>
                  <Td><StatusChip value={r.status} /></Td>
                  <Td num className="tnum">{fmtInt(r.n)}</Td>
                </tr>
              ))}
            </tbody>
          </DataTable>
        ) : (
          <p className="mt-2 text-xs text-ink-3">No LLM jobs in the last 24 h.</p>
        )}
        <p className="mt-2 text-xs"><Link href="/admin/llm-jobs" className="link">LLM accounting →</Link></p>
      </section>

      <section className="mt-8">
        <p className="eyebrow mb-2">Recent runs</p>
        <DataTable compact scroll caption="Recent runs">
          <thead>
            <tr>
              <Th>Connector</Th>
              <Th>Started</Th>
              <Th>Status</Th>
              <Th num>Duration</Th>
              <Th num>Fetched</Th>
              <Th num>Changed</Th>
              <Th num>Failed</Th>
              <Th num>Claims</Th>
              <Th num>Events</Th>
              <Th>Error</Th>
            </tr>
          </thead>
          <tbody>
            {!o.recent_runs?.length && <EmptyRow cols={10}>No runs yet.</EmptyRow>}
            {o.recent_runs?.map((r) => (
              <tr key={r.id}>
                <Td><Link href={`/admin/runs?connector=${encodeURIComponent(r.connector_name)}`} className="mono text-xs text-ink hover:text-accent">{r.connector_name}</Link></Td>
                <Td className="text-xs"><LiveAgo at={r.started_at} /></Td>
                <Td><StatusChip value={r.status} /></Td>
                <Td num className="tnum text-xs">{num(r.duration_ms) === null ? '—' : fmtDuration(Math.round((num(r.duration_ms) ?? 0) / 1000))}</Td>
                <Td num className="tnum text-xs">{fmtInt(r.docs_fetched)}</Td>
                <Td num className="tnum text-xs">{fmtInt(r.docs_changed)}</Td>
                <Td num className={`tnum text-xs ${num(r.docs_failed) ? 'text-danger' : ''}`}>{fmtInt(r.docs_failed)}</Td>
                <Td num className="tnum text-xs">{fmtInt(r.claims_written)}</Td>
                <Td num className="tnum text-xs">{fmtInt(r.events_emitted)}</Td>
                <Td className="text-xs text-ink-2"><Trunc text={r.error} max={60} /></Td>
              </tr>
            ))}
          </tbody>
        </DataTable>
        <p className="mt-2 text-xs"><Link href="/admin/runs" className="link">All runs →</Link></p>
      </section>
    </>
  );
}