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

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

const LIMIT = 50;
const SEV: Record<string, string> = { critical: 'text-danger', warning: 'text-warning', info: 'text-ink-3' };

export default async function AdminAnomaliesPage({ searchParams }: { searchParams: Promise<Record<string, string | undefined>> }) {
  await requireAdmin();
  const sp = await searchParams;
  const current: Record<string, string | undefined> = { status: sp.status ?? 'open' };
  if (sp.severity) current.severity = sp.severity;
  if (sp.check) current.check = sp.check;
  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/anomalies', current, patch);
  const ret = href({});
  const res = await load(adminApi.anomalies({ status: current.status, severity: current.severity, check: current.check, limit: LIMIT, offset }));
  const byCheck = res.ok ? (res.data.by_check ?? []) : [];
  const checks = [...new Set(byCheck.map((c) => c.check_name))].sort();
  return (
    <>
      <AdminTitle title="Anomalies" count={res.ok ? fmtInt(res.data.total) : undefined} lede="Impossible or suspicious values flagged by the checks in the methodology. Flags are never deleted: resolve when the data was fixed, ignore when the value is right despite the rule, reopen if it comes back.">
        <Link href={`${routes.methodology()}#anomalies`} className="text-xs text-ink-3 hover:text-ink">
          Check definitions →
        </Link>
      </AdminTitle>
      <Notice notice={sp.notice} level={sp.level} />
      {byCheck.length > 0 && (
        <ul className="mb-4 flex flex-wrap gap-1.5 text-xs">
          {byCheck.map((c) => (
            <li key={`${c.check_name}-${c.status}`}>
              <Link href={href({ check: current.check === c.check_name ? undefined : c.check_name, offset: undefined })} className={cn('inline-flex h-7 items-center gap-1.5 border px-2', current.check === c.check_name ? 'border-accent text-accent' : 'border-rule text-ink-2 hover:border-rule-strong')}>
                <span className={SEV[c.severity] ?? 'text-ink-3'}>{c.severity}</span>
                <span className="mono">{c.check_name}</span>
                <span className="tnum text-ink-3">{fmtInt(c.n)}</span>
              </Link>
            </li>
          ))}
        </ul>
      )}
      <AdminFilters
        action="/admin/anomalies"
        className="mb-4"
        fields={[
          { kind: 'select', name: 'status', label: 'Status', value: current.status, any: 'open', options: ['open', 'resolved', 'ignored', 'all'].map((s) => ({ value: s, label: s })) },
          { kind: 'select', name: 'severity', label: 'Severity', value: current.severity, options: ['critical', 'warning', 'info'].map((s) => ({ value: s, label: s })) },
          { kind: 'select', name: 'check', label: 'Check', value: current.check, options: checks.map((c) => ({ value: c, label: c })) },
        ]}
      />
      {!res.ok ? (
        <Unavailable what="Anomalies" reason={res.error} />
      ) : res.data.items.length === 0 ? (
        <EmptyState title="No anomaly matches" />
      ) : (
        <>
          <DataTable compact scroll caption="Anomalies">
            <thead>
              <tr>
                <Th>Severity</Th>
                <Th>Check</Th>
                <Th>Entity</Th>
                <Th>Message</Th>
                <Th num>Value</Th>
                <Th>Status</Th>
                <Th>Seen</Th>
                <Th>Actions</Th>
              </tr>
            </thead>
            <tbody>
              {res.data.items.length === 0 && <EmptyRow cols={8}>No rows.</EmptyRow>}
              {res.data.items.map((a) => (
                <tr key={a.id}>
                  <Td>
                    <span className={cn('text-xs font-medium', SEV[a.severity] ?? 'text-ink-3')}>{a.severity}</span>
                  </Td>
                  <Td>
                    <Mono>{a.check_name}</Mono>
                  </Td>
                  <Td primary>
                    {a.slug ? (
                      <span className="inline-flex items-center gap-1.5">
                        <EntityBadge type={a.entity_type ?? 'model'} small />
                        <Link href={routes.entity({ entity_type: a.entity_type ?? 'model', slug: a.slug })} className="text-ink hover:text-accent hover:underline">
                          {a.entity_name ?? a.slug}
                        </Link>
                      </span>
                    ) : (
                      <Mono>{a.entity_id ?? '—'}</Mono>
                    )}
                  </Td>
                  <Td className="max-w-[24rem] text-xs text-ink-2">
                    {a.message}
                    {a.detail && (
                      <details className="mt-1">
                        <summary className="cursor-pointer text-[11px] text-ink-3 hover:text-ink">detail</summary>
                        <JsonPre value={a.detail} maxHeight="10rem" />
                      </details>
                    )}
                  </Td>
                  <Td num className="tnum text-xs">{fmtValue(a.value)}</Td>
                  <Td>
                    <StatusChip value={a.status} />
                    {a.resolution && typeof a.resolution.note === 'string' && <span className="block text-[11px] text-ink-3">{a.resolution.note}</span>}
                  </Td>
                  <Td className="text-xs text-ink-3" title={`first ${fmtDateTime(a.first_seen_at)} · last ${fmtDateTime(a.last_seen_at)}`}>
                    <LiveAgo at={a.last_seen_at} />
                  </Td>
                  <Td>
                    <div className="flex items-center gap-1">
                      {a.status !== 'resolved' && (
                        <form action={anomalyAction}>
                          <input type="hidden" name="id" value={a.id} />
                          <input type="hidden" name="status" value="resolved" />
                          <input type="hidden" name="return" value={ret} />
                          <ActionButton tone="positive" title="The data was corrected">Resolve</ActionButton>
                        </form>
                      )}
                      {a.status !== 'ignored' && (
                        <form action={anomalyAction}>
                          <input type="hidden" name="id" value={a.id} />
                          <input type="hidden" name="status" value="ignored" />
                          <input type="hidden" name="return" value={ret} />
                          <ActionButton title="The value is right despite the rule">Ignore</ActionButton>
                        </form>
                      )}
                      {a.status !== 'open' && (
                        <form action={anomalyAction}>
                          <input type="hidden" name="id" value={a.id} />
                          <input type="hidden" name="status" value="open" />
                          <input type="hidden" name="return" value={ret} />
                          <ActionButton tone="accent">Reopen</ActionButton>
                        </form>
                      )}
                    </div>
                  </Td>
                </tr>
              ))}
            </tbody>
          </DataTable>
          <Pagination total={res.data.total} limit={LIMIT} offset={offset} makeHref={(o) => href({ offset: o || undefined })} className="mt-4" />
        </>
      )}
    </>
  );
}