/**
 * uat-report/render-html.ts — PURE: ReportModel → one self-contained HTML string.
 *
 * No CDN, no external assets: inline CSS (system fonts, design tokens with a
 * dark-scheme override + print rules), inline SVG charts (render-svg.ts) and a
 * tiny inline script (role/status/search filters + column sort with aria-sort +
 * matrix expand/collapse). Failure screenshots arrive as data URIs through
 * `model.screenshots` (collected by the caller — this module does NO I/O);
 * everything else links relatively. Every dynamic string is HTML-escaped —
 * including response-body excerpts, which are attacker-controlled.
 */
import { classifyDuration, humanBytes, type ApiRunResult, type UiRunResult } from '../lib/run-results.js';
import type { FailureGroup, MatrixCell, RbacMatrix, ReportModel } from './build-model.js';
import { barsSvg, donutSvg, type BandBar, type DonutSegment } from './render-svg.js';

export function escapeHtml(value: string): string {
  return value
    .replaceAll('&', '&')
    .replaceAll('<', '&lt;')
    .replaceAll('>', '&gt;')
    .replaceAll('"', '&quot;')
    .replaceAll("'", '&#39;');
}

const e = escapeHtml;

const STATUS_BADGE: Record<string, string> = {
  pass: 'badge badge-pass',
  fail: 'badge badge-fail',
  skip: 'badge badge-skip',
  indeterminate: 'badge badge-ind',
};

function apiRowStatus(r: ApiRunResult): { key: string; label: string } {
  if (!r.executed) return { key: 'skip', label: `skipped (${r.reason ?? '—'})` };
  return r.ok ? { key: 'pass', label: 'pass' } : { key: 'fail', label: 'FAIL' };
}

function uiRowStatus(r: UiRunResult): { key: string; label: string } {
  if (!r.executed) return { key: 'skip', label: `skipped (${r.reason ?? '—'})` };
  if (r.actual === 'indeterminate') return { key: 'indeterminate', label: 'indeterminate' };
  return r.ok ? { key: 'pass', label: 'pass' } : { key: 'fail', label: 'FAIL' };
}

function durationCell(ms: number, warnMs: number, slowMs: number): string {
  const band = classifyDuration(ms, warnMs, slowMs);
  return `<td class="num dur-${band}" data-v="${ms}">${ms} ms</td>`;
}

/** A "no metric here" cell (write-flow rows are not page observations). */
const dashCell = '<td class="num muted" data-v="-1">—</td>';

/** Human run duration: "850 ms", "42s", "4m 12s", "1h 03m". */
export function formatDurationMs(ms: number): string {
  if (ms < 1000) return `${ms} ms`;
  const totalSeconds = Math.round(ms / 1000);
  if (totalSeconds < 60) return `${totalSeconds}s`;
  const totalMinutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  if (totalMinutes < 60) return `${totalMinutes}m ${String(seconds).padStart(2, '0')}s`;
  const hours = Math.floor(totalMinutes / 60);
  return `${hours}h ${String(totalMinutes % 60).padStart(2, '0')}m`;
}

function kpiCard(label: string, value: string, sub = ''): string {
  return `<div class="kpi"><div class="kpi-v">${value}</div><div class="kpi-l">${label}</div>${
    sub ? `<div class="kpi-s">${sub}</div>` : ''
  }</div>`;
}

// ── Executive summary ───────────────────────────────────────────────────────

function coverageCard(axis: string, cov: { executed: number; skipped: number; skipReasons: { reason: string; count: number }[] }): string {
  const chips = cov.skipReasons
    .map((s) => `<span class="chip">${e(s.reason)} × ${s.count}</span>`)
    .join(' ');
  return `<div class="cov-card"><strong>${e(axis)} coverage</strong> <span>${cov.executed} executed · ${cov.skipped} skipped</span>${
    chips ? `<div class="chips">${chips}</div>` : ''
  }</div>`;
}

function renderExecSummary(model: ReportModel): string {
  const api = model.api;
  const ui = model.ui;
  const charts: string[] = [];
  if (api) {
    const segments: DonutSegment[] = [
      { label: 'passed', count: api.passed, cssClass: 'seg-pass' },
      { label: 'failed', count: api.failed, cssClass: 'seg-fail' },
      { label: 'skipped', count: api.skipped, cssClass: 'seg-skip' },
    ];
    const rate = api.executed > 0 ? `${Math.round((api.passed / api.executed) * 100)}%` : '—';
    charts.push(`<figure><figcaption>API checks</figcaption>${donutSvg(segments, rate, 'API checks')}</figure>`);
  }
  if (ui) {
    const determinate = ui.executed - ui.indeterminate;
    const segments: DonutSegment[] = [
      { label: 'passed', count: ui.passed, cssClass: 'seg-pass' },
      { label: 'failed', count: ui.failed, cssClass: 'seg-fail' },
      { label: 'indeterminate', count: ui.indeterminate, cssClass: 'seg-ind' },
      { label: 'skipped', count: ui.skipped, cssClass: 'seg-skip' },
    ];
    const rate = determinate > 0 ? `${Math.round((ui.passed / determinate) * 100)}%` : '—';
    charts.push(`<figure><figcaption>UI checks</figcaption>${donutSvg(segments, rate, 'UI checks')}</figure>`);
  }
  if (model.latency.api) {
    const bands: BandBar[] = model.latency.api.map((b) => ({ label: b.label, count: b.count, cssClass: `band-${b.band}` }));
    charts.push(`<figure><figcaption>API latency</figcaption>${barsSvg(bands, 'API latency distribution')}</figure>`);
  }
  if (model.latency.ui) {
    const bands: BandBar[] = model.latency.ui.map((b) => ({ label: b.label, count: b.count, cssClass: `band-${b.band}` }));
    charts.push(`<figure><figcaption>Page readiness</figcaption>${barsSvg(bands, 'Page readiness distribution')}</figure>`);
  }
  const covCards: string[] = [];
  if (model.coverage.api) covCards.push(coverageCard('API', model.coverage.api));
  if (model.coverage.ui) covCards.push(coverageCard('UI', model.coverage.ui));

  const passed = (api?.passed ?? 0) + (ui?.passed ?? 0);
  const failed = (api?.failed ?? 0) + (ui?.failed ?? 0);
  const skipped = (api?.skipped ?? 0) + (ui?.skipped ?? 0);
  const subParts = [`${passed} passed`, `${failed} failed`, `${skipped} skipped`];
  if (model.durationMs !== undefined) subParts.push(`run ${formatDurationMs(model.durationMs)}`);

  return `<section class="exec">
<div class="verdict-row">
<div class="verdict verdict-${model.verdict === 'PASS' ? 'pass' : 'fail'}" role="status">${model.verdict}</div>
<div class="exec-sub">${subParts.map((p) => e(p)).join(' · ')}</div>
</div>
<div class="charts">${charts.join('')}</div>
${covCards.length ? `<div class="cov">${covCards.join('')}</div>` : ''}
</section>`;
}

// ── Failures first ──────────────────────────────────────────────────────────

function apiFailureRow(r: ApiRunResult): string {
  const expected = r.mode === 'authz_only' ? 'authz gate' : String(r.expected);
  const details = [r.note, r.error].filter(Boolean).map(String);
  const excerpt = r.bodyExcerpt
    ? `<details><summary>response</summary><pre class="mono small excerpt">${e(r.bodyExcerpt)}</pre></details>`
    : '';
  return `<tr>
<td>API</td>
<td class="mono">${e(r.method)} ${e(r.route)}</td>
<td>${e(r.role)}</td>
<td class="mono small">${r.permission ? e(r.permission) : '<span class="muted">—</span>'}</td>
<td class="num">${e(expected)} → ${r.actual ?? '—'}</td>
<td class="small">${details.map((d) => e(d)).join(' · ')}${excerpt}</td>
</tr>`;
}

function uiFailureRow(r: UiRunResult): string {
  const details = [...r.warnings, r.error, r.flowDetail].filter(Boolean).map(String);
  return `<tr>
<td>UI</td>
<td class="mono">${e(r.routeId)}${r.kind !== 'page' ? ` <span class="flow">${e(r.kind)}</span>` : ''}</td>
<td>${e(r.role)}</td>
<td class="mono small">${r.permission ? e(r.permission) : '<span class="muted">—</span>'}</td>
<td>${e(r.expected)} → ${e(r.actual)}</td>
<td class="small">${details.map((d) => e(d)).join(' · ')}</td>
</tr>`;
}

function renderFailuresFirst(model: ReportModel): string {
  const totalFailed = (model.api?.failed ?? 0) + (model.ui?.failed ?? 0);
  if (totalFailed === 0) {
    return `<section class="failures"><h2>Failures</h2><p class="muted">All green — no failed check in this run.</p></section>`;
  }
  const groups = model.failureGroups
    .map((g: FailureGroup) => {
      const count = g.api.length + g.ui.length;
      const rows = [...g.api.map(apiFailureRow), ...g.ui.map(uiFailureRow)].join('\n');
      return `<details class="fgroup" open>
<summary>${e(g.label)} <span class="muted">${count}</span></summary>
<table class="grid">
<thead><tr><th scope="col">Axis</th><th scope="col">Unit</th><th scope="col">Role</th><th scope="col">Permission</th><th scope="col">Expected → actual</th><th scope="col">Detail</th></tr></thead>
<tbody>${rows}</tbody>
</table>
</details>`;
    })
    .join('\n');
  return `<section class="failures">
<h2>Failures first <span class="muted">${totalFailed} failed check${totalFailed > 1 ? 's' : ''}, grouped by cause</span></h2>
${groups}
</section>`;
}

function renderPerfAdvisories(model: ReportModel): string {
  const { api, ui } = model.perfOffenders;
  const count = api.length + ui.length;
  if (count === 0) return '';
  const rows = [
    ...api.map(
      (r) =>
        `<tr><td>API</td><td class="mono">${e(r.method)} ${e(r.route)}</td><td>${e(r.role)}</td>${durationCell(r.durationMs, model.thresholds.apiWarnMs, model.thresholds.apiSlowMs)}</tr>`,
    ),
    ...ui.map(
      (r) =>
        `<tr><td>UI</td><td class="mono">${e(r.routeId)}</td><td>${e(r.role)}</td>${durationCell(r.perf.fullyReadyMs, model.thresholds.uiWarnMs, model.thresholds.uiSlowMs)}</tr>`,
    ),
  ].join('\n');
  return `<section>
<details class="perf-adv">
<summary><h2>Performance advisories <span class="muted">${count} over the warn budget (never a failure)</span></h2></summary>
<table class="grid">
<thead><tr><th scope="col">Axis</th><th scope="col">Unit</th><th scope="col">Role</th><th scope="col" class="num">Duration</th></tr></thead>
<tbody>${rows}</tbody>
</table>
</details>
</section>`;
}

// ── RBAC matrices ───────────────────────────────────────────────────────────

function matrixCellHtml(cell: MatrixCell, role: string): string {
  switch (cell.kind) {
    case 'pass':
      return `<td class="cell cell-pass" title="${e(cell.title)}" aria-label="${e(`${role}: pass — ${cell.title}`)}">✓</td>`;
    case 'fail':
      return `<td class="cell cell-fail" title="${e(cell.title)}" aria-label="${e(`${role}: FAIL — ${cell.title}`)}">✗</td>`;
    case 'skip':
      return `<td class="cell cell-skip" title="${e(cell.reason)}" aria-label="${e(`${role}: skipped — ${cell.reason}`)}">–</td>`;
    case 'absent':
      return `<td class="cell cell-absent" aria-label="${e(`${role}: not covered`)}">·</td>`;
  }
}

function renderMatrix(matrix: RbacMatrix, title: string, unitHeader: string): string {
  const roleHeads = matrix.roles.map((r) => `<th scope="col">${e(r)}</th>`).join('');
  const groups = matrix.groups
    .map((g) => {
      const rows = g.rows
        .map(
          (row) =>
            `<tr><th scope="row" class="mx-unit"><span class="mono">${e(row.label)}</span>${
              row.permission ? `<span class="mx-perm">${e(row.permission)}</span>` : ''
            }</th>${row.cells.map((cell, i) => matrixCellHtml(cell, matrix.roles[i] ?? '')).join('')}</tr>`,
        )
        .join('\n');
      return `<details class="mx"${g.failed > 0 ? ' open' : ''}>
<summary><span class="mono">${e(g.group)}</span> <span class="mx-counts"><span class="c-pass">✓ ${g.passed}</span> <span class="c-fail">✗ ${g.failed}</span> <span class="c-skip">– ${g.skipped}</span></span></summary>
<div class="mx-scroll"><table class="mx-table">
<thead><tr><th scope="col" class="mx-unit">${e(unitHeader)}</th>${roleHeads}</tr></thead>
<tbody>${rows}</tbody>
</table></div>
</details>`;
    })
    .join('\n');
  return `<section class="matrix">
<h2>${e(title)} <span class="muted">every cell = one check (hover for detail)</span></h2>
<div class="mx-tools"><button type="button" data-mx="open">Expand all</button><button type="button" data-mx="close">Collapse all</button></div>
${groups}
</section>`;
}

// ── Axis tables ─────────────────────────────────────────────────────────────

function renderApiSection(model: ReportModel): string {
  const api = model.api;
  if (!api) return '<section><h2>Backend (API)</h2><p class="muted">No API run in this report.</p></section>';
  const { apiWarnMs, apiSlowMs } = model.thresholds;
  const rows = api.rows
    .map((r) => {
      const status = apiRowStatus(r);
      const details = [r.note, r.error].filter(Boolean).map(String);
      const excerpt = r.bodyExcerpt
        ? `<details><summary>response</summary><pre class="mono small excerpt">${e(r.bodyExcerpt)}</pre></details>`
        : '';
      return `<tr data-role="${e(r.role)}" data-status="${status.key}">
<td class="mono">${e(r.method)}</td>
<td class="mono">${e(r.route)}</td>
<td>${e(r.role)}</td>
<td class="mono small">${r.permission ? e(r.permission) : '<span class="muted">—</span>'}</td>
<td class="small">${e(r.mode)}</td>
<td class="num" data-v="${r.expected}">${r.expected}</td>
<td class="num" data-v="${r.actual ?? -1}">${r.actual ?? '—'}</td>
<td><span class="${STATUS_BADGE[status.key]}">${e(status.label)}</span></td>
${durationCell(r.durationMs, apiWarnMs, apiSlowMs)}
<td class="num" data-v="${r.sizeBytes}">${humanBytes(r.sizeBytes)}</td>
<td class="small">${details.length ? e(details.join(' · ')) : ''}${excerpt}</td>
</tr>`;
    })
    .join('\n');
  return `<section>
<h2>Backend (API) <span class="muted">${api.passed}/${api.executed} passed · ${api.skipped} skipped</span></h2>
<table class="grid" data-table="api">
<thead><tr><th scope="col" data-sort>Method</th><th scope="col" data-sort>Endpoint</th><th scope="col" data-sort>Role</th><th scope="col" data-sort>Permission</th><th scope="col" data-sort>Mode</th><th scope="col" data-sort class="num">Expected</th><th scope="col" data-sort class="num">Actual</th><th scope="col" data-sort>Status</th><th scope="col" data-sort class="num">Duration</th><th scope="col" data-sort class="num">Size</th><th scope="col">Notes</th></tr></thead>
<tbody>${rows}</tbody>
</table>
</section>`;
}

function screenshotCell(r: UiRunResult, model: ReportModel): string {
  if (!r.screenshot) return '<td></td>';
  const label = `screenshot ${r.routeId} (${r.role})`;
  const embed = model.screenshots[r.screenshot];
  if (embed?.dataUri) {
    return `<td><details class="shot"><summary aria-label="${e(label)}">📷</summary><img src="${e(embed.dataUri)}" alt="${e(label)}" loading="lazy"></details></td>`;
  }
  const link = `<a href="${e(r.screenshot)}" target="_blank" aria-label="${e(label)}">📷</a>`;
  if (embed?.note) return `<td>${link}<span class="small muted"> ${e(embed.note)}</span></td>`;
  return `<td>${link}</td>`;
}

function renderUiSection(model: ReportModel): string {
  const ui = model.ui;
  if (!ui) return '<section><h2>Frontend (UI)</h2><p class="muted">No UI run in this report.</p></section>';
  const { uiWarnMs, uiSlowMs } = model.thresholds;
  const rows = ui.rows
    .map((r) => {
      const status = uiRowStatus(r);
      const issues: string[] = [...r.warnings];
      if (r.error) issues.push(r.error);
      if (r.flowDetail) issues.push(r.flowDetail);
      const errorsBlock =
        r.consoleErrors.length || r.network.failed.length
          ? `<details><summary>${r.consoleErrors.length} console · ${r.network.failed.length} requests</summary><ul>${[
              ...r.consoleErrors.map((c) => `<li class="mono small">console: ${e(c)}</li>`),
              ...r.network.failed.map((f) => `<li class="mono small">${f.status} ${e(f.url)}</li>`),
            ].join('')}</ul></details>`
          : '';
      const isPage = r.kind === 'page';
      const navCell = isPage ? durationCell(r.perf.navMs, uiWarnMs, uiSlowMs) : dashCell;
      const ttfpCell =
        isPage && r.perf.ttfpMs !== undefined
          ? `<td class="num" data-v="${r.perf.ttfpMs}">${r.perf.ttfpMs} ms</td>`
          : dashCell;
      const readyCell = isPage ? durationCell(r.perf.fullyReadyMs, uiWarnMs, uiSlowMs) : dashCell;
      const weightCell = isPage
        ? `<td class="num" data-v="${r.network.transferredBytes}">${humanBytes(r.network.transferredBytes)}</td>`
        : dashCell;
      const reqCell = isPage ? `<td class="num" data-v="${r.network.requestCount}">${r.network.requestCount}</td>` : dashCell;
      return `<tr data-role="${e(r.role)}" data-status="${status.key}">
<td class="mono">${e(r.routeId)}${r.kind !== 'page' ? `<span class="flow">${e(r.kind)}</span>` : ''}</td>
<td class="mono small">${e(r.url)}</td>
<td>${e(r.role)}</td>
<td class="mono small">${r.permission ? e(r.permission) : '<span class="muted">—</span>'}</td>
<td class="small">${e(r.navigationUsed)}</td>
<td>${e(r.expected)}</td>
<td>${e(r.actual)}</td>
<td><span class="${STATUS_BADGE[status.key]}">${e(status.label)}</span></td>
${navCell}
${ttfpCell}
${readyCell}
${weightCell}
${reqCell}
<td class="small">${issues.map((w) => e(w)).join('<br>')}${errorsBlock}</td>
${screenshotCell(r, model)}
</tr>`;
    })
    .join('\n');
  return `<section>
<h2>Frontend (UI) <span class="muted">${ui.passed}/${ui.executed - ui.indeterminate} passed · ${ui.indeterminate} indeterminate · ${ui.skipped} skipped</span></h2>
<table class="grid" data-table="ui">
<thead><tr><th scope="col" data-sort>Route</th><th scope="col" data-sort>URL</th><th scope="col" data-sort>Role</th><th scope="col" data-sort>Permission</th><th scope="col" data-sort>Nav</th><th scope="col" data-sort>Expected</th><th scope="col" data-sort>Actual</th><th scope="col" data-sort>Status</th><th scope="col" data-sort class="num">Nav ms</th><th scope="col" data-sort class="num">TTFP</th><th scope="col" data-sort class="num">Ready ms</th><th scope="col" data-sort class="num">Weight</th><th scope="col" data-sort class="num">Req</th><th scope="col">Issues</th><th scope="col">Shot</th></tr></thead>
<tbody>${rows}</tbody>
</table>
</section>`;
}

function renderRollups(model: ReportModel): string {
  const roleRows = model.roleRollups
    .map((r) => {
      const total = r.apiPassed + r.apiFailed + r.uiPassed + r.uiFailed;
      const passed = r.apiPassed + r.uiPassed;
      const rate = total > 0 ? Math.round((passed / total) * 100) : null;
      return `<tr><td>${e(r.role)}</td><td class="num">${r.apiPassed}</td><td class="num">${r.apiFailed}</td><td class="num">${r.uiPassed}</td><td class="num">${r.uiFailed}</td><td>${
        rate === null ? '<span class="muted">—</span>' : `<div class="bar"><div class="bar-fill${rate < 100 ? ' bar-warn' : ''}" style="width:${rate}%"></div><span>${rate}%</span></div>`
      }</td></tr>`;
    })
    .join('\n');
  const groupRows = model.groupRollups
    .map(
      (g) =>
        `<tr><td class="mono">${e(g.group)}</td><td class="num">${g.apiPassed}</td><td class="num">${g.apiFailed}</td><td class="num">${g.uiPassed}</td><td class="num">${g.uiFailed}</td></tr>`,
    )
    .join('\n');
  return `<section class="cols">
<div>
<h2>By role</h2>
<table class="grid"><thead><tr><th scope="col">Role</th><th scope="col" class="num">API ✓</th><th scope="col" class="num">API ✗</th><th scope="col" class="num">UI ✓</th><th scope="col" class="num">UI ✗</th><th scope="col">Pass rate</th></tr></thead><tbody>${roleRows}</tbody></table>
</div>
<div>
<h2>By module</h2>
<table class="grid"><thead><tr><th scope="col">Group</th><th scope="col" class="num">API ✓</th><th scope="col" class="num">API ✗</th><th scope="col" class="num">UI ✓</th><th scope="col" class="num">UI ✗</th></tr></thead><tbody>${groupRows}</tbody></table>
</div>
</section>`;
}

const STYLE = `
:root{--bg:#f6f7f9;--card:#fff;--ink:#1c2430;--muted:#68727f;--line:#e3e7ec;--pass:#16803c;--pass-bg:#e8f6ee;--fail:#b42318;--fail-bg:#fdebe9;--skip:#68727f;--skip-bg:#eef0f3;--ind:#955d00;--ind-bg:#fdf3e0;--warn:#955d00;--slow:#b42318;--accent:#2456d6}
@media (prefers-color-scheme: dark){:root{--bg:#12161c;--card:#1a2029;--ink:#e6eaef;--muted:#8b96a3;--line:#2a3341;--pass:#4ade80;--pass-bg:#12301e;--fail:#f87171;--fail-bg:#3a1715;--skip:#8b96a3;--skip-bg:#232a35;--ind:#fbbf24;--ind-bg:#33270e;--warn:#fbbf24;--slow:#f87171;--accent:#7ba3f7}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 system-ui,Segoe UI,Roboto,sans-serif;padding:24px}
h1{font-size:22px;margin:0 0 4px}h2{font-size:16px;margin:0 0 10px}section{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:14px 0;overflow-x:auto}
.meta{color:var(--muted);font-size:12.5px;display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.kpi{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.kpi-v{font-size:22px;font-weight:650}.kpi-l{color:var(--muted);font-size:12px;margin-top:2px}.kpi-s{color:var(--muted);font-size:11.5px;margin-top:4px}
table.grid{border-collapse:collapse;width:100%;font-size:13px}.grid th,.grid td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.grid thead th{position:sticky;top:0;background:var(--card);cursor:default;white-space:nowrap}.grid th[data-sort]{cursor:pointer}.grid th[data-sort]:hover{color:var(--accent)}
.num{text-align:right;white-space:nowrap}.mono{font-family:ui-monospace,Consolas,monospace;font-size:12.5px}.small{font-size:12px}.muted{color:var(--muted);font-weight:400;font-size:12.5px}
.badge{display:inline-block;padding:1px 8px;border-radius:99px;font-size:11.5px;font-weight:600;white-space:nowrap}
.badge-pass{color:var(--pass);background:var(--pass-bg)}.badge-fail{color:var(--fail);background:var(--fail-bg)}.badge-skip{color:var(--skip);background:var(--skip-bg)}.badge-ind{color:var(--ind);background:var(--ind-bg)}
.dur-warn{color:var(--warn);font-weight:600}.dur-slow{color:var(--slow);font-weight:700}
.flow{margin-left:6px;font-size:10.5px;color:var(--accent);border:1px solid currentColor;border-radius:4px;padding:0 4px;vertical-align:1px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}@media(max-width:900px){.cols{grid-template-columns:1fr}}
.bar{position:relative;background:var(--skip-bg);border-radius:6px;height:18px;min-width:120px}.bar-fill{background:var(--pass);height:100%;border-radius:6px}.bar-warn{background:var(--ind)}.bar span{position:absolute;inset:0;text-align:center;font-size:11px;line-height:18px}
.filters{display:flex;gap:10px;align-items:center;margin:6px 0 12px;flex-wrap:wrap}.filters select,.filters button,.filters input{font:inherit;padding:4px 10px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);cursor:pointer}
.filters input{cursor:text;min-width:220px}.filters button.on{border-color:var(--accent);color:var(--accent);font-weight:600}
details{margin-top:4px}details summary{cursor:pointer;color:var(--accent);font-size:12px}details ul{margin:6px 0 0;padding-left:16px}
.exec .verdict-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.verdict{font-size:26px;font-weight:800;letter-spacing:1px;padding:6px 22px;border-radius:10px}
.verdict-pass{color:var(--pass);background:var(--pass-bg)}.verdict-fail{color:var(--fail);background:var(--fail-bg)}
.exec-sub{color:var(--muted);font-size:14px}
.charts{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px;align-items:flex-end}
.charts figure{margin:0}.charts figcaption{color:var(--muted);font-size:12px;margin-bottom:6px}
.seg-track{stroke:var(--skip-bg)}.seg-pass{stroke:var(--pass)}.seg-fail{stroke:var(--fail)}.seg-skip{stroke:var(--skip)}.seg-ind{stroke:var(--ind)}
.donut-center{fill:var(--ink);font-size:19px;font-weight:650}
.band-fast{fill:var(--pass)}.band-ok{fill:var(--accent)}.band-warn{fill:var(--ind)}.band-slow{fill:var(--fail)}
.bar-label,.bar-count{fill:var(--muted);font-size:11px}
.cov{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.cov-card{border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:12.5px}
.cov-card strong{margin-right:8px}.chips{margin-top:6px}.chip{display:inline-block;background:var(--skip-bg);color:var(--muted);border-radius:99px;padding:1px 8px;font-size:11px;margin:0 4px 4px 0}
.failures details.fgroup summary{font-size:13.5px;font-weight:600}
.excerpt{white-space:pre-wrap;word-break:break-word;background:var(--skip-bg);border-radius:6px;padding:8px;max-width:640px;max-height:220px;overflow:auto}
.perf-adv summary h2{display:inline;font-size:14px}
.mx-tools{display:flex;gap:8px;margin-bottom:8px}.mx-tools button{font:inherit;font-size:12px;padding:3px 10px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);cursor:pointer}
details.mx{border:1px solid var(--line);border-radius:8px;padding:4px 10px;margin:6px 0}
details.mx summary{display:flex;justify-content:space-between;gap:12px;align-items:center}
.mx-counts{font-size:12px}.c-pass{color:var(--pass);margin-right:8px}.c-fail{color:var(--fail);margin-right:8px}.c-skip{color:var(--skip)}
.mx-scroll{overflow-x:auto;margin:8px 0 4px}
table.mx-table{border-collapse:collapse;font-size:12px}
.mx-table th,.mx-table td{border:1px solid var(--line);padding:2px 6px}
.mx-table thead th{background:var(--card);position:sticky;top:0}
.mx-table .mx-unit{position:sticky;left:0;background:var(--card);text-align:left;max-width:420px;font-weight:400}
.mx-perm{display:block;color:var(--muted);font-size:10.5px}
.mx-table td.cell{width:26px;min-width:26px;text-align:center;font-weight:700}
.cell-pass{color:var(--pass);background:var(--pass-bg)}.cell-fail{color:var(--fail);background:var(--fail-bg)}.cell-skip{color:var(--skip);background:var(--skip-bg)}.cell-absent{color:var(--muted)}
footer{color:var(--muted);font-size:12px;margin-top:18px}
@media print{.filters,.mx-tools{display:none}body{background:#fff;padding:0}section{break-inside:avoid;border:none}details.mx,details.fgroup{border:none}details:not([open])>*:not(summary){display:revert}}
`;

const SCRIPT = `
(function(){
  var role=document.getElementById('f-role'),search=document.getElementById('f-search'),buttons=[].slice.call(document.querySelectorAll('.filters button[data-f]')),status='all';
  function apply(){var r=role?role.value:'all';var q=search?search.value.toLowerCase():'';
  [].slice.call(document.querySelectorAll('table.grid tbody tr')).forEach(function(tr){
    if(!tr.hasAttribute('data-role'))return;var okR=r==='all'||tr.getAttribute('data-role')===r;var s=tr.getAttribute('data-status');
    var okS=status==='all'||(status==='fail'?s==='fail':status==='pass'?s==='pass':s==='skip'||s==='indeterminate');
    var okQ=q===''||((tr.children[0]?tr.children[0].textContent:'')+' '+(tr.children[1]?tr.children[1].textContent:'')).toLowerCase().indexOf(q)>-1;
    tr.style.display=okR&&okS&&okQ?'':'none';});}
  if(role)role.addEventListener('change',apply);
  if(search)search.addEventListener('input',apply);
  buttons.forEach(function(b){b.addEventListener('click',function(){status=b.getAttribute('data-f');buttons.forEach(function(x){x.classList.toggle('on',x===b)});apply();});});
  [].slice.call(document.querySelectorAll('th[data-sort]')).forEach(function(th){th.addEventListener('click',function(){
    var table=th.closest('table'),tbody=table.querySelector('tbody'),idx=[].indexOf.call(th.parentNode.children,th);
    var dir=th._d=th._d===1?-1:1;
    th.setAttribute('aria-sort',dir===1?'ascending':'descending');
    [].slice.call(th.parentNode.children).forEach(function(x){if(x!==th)x.removeAttribute('aria-sort')});
    [].slice.call(tbody.querySelectorAll('tr')).sort(function(a,b){
      var ca=a.children[idx],cb=b.children[idx];var va=ca&&ca.getAttribute('data-v'),vb=cb&&cb.getAttribute('data-v');
      if(va!==null&&va!==undefined&&vb!==null&&vb!==undefined)return(Number(va)-Number(vb))*dir;
      return String(ca?ca.textContent:'').localeCompare(String(cb?cb.textContent:''))*dir;
    }).forEach(function(tr){tbody.appendChild(tr)});});});
  [].slice.call(document.querySelectorAll('.mx-tools button[data-mx]')).forEach(function(b){b.addEventListener('click',function(){
    var open=b.getAttribute('data-mx')==='open';var sec=b.closest('section');
    [].slice.call(sec.querySelectorAll('details.mx')).forEach(function(d){d.open=open});});});
})();
`;

export function renderHtml(model: ReportModel): string {
  const api = model.api;
  const ui = model.ui;
  const kpis: string[] = [];
  kpis.push(
    kpiCard(
      'Overall pass rate',
      model.overallPassRate === null ? '—' : `${model.overallPassRate}%`,
      `${(api?.passed ?? 0) + (ui?.passed ?? 0)} passed · ${(api?.failed ?? 0) + (ui?.failed ?? 0)} failed`,
    ),
  );
  if (api) {
    kpis.push(kpiCard('API checks', `${api.passed}/${api.executed}`, `${api.skipped} skipped`));
    kpis.push(kpiCard('API latency', `${api.avgDurationMs} ms avg`, `p95 ${api.p95DurationMs} ms`));
    kpis.push(kpiCard('API payload', humanBytes(api.totalBytes), 'total received'));
  }
  if (ui) {
    kpis.push(kpiCard('UI checks', `${ui.passed}/${ui.executed - ui.indeterminate}`, `${ui.indeterminate} indeterminate · ${ui.skipped} skipped`));
    kpis.push(kpiCard('Page readiness', `${ui.avgFullyReadyMs} ms avg`, `p95 ${ui.p95FullyReadyMs} ms · ${ui.perfWarnings} over budget`));
    kpis.push(kpiCard('Page weight', humanBytes(ui.totalBytes), 'total transferred'));
    kpis.push(kpiCard('Console errors', String(ui.consoleErrorCount), 'on executed pages'));
  }

  const roleOptions = ['all', ...model.roles].map((r) => `<option value="${e(r)}">${e(r)}</option>`).join('');
  const warningsBlock = model.runWarnings.length
    ? `<section><h2>Run warnings</h2><ul>${model.runWarnings.map((w) => `<li class="small">${e(w)}</li>`).join('')}</ul></section>`
    : '';

  function renderSecurityFindings(m: ReportModel): string {
    const sf = m.securityFindings;
    if (!sf) return '';
    const ungatedRows = sf.ungated
      .map(
        (u) =>
          `<li class="small"><strong class="mono">${e(u.method)} ${e(u.route)}</strong>${u.controller ? ` <span class="mono">(${e(u.controller)})</span>` : ''} — no <code>[RequirePermission]</code>, no <code>[AllowAnonymous]</code>: every authenticated role passes. The green rows above are the DEPLOYED behaviour, not a certification — fix the controller (DEV-API-033).</li>`,
      )
      .join('');
    const unseededRows = sf.unseeded
      .map(
        (u) =>
          `<li class="small"><strong class="mono">${e(u.method)} ${e(u.route)}</strong> — declared permission ${u.permission ? `<code>${e(u.permission)}</code> ` : ''}exists in NO live permission row: every role is denied (lost-seed drift — check the seed / DEV-CORE-011).</li>`,
      )
      .join('');
    return `<section><h2>⚠ Security surface — findings the run cannot certify</h2>
${ungatedRows ? `<h3>Ungated endpoints (${sf.ungated.length})</h3><ul>${ungatedRows}</ul>` : ''}
${unseededRows ? `<h3>Declared but unseeded permissions (${sf.unseeded.length})</h3><ul>${unseededRows}</ul>` : ''}
</section>`;
  }

  return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>${e(model.title)}</title>
<style>${STYLE}</style>
</head>
<body>
<h1>${e(model.title)}</h1>
<div class="meta">
<span>run <strong class="mono">${e(model.runId)}</strong></span>
${model.startedAt ? `<span>started ${e(model.startedAt)}</span>` : ''}
${model.finishedAt ? `<span>finished ${e(model.finishedAt)}</span>` : ''}
${model.durationMs !== undefined ? `<span>duration ${e(formatDurationMs(model.durationMs))}</span>` : ''}
${model.apiUrl ? `<span>API ${e(model.apiUrl)}</span>` : ''}
${model.frontendUrl ? `<span>frontend ${e(model.frontendUrl)}</span>` : ''}
${model.planPath ? `<span>plan ${e(model.planPath)}</span>` : ''}
${model.planSignatureShort ? `<span>signature ${e(model.planSignatureShort)}</span>` : ''}
</div>
${renderExecSummary(model)}
<div class="kpis">${kpis.join('')}</div>
${renderSecurityFindings(model)}
${renderFailuresFirst(model)}
<div class="filters">
<label>Role <select id="f-role">${roleOptions}</select></label>
<button data-f="all" class="on">All</button>
<button data-f="fail">Failures</button>
<button data-f="pass">Passed</button>
<button data-f="skip">Skipped / indeterminate</button>
<label>Search <input id="f-search" type="search" placeholder="route / endpoint…" aria-label="Filter rows by route or endpoint"></label>
</div>
${renderRollups(model)}
${model.apiMatrix ? renderMatrix(model.apiMatrix, 'RBAC matrix — API', 'Endpoint') : ''}
${model.uiMatrix ? renderMatrix(model.uiMatrix, 'RBAC matrix — UI', 'Route') : ''}
${renderApiSection(model)}
${renderUiSection(model)}
${renderPerfAdvisories(model)}
${warningsBlock}
<footer>Generated ${e(model.generatedAt)} · SmartStack /uat</footer>
<script>${SCRIPT}</script>
</body>
</html>
`;
}