import type { AuthorityField, ClaimScope, SourceKind } from "@dci/core";
import { AI_EVIDENCE_LEVELS, AUTHORITY_FIELDS, CAPACITY_PREDICATE_LABEL, CLAIM_SCOPES, FIELD_AUTHORITY, INVESTMENT_PREDICATE_LABEL, PROJECT_CLASSES, SOURCE_KINDS, isSiteScope } from "@dci/core";
import Link from "next/link";
import type { ReactNode } from "react";
import { AiMark, ScopeBadge, StageBadge, TierMark } from "@/components/ui/badge";
import { Section } from "@/components/ui/card";
import { TBody, THead, Table, Td, Th, Tr } from "@/components/ui/table";
import { AI_EVIDENCE_LABEL, AUTHORITY_TIER_LABEL, PROJECT_STAGE_ORDER, SOURCE_KIND_LABEL } from "@/lib/labels";
import { routes } from "@/lib/routes";

/* ------------------------------------------------------------------------------------------
   Methodology §9–17: the claim-first architecture (docs/CLAIMS.md), rendered from the same code
   tables the pipeline uses (@dci/core claims.ts) so the page can never drift from the rules.
   ------------------------------------------------------------------------------------------ */

const linkCls = "text-ink underline decoration-hair-2 hover:text-accent";
function P({ children }: { children: ReactNode }) {
  return <p className="mt-3 first:mt-0">{children}</p>;
}
function Code({ children }: { children: ReactNode }) {
  return <code className="figure text-[12.5px]">{children}</code>;
}

const CLAIM_COLUMNS: Array<[string, string]> = [
  ["subject_type, subject_id", "facility / campus / project / operator / market / country the figure is about"],
  ["predicate", "what is asserted — it_capacity_mw, critical_power_mw, utility_capacity_mw, grid_connection_mw, current_power_mw, planned_power_mw, ultimate_campus_mw, phase_mw, project_investment_usd, campus_investment_usd, company_investment_usd, country_program_usd, multi_year_capex_usd, deal_value_usd, status…"],
  ["value, value_text, unit", "the figure (MW, USD) or text"],
  ["scope, scope_reason", "building · facility · campus · metro · country · portfolio · company · unknown, and the rule that decided"],
  ["evidence_text, evidence_start, evidence_end", "the supporting sentence and its offsets in the parsed text — no sentence, no numerical claim (structured spec tables record the extraction method instead)"],
  ["source_id, url, document_id, published_at, retrieved_at", "where and when"],
  ["authority_tier", "A–E for this field (see field-level authority)"],
  ["parser_name, parser_version, run_id", "who extracted it — enables reprocessing and rollback"],
  ["status", "current · superseded (same source, same page, new value) · rejected (review / rollback) · review (critical sanity flag) · unscoped (describes a portfolio, a company, a country, a metro, or its scope is unknown)"],
];

const SCOPE_MEANING: Record<ClaimScope, string> = {
  building: "One hall or building on a site — may populate a building record; never stands for its campus.",
  facility: "A data center as one record — populates the facility's own columns.",
  campus: "The whole campus / park — populates the campus row; never written to a building.",
  metro: "A market statistic (“the Northern Virginia market adds 1 GW”) — evidence only.",
  country: "A national programme or country total — evidence only.",
  portfolio: "A company's footprint or pipeline (“across its portfolio”) — evidence only.",
  company: "Capex, guidance, multi-year plans, market-research figures — evidence only.",
  unknown: "The sentence gives no scope signal and the record has none — stored, never assigned.",
};

const BLOCKING: Array<[string, string]> = [
  ["scope_*", "figure describes a portfolio, company, country, metro or unknown scope — kept as a claim, not assigned"],
  ["scope_campus_on_building", "campus-level figure on a building record"],
  ["mw_market_statistic", "≥ 20 GW — an industry / market statistic, not a site"],
  ["mw_invalid", "zero, negative or non-numeric MW"],
  ["inv_deal_value_usd · inv_multi_year_capex_usd · inv_company_investment_usd · inv_country_program_usd", "deal value, capex, company or country programme filed as a project investment"],
  ["inv_gt_500b", "more than $500 B on one record"],
];
const NON_BLOCKING: Array<[string, string, string]> = [
  ["mw_single_site_gt_1000", "critical", "single facility above 1 000 MW without a campus designation"],
  ["mw_building_gt_500", "warn", "one building above 500 MW"],
  ["mw_change_5x", "warn", "figure changed more than 5× against the previous value"],
  ["mw_money_collision", "critical", "a money figure with the same number sits in the same sentence — unit to verify"],
  ["inv_single_site_gt_50b", "critical", "more than $50 B on one site"],
  ["mw_semantics_default", "info", "the sentence does not say what kind of MW this is; semantics defaulted from the record status"],
  ["mw_utility_not_it", "info", "utility / grid figure — supply side, never IT load"],
];

const CLASS_GROUPS: Array<{ title: string; note: string; classes: string[] }> = [
  { title: "Physical — may create or modify a project", note: "Creation additionally needs the evidence threshold: an explicit name or operator, a location, and a development verb. Company domiciles (“Denver-based”, “headquartered in”) are stripped before locating the project.", classes: ["NEW_BUILD", "EXPANSION", "CONSTRUCTION_START", "PERMIT", "LAND_ACQUISITION", "GRID_CONNECTION"] },
  { title: "Associated — attach an event to an identifiable project, never create one", note: "Power agreements, financing and partnerships are corporate context; on operator pages they are listed apart from physical projects.", classes: ["POWER_AGREEMENT", "FINANCING", "ACQUISITION", "PARTNERSHIP", "CUSTOMER_AGREEMENT"] },
  { title: "Never a project", note: "Executive appointments, sustainability reports, product news and general company news are recorded as events at most.", classes: PROJECT_CLASSES.filter((c) => !["NEW_BUILD", "EXPANSION", "CONSTRUCTION_START", "PERMIT", "LAND_ACQUISITION", "GRID_CONNECTION", "POWER_AGREEMENT", "FINANCING", "ACQUISITION", "PARTNERSHIP", "CUSTOMER_AGREEMENT"].includes(c)) },
];

export const CLAIMS_NAV = [
  { id: "claims", label: "Claims" },
  { id: "scopes", label: "Scopes" },
  { id: "semantics", label: "Capacity semantics" },
  { id: "authority", label: "Authority" },
  { id: "quality", label: "Sanity & quality" },
  { id: "classes", label: "Announcement classes" },
  { id: "lifecycle", label: "Lifecycle" },
  { id: "ai-evidence", label: "AI evidence" },
  { id: "coverage-ranking", label: "Coverage-aware ranking" },
];

export function ClaimsSections({ from }: { from: number }) {
  const n = (i: number) => `${from + i} · `;
  return (
    <>
      <Section id="claims" className="scroll-mt-28" title={`${n(0)}Claims — the claim-first architecture`}>
        <P>
          Since 2026-09-12 every numerical figure the index extracts is stored as a <strong className="text-ink">claim</strong> before it can become a displayed value. A claim is one assertion by one document about one subject, with its scope, its semantics, the sentence that supports it, the parser that produced it and the field-level authority of its source. Reconciliation then decides which claim (if any) populates a column. <strong className="text-ink">Nothing is deleted when sources disagree</strong> — every claim stays visible in the evidence drawer.
        </P>
        <div className="mt-4">
          <Table dense>
            <THead>
              <tr>
                <Th>Column</Th>
                <Th>Meaning</Th>
              </tr>
            </THead>
            <TBody>
              {CLAIM_COLUMNS.map(([c, m]) => (
                <Tr key={c}>
                  <Td primary className="align-top">
                    <Code>{c}</Code>
                  </Td>
                  <Td label="Meaning" className="text-[12.5px] text-ink-2">
                    {m}
                  </Td>
                </Tr>
              ))}
            </TBody>
          </Table>
        </div>
        <P>
          The winner behind each displayed value is marked (<Code>is_winner</Code>); <Code>run_id</Code> on claims, provenance rows, events and document versions ties every change to a connector run, which can be rolled back as a whole. Daily snapshots keep global totals, per-operator and per-country totals, rankings and stage counts for “as of” views and automated regression checks (facilities −5 %, known MW +20 %, one operator +10 GW in a day, one connector &gt; 500 records a day, &gt; 200 location changes a day).
        </P>
      </Section>

      <Section id="scopes" className="scroll-mt-28" title={`${n(1)}Scopes`}>
        <P>
          Only <strong className="text-ink">site scopes</strong> (building, facility, campus) may populate a facility&rsquo;s or project&rsquo;s capacity and investment columns. Portfolio, company, country, metro and unknown scopes are stored and shown as evidence, never summed. Scope is classified deterministically from the sentence (<Code>classifyScope</Code>): company → portfolio → country → metro → campus → building → facility → the record&rsquo;s own scope when the sentence has no signal (structured parsers) → unknown. A campus figure is never written to a building record; a building&rsquo;s figure never stands for its campus.
        </P>
        <div className="mt-4">
          <Table dense>
            <THead>
              <tr>
                <Th>Scope</Th>
                <Th className="hidden sm:table-cell">Populates a site&rsquo;s figures?</Th>
                <Th>Meaning</Th>
              </tr>
            </THead>
            <TBody>
              {CLAIM_SCOPES.map((s) => (
                <Tr key={s}>
                  <Td primary>
                    <ScopeBadge scope={s} short={false} size="sm" />
                  </Td>
                  <Td label="Populates" className="hidden text-[12.5px] sm:table-cell">
                    {isSiteScope(s) ? <span className="text-ok">yes — site scope</span> : <span className="text-ink-3">no — evidence only</span>}
                  </Td>
                  <Td label="Meaning" className="text-[12.5px] text-ink-2">
                    {SCOPE_MEANING[s]}
                    <span className="sm:hidden"> {isSiteScope(s) ? "(site scope)" : "(evidence only)"}</span>
                  </Td>
                </Tr>
              ))}
            </TBody>
          </Table>
        </div>
      </Section>

      <Section id="semantics" className="scroll-mt-28" title={`${n(2)}Capacity semantics`}>
        <P>
          IT load, critical power, utility capacity, grid connection, current power, planned capacity, ultimate build-out and phase capacity are <strong className="text-ink">different predicates and different columns</strong>. The displayed figure carries <Code>capacityScope</Code> and <Code>capacitySemantics</Code> so a page can say what “300 MW” means. Utility and grid figures are supply-side — never IT load and never comparable with IT capacity. When a sentence gives no cue the predicate defaults from the field / record status and the claim is flagged <Code>mw_semantics_default</Code>.
        </P>
        <div className="mt-4 grid gap-4 md:grid-cols-2">
          <Table dense>
            <THead>
              <tr>
                <Th>Capacity predicate</Th>
                <Th>Label</Th>
              </tr>
            </THead>
            <TBody>
              {Object.entries(CAPACITY_PREDICATE_LABEL).map(([k, v]) => (
                <Tr key={k}>
                  <Td primary>
                    <Code>{k}</Code>
                  </Td>
                  <Td label="Label" className="text-[12.5px] text-ink-2">
                    {v}
                  </Td>
                </Tr>
              ))}
            </TBody>
          </Table>
          <Table dense>
            <THead>
              <tr>
                <Th>Investment predicate</Th>
                <Th>Label</Th>
              </tr>
            </THead>
            <TBody>
              {Object.entries(INVESTMENT_PREDICATE_LABEL).map(([k, v]) => (
                <Tr key={k}>
                  <Td primary>
                    <Code>{k}</Code>
                  </Td>
                  <Td label="Label" className="text-[12.5px] text-ink-2">
                    {v}
                  </Td>
                </Tr>
              ))}
            </TBody>
          </Table>
        </div>
        <P>Only project and campus investment may stand for a site; deal values, capex, company investment and country programmes are stored as evidence.</P>
      </Section>

      <Section id="authority" className="scroll-mt-28" title={`${n(3)}Field-level authority`}>
        <P>
          One universal source rank is wrong: OpenStreetMap is excellent for geometry and useless for capacity; PeeringDB is the reference for interconnection; planning filings beat press releases for approved capacity; utility filings beat everything for grid requirements. <Code>FIELD_AUTHORITY</Code> therefore gives a tier per field. Estimates and LLM-only extractions drop one tier; a human review raises one. The table below is rendered from the code the pipeline runs.
        </P>
        <div className="mt-4 -mx-3 overflow-x-auto px-3 sm:mx-0 sm:px-0">
          <table className="dci-table dense min-w-[720px] text-[12px]">
            <thead className="text-left">
              <tr>
                <Th>Field</Th>
                {SOURCE_KINDS.map((k) => (
                  <Th key={k} className="text-center">
                    {SOURCE_KIND_LABEL[k as SourceKind]}
                  </Th>
                ))}
              </tr>
            </thead>
            <TBody>
              {AUTHORITY_FIELDS.map((f) => (
                <tr key={f} className="align-middle">
                  <td className="px-2 py-1.5 pl-0 font-medium capitalize text-ink">{f as AuthorityField}</td>
                  {SOURCE_KINDS.map((k) => (
                    <td key={k} className="px-2 py-1.5 text-center">
                      <TierMark tier={FIELD_AUTHORITY[f][k as SourceKind]} />
                    </td>
                  ))}
                </tr>
              ))}
            </TBody>
          </table>
        </div>
        <ul className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-[11.5px] text-ink-3">
          {(Object.keys(AUTHORITY_TIER_LABEL) as Array<keyof typeof AUTHORITY_TIER_LABEL>).map((t) => (
            <li key={t} className="inline-flex items-center gap-1.5">
              <TierMark tier={t} /> {AUTHORITY_TIER_LABEL[t].replace(/^Tier [A-E] — /, "")}
            </li>
          ))}
        </ul>
      </Section>

      <Section id="quality" className="scroll-mt-28" title={`${n(4)}Sanity engines & quality flags`}>
        <P>
          <Code>capacitySanity</Code> and <Code>investmentSanity</Code> run on every claim. <strong className="text-ink">Blocking</strong> flags keep the figure out of the columns (it stays a claim). <strong className="text-ink">Non-blocking</strong> critical flags assign the figure but open a quality flag prioritised by impact; the figure stays visible and marked until a reviewer resolves or dismisses the flag. Every entity page lists its open flags in the data-quality block.
        </P>
        <div className="mt-4 grid gap-4 md:grid-cols-2">
          <div>
            <h3 className="text-[13.5px] font-semibold text-ink">Blocking</h3>
            <ul className="mt-1.5 divide-y divide-hair text-[12.5px]">
              {BLOCKING.map(([c, m]) => (
                <li key={c} className="py-1.5">
                  <Code>{c}</Code>
                  <div className="text-ink-2">{m}</div>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <h3 className="text-[13.5px] font-semibold text-ink">Non-blocking (flagged)</h3>
            <ul className="mt-1.5 divide-y divide-hair text-[12.5px]">
              {NON_BLOCKING.map(([c, sev, m]) => (
                <li key={c} className="py-1.5">
                  <Code>{c}</Code> <span className={sev === "critical" ? "text-danger" : sev === "warn" ? "text-warn" : "text-ink-3"}>· {sev}</span>
                  <div className="text-ink-2">{m}</div>
                </li>
              ))}
            </ul>
          </div>
        </div>
        <P>Review priority weighs the figure&rsquo;s magnitude, how many pages display it and the number of sources that disagree; the admin console works the queue from the top.</P>
      </Section>

      <Section id="classes" className="scroll-mt-28" title={`${n(5)}Announcement classes (projects)`}>
        <P>
          Before a news article can create a project, <Code>classifyProjectEvent</Code> labels it. Only physical classes may create or modify a project; associated classes attach an event to an identifiable project; the rest never become projects. This is what keeps executive appointments, market-research articles and capex guidance out of the pipeline.
        </P>
        <div className="mt-4 flex flex-col gap-4">
          {CLASS_GROUPS.map((g) => (
            <div key={g.title}>
              <h3 className="text-[13.5px] font-semibold text-ink">{g.title}</h3>
              <div className="mt-1.5 flex flex-wrap gap-1.5">
                {g.classes.map((c) => (
                  <span key={c} className="figure inline-flex h-[22px] items-center rounded-xs border border-hair-2 px-2 text-[11px] text-ink-2">
                    {c}
                  </span>
                ))}
              </div>
              <p className="mt-1.5 text-[12.5px] text-ink-3">{g.note}</p>
            </div>
          ))}
        </div>
      </Section>

      <Section id="lifecycle" className="scroll-mt-28" title={`${n(6)}Lifecycle state machine`}>
        <P>
          <Code>projectTransition(from, to)</Code> accepts forward moves along the funnel; <em>delayed</em> and <em>cancelled</em> are side branches; leaving <em>delayed</em> resumes where the project was. A backward move needs a source that outranks the stored one for the status field, otherwise it is flagged <Code>status_backward</Code>. Stage dates (<Code>permit_filed_on</Code>, <Code>approved_on</Code>, <Code>construction_started_on</Code>, <Code>opened_on</Code>) are set from the announcement that moved the stage — earliest evidence wins.
        </P>
        <ol className="mt-4 flex flex-wrap items-center gap-1.5" aria-label="Lifecycle stages in order">
          {PROJECT_STAGE_ORDER.filter((s) => s !== "delayed" && s !== "cancelled").map((s, i, arr) => (
            <li key={s} className="inline-flex items-center gap-1.5">
              <StageBadge stage={s} size="sm" />
              {i < arr.length - 1 && <span aria-hidden className="text-ink-4">→</span>}
            </li>
          ))}
        </ol>
        <div className="mt-2 flex flex-wrap items-center gap-1.5 text-[12.5px] text-ink-3">
          side branches: <StageBadge stage="delayed" size="sm" /> <StageBadge stage="cancelled" size="sm" />
        </div>
      </Section>

      <Section id="ai-evidence" className="scroll-mt-28" title={`${n(7)}AI evidence levels`}>
        <P>A single keyword never confirms an AI site. Each facility and project carries an evidence level; AI counts and MW on the site cover confirmed + likely only, and figures are published, site-scoped values (containment-aware), never extrapolated.</P>
        <ul className="mt-3 divide-y divide-hair text-[12.5px]">
          {AI_EVIDENCE_LEVELS.map((lvl) => (
            <li key={lvl} className="flex flex-wrap items-start gap-x-3 gap-y-1 py-2">
              <span className="w-[150px] shrink-0">
                <AiMark evidence={lvl} size="sm" />
              </span>
              <span className="min-w-0 flex-1 text-ink-2">
                <strong className="text-ink">{AI_EVIDENCE_LABEL[lvl]}</strong>
                {lvl === "confirmed" && " — a source explicitly describes the site as AI / HPC / GPU / accelerated-computing infrastructure."}
                {lvl === "likely" && " — AI-ready, high-density, liquid- or direct-to-chip cooling or GPU signals in the source."}
                {lvl === "associated" && " — only an AI tenant, customer or company mention; reported separately, not counted as AI infrastructure."}
                {lvl === "unknown" && " — no signal in any source."}
              </span>
            </li>
          ))}
        </ul>
        <P>
          See the <Link href={routes.ai()} className={linkCls}>AI infrastructure index</Link>.
        </P>
      </Section>

      <Section id="coverage-ranking" className="scroll-mt-28" title={`${n(8)}Coverage-aware ranking`}>
        <P>
          Every aggregate uses the containment-aware facility view: a campus whose buildings publish figures contributes no MW itself; a building without a figure under a campus with one is “covered”; a campus with buildings is not counted as an extra facility. Each MW aggregate exposes its <strong className="text-ink">coverage</strong> (facilities with any figure ÷ facilities) and rankings gate on it (≥ 5 facilities, ≥ 35 %). Market concentration (HHI, top-3 / top-5 shares) is computed on facility counts and, separately, on known MW with its coverage — the MW view is labelled partial when coverage is low. Momentum is shown as separate counters (projects announced, MW entering construction, new entrants, openings, cloud additions, grid events), never collapsed into a score.
        </P>
        <P>
          Browse the <Link href={routes.rankings()} className={linkCls}>rankings</Link> and the <Link href={routes.coverage()} className={linkCls}>coverage report</Link>.
        </P>
      </Section>
    </>
  );
}