/**
 * Source-vs-clone Tailwind diff for the cloner (Stage 4/5 instrument).
 *
 * For a Tailwind-built source, the live `class` attribute is the AUTHORED fluid intent —
 * the exact utility our generator should have inferred. This tool rebuilds the IR (which now carries
 * the source `class` as `srcClass`) and our emitted classes (`buildTailwind().classOf`) IN-PROCESS,
 * both keyed by node id, so the per-node diff is perfectly aligned with zero live-probe flakiness.
 *
 * It then NORMALIZES away faithful, unavoidable differences (colors, design-system spacing tokens,
 * data-*, no-preflight arbitrary transforms) and focuses the diff on the LAYOUT/SIZING utility
 * families — where the class name itself is the signal — to surface the real misses: places we baked
 * per-viewport px where the source expressed ONE fluid rule. Misses are clustered by axis + source
 * utility and ranked by frequency, so one law fixes many nodes.
 *
 *   npx tsx scripts/tw-diff.ts [runDir=output/sample/.clone] [--axis=width] [--samples=N] [--json=path]
 *
 * Run from compiler/.
 */
import { join, resolve } from "node:path";
import { writeFileSync } from "node:fs";
import { buildIR, isTextChild, type IR, type IRNode } from "../src/normalize/ir.js";
import { buildTailwind } from "../src/generate/tailwind.js";
import { buildColorPalette } from "../src/infer/semanticTokens.js";
import { buildAssetGraph, type AssetGraph } from "../src/infer/assets.js";
import { readJSON } from "../src/util/fsx.js";
import type { CaptureResult } from "../src/capture/capture.js";

function buildAssetMap(assetGraph: AssetGraph): Map<string, string> {
  const m = new Map<string, string>();
  for (const e of assetGraph.entries) {
    if (e.classification === "downloaded" && e.localPath && e.type !== "css") m.set(e.sourceUrl, e.localPath);
  }
  return m;
}

// ---- token parsing -------------------------------------------------------

type Tok = { raw: string; variant: string; core: string };

/** Split a className string into tokens, separating the responsive/state variant prefix
 *  (`md:`, `lg:`, `max-md:`, `hover:`, `2xl:` …) from the core utility. Arbitrary values can
 *  themselves contain `:` inside `[...]`, so only split on `:` that are OUTSIDE brackets. */
function parseClass(cls: string): Tok[] {
  const out: Tok[] = [];
  for (const raw of cls.split(/\s+/).filter(Boolean)) {
    // find the last variant-colon that's outside brackets/parens
    let depth = 0, lastColon = -1;
    for (let i = 0; i < raw.length; i++) {
      const ch = raw[i]!;
      if (ch === "[" || ch === "(") depth++;
      else if (ch === "]" || ch === ")") depth--;
      else if (ch === ":" && depth === 0) lastColon = i;
    }
    const variant = lastColon >= 0 ? raw.slice(0, lastColon) : "";
    const core = lastColon >= 0 ? raw.slice(lastColon + 1) : raw;
    out.push({ raw, variant, core });
  }
  return out;
}

// ---- sizing-axis classification -----------------------------------------

type Axis = "width" | "height" | "grid-cols" | "grid-rows" | "flex" | "aspect" | "line-clamp";

/** Does an arbitrary value `[…]` (already unwrapped) denote a BAKED fixed length (px/rem)? */
function isBakedLen(v: string): boolean {
  return /^-?[\d.]+(px|rem|em)$/.test(v);
}
/** Does an arbitrary value denote a FLUID length (%, vw/vh, fr, auto/min/max-content, calc with %/vw)? */
function isFluidLen(v: string): boolean {
  if (/^-?[\d.]+(%|vw|vh|svh|lvh|dvh|svw|lvw|dvw|fr)$/.test(v)) return true;
  if (/^(auto|min-content|max-content|fit-content|stretch)$/.test(v)) return true;
  if (/(%|vw|vh|fr|min-content|max-content|fit-content)/.test(v) && /^(calc|min|max|clamp|repeat|fit-content)\(/.test(v)) return true;
  return false;
}

/** Spacing-scale numbers (`w-24`, `h-2.5`, `w-93`) are FIXED px. Fractions (`w-1/2`) are fluid. */
function spacingIsFixed(rest: string): boolean {
  return /^-?[\d.]+$/.test(rest); // pure number → fixed scale step; a fraction has a '/'
}

type AxisVerdict = { fluid?: string; baked?: string };

/** Classify a single core utility onto an axis with a fluid|baked verdict.
 *  Returns null for utilities that are not on a sizing axis. */
function classify(core: string): { axis: Axis; v: AxisVerdict } | null {
  // grid templates
  let m = core.match(/^grid-(cols|rows)-(.+)$/);
  if (m) {
    const axis: Axis = m[1] === "cols" ? "grid-cols" : "grid-rows";
    const val = m[2]!;
    if (/^\d+$/.test(val)) return { axis, v: { fluid: `grid-${m[1]}-N` } };       // fixed-count fluid grid
    if (val === "none" || val === "subgrid") return { axis, v: { fluid: val } };
    if (val.startsWith("[")) {
      const inner = val.slice(1, -1);
      // baked iff it contains an explicit px/rem track and NO fr/%/min/max/auto
      const hasFixed = /[\d.]+(px|rem)/.test(inner);
      const hasFluid = /(fr|%|min-content|max-content|auto|minmax|repeat)/.test(inner);
      if (hasFixed && !hasFluid) return { axis, v: { baked: `grid-${m[1]}-[px]` } };
      if (hasFixed && hasFluid) return { axis, v: { baked: `grid-${m[1]}-[mixed-px]` } }; // partly baked
      return { axis, v: { fluid: `grid-${m[1]}-[fr]` } };
    }
    return { axis, v: { fluid: `grid-${m[1]}-${val}` } };
  }
  // aspect-ratio
  m = core.match(/^aspect-(.+)$/);
  if (m) {
    const val = m[1]!;
    if (val === "square" || val === "video" || val === "auto") return { axis: "aspect", v: { fluid: `aspect-${val}` } };
    if (val.startsWith("[")) {
      const inner = val.slice(1, -1);
      // clean ratio like [16/9] is fluid intent; [auto_42_/_42] baked-from-px
      if (/^\d+\s*\/\s*\d+$/.test(inner.replace(/_/g, " "))) return { axis: "aspect", v: { fluid: "aspect-[ratio]" } };
      return { axis: "aspect", v: { baked: "aspect-[baked]" } };
    }
    return { axis: "aspect", v: { fluid: `aspect-${val}` } };
  }
  // line-clamp
  m = core.match(/^line-clamp-(.+)$/);
  if (m) return { axis: "line-clamp", v: { fluid: /^\d+$/.test(m[1]!) ? "line-clamp-N" : `line-clamp-${m[1]}` } };
  // flex shorthand / grow / shrink / basis (all width-flow on the main axis)
  if (/^(flex-1|flex-auto|flex-initial|grow|grow-0|shrink|shrink-0)$/.test(core)) return { axis: "flex", v: { fluid: core } };
  m = core.match(/^basis-(.+)$/);
  if (m) {
    const val = m[1]!;
    if (val === "full" || val === "auto" || /\d+\/\d+/.test(val)) return { axis: "flex", v: { fluid: `basis-${val.includes("/") ? "frac" : val}` } };
    if (val.startsWith("[")) { const inner = val.slice(1, -1); return isBakedLen(inner) ? { axis: "flex", v: { baked: "basis-[px]" } } : { axis: "flex", v: { fluid: "basis-[fluid]" } }; }
    return { axis: "flex", v: { baked: "basis-px" } }; // basis-24 etc
  }
  // width / height (incl. min-/max-)
  m = core.match(/^(min-|max-)?([wh])-(.+)$/);
  if (m) {
    const axis: Axis = m[2] === "w" ? "width" : "height";
    const val = m[3]!;
    const fam = `${m[1] ?? ""}${m[2]}`; // w, min-w, max-w, h, …
    if (/^(full|screen|auto|fit|min|max|svh|lvh|dvh|svw|lvw|dvw|prose)$/.test(val)) return { axis, v: { fluid: `${fam}-${val}` } };
    if (/^\d+\/\d+$/.test(val)) return { axis, v: { fluid: `${fam}-frac` } };          // w-1/2
    if (/^(screen-|3xl|2xl|xl|lg|md|sm|xs|7xl|6xl|5xl|4xl)/.test(val) && fam === "max-w") return { axis, v: { fluid: `max-w-${val}` } }; // named cap
    if (val.startsWith("[")) {
      const inner = val.slice(1, -1);
      if (inner.startsWith("var(")) return { axis, v: { fluid: `${fam}-[var]` } };       // token-driven → fluid-ish
      if (isFluidLen(inner)) return { axis, v: { fluid: `${fam}-[fluid]` } };
      if (isBakedLen(inner)) return { axis, v: { baked: `${fam}-[px]` } };
      return { axis, v: {} };
    }
    if (spacingIsFixed(val)) return { axis, v: { baked: `${fam}-num` } };               // w-24, h-93 → fixed scale
    return { axis, v: {} };
  }
  return null;
}

type NodeAxisInfo = Record<Axis, { srcFluid: Set<string>; srcBaked: Set<string>; cloFluid: Set<string>; cloBaked: Set<string> }>;

function emptyAxisInfo(): NodeAxisInfo {
  const mk = () => ({ srcFluid: new Set<string>(), srcBaked: new Set<string>(), cloFluid: new Set<string>(), cloBaked: new Set<string>() });
  return { width: mk(), height: mk(), "grid-cols": mk(), "grid-rows": mk(), flex: mk(), aspect: mk(), "line-clamp": mk() };
}

function collectAxis(cls: string, info: NodeAxisInfo, side: "src" | "clo"): void {
  for (const t of parseClass(cls)) {
    const c = classify(t.core);
    if (!c) continue;
    const bucket = info[c.axis];
    if (c.v.fluid) (side === "src" ? bucket.srcFluid : bucket.cloFluid).add(c.v.fluid);
    if (c.v.baked) (side === "src" ? bucket.srcBaked : bucket.cloBaked).add(c.v.baked);
  }
}

// ---- main ----------------------------------------------------------------

const argv = process.argv.slice(2);
const runDir = resolve(argv.find((a) => !a.startsWith("--")) ?? "output/sample/.clone");
const axisFilter = (argv.find((a) => a.startsWith("--axis="))?.split("=")[1] ?? "") as Axis | "";
const sampleN = parseInt(argv.find((a) => a.startsWith("--samples="))?.split("=")[1] ?? "20", 10);
const jsonOut = argv.find((a) => a.startsWith("--json="))?.split("=")[1];

const inspectIds = (argv.find((a) => a.startsWith("--ids="))?.split("=")[1] ?? "").split(",").filter(Boolean);

const sourceDir = join(runDir, "source");
const input = readJSON<{ url: string; viewports: number[] }>(join(runDir, "input.json"));
const capture = readJSON<CaptureResult>(join(sourceDir, "capture", "capture-result.json"));
const cloneOpts = readJSON<{ reflow?: boolean }>(join(sourceDir, "clone-options.json"));

const ir: IR = buildIR(sourceDir, capture.viewports, { motion: !!capture.motion, bandViewports: input.viewports });
const assetGraph = buildAssetGraph(capture);
const palette = buildColorPalette(ir);
const tw = buildTailwind(ir, buildAssetMap(assetGraph), palette.varForColor, { interaction: capture.interaction, reflow: !!cloneOpts.reflow });
const classOf = tw.classOf;

// --ids inspect mode: dump src/clone class + per-vp height geometry for specific nodes, then exit.
if (inspectIds.length) {
  const idx = new Map<string, IRNode>();
  const idxWalk = (n: IRNode): void => { idx.set(n.id, n); for (const c of n.children) if (!isTextChild(c)) idxWalk(c); };
  idxWalk(ir.root);
  for (const id of inspectIds) {
    const n = idx.get(id);
    if (!n) { console.log(`${id}: NOT FOUND`); continue; }
    const vps = ir.doc.sampleViewports;
    console.log(`\n${id} <${n.tag}>`);
    console.log(`  src:   ${n.srcClass ?? "(none)"}`);
    console.log(`  clone: ${classOf.get(id) ?? "(none)"}`);
    console.log(`  bboxH: ${vps.map((vp) => n.bboxByVp[vp]?.height ?? "·").join("/")}`);
  }
  process.exit(0);
}

// Per-axis miss tally + per (axis, srcUtil) cluster + sample rows.
type MissRow = { id: string; tag: string; text: string; axis: Axis; srcUtil: string; cloBaked: string; source: string; clone: string };
const misses: MissRow[] = [];
const clusterCount = new Map<string, number>();         // "axis · srcUtil" → count
const axisMiss = new Map<Axis, number>();
let nNodes = 0, nSrc = 0, nClone = 0, nBoth = 0;

function textOf(n: IRNode): string {
  for (const c of n.children) if (isTextChild(c) && c.text.trim()) return c.text.trim().slice(0, 40);
  return "";
}

function walk(n: IRNode): void {
  nNodes++;
  const src = n.srcClass ?? "";
  const clo = classOf.get(n.id) ?? "";
  if (src) nSrc++;
  if (clo) nClone++;
  if (src && clo) {
    nBoth++;
    const info = emptyAxisInfo();
    collectAxis(src, info, "src");
    collectAxis(clo, info, "clo");
    for (const axis of Object.keys(info) as Axis[]) {
      const b = info[axis];
      // MISS = source expressed a fluid rule on this axis, clone baked px (or token absent) and
      // produced NO fluid utility of its own on that axis.
      const cloneHasFluid = b.cloFluid.size > 0;
      if (b.srcFluid.size > 0 && !cloneHasFluid && (b.cloBaked.size > 0 || (b.srcBaked.size === 0 && axisExpectedInClone(axis, clo)))) {
        const srcUtil = [...b.srcFluid].sort().join("+");
        const cloBaked = [...b.cloBaked].sort().join("+") || "(absent)";
        misses.push({ id: n.id, tag: n.tag, text: textOf(n), axis, srcUtil, cloBaked, source: src, clone: clo });
        const key = `${axis} · ${srcUtil}`;
        clusterCount.set(key, (clusterCount.get(key) ?? 0) + 1);
        axisMiss.set(axis, (axisMiss.get(axis) ?? 0) + 1);
      }
    }
  }
  for (const c of n.children) if (!isTextChild(c)) walk(c);
}

/** For line-clamp/aspect a missing clone utility is itself the miss; for width/height/grid we only
 *  count a miss when the clone actually baked something (handled by cloBaked.size>0). */
function axisExpectedInClone(axis: Axis, _clone: string): boolean {
  return axis === "line-clamp" || axis === "aspect";
}

walk(ir.root);

// ---- report --------------------------------------------------------------

console.log(`\n=== tw-diff: ${runDir} ===`);
console.log(`nodes=${nNodes}  withSrcClass=${nSrc}  withCloneClass=${nClone}  both=${nBoth}`);
console.log(`\n--- real misses by axis (source fluid, clone baked/absent) ---`);
const totalMiss = misses.length;
for (const [axis, n] of [...axisMiss.entries()].sort((a, b) => b[1] - a[1])) {
  console.log(`  ${axis.padEnd(11)} ${n}`);
}
console.log(`  ${"TOTAL".padEnd(11)} ${totalMiss}`);

console.log(`\n--- top miss clusters (axis · source-util → count) ---`);
for (const [key, n] of [...clusterCount.entries()].sort((a, b) => b[1] - a[1]).slice(0, 20)) {
  console.log(`  ${String(n).padStart(4)}  ${key}`);
}

const shown = axisFilter ? misses.filter((m) => m.axis === axisFilter) : misses;
console.log(`\n--- sample miss rows${axisFilter ? ` [axis=${axisFilter}]` : ""} (${Math.min(sampleN, shown.length)} of ${shown.length}) ---`);
for (const m of shown.slice(0, sampleN)) {
  console.log(`\n  ${m.id} <${m.tag}> ${m.text ? `“${m.text}”` : ""}  [${m.axis}: src ${m.srcUtil} → clone ${m.cloBaked}]`);
  console.log(`    src:   ${m.source}`);
  console.log(`    clone: ${m.clone}`);
}

if (jsonOut) {
  writeFileSync(resolve(jsonOut), JSON.stringify({ stats: { nNodes, nSrc, nClone, nBoth, totalMiss }, axisMiss: Object.fromEntries(axisMiss), clusters: Object.fromEntries([...clusterCount.entries()].sort((a, b) => b[1] - a[1])), misses }, null, 2));
  console.log(`\nwrote ${jsonOut}`);
}