"use client";

import Link from "next/link";
import { useMemo, useState, type ReactNode } from "react";
import { Badge, Button, ScopeBadge, SemanticsLabel, SkeletonRows, Table, TBody, Td, Th, THead, Tr } from "@/components/ui";
import { cn } from "@/components/ui/cn";
import { DASH, fmtInt, fmtMw, fmtUsd, fmtValue } from "@/lib/format";
import { entityHref } from "@/lib/routes";
import type { TraceResult } from "@/lib/admin-api";
import { ErrorNote, ExtLink, fmtBytes, JsonView, KV, LevelBadge, Mono, RefreshButton, Stat } from "./primitives";
import { AdminPageHeader } from "./shell";
import { useAdminQuery } from "./use-admin-query";

/* ------------------------------------------------------------------------------------------
   EXTRACTION DEBUGGER (§94–95): the pipeline for ONE document, stage by stage, without publishing.
   SOURCE DOCUMENT → RAW FETCH → PARSED TEXT → STRUCTURED DATA → EXTRACTED ENTITIES → EXTRACTED CLAIMS →
   NORMALIZED VALUES → MATCH CANDIDATES → RECONCILIATION → RESULTING DATABASE CHANGES.
   Data comes from GET /api/admin/documents/:id/trace (worker dry run); nothing is invented — when the
   worker is unreachable the ladder renders its error state.
   ------------------------------------------------------------------------------------------ */

interface Highlight {
  start: number;
  end: number;
  kind: "mw" | "usd";
  raw: string;
}

/** Same regexes as apps/worker/src/trace.ts highlightFigures — MW / GW and money figures. */
export function highlightFigures(text: string): Highlight[] {
  const out: Highlight[] = [];
  for (const m of text.matchAll(/(\d{1,3}(?:[.,]\d{3})+|\d+(?:[.,]\d+)?)\+?\s?(gigawatts?|gw|megawatts?|mw)\b/gi)) out.push({ start: m.index ?? 0, end: (m.index ?? 0) + m[0].length, kind: "mw", raw: m[0] });
  for (const m of text.matchAll(/(?:US\$|USD|\$|€|£|A\$|C\$|S\$)\s?\d[\d.,]*\s*(?:trillion|billion|million|bn|m\b|b\b|k\b)?/gi)) out.push({ start: m.index ?? 0, end: (m.index ?? 0) + m[0].length, kind: "usd", raw: m[0] });
  return out.sort((a, b) => a.start - b.start);
}

/** announcement.figures (connector-defined) → highlights when the entries carry offsets. */
function figuresFromAnnouncement(a: Record<string, unknown> | null): Highlight[] {
  const figs = a?.figures;
  if (!Array.isArray(figs)) return [];
  const out: Highlight[] = [];
  for (const f of figs as Array<Record<string, unknown>>) {
    const start = typeof f.start === "number" ? f.start : typeof f.offset === "number" ? f.offset : null;
    const end = typeof f.end === "number" ? f.end : start !== null && typeof f.raw === "string" ? start + f.raw.length : null;
    if (start === null || end === null || end <= start) continue;
    const unit = String(f.unit ?? f.kind ?? "").toLowerCase();
    out.push({ start, end, kind: unit.includes("usd") || unit.includes("$") || unit === "money" ? "usd" : "mw", raw: typeof f.raw === "string" ? f.raw : String(f.value ?? "") });
  }
  return out.sort((a, b) => a.start - b.start);
}

/** Text with figure spans highlighted (mw = accent, usd = permitting tone) and an optional evidence window emphasised. */
export function HighlightedText({ text, highlights, focus, className, maxHeight = 320 }: { text: string; highlights: Highlight[]; focus?: { start: number; end: number } | null; className?: string; maxHeight?: number | null }) {
  const parts = useMemo(() => {
    const nodes: ReactNode[] = [];
    let i = 0;
    const marks = [...highlights].filter((h) => h.start >= 0 && h.end <= text.length && h.end > h.start);
    // merge focus as a soft background
    for (const [k, h] of marks.entries()) {
      if (h.start < i) continue;
      if (h.start > i) nodes.push(<span key={`t${k}`}>{text.slice(i, h.start)}</span>);
      nodes.push(
        <mark key={`m${k}`} className={cn("rounded-[2px] px-[2px] font-medium", h.kind === "mw" ? "bg-accent/15 text-accent-ink" : "bg-st-permitting/15 text-st-permitting")} title={h.kind === "mw" ? "capacity figure" : "money figure"}>
          {text.slice(h.start, h.end)}
        </mark>,
      );
      i = h.end;
    }
    if (i < text.length) nodes.push(<span key="tail">{text.slice(i)}</span>);
    return nodes;
  }, [text, highlights]);
  if (!text) return <p className="text-[12px] text-ink-4">No parsed text.</p>;
  return (
    <div className={cn("overflow-auto whitespace-pre-wrap break-words rounded-xs border border-hair bg-paper px-3 py-2 text-[12.5px] leading-[1.6] text-ink-2", className)} style={{ maxHeight: maxHeight ?? undefined }}>
      {focus ? (
        <>
          <span className="opacity-60">{text.slice(0, focus.start)}</span>
          <span className="bg-surface-3 text-ink">{text.slice(focus.start, focus.end)}</span>
          <span className="opacity-60">{text.slice(focus.end)}</span>
        </>
      ) : (
        parts
      )}
    </div>
  );
}

const STAGES = [
  { id: "document", n: 1, label: "Source document" },
  { id: "fetch", n: 2, label: "Raw fetch" },
  { id: "text", n: 3, label: "Parsed text" },
  { id: "records", n: 4, label: "Structured data" },
  { id: "entities", n: 5, label: "Extracted entities" },
  { id: "claims", n: 6, label: "Extracted claims" },
  { id: "normalized", n: 7, label: "Normalized values" },
  { id: "matches", n: 8, label: "Match candidates" },
  { id: "reconciliation", n: 9, label: "Reconciliation (dry run)" },
  { id: "changes", n: 10, label: "Resulting database changes" },
] as const;

function Stage({ n, label, count, tone, children, defaultOpen = true, aside }: { n: number; label: string; count?: ReactNode; tone?: "ok" | "warn" | "danger" | "muted"; children: ReactNode; defaultOpen?: boolean; aside?: ReactNode }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <li className="relative pl-9">
      <span aria-hidden className={cn("absolute left-0 top-1 flex size-6 items-center justify-center rounded-full border text-[11px] font-semibold", tone === "danger" ? "border-danger/40 bg-danger/10 text-danger" : tone === "warn" ? "border-warn/40 bg-warn/10 text-warn" : tone === "muted" ? "border-hair bg-surface text-ink-4" : "border-hair-2 bg-surface text-ink")}>
        {n}
      </span>
      <div className="rounded-sm border border-hair bg-surface">
        <button type="button" onClick={() => setOpen((o) => !o)} aria-expanded={open} className="flex min-h-10 w-full items-center gap-2 px-3 text-left">
          <span className="label-caps text-ink">{label}</span>
          {count !== undefined && <span className="figure text-[12px] text-ink-3">{count}</span>}
          <span className="ml-auto flex items-center gap-2">
            {aside}
            <span className="text-[11px] text-ink-4">{open ? "hide" : "show"}</span>
          </span>
        </button>
        {open && <div className="border-t border-hair px-3 py-2.5">{children}</div>}
      </div>
    </li>
  );
}

function num(v: unknown): number | null {
  return typeof v === "number" && Number.isFinite(v) ? v : null;
}
function str(v: unknown): string | null {
  return typeof v === "string" && v ? v : null;
}

const MW_FIELDS = ["itCapacityMw", "totalPowerMw", "plannedPowerMw", "utilityCapacityMw", "gridConnectionMw", "ultimateCampusMw", "plannedMw", "it_capacity_mw", "total_power_mw", "planned_power_mw", "planned_mw"];
const DATE_FIELDS = ["openedOn", "announcedOn", "constructionStartedOn", "expectedOpening", "approvedOn", "permitFiledOn", "opened_on", "announced_on", "expected_opening"];

/** KV of the fields that matter for a normalized entity (MW columns, status, dates, geo, ids). */
function NormalizedEntity({ e }: { e: Record<string, unknown> }) {
  const geo = (e.geo as Record<string, unknown> | undefined) ?? null;
  const items: Array<{ k: ReactNode; v: ReactNode }> = [];
  for (const f of MW_FIELDS) if (num(e[f]) !== null) items.push({ k: <Mono>{f}</Mono>, v: <span className="figure">{fmtMw(num(e[f]))}</span> });
  if (num(e.investmentUsd ?? e.investment_usd) !== null) items.push({ k: <Mono>investmentUsd</Mono>, v: <span className="figure">{fmtUsd(num(e.investmentUsd ?? e.investment_usd))}</span> });
  if (str(e.status)) items.push({ k: "status", v: <Badge size="xs" tone="outline">{String(e.status)}</Badge> });
  if (str(e.facilityType ?? e.facility_type)) items.push({ k: "type", v: String(e.facilityType ?? e.facility_type) });
  for (const f of DATE_FIELDS) if (str(e[f])) items.push({ k: <Mono>{f}</Mono>, v: <span className="figure">{String(e[f])}</span> });
  if (geo && num(geo.lat) !== null && num(geo.lng) !== null) items.push({ k: "geo", v: <span className="figure">{num(geo.lat)!.toFixed(5)}, {num(geo.lng)!.toFixed(5)} {geo.precision ? `(${String(geo.precision)})` : ""}</span> });
  else if (num(e.lat) !== null && num(e.lng) !== null) items.push({ k: "geo", v: <span className="figure">{num(e.lat)!.toFixed(5)}, {num(e.lng)!.toFixed(5)}</span> });
  for (const f of ["city", "regionName", "countryIso2", "country_iso2", "address", "operatorName", "operator", "metro"]) if (str(e[f])) items.push({ k: f, v: String(e[f]) });
  const aiEv = str(e.aiEvidence ?? e.ai_evidence);
  if (aiEv) items.push({ k: "aiEvidence", v: <Badge size="xs" tone={aiEv === "confirmed" || aiEv === "likely" ? "accent" : "outline"}>{aiEv}</Badge> });
  if (str(e.projectClass ?? e.project_class)) items.push({ k: "projectClass", v: <Mono>{String(e.projectClass ?? e.project_class)}</Mono> });
  const ids = (e.externalIds as Record<string, unknown> | undefined) ?? null;
  if (ids && Object.keys(ids).length) items.push({ k: "externalIds", v: <Mono wrap>{Object.entries(ids).map(([k, v]) => `${k}=${String(v)}`).join(" · ")}</Mono> });
  return (
    <div className="rounded-xs border border-hair px-2.5 py-2">
      <div className="mb-1 flex flex-wrap items-center gap-2 text-[12.5px]">
        <Badge size="xs" tone="outline" mono>
          {String(e.type ?? e.kind ?? "entity")}
        </Badge>
        <span className="font-medium text-ink">{str(e.name) ?? DASH}</span>
        {str(e.key) && <Mono className="text-ink-4">{String(e.key)}</Mono>}
      </div>
      {items.length ? <KV items={items} cols={2} /> : <p className="text-[12px] text-ink-4">No capacity, status, date or geo field on this entity.</p>}
    </div>
  );
}

function DebuggerHeader({ id, doc, fixture }: { id: string; doc: Record<string, unknown> | null; fixture: boolean }) {
  const url = doc && typeof doc.url === "string" ? doc.url : null;
  const connectorId = doc && typeof doc.connectorId === "string" ? doc.connectorId : null;
  return (
    <AdminPageHeader
      eyebrow={
        <span className="inline-flex flex-wrap items-center gap-1.5">
          <Link href="/admin/documents" className="hover:text-ink">
            Documents
          </Link>
          {connectorId && (
            <>
              <span>/</span>
              <Link href={`/admin/connectors/${encodeURIComponent(connectorId)}`} className="font-mono hover:text-ink">
                {connectorId}
              </Link>
            </>
          )}
          <span>/ extraction debugger</span>
        </span>
      }
      title={url ? <span className="break-all font-mono text-[15px] sm:text-[17px]">{url.replace(/^https?:\/\//, "")}</span> : <span className="font-mono">{id}</span>}
      description={fixture ? "Sample trace for layout only — no worker call was made." : "Dry run of the full pipeline for this document: nothing below is written to the database."}
    />
  );
}

export function ExtractionDebugger({ id, fixture }: { id: string; fixture?: TraceResult | null }) {
  const [live, setLive] = useState(false);
  const q = useAdminQuery<TraceResult>(fixture ? null : `documents/${encodeURIComponent(id)}/trace`, { query: live ? { live: 1 } : undefined, timeoutMs: 120_000 });
  const t = fixture ?? q.data;
  const excerpt = t?.text.excerpt ?? "";
  const highlights = useMemo(() => {
    const fromAnn = figuresFromAnnouncement(t?.announcement ?? null);
    return fromAnn.length ? fromAnn : highlightFigures(excerpt);
  }, [t, excerpt]);
  const [focusClaim, setFocusClaim] = useState<number | null>(null);
  const unreachable = q.error && /worker unreachable|502|fetch failed/i.test(q.error);

  if (!fixture && q.error && !q.data) {
    return (
      <div className="space-y-2">
        <DebuggerHeader id={id} doc={null} fixture={false} />
        <ErrorNote error={unreachable ? `The maintenance worker did not answer (${q.error}). The trace is a dry run executed by the worker (GET /trace/<id>); start it or check DCI_WORKER_URL on the API.` : q.error} onRetry={() => void q.refresh()} />
        <p className="text-[11.5px] text-ink-4">Nothing is shown from cache: a trace is recomputed on demand and never stored.</p>
      </div>
    );
  }
  if (!t) {
    return (
      <div>
        <DebuggerHeader id={id} doc={null} fixture={false} />
        <SkeletonRows rows={8} />
      </div>
    );
  }

  const doc = t.document ?? {};
  const rec = t.reconciliation;
  const entityByKey = new Map<string, Record<string, unknown>>();
  for (const e of t.entities) if (str(e.key)) entityByKey.set(String(e.key), e);

  return (
    <div>
      <DebuggerHeader id={id} doc={t.document} fixture={Boolean(fixture)} />
      <div className="mb-3 flex flex-wrap items-center gap-2">
        {fixture && (
          <Badge tone="danger" size="sm" className="uppercase tracking-[0.06em]">
            Fixture — not real data
          </Badge>
        )}
        {!fixture && <Badge size="xs" tone="outline">{t.fetch?.source === "live" ? "live re-fetch" : "archived body"}</Badge>}
        {t.error && <Badge size="xs" tone="danger">{t.error}</Badge>}
        <span className="ml-auto flex items-center gap-2">
          {!fixture && (
            <Button
              size="xs"
              variant="secondary"
              disabled={q.loading || q.refreshing}
              onClick={() => {
                setLive(true);
                if (live) void q.refresh();
              }}
              title="Re-fetch the page from the source and run the trace on the fresh body"
            >
              Re-trace live
            </Button>
          )}
          {!fixture && <RefreshButton onClick={() => void q.refresh()} busy={q.refreshing} updatedAt={q.updatedAt} label="Re-run" />}
        </span>
      </div>

      <div className="mb-3 grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-6">
        <Stat label="Records" value={fmtInt(t.records.length)} />
        <Stat label="Entities" value={fmtInt(t.entities.length)} note={`${fmtInt(t.validation.valid)} valid · ${fmtInt(t.validation.rejected)} rejected`} tone={t.validation.rejected > 0 ? "warn" : undefined} />
        <Stat label="Claims" value={fmtInt(t.claims.length)} note={`${fmtInt(t.claims.filter((c) => c.evidence).length)} with evidence`} />
        <Stat label="Non-site scope" value={fmtInt(t.claims.filter((c) => !["building", "facility", "campus"].includes(c.scope)).length)} note="stored, never summed" />
        <Stat label="Would create" value={rec ? fmtInt(rec.created) : DASH} note={rec ? `${fmtInt(rec.updated)} updated · ${fmtInt(rec.merged)} merged` : "no dry run"} />
        <Stat label="Would reject" value={rec ? fmtInt(rec.rejected + rec.projectsVetoed) : DASH} tone={rec && rec.rejected + rec.projectsVetoed > 0 ? "warn" : undefined} note={rec ? `${fmtInt(rec.projectsVetoed)} projects vetoed` : undefined} />
      </div>

      <ol className="relative space-y-2 border-l border-hair pl-0 [&>li]:before:absolute [&>li]:before:-left-px [&>li]:before:top-4 [&>li]:before:h-px [&>li]:before:w-3 [&>li]:before:bg-hair">
        <Stage n={1} label={STAGES[0].label} aside={str(doc.url) ? <ExtLink href={String(doc.url)}>open</ExtLink> : undefined}>
          <KV
            cols={2}
            items={[
              { k: "Id", v: <Mono>{str(doc.id) ?? id}</Mono> },
              { k: "Connector", v: str(doc.connectorId) ? <Link href={`/admin/connectors/${encodeURIComponent(String(doc.connectorId))}`} className="font-mono hover:text-accent">{String(doc.connectorId)}</Link> : DASH },
              { k: "URL", v: str(doc.url) ? <ExtLink href={String(doc.url)} /> : DASH },
              { k: "Title", v: str(doc.title) ?? DASH },
              { k: "Page type", v: str(doc.pageType) ? <Badge size="xs" mono tone="outline">{String(doc.pageType)}</Badge> : DASH },
              { k: "Classifier", v: str(doc.classifier) ? <Mono wrap>{String(doc.classifier)}</Mono> : DASH },
              { k: "Content hash", v: str(doc.contentHash) ? <Mono>{String(doc.contentHash).slice(0, 16)}…</Mono> : DASH },
              { k: "Extractor", v: str(doc.extractorVersion) ? <Mono>{String(doc.extractorVersion)}</Mono> : DASH },
              { k: "Last extraction", v: doc.extractOk === false ? <span className="text-danger">failed{str(doc.error) ? ` — ${String(doc.error)}` : ""}</span> : doc.extractOk === true ? `${fmtInt(num(doc.extractCount) ?? 0)} entities` : DASH },
              { k: "Quarantined", v: doc.quarantined ? <Badge size="xs" tone="warn">yes</Badge> : "no" },
            ]}
          />
        </Stage>

        <Stage n={2} label={STAGES[1].label} tone={t.fetch ? (t.fetch.status >= 400 ? "danger" : undefined) : "muted"}>
          {t.fetch ? (
            <KV
              cols={3}
              items={[
                { k: "Source", v: <Badge size="xs" tone={t.fetch.source === "live" ? "accent" : "outline"}>{t.fetch.source}</Badge> },
                { k: "HTTP", v: <Mono className={t.fetch.status >= 400 ? "text-danger" : undefined}>{t.fetch.status}</Mono> },
                { k: "Content type", v: t.fetch.contentType ?? DASH },
                { k: "Bytes", v: fmtBytes(t.fetch.bytes) },
                { k: "Fetcher", v: <span className="inline-flex items-center gap-1.5"><LevelBadge level={t.fetch.level} /> <Mono>{t.fetch.fetcher}</Mono></span> },
                { k: "Storage key", v: t.fetch.storageKey ? <Mono wrap>{t.fetch.storageKey}</Mono> : DASH },
              ]}
            />
          ) : (
            <p className="text-[12px] text-ink-4">No body available — the document was never fetched or its archive is missing.</p>
          )}
        </Stage>

        <Stage n={3} label={STAGES[2].label} count={`${fmtInt(t.text.length)} chars`} aside={<span className="text-[11px] text-ink-4">{fmtInt(highlights.length)} figures highlighted</span>}>
          <div className="mb-2 flex flex-wrap items-center gap-2 text-[12.5px]">
            {t.text.title && <span className="font-medium text-ink">{t.text.title}</span>}
            {t.text.classification && (
              <>
                <Badge size="xs" mono tone="outline">
                  {t.text.classification.pageType}
                </Badge>
                <span className="text-ink-3">rule <Mono>{t.text.classification.rule}</Mono></span>
                {t.text.classification.eventType && <Badge size="xs" tone="accent">{t.text.classification.eventType}</Badge>}
                {t.text.classification.mw.length > 0 && <span className="figure text-ink-3">MW seen: {t.text.classification.mw.join(", ")}</span>}
              </>
            )}
          </div>
          <HighlightedText text={excerpt} highlights={highlights} focus={focusClaim !== null ? t.claims[focusClaim]?.evidence ?? null : null} />
          {t.text.length > excerpt.length && <p className="mt-1 text-[11px] text-ink-4">Excerpt: first {fmtInt(excerpt.length)} of {fmtInt(t.text.length)} characters.</p>}
          {t.announcement && (
            <div className="mt-2">
              <div className="label-caps mb-1">Announcement classification</div>
              <JsonView value={t.announcement} maxHeight={200} collapsible />
            </div>
          )}
        </Stage>

        <Stage n={4} label={STAGES[3].label} count={fmtInt(t.records.length)} tone={t.records.length ? undefined : "muted"} defaultOpen={t.records.length > 0}>
          {t.records.length === 0 ? (
            <p className="text-[12px] text-ink-4">The parser produced no structured record from this body.</p>
          ) : (
            <div className="space-y-2">
              {t.records.map((r, i) => (
                <div key={`${r.key}-${i}`} className="rounded-xs border border-hair px-2.5 py-2">
                  <div className="mb-1 flex flex-wrap items-center gap-2 text-[12.5px]">
                    <Badge size="xs" tone="outline" mono>
                      {r.kind}
                    </Badge>
                    <Mono>{r.key}</Mono>
                    {r.pageType && <span className="text-ink-3">{r.pageType}</span>}
                    {r.certainty !== null && <span className="figure text-ink-3">certainty {(r.certainty * 100).toFixed(0)}%</span>}
                  </div>
                  <JsonView value={r.data} maxHeight={220} collapsible />
                  {Object.keys(r.methods).length > 0 && (
                    <p className="mt-1 text-[11px] text-ink-4">
                      methods: {Object.entries(r.methods).map(([k, v]) => `${k}=${v}`).join(" · ")}
                    </p>
                  )}
                </div>
              ))}
            </div>
          )}
        </Stage>

        <Stage n={5} label={STAGES[4].label} count={fmtInt(t.entities.length)} tone={t.validation.rejected > 0 ? "warn" : t.entities.length ? undefined : "muted"} defaultOpen={t.entities.length > 0}>
          <p className="mb-2 text-[12px] text-ink-3">
            Validation: <span className="figure text-ink">{fmtInt(t.validation.total)}</span> total · <span className="figure text-ok">{fmtInt(t.validation.valid)}</span> valid · <span className={cn("figure", t.validation.rejected ? "text-danger" : "text-ink")}>{fmtInt(t.validation.rejected)}</span> rejected
          </p>
          {t.entities.length === 0 ? (
            <p className="text-[12px] text-ink-4">No entity — a record needs an identifying name and enough fields to become one.</p>
          ) : (
            <ul className="divide-y divide-hair">
              {t.entities.map((e, i) => (
                <li key={i} className="flex flex-wrap items-center gap-2 py-1.5 text-[12.5px]">
                  <Badge size="xs" tone="outline" mono>
                    {String(e.type ?? e.kind ?? "entity")}
                  </Badge>
                  <span className="font-medium text-ink">{str(e.name) ?? DASH}</span>
                  {str(e.key) && <Mono className="text-ink-4">{String(e.key)}</Mono>}
                  {str(e.status) && <span className="text-ink-3">{String(e.status)}</span>}
                </li>
              ))}
            </ul>
          )}
          {t.validation.issues.length > 0 && (
            <div className="mt-2">
              <div className="label-caps mb-1">Issues</div>
              <ul className="divide-y divide-hair text-[12px]">
                {t.validation.issues.map((is, i) => (
                  <li key={i} className="flex flex-wrap gap-2 py-1">
                    <Badge size="xs" tone={/error|reject/i.test(String(is.level ?? is.severity ?? "")) ? "danger" : "warn"}>
                      {String(is.level ?? is.severity ?? "issue")}
                    </Badge>
                    {(is.field ?? is.path) && <Mono>{String(is.field ?? is.path)}</Mono>}
                    <span className="text-ink-2">{String(is.message ?? fmtValue(is))}</span>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </Stage>

        <Stage n={6} label={STAGES[5].label} count={fmtInt(t.claims.length)} tone={t.claims.length ? undefined : "muted"} defaultOpen={t.claims.length > 0}>
          {t.claims.length === 0 ? (
            <p className="text-[12px] text-ink-4">No numerical claim — either the text carries no MW / money figure or no supporting sentence was found (no sentence, no claim).</p>
          ) : (
            <Table className="text-[12.5px]" dense>
              <THead>
                <Tr>
                  <Th>Entity</Th>
                  <Th>Field</Th>
                  <Th numeric>Value</Th>
                  <Th>Scope</Th>
                  <Th className="hidden md:table-cell">Semantics</Th>
                  <Th>Evidence sentence</Th>
                </Tr>
              </THead>
              <TBody>
                {t.claims.map((c, i) => {
                  const ev = c.evidence;
                  const evHi = ev ? highlightFigures(ev.text) : [];
                  return (
                    <Tr key={i} className={cn(focusClaim === i && "bg-surface-2/60")} onMouseEnter={() => setFocusClaim(i)} onMouseLeave={() => setFocusClaim(null)}>
                      <Td>
                        <Mono wrap>{c.entityKey}</Mono>
                      </Td>
                      <Td>
                        <Mono>{c.field}</Mono>
                      </Td>
                      <Td numeric className="figure">
                        {c.unit === "MW" ? fmtMw(c.value) : fmtUsd(c.value)}
                      </Td>
                      <Td>
                        <div className="flex flex-col items-start gap-0.5">
                          <ScopeBadge scope={c.scope} />
                          <Mono className="text-[10.5px] text-ink-4">{c.scopeReason}</Mono>
                        </div>
                      </Td>
                      <Td className="hidden md:table-cell">{c.semantics ? <SemanticsLabel semantics={c.semantics} className="text-[12px] text-ink-2" /> : <span className="text-ink-4">{DASH}</span>}</Td>
                      <Td className="max-w-[420px]">
                        {ev ? (
                          <span className="text-[12px] leading-snug text-ink-2">
                            <HighlightedText text={ev.text} highlights={evHi} className="border-0 bg-transparent px-0 py-0" maxHeight={null} />
                            <span className="figure text-[10.5px] text-ink-4">
                              @{ev.start}–{ev.end}
                            </span>
                          </span>
                        ) : (
                          <span className="text-[12px] text-ink-4">no sentence (structured field)</span>
                        )}
                      </Td>
                    </Tr>
                  );
                })}
              </TBody>
            </Table>
          )}
          <p className="mt-2 text-[11px] text-ink-4">Only building / facility / campus scopes may populate a record&rsquo;s capacity or investment column; portfolio, company, country, metro and unknown scopes are stored as claims and shown as evidence.</p>
        </Stage>

        <Stage n={7} label={STAGES[6].label} count={fmtInt(t.entities.length)} tone={t.entities.length ? undefined : "muted"} defaultOpen={t.entities.length > 0}>
          {t.entities.length === 0 ? <p className="text-[12px] text-ink-4">Nothing to normalize.</p> : <div className="grid gap-2 lg:grid-cols-2">{t.entities.map((e, i) => <NormalizedEntity key={i} e={e} />)}</div>}
        </Stage>

        <Stage n={8} label={STAGES[7].label} count={fmtInt(t.matches.length)} tone={t.matches.length ? undefined : "muted"} defaultOpen={t.matches.length > 0}>
          {t.matches.length === 0 ? (
            <p className="text-[12px] text-ink-4">No facility resolution attempted (no facility entity, or the entity kind is not matched).</p>
          ) : (
            <div className="space-y-2">
              {t.matches.map((m, i) => {
                const ent = entityByKey.get(m.entityKey);
                return (
                  <div key={i} className="rounded-xs border border-hair px-2.5 py-2">
                    <div className="mb-1 flex flex-wrap items-center gap-2 text-[12.5px]">
                      <span className="font-medium text-ink">{str(ent?.name) ?? m.entityKey}</span>
                      <Mono className="text-ink-4">{m.entityKey}</Mono>
                      <Badge size="xs" tone={m.matchedId ? "ok" : "outline"}>{m.how}</Badge>
                      {m.matchedId && (
                        <Link href={entityHref("facility", m.matchedId)} target="_blank" className="font-mono text-[12px] text-ink-2 hover:text-accent">
                          → {m.matchedId}
                        </Link>
                      )}
                    </div>
                    {m.candidates.length === 0 ? (
                      <p className="text-[12px] text-ink-4">No candidate within the matching window — a real run would create a new facility.</p>
                    ) : (
                      <Table className="text-[12px]" dense>
                        <THead>
                          <Tr>
                            <Th>Candidate</Th>
                            <Th>Operator</Th>
                            <Th>City</Th>
                            <Th numeric>Distance</Th>
                            <Th>Score</Th>
                            <Th>Reasons</Th>
                          </Tr>
                        </THead>
                        <TBody>
                          {m.candidates.map((c) => (
                            <Tr key={c.id} className={cn(c.id === m.matchedId && "bg-ok/5")}>
                              <Td>
                                <Link href={entityHref("facility", c.id)} target="_blank" className="font-medium text-ink hover:text-accent hover:underline">
                                  {c.name}
                                </Link>
                                <div className="text-[10.5px] text-ink-4">
                                  <Mono>{c.id}</Mono>
                                </div>
                              </Td>
                              <Td muted>{c.operatorName ?? DASH}</Td>
                              <Td muted>{c.city ?? DASH}</Td>
                              <Td numeric>{c.distanceKm == null ? DASH : c.distanceKm < 1 ? `${Math.round(c.distanceKm * 1000)} m` : `${c.distanceKm.toFixed(1)} km`}</Td>
                              <Td>
                                <div className="flex items-center gap-1.5">
                                  <div className="h-1.5 w-16 rounded-full bg-surface-3">
                                    <div className={cn("h-full rounded-full", c.score >= 0.92 ? "bg-ok" : c.score >= 0.6 ? "bg-warn" : "bg-ink-4")} style={{ width: `${Math.min(100, c.score * 100)}%` }} />
                                  </div>
                                  <span className="figure">{(c.score * 100).toFixed(0)}%</span>
                                </div>
                              </Td>
                              <Td>
                                <div className="flex flex-wrap gap-1">
                                  {c.reasons.map((r) => (
                                    <Badge key={r} size="xs" mono tone="outline">
                                      {r}
                                    </Badge>
                                  ))}
                                </div>
                              </Td>
                            </Tr>
                          ))}
                        </TBody>
                      </Table>
                    )}
                  </div>
                );
              })}
              <p className="text-[11px] text-ink-4">≥ 0.92 merges automatically, 0.60–0.92 goes to the duplicate workbench, below 0.60 creates a new record.</p>
            </div>
          )}
        </Stage>

        <Stage n={9} label={STAGES[8].label} tone={rec ? (rec.rejected + rec.projectsVetoed > 0 ? "warn" : "ok") : "muted"}>
          {!rec ? (
            <p className="text-[12px] text-ink-4">The dry-run ingest did not run (no valid entity, or the trace stopped earlier{t.error ? `: ${t.error}` : ""}).</p>
          ) : (
            <div className="grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-6">
              <Stat label="Created" value={fmtInt(rec.created)} tone={rec.created ? "ok" : undefined} />
              <Stat label="Updated" value={fmtInt(rec.updated)} />
              <Stat label="Unchanged" value={fmtInt(rec.unchanged)} />
              <Stat label="Merged" value={fmtInt(rec.merged)} />
              <Stat label="Pending matches" value={fmtInt(rec.pendingMatches)} tone={rec.pendingMatches ? "warn" : undefined} />
              <Stat label="Rejected" value={fmtInt(rec.rejected)} tone={rec.rejected ? "danger" : undefined} />
              <Stat label="Events" value={fmtInt(rec.events)} />
              <Stat label="Provenance rows" value={fmtInt(rec.provenanceRows)} />
              <Stat label="Claims" value={fmtInt(rec.claims)} note={`${fmtInt(rec.unscopedClaims)} unscoped`} />
              <Stat label="Quality flags" value={fmtInt(rec.qualityFlags)} tone={rec.qualityFlags ? "warn" : undefined} />
              <Stat label="Projects vetoed" value={fmtInt(rec.projectsVetoed)} tone={rec.projectsVetoed ? "warn" : undefined} note="evidence threshold / class" />
              <Stat label="Refs" value={fmtInt(rec.refs.length)} />
            </div>
          )}
        </Stage>

        <Stage n={10} label={STAGES[9].label} count={rec ? fmtInt(rec.changes.length) : undefined} tone={rec ? undefined : "muted"} defaultOpen={Boolean(rec && rec.changes.length)}>
          {!rec ? (
            <p className="text-[12px] text-ink-4">No changes computed.</p>
          ) : (
            <div className="space-y-2">
              {rec.refs.length > 0 && (
                <div>
                  <div className="label-caps mb-1">Entities a real run would touch</div>
                  <ul className="flex flex-wrap gap-1.5">
                    {rec.refs.map((r, i) => (
                      <li key={`${r.type}-${r.id}-${i}`}>
                        <Link href={entityHref(r.type, r.id)} target="_blank" className="inline-flex h-7 items-center gap-1.5 rounded-xs border border-hair px-2 text-[12px] text-ink hover:text-accent">
                          <span className="text-ink-3">{r.type}</span>
                          <Mono>{r.id}</Mono>
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              )}
              {rec.changes.length === 0 ? <p className="text-[12px] text-ink-4">A real run would write nothing new for this document.</p> : <JsonView value={rec.changes} maxHeight={420} />}
              <p className="text-[11px] text-ink-4">Dry run: nothing above was written. Use “Reprocess” on the document to apply with the current parser.</p>
            </div>
          )}
        </Stage>
      </ol>

      <details className="mt-3 rounded-sm border border-hair bg-surface">
        <summary className="flex min-h-9 cursor-pointer list-none items-center gap-2 px-3 text-[12.5px] text-ink-2 [&::-webkit-details-marker]:hidden">
          <span className="label-caps">Worker log</span>
          <span className="figure text-ink-3">{fmtInt(t.logs.length)} lines</span>
        </summary>
        <div className="max-h-[320px] overflow-auto border-t border-hair bg-paper px-2 py-1 font-mono text-[11.5px] leading-[1.5]">
          {t.logs.length === 0 ? (
            <span className="text-ink-4">empty</span>
          ) : (
            t.logs.map((l, i) => (
              <div key={i} className={cn("border-b border-hair/60 py-0.5 last:border-0", /^error/.test(l) && "text-danger", /^warn/.test(l) && "text-warn", !/^(error|warn)/.test(l) && "text-ink-2")}>
                {l}
              </div>
            ))
          )}
        </div>
      </details>
    </div>
  );
}