import type { IR, IRNode } from "../normalize/ir.js";
import { isTextChild, irContentExtent } from "../normalize/ir.js";
import type { PageSnapshot } from "../capture/walker.js";
import type { GenNode } from "./render.js";
import { indexByCid } from "./render.js";
import type { AssetGraph } from "../infer/assets.js";
import type { FontGraph } from "../infer/fonts.js";
import type { Section } from "../infer/sections.js";
import type { CaptureResult } from "../capture/capture.js";
import { WALL_RE } from "../util/captureFailure.js";

export type GateResult = {
  gate: string;
  pass: boolean;
  metrics: Record<string, unknown>;
  issues: string[];
};

// ---------- helpers ----------
function normText(s: string): string { return s.replace(/\s+/g, " ").trim(); }
function pxNum(v: string | undefined): number {
  if (!v) return NaN;
  // include an optional exponent so saturating values like `rounded-full`'s 3.35544e+07px parse
  // as the full magnitude (not just the mantissa 3.35) — pill-radius equivalence depends on it.
  const m = /(-?\d+(?:\.\d+)?(?:e[+-]?\d+)?)/i.exec(v);
  return m ? parseFloat(m[1]!) : NaN;
}
function withinAbs(a: number, b: number, tol: number): boolean { return Math.abs(a - b) <= tol; }
function withinPct(a: number, b: number, pct: number): boolean {
  const m = Math.max(Math.abs(a), Math.abs(b));
  return m === 0 ? true : Math.abs(a - b) / m <= pct;
}
function normColor(v: string | undefined): string { return (v ?? "").replace(/\s+/g, ""); }
function parseRgb(v: string | undefined): [number, number, number, number] | null {
  const m = (v ?? "").match(/rgba?\(([^)]+)\)/i);
  if (!m) return null;
  const p = m[1]!.split(/[,\/]/).map((s) => parseFloat(s.trim()));
  if (p.length < 3 || p.slice(0, 3).some(Number.isNaN)) return null;
  return [p[0]!, p[1]!, p[2]!, p.length >= 4 && !Number.isNaN(p[3]!) ? p[3]! : 1];
}
/** Colors are equivalent within a small per-channel tolerance: re-emitting a
 *  computed color (often defined in oklch/wide-gamut on modern SaaS sites) can
 *  round ±1 per channel. Imperceptible, but a real color difference still fails. */
function colorsClose(a: string | undefined, b: string | undefined): boolean {
  const ca = parseRgb(a), cb = parseRgb(b);
  if (!ca || !cb) return normColor(a) === normColor(b);
  return Math.abs(ca[0] - cb[0]) <= 2 && Math.abs(ca[1] - cb[1]) <= 2 &&
         Math.abs(ca[2] - cb[2]) <= 2 && Math.abs(ca[3] - cb[3]) <= 0.04;
}
function normFontFamily(v: string | undefined): string {
  // Compare effective font stacks: drop quotes/case/whitespace, then dedup tokens
  // preserving order. Sites that build font-family from CSS variables often emit
  // the fallback list twice (e.g. `mono, …, monospace, mono, …, monospace`); the
  // clone resolves it once. Both name the same fonts in the same priority order,
  // so they are equivalent — a real primary-font difference is still caught.
  const toks = (v ?? "").replace(/['"]/g, "").replace(/\s+/g, " ").toLowerCase()
    .split(",").map((s) => s.trim()).filter(Boolean);
  const seen = new Set<string>();
  const out: string[] = [];
  for (const t of toks) if (!seen.has(t)) { seen.add(t); out.push(t); }
  return out.join(",");
}

type SrcNode = { node: IRNode; computed: Record<string, string>; bbox: { x: number; y: number; width: number; height: number }; visible: boolean; directText: string };

function collectSrcNodes(ir: IR, vp: number): SrcNode[] {
  const out: SrcNode[] = [];
  const walk = (node: IRNode): void => {
    const computed = node.computedByVp[vp];
    const bbox = node.bboxByVp[vp];
    if (computed && bbox) {
      let directText = "";
      for (const c of node.children) if (isTextChild(c)) directText += c.text;
      out.push({ node, computed, bbox, visible: !!node.visibleByVp[vp], directText });
    }
    for (const c of node.children) if (!isTextChild(c)) walk(c);
  };
  walk(ir.root);
  return out;
}

function hasVisibleElementChild(node: IRNode, vp: number): boolean {
  for (const c of node.children) {
    if (isTextChild(c)) continue;
    if (c.visibleByVp[vp]) return true;
  }
  return false;
}

/** A source text node that the capture painted VISIBLE but the clone rendered HIDDEN at the same
 *  viewport is a high-signal regression: the words are in the markup yet fall in an invisible gen
 *  subtree (off-viewport-shifted, banded-hidden, or width-frozen off-screen). Cheap to detect —
 *  the gen node exists (matched by cid) but reports `visible === false`. Counts DISTINCT source
 *  cids over the run (a node hidden at several viewports counts once) so the number reads as
 *  "how many text nodes went dark", not "hidden-node×viewport". Non-blocking: reported as a metric
 *  only. Pure + input-driven → deterministic. */
export function countVisibleInCaptureHiddenInClone(
  ir: IR,
  genSnaps: Record<number, PageSnapshot>,
  viewports: number[],
): number {
  const hiddenCids = new Set<string>();
  for (const vp of viewports) {
    if (!genSnaps[vp]) continue;
    const gen = indexByCid(genSnaps[vp]!);
    for (const s of collectSrcNodes(ir, vp)) {
      if (!s.visible) continue;
      if (normText(s.directText).length === 0) continue;
      const g = gen.get(s.node.id);
      if (g && !g.visible) hiddenCids.add(s.node.id);
    }
  }
  return hiddenCids.size;
}

// ---------- Pollution gate (stage 2): is the captured page degenerate? ----------
// A clone can pass every structural gate while faithfully reproducing the WRONG
// page: an egress/bot wall, a near-empty shell, or a cookie/consent modal that was
// never dismissed (the clone then reproduces the modal, so the perceptual gate is
// fooled too). This gate flags those captures so a "perfect" score can't hide them.
// WALL_RE lives in util/captureFailure.ts — shared with the capture-side fast-fail so
// the abort and the grade can never drift on what counts as a wall.

export function gatePollution(ir: IR, capture: CaptureResult, viewports: number[]): GateResult {
  const issues: string[] = [];
  const nodeCount = ir.doc.nodeCount;

  // Collect all visible source text once.
  let textChars = 0;
  const textParts: string[] = [];
  const walk = (node: IRNode): void => {
    const anyVisible = Object.values(node.visibleByVp).some(Boolean);
    for (const c of node.children) {
      if (isTextChild(c)) { if (anyVisible) { const t = normText(c.text); if (t) { textParts.push(t); textChars += t.length; } } }
      else walk(c);
    }
  };
  walk(ir.root);
  const allText = textParts.join(" ");
  const wall = WALL_RE.test(allText);

  // Overlay remaining after dismissal (max across viewports), and shortest page.
  // `blocking` = a full-viewport overlay that STILL scroll-locks the page (a modal
  // we could not clear); mere overlay presence (a legit fixed hero/app banner) is
  // tracked but not failed, to avoid false positives on real fixed content.
  let overlaysRemaining = 0;
  let blocking = capture.dismissal?.blocking ?? false;
  for (const pv of capture.perViewport) { overlaysRemaining = Math.max(overlaysRemaining, pv.overlaysRemaining ?? 0); blocking = blocking || !!pv.blocking; }
  let minHeightRatio = Infinity;
  let maxHeightRatio = 0;
  for (const pv of capture.perViewport) {
    if (pv.height > 0) {
      const ratio = pv.scrollHeight / pv.height;
      minHeightRatio = Math.min(minHeightRatio, ratio);
      maxHeightRatio = Math.max(maxHeightRatio, ratio);
    }
  }
  if (!Number.isFinite(minHeightRatio)) minHeightRatio = 1;

  // Scroll-locked-capture contradiction: an email-capture/promo popup that sets
  // body{overflow:hidden;height:100vh} collapses `document.scrollHeight` to EXACTLY the viewport
  // height at EVERY width (ratio ~1.0 across the board) — yet the real page's IN-FLOW content
  // (the IR's sections) still lays out several viewports tall. A genuine one-screen landing page
  // has content extent ~= its scrollHeight, so this only fires when the two disagree: captured
  // scrollHeight pinned to one viewport WHILE the IR content spans multiple. That is a
  // scroll-locked, polluted capture — the overlay detector should have caught it, so fail loudly.
  let maxContentRatio = 0;
  for (const pv of capture.perViewport) {
    if (pv.height > 0) maxContentRatio = Math.max(maxContentRatio, irContentExtent(ir.root, pv.viewport) / pv.height);
  }
  // scrollHeight never exceeds ~1 viewport at any width, but the IR content is 2+ viewports tall.
  const scrollLockedContradiction = maxHeightRatio > 0 && maxHeightRatio < 1.15 && maxContentRatio >= 2;

  // Degenerate signals. Calibrated against real captures: an egress/bot wall is
  // ~3 nodes / ~24 chars; the most minimal legitimate page in the suite
  // (michaelcole.me) is 26 nodes / 640 chars. Thresholds sit safely between.
  if (nodeCount < 12) issues.push(`degenerate DOM: only ${nodeCount} nodes`);
  if (wall && nodeCount < 220) issues.push("bot/egress wall text on a small page");
  if (textChars < 60 && nodeCount < 50) issues.push(`near-empty page: ${textChars} visible text chars, ${nodeCount} nodes`);
  if (blocking) issues.push("a full-viewport modal still scroll-locks the page after dismissal");
  if (scrollLockedContradiction) issues.push(`scroll-locked capture: scrollHeight pinned to ~1 viewport at every width while IR content spans ${round2(maxContentRatio)} viewports`);

  return {
    gate: "pollution",
    pass: issues.length === 0,
    metrics: {
      nodeCount, visibleTextChars: textChars, wallTextDetected: wall,
      overlaysRemaining, blocking, minScrollHeightRatio: round2(minHeightRatio),
      maxScrollHeightRatio: round2(maxHeightRatio), maxContentExtentRatio: round2(maxContentRatio),
      dismissedCount: capture.dismissal?.dismissed.length ?? 0,
      overlaysRemoved: capture.dismissal?.removed ?? 0,
      videoStills: capture.dismissal?.videoStills ?? 0,
    },
    issues,
  };
}

// ---------- Gate 1: capture completeness ----------
export function gate1Capture(ir: IR, viewports: number[], artifacts: { screenshots: Record<number, boolean>; assetsPresent: boolean; fontsPresent: boolean }): GateResult {
  const issues: string[] = [];
  let rootOk = ir.root && ir.root.tag === "body";
  for (const vp of viewports) {
    if (!ir.doc.perViewport[vp]) issues.push(`missing perViewport ${vp}`);
    if (!artifacts.screenshots[vp]) issues.push(`missing screenshot ${vp}`);
    if (!((ir.doc.perViewport[vp]?.scrollHeight ?? 0) > 0)) issues.push(`no scrollHeight ${vp}`);
  }
  if (!rootOk) issues.push("no visible DOM root");
  if (!artifacts.assetsPresent) issues.push("assets-discovered missing");
  if (!artifacts.fontsPresent) issues.push("fonts-discovered missing");
  return { gate: "capture", pass: issues.length === 0, metrics: { viewports }, issues };
}

// ---------- Gate 2: asset/font equivalence ----------
export function gate2Assets(assetGraph: AssetGraph, fontGraph: FontGraph, gen: { remoteRefs: string[]; failed404: string[] }): GateResult {
  const issues: string[] = [];
  let unclassified = 0, zeroByte = 0, skippedNoReason = 0;
  for (const e of assetGraph.entries) {
    if (e.type === "css") continue;
    if (e.classification !== "downloaded" && e.classification !== "skipped") unclassified++;
    if (e.classification === "downloaded" && e.bytes <= 0) zeroByte++;
    if (e.classification === "skipped" && !e.reason) skippedNoReason++;
  }
  if (unclassified > 0) issues.push(`${unclassified} unclassified assets`);
  if (zeroByte > 0) issues.push(`${zeroByte} zero-byte downloaded assets`);
  if (skippedNoReason > 0) issues.push(`${skippedNoReason} skipped assets without reason`);
  if (gen.remoteRefs.length > 0) issues.push(`${gen.remoteRefs.length} generated refs point to remote origin`);
  if (gen.failed404.length > 0) issues.push(`${gen.failed404.length} generated asset refs missing (HTTP >= 400 or file absent from export)`);
  const fontsResolvedOrFallback = fontGraph.entries.every((f) => f.status === "resolved" || (f.status === "fallback" && f.reason));
  if (!fontsResolvedOrFallback) issues.push("font declarations not resolved/fallback-recorded");
  return {
    gate: "asset_font",
    pass: issues.length === 0,
    metrics: {
      total: assetGraph.entries.filter((e) => e.type !== "css").length,
      downloaded: assetGraph.entries.filter((e) => e.classification === "downloaded" && e.type !== "css").length,
      skipped: assetGraph.entries.filter((e) => e.classification === "skipped" && e.type !== "css").length,
      remoteRefs: gen.remoteRefs.length, failed404: gen.failed404.length,
      failed404Sample: [...new Set(gen.failed404)].slice(0, 6),
      fonts: fontGraph.entries.length,
    },
    issues,
  };
}

// ---------- Gate 3: rendered DOM equivalence ----------
export function gate3Dom(ir: IR, genSnaps: Record<number, PageSnapshot>, viewports: number[], sourceOrigin: string): GateResult {
  const issues: string[] = [];
  let totalVisible = 0, matched = 0;
  let textTotal = 0, textPresent = 0;
  let linksTotal = 0, linksOk = 0;
  let mediaTotal = 0, mediaOk = 0;
  let inventedText = 0;

  // All source text (visible or not) — the deterministic compiler only ever
  // replays captured text, so this is the authoritative "not invented" set.
  const allSrcText = new Set<string>();
  for (const vp of viewports) {
    for (const s of collectSrcNodes(ir, vp)) {
      const t = normText(s.directText);
      if (t.length > 0) allSrcText.add(t);
    }
  }

  for (const vp of viewports) {
    const gen = genSnaps[vp] ? indexByCid(genSnaps[vp]!) : new Map<string, GenNode>();
    const srcNodes = collectSrcNodes(ir, vp);
    const genTextAll = normText([...gen.values()].filter((g) => g.visible).map((g) => g.text).join(" "));
    const srcTextSet = new Set<string>();

    for (const s of srcNodes) {
      if (!s.visible) continue;
      totalVisible++;
      const g = gen.get(s.node.id);
      if (g && (g.tag === s.node.tag || isValidRetag(s.node.tag, g.tag))) matched++;

      const t = normText(s.directText);
      if (t.length > 0) {
        textTotal++;
        srcTextSet.add(t);
        if (genTextAll.includes(t)) textPresent++;
      }
      if (s.node.tag === "a" && s.node.attrs.href) {
        linksTotal++;
        const srcHref = normHref(s.node.attrs.href, sourceOrigin);
        const genHref = g ? normHref(g.attrs.href ?? "", sourceOrigin) : "";
        if (srcHref === genHref) linksOk++;
      }
      if (/^(img|video|svg)$/.test(s.node.tag)) {
        mediaTotal++;
        if (s.node.tag === "svg") { if (g) mediaOk++; }
        else {
          const src = g?.attrs.src ?? "";
          if (g && (src === "" || !src.startsWith("http") || src.includes("127.0.0.1") || src.startsWith("data:"))) mediaOk++;
        }
      }
    }

    // invented visible text > 20 chars not present anywhere in the source DOM
    for (const g of gen.values()) {
      if (!g.visible) continue;
      const t = normText(g.text);
      if (t.length > 20 && !allSrcText.has(t)) {
        const inAnySrc = [...allSrcText].some((s) => s.includes(t) || t.includes(s));
        if (!inAnySrc) inventedText++;
      }
    }
  }

  // Non-blocking, high-signal diagnostic: source text the capture painted VISIBLE that the clone
  // renders HIDDEN at the same viewport (off-screen-shifted / banded / width-frozen subtree). Does
  // NOT gate pass — text presence already covers markup fidelity — but surfaces the "went dark"
  // count so a banner/feed row vanishing is legible in the report instead of hiding inside a 99.x.
  const textHiddenInClone = countVisibleInCaptureHiddenInClone(ir, genSnaps, viewports);

  const matchPct = totalVisible ? matched / totalVisible : 1;
  const textPct = textTotal ? textPresent / textTotal : 1;
  const linkPct = linksTotal ? linksOk / linksTotal : 1;
  const mediaPct = mediaTotal ? mediaOk / mediaTotal : 1;

  if (textPct < 0.999) issues.push(`text presence ${(textPct * 100).toFixed(1)}% (< 100%)`);
  if (matchPct < 0.98) issues.push(`node match ${(matchPct * 100).toFixed(1)}% (< 98%)`);
  if (linkPct < 0.999) issues.push(`link href preserve ${(linkPct * 100).toFixed(1)}%`);
  if (mediaPct < 0.999) issues.push(`media mapping ${(mediaPct * 100).toFixed(1)}%`);
  if (inventedText > 0) issues.push(`${inventedText} invented visible text nodes > 20 chars`);

  return {
    gate: "dom",
    pass: issues.length === 0,
    metrics: {
      nodeMatchPct: round4(matchPct), textPresentPct: round4(textPct),
      linkPct: round4(linkPct), mediaPct: round4(mediaPct),
      totalVisible, matched, textTotal, textPresent, linksTotal, mediaTotal, inventedText,
      textHiddenInClone,
    },
    issues,
  };
}

// The generator deterministically retags certain source elements to a neutral
// div/span for valid HTML / hydration correctness (a <button>/<a> nested in an
// interactive ancestor; a <ul>/<ol>/<p>/<hN> whose JS-built children violate its
// content model). Those retags preserve cid, geometry, styles, and content — the
// node is faithfully reproduced, just with an HTML-valid tag — so the DOM gate must
// credit them as matched rather than penalize the compiler's own correct transform.
function isValidRetag(srcTag: string, genTag: string): boolean {
  if (genTag !== "div" && genTag !== "span") return false;
  if (srcTag === "a" || srcTag === "button") return true; // nested-interactive → div/span
  return genTag === "div" && /^(ul|ol|menu|dl|p|h[1-6])$/.test(srcTag); // content-model → div
}

export function normHref(href: string, origin: string): string {
  if (!href) return "";
  // A `javascript:*` href is a script trigger, not a navigable URL. Generation emits an inert `#`
  // for it (React blocks the literal), so treat every javascript: href — on either side — as `#`
  // and let the two sides match instead of failing on the un-reproducible script string.
  if (/^\s*javascript:/i.test(href)) return "#";
  if (href.startsWith("#")) return href;
  try {
    const u = new URL(href, origin);
    return (u.origin + u.pathname).replace(/\/$/, "") + (u.hash || "");
  } catch { return href; }
}

// ---------- Gate 4: computed style equivalence ----------
const EXACT_PROPS = ["display", "position", "flexDirection", "justifyContent", "alignItems", "textAlign", "textTransform", "fontWeight", "zIndex"];
const COLOR_PROPS = ["color", "backgroundColor"];
const PX2_PROPS = ["fontSize", "lineHeight", "letterSpacing", "borderTopLeftRadius"];
const PILL_PX = 1000; // radius at/above which a corner is fully rounded — pill ≡ rounded-full
// padding + gap are authored spacing — kept exact. MARGINS are deferred to the layout gate:
// auto margins resolve from free space (geometry), so a flowed box shifts them to a
// visually-equivalent but different px; the box's PLACEMENT is what matters, enforced there.
const PX4_PROPS = ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "gap"];
const PCT_PROPS = ["width", "height"];

export function gate4Style(ir: IR, genSnaps: Record<number, PageSnapshot>, viewports: number[]): GateResult {
  let nodesChecked = 0, nodesPass = 0;
  const propFail: Record<string, number> = {};
  const issues: string[] = [];

  for (const vp of viewports) {
    const gen = genSnaps[vp] ? indexByCid(genSnaps[vp]!) : new Map<string, GenNode>();
    const srcNodes = collectSrcNodes(ir, vp);
    for (const s of srcNodes) {
      if (!s.visible) continue;
      const g = gen.get(s.node.id);
      if (!g || g.tag !== s.node.tag) continue;
      nodesChecked++;
      let nodeOk = true;
      const fails: string[] = [];

      for (const p of EXACT_PROPS) {
        // `flex-start`/`flex-end` and `start`/`end` are equivalent in flex/grid layout
        // (and render identically — the perceptual gate confirms). A source `end` vs a
        // Tailwind `items-end` (→`flex-end`) is not a real divergence, so normalize the
        // synonym before comparing alignment keywords.
        const norm = ALIGN_PROPS.has(p) ? normAlign : (x: string | undefined) => x;
        if (!cmpExact(norm(s.computed[p]), norm(g.computed[p]))) { nodeOk = false; fails.push(p); }
      }
      for (const p of COLOR_PROPS) {
        if (!colorsClose(s.computed[p], g.computed[p])) { nodeOk = false; fails.push(p); }
      }
      if (normFontFamily(s.computed.fontFamily) !== normFontFamily(g.computed.fontFamily)) { nodeOk = false; fails.push("fontFamily"); }
      for (const p of PX2_PROPS) {
        // A "pill" radius (≥ PILL_PX, e.g. the conventional 9999px) and Tailwind's `rounded-full`
        // (which compiles to a saturating 3.4e38px) fully round the corner identically — visually
        // equal, only numerically far apart. Treat any two such large radii as equivalent so the
        // idiomatic `rounded-full` doesn't trip the exact-px compare; real radii stay ±2px.
        if (p === "borderTopLeftRadius" && pxNum(s.computed[p] ?? "") >= PILL_PX && pxNum(g.computed[p] ?? "") >= PILL_PX) continue;
        const eq = p === "letterSpacing"
          ? letterSpacingEquivalent(s.computed[p], g.computed[p])
          : cmpNum(s.computed[p], g.computed[p], 2, 0);
        if (!eq) { nodeOk = false; fails.push(p); }
      }
      for (const p of PX4_PROPS) {
        // `gap: normal` is the initial value and resolves to 0 for flex/grid, so it
        // is equivalent to `gap: 0px`; the clone often renders one where the source
        // computed the other. Normalize before comparing (real gaps still checked).
        const a = p === "gap" ? (s.computed[p] ?? "").replace(/\bnormal\b/g, "0px") : s.computed[p];
        const b = p === "gap" ? (g.computed[p] ?? "").replace(/\bnormal\b/g, "0px") : g.computed[p];
        if (!cmpNum(a, b, 4, 0)) { nodeOk = false; fails.push(p); }
      }
      // width/height (PCT_PROPS) are NOT compared here: rendered box size is geometry, enforced
      // directly by the layout gate (per-leaf size + section bbox) and the perceptual gate. A
      // content-driven box (width/height:auto) reflows to a visually-equivalent but not
      // byte-identical px — the right bar is "same place + size + pixels", not exact computed CSS.
      // background image presence
      const sBg = (s.computed.backgroundImage ?? "none") !== "none";
      const gBg = (g.computed.backgroundImage ?? "none") !== "none";
      if (sBg !== gBg) { nodeOk = false; fails.push("backgroundImage"); }

      if (nodeOk) nodesPass++;
      else {
        for (const f of fails) propFail[f] = (propFail[f] ?? 0) + 1;
        if (process.env.STYLE_DEBUG && (process.env.STYLE_DEBUG === "*" || fails.includes(process.env.STYLE_DEBUG))) {
          const dp = process.env.STYLE_DEBUG === "*" ? fails : [process.env.STYLE_DEBUG];
          console.error(`[style] vp=${vp} cid=${s.node.id} tag=${s.node.tag} fails=${fails.join(",")} ` +
            dp.map((p) => `${p}: src='${s.computed[p]}' gen='${g.computed[p]}'`).join(" | "));
        }
      }
    }
  }

  const passPct = nodesChecked ? nodesPass / nodesChecked : 1;
  if (passPct < 0.95) issues.push(`computed style pass ${(passPct * 100).toFixed(1)}% (< 95%)`);
  const topFails = Object.entries(propFail).sort((a, b) => b[1] - a[1]).slice(0, 12);
  return {
    gate: "style",
    pass: issues.length === 0,
    metrics: { passPct: round4(passPct), nodesChecked, nodesPass, topFailingProps: Object.fromEntries(topFails) },
    issues,
  };
}

function cmpExact(a: string | undefined, b: string | undefined): boolean {
  if (a === undefined) return true; // source didn't constrain it
  return (a ?? "") === (b ?? "");
}
const ALIGN_PROPS = new Set(["alignItems", "justifyContent"]);
/** Collapse flex-relative alignment synonyms to their writing-mode keyword
 *  (`flex-start`→`start`, `flex-end`→`end`) — equivalent in standard layouts. */
function normAlign(v: string | undefined): string | undefined {
  return v === undefined ? v : v.replace(/^flex-/, "");
}
function cmpNum(a: string | undefined, b: string | undefined, abs: number, pct: number): boolean {
  if (a === undefined) return true;
  const na = pxNum(a), nb = pxNum(b);
  if (Number.isNaN(na) || Number.isNaN(nb)) return (a ?? "") === (b ?? "");
  return withinAbs(na, nb, abs) || (pct > 0 && withinPct(na, nb, pct));
}

/** Compare two computed `letter-spacing` values within the ±2px style tolerance, treating the keyword
 *  `normal` as `0px`. `letter-spacing: normal` is the initial value and adds no extra spacing (it
 *  computes to 0), so `normal` ≡ `0px`; crucially, Chromium serializes a computed `letter-spacing: 0`
 *  BACK as the keyword `normal`, so a genuinely-zero (or sub-0.1px, snapped-to-zero) tracking shows up
 *  as `normal` on one side and `0px` on the other — a spelling difference that `cmpNum` alone reads as
 *  a NaN → exact-string mismatch. Normalizing the keyword before the numeric compare removes that false
 *  failure while a real tracking delta (> 2px) still fails. Mirrors the `gap: normal → 0px` handling. */
export function letterSpacingEquivalent(a: string | undefined, b: string | undefined): boolean {
  if (a === undefined) return true;
  const norm = (v: string | undefined): string => (v ?? "").replace(/\bnormal\b/g, "0px");
  return cmpNum(norm(a), norm(b), 2, 0);
}

// ---------- Gate 5: layout / section equivalence ----------
export function gate5Layout(ir: IR, genSnaps: Record<number, PageSnapshot>, sections: Section[], viewports: number[], reflow = false): GateResult {
  const issues: string[] = [];
  const perVp: Record<number, Record<string, unknown>> = {};

  for (const vp of viewports) {
    const genSnap = genSnaps[vp];
    if (!genSnap) { issues.push(`no generated render at ${vp}`); continue; }
    const gen = indexByCid(genSnap);
    const srcHeight = ir.doc.perViewport[vp]?.scrollHeight ?? 0;
    const genHeight = genSnap.doc.scrollHeight;
    const heightDelta = srcHeight ? Math.abs(srcHeight - genHeight) / srcHeight : 0;

    // sections present + order + bbox
    let sectionsPresent = 0, sectionsBboxOk = 0;
    const srcSectionYs: number[] = [], genSectionYs: number[] = [];
    for (const sec of sections) {
      const g = gen.get(sec.nodeId);
      const srcBox = sec.bboxByVp[vp];
      if (g) {
        sectionsPresent++;
        if (srcBox) {
          srcSectionYs.push(srcBox.y);
          genSectionYs.push(g.bbox.y);
          const yOk = withinAbs(srcBox.y, g.bbox.y, Math.max(24, srcHeight * 0.03));
          const hOk = withinPct(srcBox.height, g.bbox.height, 0.08);
          const wOk = withinPct(srcBox.width, g.bbox.width, 0.02);
          if (yOk && hOk && wOk) sectionsBboxOk++;
        }
      }
    }
    // The clone must reproduce the source's vertical section order — not be sorted
    // ascending: a fixed/sticky nav can legitimately sit above the fold (y<0) after
    // the main section in DOM order. Compare gen's ordering against the source's.
    const orderOk = sameOrder(srcSectionYs, genSectionYs);

    // leaf bbox position (median delta) AND size (per-leaf width/height within a visual tolerance).
    // Rendered SIZE fidelity lives here, not in the computed-style gate: content-driven boxes
    // (width/height:auto) reflow to visually-equivalent but not byte-identical px, so the right
    // bar is "renders at the same place and size" (here + the perceptual gate), not exact CSS px.
    const srcNodes = collectSrcNodes(ir, vp);
    const deltas: number[] = [];
    let sizeChecked = 0, sizeOk = 0;
    for (const s of srcNodes) {
      if (!s.visible) continue;
      if (hasVisibleElementChild(s.node, vp)) continue; // leaf only
      const g = gen.get(s.node.id);
      if (!g) continue;
      const d = Math.abs(s.bbox.x - g.bbox.x) + Math.abs(s.bbox.y - g.bbox.y);
      deltas.push(d / 2);
      sizeChecked++;
      const wOk = withinAbs(s.bbox.width, g.bbox.width, Math.max(8, s.bbox.width * 0.06));
      const hOk = withinAbs(s.bbox.height, g.bbox.height, Math.max(8, s.bbox.height * 0.06));
      if (wOk && hOk) sizeOk++;
    }
    const medianDelta = median(deltas);
    const leafSizeOkPct = sizeChecked ? sizeOk / sizeChecked : 1;

    const sectionsBboxPct = sections.length ? sectionsBboxOk / sections.length : 1;
    perVp[vp] = {
      srcHeight, genHeight, heightDeltaPct: round4(heightDelta),
      sectionsTotal: sections.length, sectionsPresent, sectionsBboxOkPct: round4(sectionsBboxPct),
      orderOk, leafMedianDelta: round2(medianDelta), leafSamples: deltas.length, leafSizeOkPct: round4(leafSizeOkPct),
    };

    if (heightDelta > 0.05) issues.push(`vp${vp} page height delta ${(heightDelta * 100).toFixed(1)}% (> 5%)`);
    if (sectionsPresent < sections.length) issues.push(`vp${vp} ${sections.length - sectionsPresent} sections missing`);
    if (!orderOk) issues.push(`vp${vp} section order mismatch`);
    if (sections.length && sectionsBboxPct < 0.9) issues.push(`vp${vp} section bbox ok ${(sectionsBboxPct * 100).toFixed(0)}% (< 90%)`);
    // leaf-POSITION median tolerance is generous (the perceptual screenshot gate is the strict
    // visual bar for placement; a small median drift from letting geometry flow is invisible there
    // — section structure + leaf SIZE below stay tight). A large drift still fails. In the opt-in
    // reflow trade (flowed heights re-position content vertically) the bar widens to 2% of the page
    // height (≈160px on a tall mobile page vs the ~72px benign drift) — backstopped by the page-height
    // (≤5%), section-bbox (≥90%), leaf-size (≥92%) and perceptual (≤10–14%) gates, which all stay
    // strict and catch any REAL break (content lost, mis-sized, or visually displaced).
    const posTol = reflow ? Math.max(16, Math.round(srcHeight * 0.02)) : 16;
    if (medianDelta > posTol) issues.push(`vp${vp} leaf median bbox delta ${medianDelta.toFixed(1)}px (> ${posTol}px)`);
    if (leafSizeOkPct < 0.92) issues.push(`vp${vp} leaf size ok ${(leafSizeOkPct * 100).toFixed(0)}% (< 92%)`);
  }

  return { gate: "layout", pass: issues.length === 0, metrics: { perViewport: perVp }, issues };
}

// ---------- Responsive gate: behaviour at NON-captured widths ----------
// The other layout gates render the clone only at the captured widths (375/768/1280/1920),
// so per-node baked-px output scores perfectly there even though it stairsteps between bands
// and off-centres beyond the widest one (the "not truly responsive" failure). This gate
// renders the clone at widths the grader never sampled and asserts source-independent
// invariants that any faithful responsive clone must hold:
//   1. no horizontal overflow the source didn't have (a baked px wider than the window);
//   2. a container the source centres stays centred at every width (not frozen at one band's
//      margins);
//   3. a full-bleed section keeps filling the window.
type ParentOf = Map<string, IRNode | undefined>;
function buildParentMap(ir: IR): ParentOf {
  const m: ParentOf = new Map();
  const walk = (node: IRNode, parent: IRNode | undefined): void => {
    m.set(node.id, parent);
    for (const c of node.children) if (!isTextChild(c)) walk(c, node);
  };
  walk(ir.root, undefined);
  return m;
}
function contentBox(bbox: { x: number; width: number }, cs: Record<string, string>): { left: number; right: number; width: number } {
  const padL = pxNum(cs.paddingLeft) || 0, padR = pxNum(cs.paddingRight) || 0;
  const bL = pxNum(cs.borderLeftWidth) || 0, bR = pxNum(cs.borderRightWidth) || 0;
  const left = bbox.x + padL + bL, right = bbox.x + bbox.width - padR - bR;
  return { left, right, width: right - left };
}
/** Is this source node horizontally centred in its container at `vp` (block-level, in-flow,
 *  symmetric gaps, room to centre)? Mirrors the generator's centring detection. */
function srcCentered(node: IRNode, parent: IRNode, vp: number): boolean {
  const cs = node.computedByVp[vp], nb = node.bboxByVp[vp];
  const pcs = parent.computedByVp[vp], pb = parent.bboxByVp[vp];
  if (!cs || !nb || !pcs || !pb) return false;
  if (!/^(block|flow-root|list-item|flex|grid)$/.test(cs.display || "")) return false;
  if ((cs.position || "static") !== "static" && (cs.position || "static") !== "relative") return false;
  if (/(?:^|-)(?:flex|grid)$/.test(pcs.display || "")) return false; // flex/grid item — parent positions it
  const pc = contentBox(pb, pcs);
  const gapL = nb.x - pc.left, gapR = pc.right - (nb.x + nb.width);
  return gapL > 2 && gapR > 2 && Math.abs(gapL - gapR) <= 1.5 && nb.width < pc.width - 4;
}
/** Does this source node span the full viewport width at ≥2 captured widths (a full-bleed bar)? */
function srcFullBleed(node: IRNode, viewports: number[]): boolean {
  let n = 0;
  for (const vp of viewports) {
    const nb = node.bboxByVp[vp];
    if (!nb) continue;
    if (Math.abs(nb.x) <= 2 && Math.abs(nb.width - vp) <= 2) n++;
    else if (nb.width > 0) return false;
  }
  return n >= 2;
}

export function gateResponsive(ir: IR, probes: Record<number, PageSnapshot>, viewports: number[]): GateResult {
  const issues: string[] = [];
  const widths = Object.keys(probes).map(Number).sort((a, b) => a - b);
  if (widths.length === 0) return { gate: "responsive", pass: true, metrics: { probed: 0, na: true }, issues };

  // Source horizontal-overflow baseline: did the captured page itself scroll horizontally?
  // (A site that legitimately overflows at capture is exempt from the overflow invariant.)
  const srcOverflows = viewports.some((vp) => {
    const pv = ir.doc.perViewport[vp];
    return pv ? pv.scrollWidth > vp + 3 : false;
  });

  const canonical = ir.doc.canonicalViewport;
  const parentOf = buildParentMap(ir);
  const centeredCids: string[] = [];
  const fullBleedCids: string[] = [];
  const walk = (node: IRNode): void => {
    const parent = parentOf.get(node.id);
    if (parent && srcCentered(node, parent, canonical)) centeredCids.push(node.id);
    if (srcFullBleed(node, viewports)) fullBleedCids.push(node.id);
    for (const c of node.children) if (!isTextChild(c)) walk(c);
  };
  walk(ir.root);

  let overflowViolations = 0, centerChecks = 0, centerViolations = 0, bleedChecks = 0, bleedViolations = 0;
  const samples: string[] = [];
  for (const w of widths) {
    const snap = probes[w]!;
    const idx = indexByCid(snap);
    // (1) no unexpected horizontal overflow
    if (!srcOverflows && snap.doc.scrollWidth > w + Math.max(3, w * 0.01)) {
      overflowViolations++;
      if (samples.length < 8) samples.push(`w=${w}: scrollWidth ${snap.doc.scrollWidth} > viewport ${w} (horizontal overflow)`);
    }
    // (2) centred containers stay centred
    for (const cid of centeredCids) {
      const g = idx.get(cid); if (!g || !g.visible) continue;
      const parent = parentOf.get(cid); const pg = parent ? idx.get(parent.id) : undefined;
      if (!pg) continue;
      const pc = contentBox(pg.bbox, pg.computed);
      if (g.bbox.width >= pc.width - 4) continue; // fills here (below its cap) → nothing to centre
      const gapL = g.bbox.x - pc.left, gapR = pc.right - (g.bbox.x + g.bbox.width);
      centerChecks++;
      if (Math.abs(gapL - gapR) > Math.max(2, pc.width * 0.01)) {
        centerViolations++;
        if (samples.length < 8) samples.push(`w=${w} cid=${cid}: off-centre (left ${Math.round(gapL)} vs right ${Math.round(gapR)})`);
      }
    }
    // (3) full-bleed sections keep filling the window
    for (const cid of fullBleedCids) {
      const g = idx.get(cid); if (!g || !g.visible) continue;
      bleedChecks++;
      if (Math.abs(g.bbox.width - w) > Math.max(3, w * 0.01)) {
        bleedViolations++;
        if (samples.length < 8) samples.push(`w=${w} cid=${cid}: full-bleed width ${Math.round(g.bbox.width)} != viewport ${w}`);
      }
    }
  }

  if (overflowViolations > 0) issues.push(`${overflowViolations} probe width(s) overflow horizontally`);
  // A counted violation already cleared the sub-pixel geometric tolerance, so it is a real
  // divergence; tolerate only a ~5% fraction (a rare breakpoint that legitimately re-aligns).
  if (centerViolations > Math.floor(centerChecks * 0.05)) issues.push(`${centerViolations}/${centerChecks} centred-container checks off-centre at non-captured widths`);
  if (bleedViolations > Math.floor(bleedChecks * 0.05)) issues.push(`${bleedViolations}/${bleedChecks} full-bleed checks don't fill the window`);

  return {
    gate: "responsive",
    pass: issues.length === 0,
    metrics: {
      probeWidths: widths, srcOverflows,
      overflowViolations, centerChecks, centerViolations, bleedChecks, bleedViolations,
      centeredContainers: centeredCids.length, fullBleedSections: fullBleedCids.length,
      samples,
    },
    issues,
  };
}

function isSortedAscending(arr: number[]): boolean {
  for (let i = 1; i < arr.length; i++) if (arr[i]! < arr[i - 1]! - 1) return false;
  return true;
}
/** True when `b` orders its elements the same way `a` does (same argsort) — i.e.
 *  the clone reproduces the source's relative vertical section order. */
function sameOrder(a: number[], b: number[]): boolean {
  if (a.length !== b.length) return false;
  const idx = a.map((_, i) => i);
  const byA = [...idx].sort((x, y) => a[x]! - a[y]!);
  const byB = [...idx].sort((x, y) => b[x]! - b[y]!);
  return byA.every((v, i) => v === byB[i]);
}
function median(arr: number[]): number {
  if (arr.length === 0) return 0;
  const s = [...arr].sort((a, b) => a - b);
  const mid = Math.floor(s.length / 2);
  return s.length % 2 ? s[mid]! : (s[mid - 1]! + s[mid]!) / 2;
}
function round2(n: number): number { return Math.round(n * 100) / 100; }
function round4(n: number): number { return Math.round(n * 10000) / 10000; }