// THE HTML RENDERER — a document model, and the one place that turns it into a page.
//
// This module knows NOTHING about an audit. It takes a `Doc` — headings, paragraphs, notes,
// tables, figures — and returns a string. Everything that decides what a criterion's status
// IS lives in src/html-report.ts, which builds the `Doc`; everything that touches the disk
// lives in src/html-emit.ts. The split is what lets the renderer be tested by rendering.
//
// Three rules hold it together:
//
//   1. NO MARKDOWN CONVERSION. A GFM table cannot express `<caption>` or `scope=`, and a
//      report whose own tables have no headers is an accessibility deliverable that fails
//      1.3.1. So the model is structural and the renderer emits real table markup.
//   2. NO `<script>`, EVER. The artifact is downloaded and opened from a file:// URL or an
//      artifact viewer, both of which are hostile to scripts, and a report that needs
//      JavaScript to be read is a report that some readers cannot read.
//   3. THE PAGE MUST PASS THIS ENGINE'S OWN AUDIT. Landmarks, one `<h1>`, no heading-level
//      skip, `<caption>` and `scope` on every table, a skip link whose target exists, `lang`
//      from the document, and status NEVER encoded by colour alone — every mark carries its
//      letter. tests/html.test.ts audits the output with the engine rather than asserting
//      that it looks right.
import type { Lang, Status } from "./types.js";

/** The status marks, identical to the Markdown grids — `C` conforming, `NC` non-conforming,
 *  `—` not applicable, `?` to assess. The LETTER is the accessible channel; the colour below
 *  is redundant, which is what keeps this page from failing 1.4.1 itself. */
const MARK: Record<Status, string> = { C: "C", NC: "NC", NA: "—", manual: "?" };
const CLASS: Record<Status, string> = { C: "c", NC: "nc", NA: "na", manual: "m" };

export type Tone = "info" | "warn";
export type Align = "start" | "end";

/** An inline span. Composing runs is how emphasis and code get expressed without a Markdown
 *  parser — and without any path by which raw HTML could reach the output. */
export interface Run {
  text: string;
  mono?: boolean;
  strong?: boolean;
  em?: boolean;
  href?: string;
}

export interface Cell {
  text: string;
  mono?: boolean;
  /** Rendered as its mark plus a colour class. Never a colour on its own. */
  status?: Status;
  align?: Align;
  strong?: boolean;
  colspan?: number;
  /** A row header — `<th scope="row">` rather than `<td>`. */
  header?: boolean;
  href?: string;
}

export interface Column {
  text: string;
  align?: Align;
}

export type Block =
  // Level 1 is the document title and is emitted by the chrome, never by a block: a `Doc`
  // that could contain a second <h1> is a `Doc` that will eventually contain one.
  | { kind: "heading"; level: 2 | 3 | 4; text: string; id?: string }
  | { kind: "para"; runs: Run[] }
  | { kind: "note"; tone: Tone; runs: Run[] }
  | { kind: "list"; items: Run[][] }
  | { kind: "table"; caption: string; columns: Column[]; rows: Cell[][] }
  | { kind: "figure"; src: string; alt: string; caption?: string }
  | { kind: "details"; summary: string; blocks: Block[] };

export interface NavLink {
  href: string;
  text: string;
  current?: boolean;
}

export interface Doc {
  lang: Lang;
  /** The `<title>` and the single `<h1>`. */
  title: string;
  subtitle?: Run[];
  /** Sibling documents. Rendered as a NAMED `<nav>` — two unnamed navigation regions on one
   *  page is RGAA 12.6, which this engine reports. */
  nav?: NavLink[];
  blocks: Block[];
}

const T = {
  fr: {
    skip: "Aller au contenu",
    nav: "Documents du rapport",
    printHint: "Pour un PDF : imprimez cette page (Ctrl/Cmd + P) et choisissez « Enregistrer au format PDF ».",
    generated: "Généré par ultra11y",
  },
  en: {
    skip: "Skip to content",
    nav: "Report documents",
    printHint: "For a PDF: print this page (Ctrl/Cmd + P) and choose “Save as PDF”.",
    generated: "Generated by ultra11y",
  },
} as const;

/** Escapes text for both element content and double-quoted attribute values. The apostrophe
 *  is included even though attributes here are double-quoted: this function is the ONLY door
 *  between audit data and the page, and a door that is only safe in the contexts its current
 *  callers happen to use is a door that will be opened somewhere else. */
export function esc(s: string): string {
  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
}

/** The single stylesheet. Light and dark, and a print sheet that turns the document into
 *  something an auditor can hand to a client on paper.
 *
 *  The dark status colours are NOT the light ones: `#0a7d33`, `#b3261e` and `#b06000` measure
 *  3.50, 2.81 and 3.96 against `#141416`, all below AA. Measured with src/color.ts's own
 *  `contrastRatio` — an accessibility report whose own palette fails 1.4.3 has no standing. */
const STYLE = `
 :root { color-scheme: light dark; --bg:#fff; --fg:#111; --line:#e3e3e6; --mut:#666; --soft:#f6f6f8;
         --c:#0a7d33; --nc:#b3261e; --m:#b06000; --accent:#0b5fa5; }
 @media (prefers-color-scheme: dark) { :root { --bg:#141416; --fg:#f2f2f7; --line:#2c2c2e; --mut:#a1a1a6; --soft:#1c1c1f;
         --c:#3fbf6f; --nc:#ff6b5e; --m:#d99a2b; --accent:#6cb6ff; } }
 * { box-sizing:border-box; }
 body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.6 ui-sans-serif,system-ui,-apple-system,sans-serif; }
 .skip { position:absolute; left:-9999px; top:0; padding:8px 14px; background:var(--bg); color:var(--fg); border:2px solid var(--accent); z-index:9; }
 .skip:focus { left:8px; top:8px; }
 .wrap { max-width:78ch; margin:0 auto; padding:32px 20px 64px; }
 header.top { border-bottom:1px solid var(--line); }
 h1 { font-size:26px; line-height:1.25; margin:0 0 6px; }
 h2 { font-size:20px; margin:36px 0 10px; padding-top:8px; border-top:1px solid var(--line); }
 h3 { font-size:17px; margin:26px 0 8px; }
 h4 { font-size:15px; margin:20px 0 6px; }
 p { margin:0 0 12px; } p.sub { color:var(--mut); margin:0 0 4px; }
 a { color:var(--accent); }
 a:focus-visible, summary:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
 nav.docs ul { list-style:none; display:flex; flex-wrap:wrap; gap:6px 16px; margin:12px 0 0; padding:0; }
 nav.docs [aria-current="page"] { font-weight:700; }
 code, .mono { font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; }
 ul.body { margin:0 0 12px; padding-left:22px; }
 .note { margin:0 0 14px; padding:10px 14px; border-left:4px solid var(--mut); background:var(--soft); }
 .note.warn { border-left-color:var(--m); }
 .tw { overflow-x:auto; margin:0 0 18px; }
 table { border-collapse:collapse; width:100%; font-size:14px; }
 caption { text-align:left; font-weight:600; padding:0 0 8px; }
 th, td { padding:6px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
 thead th { border-bottom:2px solid var(--line); background:var(--soft); }
 td.end, th.end { text-align:right; }
 tr.group th { background:var(--soft); font-weight:700; }
 .st { font-weight:700; }
 .st-c{color:var(--c)} .st-nc{color:var(--nc)} .st-na{color:var(--mut)} .st-m{color:var(--m)}
 figure { margin:0 0 18px; }
 figure img { max-width:100%; height:auto; border:1px solid var(--line); }
 figcaption { color:var(--mut); font-size:13px; margin-top:6px; }
 details { margin:0 0 14px; border:1px solid var(--line); padding:8px 12px; }
 summary { cursor:pointer; font-weight:600; }
 footer.bot { margin-top:48px; padding-top:12px; border-top:1px solid var(--line); color:var(--mut); font-size:13px; }
 @media print {
   :root { --bg:#fff; --fg:#000; --line:#bbb; --mut:#444; --soft:#f2f2f2; --c:#0a7d33; --nc:#b3261e; --m:#8a4b00; --accent:#00449e; }
   .skip, nav.docs { display:none; }
   .wrap { max-width:none; padding:0; }
   body { font-size:11pt; }
   /* One criterion per block, never split across a page break — the whole point of a
      printable deliverable is that a finding and its evidence stay on the same sheet. */
   h2, h3 { break-after:avoid-page; page-break-after:avoid; }
   figure, table, .note, details { break-inside:avoid-page; page-break-inside:avoid; }
   details { border:0; padding:0; } details > summary { list-style:none; }
   /* A collapsed section would print as a title with nothing under it. */
   details[open], details:not([open]) > *:not(summary) { display:revert; }
   figure img { max-width:16cm; }
   a { color:inherit; text-decoration:underline; }
 }`;

function runHtml(r: Run): string {
  let inner = esc(r.text);
  if (r.mono) inner = `<code>${inner}</code>`;
  if (r.strong) inner = `<strong>${inner}</strong>`;
  if (r.em) inner = `<em>${inner}</em>`;
  return r.href ? `<a href="${esc(r.href)}">${inner}</a>` : inner;
}

const runsHtml = (runs: Run[]): string => runs.map(runHtml).join("");

function cellHtml(c: Cell, tag: "th" | "td"): string {
  const attrs: string[] = [];
  if (tag === "th") attrs.push('scope="row"');
  if (c.align === "end") attrs.push('class="end"');
  if (c.colspan && c.colspan > 1) attrs.push(`colspan="${c.colspan}"`);
  let inner: string;
  if (c.status) {
    inner = `<span class="st st-${CLASS[c.status]}">${esc(MARK[c.status])}</span>`;
  } else {
    // An empty data cell is announced as "blank"; the em dash says "no value" out loud, and
    // is not the bare "-" the engine's own advisory rule flags.
    inner = c.text === "" ? "—" : runHtml({ text: c.text, mono: c.mono, strong: c.strong, ...(c.href ? { href: c.href } : {}) });
  }
  return `<${tag}${attrs.length ? ` ${attrs.join(" ")}` : ""}>${inner}</${tag}>`;
}

function blockHtml(b: Block): string[] {
  switch (b.kind) {
    case "heading":
      return [`<h${b.level}${b.id ? ` id="${esc(b.id)}"` : ""}>${esc(b.text)}</h${b.level}>`];
    case "para":
      return [`<p>${runsHtml(b.runs)}</p>`];
    case "note":
      return [`<div class="note${b.tone === "warn" ? " warn" : ""}">${runsHtml(b.runs)}</div>`];
    case "list":
      return [`<ul class="body">${b.items.map((i) => `<li>${runsHtml(i)}</li>`).join("")}</ul>`];
    case "figure":
      return [`<figure><img src="${esc(b.src)}" alt="${esc(b.alt)}">${b.caption ? `<figcaption>${esc(b.caption)}</figcaption>` : ""}</figure>`];
    case "details":
      return [`<details open><summary>${esc(b.summary)}</summary>`, ...b.blocks.flatMap(blockHtml), "</details>"];
    case "table": {
      const out: string[] = ['<div class="tw">', "<table>", `<caption>${esc(b.caption)}</caption>`, "<thead><tr>"];
      for (const col of b.columns) out.push(`<th scope="col"${col.align === "end" ? ' class="end"' : ""}>${esc(col.text)}</th>`);
      out.push("</tr></thead><tbody>");
      for (const row of b.rows) {
        // A row whose only cell spans the table is a GROUP heading (a WCAG guideline, an RGAA
        // theme). Emitted as <th scope="colgroup">, not as a <td> with empty siblings: empty
        // data cells are announced as "blank", and this row is a label, not data.
        const group = row.length === 1 && (row[0]?.colspan ?? 0) > 1;
        if (group) {
          const c = row[0]!;
          out.push(`<tr class="group"><th scope="colgroup" colspan="${c.colspan}">${esc(c.text)}</th></tr>`);
          continue;
        }
        out.push(`<tr>${row.map((c, i) => cellHtml(c, i === 0 || c.header ? "th" : "td")).join("")}</tr>`);
      }
      out.push("</tbody></table>", "</div>");
      return out;
    }
  }
}

/** The whole page. Self-contained by construction: the stylesheet is inline, there is no
 *  script, and every `src`/`href` a caller passes in is its own responsibility to keep
 *  inside the artifact (src/html-emit.ts enforces that). */
export function renderHtmlDocument(doc: Doc): string {
  const t = T[doc.lang];
  const out: string[] = [];
  out.push(`<!doctype html>`, `<html lang="${doc.lang}">`, "<head>");
  out.push('<meta charset="utf-8">', '<meta name="viewport" content="width=device-width, initial-scale=1">');
  out.push(`<title>${esc(doc.title)}</title>`);
  out.push(`<style>${STYLE}</style>`);
  out.push("</head>", "<body>");
  out.push(`<a class="skip" href="#content">${esc(t.skip)}</a>`);
  out.push('<header class="top"><div class="wrap">');
  out.push(`<h1>${esc(doc.title)}</h1>`);
  if (doc.subtitle?.length) out.push(`<p class="sub">${runsHtml(doc.subtitle)}</p>`);
  if (doc.nav?.length) {
    out.push(`<nav class="docs" aria-label="${esc(t.nav)}"><ul>`);
    for (const l of doc.nav) out.push(`<li><a href="${esc(l.href)}"${l.current ? ' aria-current="page"' : ""}>${esc(l.text)}</a></li>`);
    out.push("</ul></nav>");
  }
  out.push("</div></header>");
  out.push('<main id="content" class="wrap">');
  for (const b of doc.blocks) out.push(...blockHtml(b));
  out.push("</main>");
  out.push(`<footer class="bot"><div class="wrap"><p>${esc(t.generated)} · ${esc(t.printHint)}</p></div></footer>`);
  out.push("</body>", "</html>");
  return `${out.join("\n")}\n`;
}