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

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

export default async function AdminLlmJobsPage({ searchParams }: { searchParams: Promise<Record<string, string | undefined>> }) {
  await requireAdmin();
  const sp = await searchParams;
  const limit = Math.min(1000, Math.max(10, Number(sp.limit) || 100));
  const [jobs, health] = await Promise.all([load(adminApi.llmJobs({ limit })), load(adminApi.llmHealth())]);
  const ms = (v: unknown) => (num(v) === null ? '—' : `${fmtInt(Math.round((num(v) ?? 0) / 1000))} s`);
  return (
    <>
      <AdminTitle
        title="LLM jobs"
        count={jobs.ok ? fmtInt(jobs.data.total) : undefined}
        lede={
          health.ok ? (
            <span className="inline-flex flex-wrap items-center gap-x-2">
              <StatusChip value={health.data.reachable === false ? 'failing' : health.data.available ? 'ok' : 'disabled'} />
              <span>engine {health.data.engine ?? '—'}</span>
              {health.data.models && <span>· {Object.entries(health.data.models).map(([k, v]) => `${k}: ${v}`).join(' · ')}</span>}
              {health.data.embedding_model && <span>· embeddings {health.data.embedding_model}</span>}
            </span>
          ) : (
            `LLM health unavailable: ${health.error}`
          )
        }
      />
      <AdminFilters action="/admin/llm-jobs" className="mb-4" fields={[{ kind: 'select', name: 'limit', label: 'Rows', value: String(limit), any: '100', options: ['50', '100', '250', '500', '1000'].map((v) => ({ value: v, label: v })) }]} />
      {!jobs.ok ? (
        <Unavailable what="LLM jobs" reason={jobs.error} />
      ) : (
        <>
          {jobs.data.totals && jobs.data.totals.length > 0 && (
            <section className="mb-6">
              <p className="eyebrow mb-2">Totals by stage · model · status</p>
              <DataTable compact scroll caption="LLM totals">
                <thead>
                  <tr>
                    <Th>Stage</Th>
                    <Th>Model</Th>
                    <Th>Status</Th>
                    <Th num>n</Th>
                    <Th num>Input tokens</Th>
                    <Th num>Output tokens</Th>
                    <Th num>Avg duration</Th>
                  </tr>
                </thead>
                <tbody>
                  {jobs.data.totals.map((t, i) => (
                    <tr key={i}>
                      <Td><Mono className="text-ink">{t.stage}</Mono></Td>
                      <Td><Mono>{t.model}</Mono></Td>
                      <Td><StatusChip value={t.status} /></Td>
                      <Td num className="tnum text-xs">{fmtInt(t.n)}</Td>
                      <Td num className="tnum text-xs">{fmtInt(t.input_tokens)}</Td>
                      <Td num className="tnum text-xs">{fmtInt(t.output_tokens)}</Td>
                      <Td num className="tnum text-xs">{ms(t.avg_ms)}</Td>
                    </tr>
                  ))}
                </tbody>
              </DataTable>
            </section>
          )}
          <DataTable compact scroll caption="LLM job accounting">
            <thead>
              <tr>
                <Th>Created</Th>
                <Th>Task</Th>
                <Th>Stage</Th>
                <Th>Model</Th>
                <Th>Node</Th>
                <Th>Schema</Th>
                <Th num>In</Th>
                <Th num>Out</Th>
                <Th num>Duration</Th>
                <Th>Status</Th>
                <Th>Error</Th>
                <Th>Snapshot</Th>
              </tr>
            </thead>
            <tbody>
              {jobs.data.items.length === 0 && <EmptyRow cols={12}>No LLM jobs recorded.</EmptyRow>}
              {jobs.data.items.map((j) => (
                <tr key={j.id}>
                  <Td className="text-xs" title={fmtDateTime(j.created_at)}><LiveAgo at={j.created_at} /></Td>
                  <Td><Mono className="text-ink">{j.task_type ?? '—'}</Mono></Td>
                  <Td><Mono>{j.stage ?? '—'}</Mono></Td>
                  <Td><Mono>{j.model ?? '—'}</Mono></Td>
                  <Td className="text-xs text-ink-2"><Trunc text={j.node} max={24} /></Td>
                  <Td><Mono>{j.schema_name ?? '—'}</Mono></Td>
                  <Td num className="tnum text-xs">{fmtInt(j.input_tokens)}</Td>
                  <Td num className="tnum text-xs">{fmtInt(j.output_tokens)}</Td>
                  <Td num className="tnum text-xs">{num(j.duration_ms) === null ? '—' : fmtDuration(Math.round((num(j.duration_ms) ?? 0) / 1000))}</Td>
                  <Td><StatusChip value={j.status} /></Td>
                  <Td className="text-xs text-danger"><Trunc text={j.error} max={50} /></Td>
                  <Td>{j.snapshot_id ? <a href={`/admin/snapshots/${encodeURIComponent(j.snapshot_id)}`} className="mono text-[11.5px] text-ink-2 hover:text-accent">{j.snapshot_id}</a> : <span className="text-ink-3">—</span>}</Td>
                </tr>
              ))}
            </tbody>
          </DataTable>
        </>
      )}
    </>
  );
}