import type { Metadata } from 'next';
import Link from 'next/link';
import { ActionButton, AdminFilters, AdminTitle, JsonPre, Mono, Notice, StatusChip } from '@/components/admin/ui';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { LiveAgo } from '@/components/ui/live';
import { Pagination, withParams } from '@/components/ui/pagination';
import { Note } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { quarantineAction } from '@/lib/admin/actions';
import { adminApi, load, requireAdmin } from '@/lib/admin/admin-api';
import { fmtDateTime, fmtInt } from '@/lib/format';

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

export default async function AdminQuarantinePage({ searchParams }: { searchParams: Promise<Record<string, string | undefined>> }) {
  await requireAdmin();
  const sp = await searchParams;
  const current: Record<string, string | undefined> = { status: sp.status ?? 'pending' };
  if (sp.offset) current.offset = sp.offset;
  const offset = Math.max(0, Number(current.offset) || 0);
  const href = (patch: Record<string, string | number | undefined | null>) => withParams('/admin/quarantine', current, patch);
  const ret = href({});
  const res = await load(adminApi.quarantine({ status: current.status, limit: LIMIT, offset }));
  return (
    <>
      <AdminTitle title="Quarantine" count={res.ok ? fmtInt(res.data.total) : undefined} lede="Connector runs held back by the writer (breakage suspicion, implausible volumes). Release writes the held facts; discard drops them. Both are audited.">
        <Link href="/admin/runs" className="text-xs text-ink-3 hover:text-ink">
          Runs →
        </Link>
      </AdminTitle>
      <Notice notice={sp.notice} level={sp.level} />
      <AdminFilters action="/admin/quarantine" className="mb-4" fields={[{ kind: 'select', name: 'status', label: 'Status', value: current.status, any: 'pending', options: ['pending', 'released', 'discarded', 'all'].map((s) => ({ value: s, label: s })) }]} />
      {!res.ok ? (
        <Unavailable what="Quarantine" reason={res.error} />
      ) : res.data.items.length === 0 ? (
        <EmptyState title="Nothing in quarantine">No held run for this status.</EmptyState>
      ) : (
        <>
          <DataTable compact scroll caption="Quarantined runs">
            <thead>
              <tr>
                <Th>Id</Th>
                <Th>Connector</Th>
                <Th>Run</Th>
                <Th>Reason</Th>
                <Th>Counts</Th>
                <Th>Status</Th>
                <Th>Created</Th>
                <Th>Actions</Th>
              </tr>
            </thead>
            <tbody>
              {res.data.items.length === 0 && <EmptyRow cols={8}>No rows.</EmptyRow>}
              {res.data.items.map((q) => (
                <tr key={q.id}>
                  <Td primary>
                    <Mono>{q.id}</Mono>
                  </Td>
                  <Td>
                    <Mono>{q.connector_name ?? '—'}</Mono>
                  </Td>
                  <Td>{q.run_id ? <Link href={`/admin/runs?connector=${encodeURIComponent(q.connector_name ?? '')}`} className="mono text-[11px] text-accent hover:underline">{q.run_id}</Link> : '—'}</Td>
                  <Td className="max-w-[20rem] text-xs text-ink-2">{q.reason ?? '—'}</Td>
                  <Td className="text-xs">{q.counts ? <JsonPre value={q.counts} maxHeight="6rem" /> : '—'}</Td>
                  <Td>
                    <StatusChip value={q.status} />
                  </Td>
                  <Td className="text-xs text-ink-3" title={q.created_at ? fmtDateTime(q.created_at) : undefined}>{q.created_at ? <LiveAgo at={q.created_at} /> : '—'}</Td>
                  <Td>
                    {q.status === 'pending' ? (
                      <div className="flex items-center gap-1">
                        <form action={quarantineAction}>
                          <input type="hidden" name="id" value={q.id} />
                          <input type="hidden" name="action" value="release" />
                          <input type="hidden" name="return" value={ret} />
                          <ActionButton tone="positive" title="Write the held facts">Release</ActionButton>
                        </form>
                        <form action={quarantineAction}>
                          <input type="hidden" name="id" value={q.id} />
                          <input type="hidden" name="action" value="discard" />
                          <input type="hidden" name="return" value={ret} />
                          <ActionButton tone="danger" title="Drop the held facts (audited)">Discard</ActionButton>
                        </form>
                      </div>
                    ) : (
                      <span className="text-xs text-ink-3">—</span>
                    )}
                  </Td>
                </tr>
              ))}
            </tbody>
          </DataTable>
          <Pagination total={res.data.total} limit={LIMIT} offset={offset} makeHref={(o) => href({ offset: o || undefined })} className="mt-4" />
        </>
      )}
      <Note className="mt-4">The release / discard endpoints answer 501 while the canonical service has not shipped them; the notice above reports the API's answer verbatim.</Note>
    </>
  );
}