import { traceValue } from '@cancerindex/ranking';
import { Section } from '@/components/ui/section';
import { JsonView } from '@/components/ui/json-view';
import { EmptyState } from '@/components/ui/empty-state';
import { db } from '@/lib/db';
import { str, type SP } from '@/lib/search-params';

const TABLES = ['rankings', 'epidemiology_observations', 'survival_observations', 'cancer_gene_frequencies', 'literature_counts'];

/** Lineage trace tool (§252-253): value → inputs → observation → provenance → raw record. */
export default async function TracePage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const table = str(sp, 'table');
  const id = str(sp, 'id');
  let result: Record<string, unknown> | null = null;
  let error: string | null = null;
  if (table && id) {
    if (!TABLES.includes(table)) error = 'unsupported table';
    else if (!/^\d{1,12}$/.test(id)) error = 'id must be a numeric row id';
    else {
      try {
        result = await traceValue(db(), table, id);
      } catch (e) {
        error = (e as Error).message;
      }
    }
  }
  return (
    <div className="space-y-6">
      <header className="pt-4">
        <h1 className="text-3xl">Trace</h1>
        <p className="mt-1 text-[13.5px] text-ink-2">Follow any derived or observed value back to its provenance row and raw source record.</p>
      </header>
      <form method="get" action="/admin/trace" className="flex flex-wrap items-end gap-2 text-[13.5px]">
        <label className="flex flex-col gap-1">
          <span className="ci-kicker">Table</span>
          <select name="table" defaultValue={table || 'rankings'} className="border border-rule-strong bg-white px-2 py-1.5">
            {TABLES.map((t) => (
              <option key={t} value={t}>
                {t}
              </option>
            ))}
          </select>
        </label>
        <label className="flex flex-col gap-1">
          <span className="ci-kicker">Row id</span>
          <input name="id" defaultValue={id} className="ci-mono w-40 border border-rule-strong bg-white px-2 py-1.5" placeholder="123" />
        </label>
        <button type="submit" className="border border-ink bg-ink px-3 py-1.5 text-paper hover:bg-ink-2">
          Trace
        </button>
      </form>
      {error ? <p className="text-[13px] text-danger">{error}</p> : null}
      {result ? (
        <Section id="result" kicker={`${table} / ${id}`} title="Lineage">
          {'error' in result ? <EmptyState compact title={String(result.error)} /> : <JsonView data={result} />}
        </Section>
      ) : !table ? (
        <EmptyState compact title="Enter a table and row id">Ranking rows link here from every "Why this rank?" panel.</EmptyState>
      ) : null}
    </div>
  );
}