/**
 * Component 16 — Game replay viewer.
 *
 * Records one game and writes a **self-contained HTML file** that plays it back step by step.
 *
 *   node src/sim/replay.ts [--seed 1234] [--length standard] [--out replay.html]
 *
 * The browser never runs the engine. Frames are precomputed here in Node and embedded as JSON, so
 * the page is a dumb renderer with no bundling and no build step.
 *
 * The recorder drives `advance()` and `applyIntent()` itself rather than reusing `playGame`'s pump
 * loop, because `pump` batches a whole automatic phase into one call — which would collapse an
 * entire Mainline Phase into a single frame. Driving `advance` gives one frame per step.
 *
 * Priority is CLARITY over polish: plain boxes, words not symbols, and an explicit panel for what
 * is currently blocked.
 */

import { writeFileSync } from 'node:fs';

import { advance } from '../engine/advance.ts';
import { applyIntent, areaOf, facilityCarType, laborersLeft, portersLeft } from '../engine/apply.ts';
import type { GameLength } from '../engine/content.ts';
import { MAINLINE_PROFILES, lengthProfile, officeProfile } from '../engine/content.ts';
import type { GameEvent } from '../engine/events.ts';
import type { Intent } from '../engine/intents.ts';
import { legalActions } from '../engine/legal.ts';
import { createGame } from '../engine/setup.ts';
import type { Facility, GameConfig, GameState } from '../engine/state.ts';
import { developerBot, lastChoiceReason } from './bot.ts';
import { carLabel, idleNote, isVisible, narrate } from './narrate.ts';
// The view-model lives in its own module so the browser build can import it without dragging in
// this file's Node dependencies. Re-exported because tests and the web app import it from here.
export type { CellView, DivisionView, FacilityView, Frame, Decision, TrainChip } from './view.ts';
export { cardName, describeIntent, snapshot } from './view.ts';
import type { Frame } from './view.ts';
import type { Decision } from './view.ts';
import { cardName, describeDecision, snapshot, trainName } from './view.ts';

// ---------------------------------------------------------------------------
// Frame shape — only what the viewer draws
// ---------------------------------------------------------------------------

// ---------------------------------------------------------------------------
// Recording
// ---------------------------------------------------------------------------

export type Recording = { seed: number; length: GameLength; frames: Frame[]; outcome: string };

export function record(seed: number, length: GameLength, maxSteps = 100_000): Recording {
  const config: GameConfig = {
    mode: 'solitaire',
    victory: 'highestAfterDays',
    length,
    optionalRules: {
      reducedVisibility: false,
      sisterTrains: false,
      employeeRotation: false,
      emergencyToolbox: false,
    },
  };
  const s = createGame({ id: `replay-${seed}`, seed, config, playerNames: ['player'] });
  const frames: Frame[] = [];
  const narrateCtx = {
    cardName: (id: string) => cardName(s, id),
    trainName: (id: string) => trainName(s, id),
  };

  // Tracks whether a phase did anything, so an empty one can say so rather than ending silently.
  let didSomething = false;
  // The choice that produced the events about to be pushed.
  let pendingDecision: Decision | null = null;

  const push = (events: GameEvent[]): void => {
    const visible = events.filter(isVisible);
    if (visible.length === 0) return;

    const lines: { text: string; tone: string }[] = [];
    for (const e of visible) {
      if (e.type === 'phaseBegan') didSomething = false;
      if (e.type === 'phaseEnded' && !didSomething) {
        lines.push({ text: idleNote(e.phase), tone: 'quiet' });
      }
      if (
        e.type !== 'phaseBegan' &&
        e.type !== 'phaseEnded' &&
        e.type !== 'stageBegan'
      ) {
        didSomething = true;
      }
      const n = narrate(e, narrateCtx);
      lines.push({ text: n.text, tone: n.tone });
    }
    const where = visible.map((e) => narrate(e, narrateCtx)).find((n) => n.where)?.where ?? null;
    const moved = visible.find((e) => e.type === 'trayMoved');
    const from = moved && moved.type === 'trayMoved' ? moved.from : null;
    const d = pendingDecision;
    pendingDecision = null;
    // A Local Operations turn that ended with nothing but the turn ending is a wasted action —
    // six Moves and a card play spent on nothing. Among 600+ frames these are invisible unless
    // marked, and they are the ones worth reviewing.
    const wasted =
      d !== null &&
      (d.chose === 'switch.end' || d.chose === 'draw.end' || d.chose === 'loadUnload.end') &&
      visible.every((e) => e.type === 'phaseEnded' || e.type === 'actorChanged');
    frames.push(snapshot(s, lines, where ?? null, from, d, wasted));
  };

  frames.push(
    snapshot(s, [{ text: 'Game begins — the Division has just been spiked down.', tone: 'clock' }], null),
  );

  for (let step = 0; step < maxSteps; step++) {
    const r = advance(s);
    push(r.events);
    if (s.status === 'finished') break;
    if (!r.needsInput) continue;

    const actor = s.clock.pendingDecision !== null ? s.clock.superintendent : s.clock.currentActor;
    if (actor === null) break;
    const options = legalActions(s, actor);
    if (options.length === 0) break;
    const chosen = developerBot.choose(s, actor, options);
    const decision = describeDecision(s, actor, chosen, options, lastChoiceReason());
    const applied = applyIntent(s, actor, chosen);
    if (!applied.ok) break;
    pendingDecision = decision;
    push(applied.events);
  }

  const o = s.outcome;
  return {
    seed,
    length,
    frames,
    outcome: o ? `${o.result} — ${o.reason} · final Revenue ${s.players[0]?.revenue ?? 0}` : 'unfinished',
  };
}

// ---------------------------------------------------------------------------
// HTML
// ---------------------------------------------------------------------------

/**
 * Drop repeated board state from the serialised frames.
 *
 * Only the wire format changes: `record()` still returns complete frames, so tests and any other
 * consumer are unaffected. The page resolves a null by walking back to the last frame that carried
 * the field.
 */
function compress(frames: Frame[]): unknown[] {
  const keys = ['cells', 'facilities', 'division'] as const;
  let prev: Record<string, string> = {};
  return frames.map((f, i) => {
    const out: Record<string, unknown> = { ...f };
    for (const k of keys) {
      const json = JSON.stringify(f[k]);
      if (i > 0 && prev[k] === json) out[k] = null;
      prev[k] = json;
    }
    return out;
  });
}

export function renderHtml(rec: Recording): string {
  const target = lengthProfile(rec.length);
  return `<!doctype html>
<html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Station Master — replay seed ${rec.seed}</title>
<style>
:root{--bg:#14161a;--fg:#e8e6e3;--dim:#8b9199;--line:#2c3138;--panel:#1b1f25;
--good:#5fd08a;--bad:#ff7a70;--clock:#7fb8ff;--warn:#ffc46b;--green:#2f6b47;--red:#6b3230;--maw:#2a4a6b}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
header{padding:10px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
h1{font-size:14px;margin:0 0 6px;font-weight:600}
.bar{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}
.big{font-size:19px;font-weight:700}
.dim{color:var(--dim)}
.wrap{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:14px;padding:14px}
@media(max-width:900px){.wrap{grid-template-columns:1fr}}
section{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin-bottom:14px}
h2{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin:0 0 8px;font-weight:600}
.div-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.node{border:1px solid var(--line);border-radius:5px;padding:6px 8px;min-width:96px;background:#20252c}
.node.office{border-color:var(--clock)}
.regions{display:flex;gap:4px;margin-top:5px}
.region{flex:1;min-height:22px;border:1px dashed var(--line);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:11px}
.chip{background:var(--clock);color:#0d1117;border-radius:3px;padding:1px 5px;font-weight:700;font-size:11px}
.grid{display:grid;gap:5px;overflow-x:auto}
.cell{border:1px solid var(--line);border-radius:5px;padding:6px;min-height:64px;background:#20252c}
.cell.run{border-color:#4a545f;background:#252b33}
.cell.hl{outline:2px solid var(--warn);outline-offset:1px}
.cell.from{outline:2px dashed #6b7480;outline-offset:1px}
/* The crew is the thing you follow around the yard, so it gets the loudest treatment on the card. */
.crew{background:var(--warn);color:#0d1117;font-weight:700;border-radius:4px;padding:3px 6px;
margin-top:5px;font-size:11px;line-height:1.35}
.cell .nm{font-weight:700;font-size:11px}
.cell .cars{color:var(--dim);font-size:10.5px;margin-top:3px}
.cell .tray{display:inline-block;margin-top:4px}
.fac{border:1px solid var(--line);border-radius:5px;padding:8px;margin-bottom:8px;background:#20252c}
.boxes{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;align-items:center}
.box{border-radius:3px;padding:3px 7px;font-size:11px;border:1px solid var(--line)}
.box.g{background:var(--green)}.box.r{background:var(--red)}.box.m{background:var(--maw)}
.box.empty{background:transparent;color:var(--dim)}
.log{max-height:230px;overflow:auto}
.line{padding:2px 0;border-bottom:1px solid #23272e}
.t-good{color:var(--good)}.t-bad{color:var(--bad)}.t-clock{color:var(--clock);font-weight:700}
.t-quiet{color:var(--dim)}.t-plain{color:var(--fg)}
.blocked li{margin-bottom:4px}
.sev-stuck{color:var(--bad)}.sev-risk{color:var(--warn)}.sev-waiting{color:var(--dim)}
/* FIXED, not sticky: a sticky footer shifts as panel heights change, so the mouse cannot stay
   parked on one button and keep clicking. */
footer{position:fixed;left:0;right:0;bottom:0;background:var(--bg);border-top:1px solid var(--line);
padding:9px 14px;display:flex;gap:8px;align-items:center;flex-wrap:nowrap;z-index:10;overflow-x:auto}
body{padding-bottom:64px}
button{background:#2a3038;color:var(--fg);border:1px solid var(--line);border-radius:5px;padding:5px 11px;
font:inherit;cursor:pointer}
button:hover{background:#343b45}
input[type=range]{flex:1;min-width:180px}
.legend{font-size:11px;color:var(--dim);padding:0 14px 14px}
kbd{background:#2a3038;border:1px solid var(--line);border-radius:3px;padding:0 4px;font-size:10px}
.tt{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.tt div{border:1px solid var(--line);border-radius:3px;padding:3px 2px;text-align:center;font-size:10.5px}
.tt div.due{background:var(--clock);color:#0d1117;font-weight:700}
.tt div.now{outline:2px solid var(--warn)}
.card{display:inline-block;border:1px solid var(--line);border-radius:3px;padding:1px 6px;margin:2px 3px 0 0;font-size:11px;background:#20252c}
.consist{font-size:10px;color:var(--dim);margin-top:2px}
.mini{margin-top:4px;font-size:9.5px;line-height:1.8}
.mini .box{padding:0 4px;font-size:9.5px}
.cell.office{border-color:var(--clock)}
.cell.modifier{border-style:dashed;opacity:.85}

.chose{font-size:15px;margin-bottom:4px}
.why{font-style:italic;opacity:.85;margin-bottom:2px}
.rejected{list-style:none;margin:0;padding:0;max-height:210px;overflow:auto}
.rejected li{padding:3px 0;border-top:1px solid rgba(128,128,128,.25);font-size:12px}
.wasted{background:#b03030;color:#fff;font-weight:bold;padding:3px 6px;margin-bottom:5px;border-radius:3px}
.fstat{margin-top:4px;font-size:11px;padding:2px 5px;border-radius:3px;display:inline-block}
.fstat.good{background:rgba(40,140,60,.28)}
.fstat.bad{background:rgba(190,50,50,.38);font-weight:bold}
.fstat.idle{opacity:.6}
.wastedmark{color:#e06060;font-weight:bold}

.enh{font-size:10px;background:rgba(90,140,220,.30);border-radius:3px;padding:1px 4px;margin-top:2px}
.mlmods{font-size:10px;background:rgba(200,150,60,.28);border-radius:3px;padding:1px 4px;margin-top:2px}
.grade{font-size:10px;background:rgba(200,90,60,.35);border-radius:3px;padding:1px 4px;font-weight:normal}
</style></head><body>

<header>
  <h1>Station Master — replay · seed ${rec.seed} · ${rec.length} (target ${target.target} over ${target.days} Days) · ${esc(rec.outcome)}</h1>
  <div class="bar">
    <span class="big" id="when">—</span>
    <span>phase <b id="phase">—</b></span>
    <span class="dim">actor <span id="actor">—</span> · fedora <span id="super">—</span></span>
    <span>revenue <b class="big" id="rev">0</b></span>
    <span class="dim">deck <span id="deck">0</span></span>
    <span class="dim">frame <span id="fno">0</span>/<span id="ftot">0</span></span>
  </div>
</header>

<div class="wrap">
  <div>
    <section><h2>Division — west to east</h2><div class="div-strip" id="division"></div></section>
    <section><h2>Office Area</h2><div class="grid" id="grid"></div></section>
    <section><h2>Facilities</h2><div id="facs"></div></section>
    <section><h2>Timetable — which train is due out at each Stage</h2><div id="tt"></div></section>
  </div>
  <div>
    <section><h2>What just happened</h2><div id="now"></div></section>
    <section><h2>Decision — what it chose, and what it passed over</h2><div id="decision"></div></section>
    <section><h2>Cards</h2>
      <div><span class="dim">your hand:</span> <span id="hand">—</span></div>
      <div style="margin-top:5px"><span class="dim">face-up Department slots:</span> <span id="depts">—</span></div>
    </section>
    <section><h2>Blocked — why nothing is moving</h2><ul class="blocked" id="blocked"></ul></section>
    <section><h2>Trains in play</h2><div id="trains" class="dim"></div></section>
    <section><h2>History</h2><div class="log" id="log"></div></section>
  </div>
</div>

<div class="legend">
  <b>Keyboard:</b> <kbd>←</kbd>/<kbd>→</kbd> step · <kbd>space</kbd> play/pause ·
  <kbd>Home</kbd>/<kbd>End</kbd> first/last · <kbd>S</kbd> next Stage · <kbd>R</kbd> next revenue change ·
  <kbd>C</kbd> next collision · <kbd>W</kbd> next wasted turn · <kbd>J</kbd> next jam.<br>
  Running Track is the lighter row. <span class="chip">T4</span> is a train on the Division;
  <span style="background:var(--warn);color:#0d1117;font-weight:700;border-radius:3px;padding:0 4px">🚂 T4</span>
  is the crew in your yard — it carries the whole train with it as it moves, and a dashed outline
  marks where it came from. Green box = outbound loads waiting ·
  MEN / AT / WORK = the three-step loading track (→ outbound, ← inbound) · red box = delivered loads.
  Laborers and Porters show remaining/total for this Stage.
</div>

<footer>
  <button id="first">⏮ start</button>
  <button id="back">◀ step</button>
  <button id="play">▶ play</button>
  <button id="fwd">step ▶</button>
  <button id="stage">next Stage ⏭</button>
  <button id="money">next revenue 💰</button>
  <button id="crash">next collision ⚠</button>
  <button id="waste">next wasted turn 🗑</button>
  <button id="jam">next jam 🔒</button>
  <input type="range" id="scrub" min="0" value="0">
  <select id="speed">
    <option value="3000">extra slow</option>
    <option value="1200">slow</option>
    <option value="250" selected>normal</option>
    <option value="90">fast</option>
    <option value="20">very fast</option>
  </select>
</footer>

<script>
const FRAMES = ${JSON.stringify(compress(rec.frames))};
/* The board changes rarely, so cells/facilities/division are emitted as null when identical to the
   previous frame and resolved by walking back. Re-serialising the full grid every frame was 63% of
   a 5.2 MB page. The scrubber jumps anywhere, hence the walk rather than a running pointer. */
function carry(i, key) {
  for (let k = i; k >= 0; k--) if (FRAMES[k][key] !== null) return FRAMES[k][key];
  return [];
}
let i = 0, timer = null;
const $ = (id) => document.getElementById(id);
const esc = (s) => String(s).replace(/[&<>]/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c]));

// The green / MEN|AT|WORK / red boxes drawn on the card itself, so a Freight Agent action or a
// Porter boarding shows up where it happened rather than only in a side panel.
function miniFacility(x) {
  let h = '<div class="mini">';
  if (x.greenCap > 0) h += '<span class="dim">grn </span>' + boxes(x.green, x.greenCap, 'g');
  if (x.trackCap > 0) h += '<br><span class="dim">work </span>' +
    x.maw.map((m) => '<span class="box ' + (m ? 'm' : 'empty') + '">' + (m ? esc(m) : '·') + '</span>').join('');
  if (x.redCap > 0) h += '<br><span class="dim">red </span>' + boxes(x.red, x.redCap, 'r');
  return h + '</div>';
}

function boxes(items, cap, cls) {
  let h = '';
  for (let k = 0; k < Math.max(cap, items.length); k++) {
    const v = items[k];
    h += '<span class="box ' + (v ? cls : 'empty') + '">' + (v ? esc(v) : '·') + '</span>';
  }
  return h || '<span class="dim">—</span>';
}

function render() {
  const f = FRAMES[i];
  $('when').textContent = 'Day ' + f.day + ' · Stage ' + f.stage + ' · ' + f.clock;
  $('phase').textContent = f.phase;
  $('actor').textContent = f.actor === null ? 'automatic' : 'P' + f.actor;
  $('super').textContent = 'P' + f.superintendent;
  $('rev').textContent = f.revenue;
  $('rev').className = 'big ' + (f.revenue < 0 ? 't-bad' : f.revenue > 0 ? 't-good' : '');
  $('deck').textContent = f.deck;
  $('hand').innerHTML = f.hand.length
    ? f.hand.map((c) => '<span class="card">' + esc(c) + '</span>').join('')
    : '<span class="dim">empty</span>';
  $('depts').innerHTML = f.departments.map((c) => '<span class="card">' + esc(c) + '</span>').join('');
  $('tt').innerHTML = '<div class="tt">' + f.timetable.map((t, k) =>
    '<div class="' + (t !== null ? 'due ' : '') + (k + 1 === f.stage ? 'now' : '') + '">' +
    'S' + (k + 1) + '<br>' + (t !== null ? 'T' + t : '·') + '</div>').join('') + '</div>' +
    '<div class="dim" style="margin-top:5px">The NUMBER of a train is its seniority and direction ' +
    '(odd = westbound, even = eastbound). The Stage it departs is set by a 1D12 roll when its card ' +
    'was played — so Train 8 leaving at Stage 6 is normal.</div>';
  $('fno').textContent = i;
  $('scrub').value = i;

  const CELLS = carry(i, 'cells'), FACS = carry(i, 'facilities'), DIV = carry(i, 'division');

  $('division').innerHTML = DIV.map((n) =>
    '<div class="node ' + (n.kind === 'office' ? 'office' : '') + '"><div class="nm">' + esc(n.label) +
      (n.gradeUp ? ' <span class="grade">' + (n.gradeUp === 'east' ? 'climbs E ▲' : '▲ W climbs') + '</span>' : '') +
    '</div>' +
    (n.modifiers.length ? '<div class="mlmods">' + n.modifiers.map(esc).join(' · ') + '</div>' : '') +
    '<div class="regions">' + n.trains.map((r) =>
      '<div class="region">' + r.map((t) =>
        '<span class="chip">' + esc(t.label) + '</span>' +
        '<div class="consist">' + (t.consist.length ? esc(t.consist.join(', ')) : 'empty') + '</div>'
      ).join('') + '</div>').join('') +
    '</div></div>').join('');

  const rows = CELLS.map((c) => c.row), cols = CELLS.map((c) => c.col);
  const r0 = Math.min(...rows), r1 = Math.max(...rows), c0 = Math.min(...cols), c1 = Math.max(...cols);
  const g = $('grid');
  g.style.gridTemplateColumns = 'repeat(' + (c1 - c0 + 1) + ', minmax(110px, 1fr))';
  let cellsHtml = '';
  for (let r = r1; r >= r0; r--) {
    for (let c = c0; c <= c1; c++) {
      const cell = CELLS.find((x) => x.row === r && x.col === c);
      if (!cell) { cellsHtml += '<div></div>'; continue; }
      const hl = f.where && f.where.row === r && f.where.col === c;
      const wasHere = f.whereFrom && f.whereFrom.row === r && f.whereFrom.col === c;
      cellsHtml += '<div class="cell ' + (cell.running ? 'run ' : '') + (cell.kind === 'office' ? 'office ' : '') +
        (cell.kind === 'modifier' ? 'modifier ' : '') + (hl ? 'hl ' : '') + (wasHere ? 'from' : '') + '">' +
        '<div class="nm">' + esc(cell.label) + '</div>' +
        '<div class="dim" style="font-size:10px">(' + r + ',' + c + ')</div>' +
        (cell.enhancements.length
          ? '<div class="enh">' + cell.enhancements.map(esc).join(' · ') + '</div>'
          : '') +
        (cell.tray ? '<div class="crew">🚂 ' + esc(cell.tray) + '</div>' : '') +
        (cell.facility ? miniFacility(cell.facility) : '') +
        (cell.cars.length ? '<div class="cars">siding: ' + cell.cars.map(esc).join('<br>') + '</div>' : '') +
        '</div>';
    }
  }
  g.innerHTML = cellsHtml;

  $('facs').innerHTML = FACS.length === 0
    ? '<span class="dim">no freight facilities built yet</span>'
    : FACS.map((x) =>
      '<div class="fac"><b>' + esc(x.name) + '</b> <span class="dim">' + esc(x.commodity) + ' · ' + esc(x.flow) +
      ' · laborers ' + esc(x.laborers) + ' · porters ' + esc(x.porters) + '</span>' +
      '<div class="boxes"><span class="dim">green</span>' + boxes(x.green, x.greenCap, 'g') + '</div>' +
      '<div class="boxes"><span class="dim">MEN|AT|WORK</span>' +
        x.maw.map((m) => '<span class="box ' + (m ? 'm' : 'empty') + '">' + (m ? esc(m) : '·') + '</span>').join('') + '</div>' +
      '<div class="boxes"><span class="dim">red</span>' + boxes(x.red, x.redCap, 'r') + '</div>' +
      '<div class="boxes"><span class="dim">siding</span>' + boxes(x.track, x.trackCap, 'g') + '</div>' +
      '<div class="fstat ' + (x.jammed ? 'bad' : (x.canFinish ? 'good' : 'idle')) + '">' +
        (x.jammed
          ? 'JAMMED — a load is on WORK with no car spotted to receive it; the industry track is locked'
          : (x.canFinish
            ? 'ready — a matching empty car is spotted, so a load can finish'
            : 'no car spotted — starting a load here would jam it')) +
      '</div>' +
      '</div>').join('');

  $('now').innerHTML = f.lines.map((l) => '<div class="line t-' + l.tone + '">' + esc(l.text) + '</div>').join('');

  var d = f.decision;
  if (!d) {
    $('decision').innerHTML = '<span class="dim">no choice here — the engine advanced on its own</span>';
  } else {
    var h = '';
    if (f.wasted) h += '<div class="wasted">WASTED TURN — the whole action produced no change</div>';
    h += '<div class="chose"><span class="dim">chose:</span> <b>' + esc(d.chose) + '</b></div>';
    h += '<div class="why">why: ' + esc(d.why) + '</div>';
    h += '<div class="dim" style="margin:6px 0 3px">passed over ' + (d.totalOptions - 1) +
         ' other legal option' + ((d.totalOptions - 1) === 1 ? '' : 's') + ':</div>';
    if (d.rejected.length === 0) h += '<div class="dim">none — this was the only legal action</div>';
    else h += '<ul class="rejected">' + d.rejected.map(function (r) {
      return '<li><b>' + esc(r.kind) + '</b> <span class="dim">x' + r.count + '</span><br>' +
             '<span class="dim">' + esc(r.detail) + '</span></li>';
    }).join('') + '</ul>';
    $('decision').innerHTML = h;
  }
  $('blocked').innerHTML = f.blocked.length === 0
    ? '<li class="dim">nothing blocked</li>'
    : f.blocked.map((b) => '<li class="sev-' + b.severity + '"><b>' + esc(b.where) + '</b> — ' + esc(b.why) + '</li>').join('');
  $('trains').innerHTML = f.trains.length === 0
    ? 'no trains running'
    : f.trains.map((t) => esc(t.label) + ' — ' + esc(t.where)).join('<br>');

  let hist = '';
  for (let k = Math.max(0, i - 24); k <= i; k++) {
    for (const l of FRAMES[k].lines) hist += '<div class="line t-' + l.tone + '">' + esc(l.text) + '</div>';
  }
  $('log').innerHTML = hist;
  $('log').scrollTop = $('log').scrollHeight;
}

function go(n) { i = Math.max(0, Math.min(FRAMES.length - 1, n)); render(); }
function findNext(pred) { for (let k = i + 1; k < FRAMES.length; k++) if (pred(FRAMES[k], FRAMES[k - 1], k)) return go(k); go(FRAMES.length - 1); }

$('ftot').textContent = FRAMES.length - 1;
$('scrub').max = FRAMES.length - 1;
$('scrub').oninput = (e) => go(+e.target.value);
$('first').onclick = () => go(0);
$('back').onclick = () => go(i - 1);
$('fwd').onclick = () => go(i + 1);
$('stage').onclick = () => findNext((f, p) => f.stage !== p.stage || f.day !== p.day);
$('money').onclick = () => findNext((f, p) => f.revenue !== p.revenue);
$('crash').onclick = () => findNext((f) => f.lines.some((l) => /COLLISION|collision/.test(l.text)));
$('waste').onclick = () => findNext((f) => f.wasted);
$('jam').onclick = () => findNext((f, p, idx) => carry(idx, 'facilities').some((x) => x.jammed));
$('play').onclick = () => {
  if (timer) { clearInterval(timer); timer = null; $('play').textContent = '▶ play'; return; }
  $('play').textContent = '⏸ pause';
  timer = setInterval(() => {
    if (i >= FRAMES.length - 1) { clearInterval(timer); timer = null; $('play').textContent = '▶ play'; return; }
    go(i + 1);
  }, +$('speed').value);
};
$('speed').onchange = () => { if (timer) { $('play').click(); $('play').click(); } };
document.onkeydown = (e) => {
  if (e.key === 'ArrowRight') go(i + 1);
  else if (e.key === 'ArrowLeft') go(i - 1);
  else if (e.key === 'Home') go(0);
  else if (e.key === 'End') go(FRAMES.length - 1);
  else if (e.key === 's' || e.key === 'S') $('stage').click();
  else if (e.key === 'r' || e.key === 'R') $('money').click();
  else if (e.key === 'c' || e.key === 'C') $('crash').click();
  else if (e.key === 'w' || e.key === 'W') $('waste').click();
  else if (e.key === 'j' || e.key === 'J') $('jam').click();
  else if (e.key === ' ') { e.preventDefault(); $('play').click(); }
};
render();
</script></body></html>`;
}

function esc(s: string): string {
  return s.replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' })[c] ?? c);
}

// ---------------------------------------------------------------------------
// CLI
// ---------------------------------------------------------------------------

const isMain = process.argv[1]?.endsWith('replay.ts') ?? false;

if (isMain) {
  const arg = (name: string, dflt: string): string => {
    const i = process.argv.indexOf(`--${name}`);
    return i >= 0 ? (process.argv[i + 1] ?? dflt) : dflt;
  };
  const seed = Number(arg('seed', '1234'));
  const length = arg('length', 'standard') as GameLength;
  const out = arg('out', 'replay.html');

  const rec = record(seed, length);
  writeFileSync(out, renderHtml(rec));
  const kb = (Buffer.byteLength(renderHtml(rec)) / 1024).toFixed(0);
  console.log(`wrote ${out} — ${rec.frames.length} frames, ${kb} KB`);
  console.log(`seed ${seed} · ${length} · ${rec.outcome}`);
}
