/**
 * The page a documentation file is rendered into.
 *
 * ONE TEMPLATE FOR ALL FIVE, so the guide reads as one publication rather than five files that
 * happen to be linked. It carries the same dark palette, the same type and the same blue as the
 * game, because a player arrives here from the board and should not feel they have left the site.
 *
 * WHAT THE PAGE ADDS OVER THE MARKDOWN, and why each is here rather than in the source:
 *
 *   - a **nav** across the five documents, so the set is navigable from any one of them. The
 *     Markdown cannot carry this: it would have to be repeated in every file and would drift.
 *   - a **contents list** built from the headings actually rendered, so it cannot fall out of step
 *     with the document the way a hand-written one does.
 *   - **anchors** on every heading, so a section can be linked to in a bug report.
 *   - a **measure** of about 70 characters. Long lines are the single biggest thing making plain
 *     text hard to read, and these documents are long.
 *
 * PRINTS SANELY TOO: the nav and contents drop out, the palette goes to ink on paper, and tables
 * keep their rules. A rules reference is a thing people print.
 */

import type { Heading } from './markdown.ts';

export type DocPage = {
  /** Published filename, without the extension — also the nav's identity for "you are here". */
  slug: string;
  /** What the nav calls it. */
  nav: string;
};

export const DOC_PAGES: readonly DocPage[] = [
  { slug: 'quickstart', nav: 'Quickstart' },
  { slug: 'rules', nav: 'Rules' },
  { slug: 'home-deck', nav: 'Home deck' },
  { slug: 'mainline-deck', nav: 'Mainline deck' },
  { slug: 'components', nav: 'Components' },
];

export const DOCS_CSS = `
:root{
  --bg:#12161c; --panel:#161b22; --line:#2c333d; --fg:#cfd6e0; --dim:#8b94a3;
  --head:#cfe0f5; --link:#5aa9e6; --accent:#9fb6d8; --rule:#39424e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:var(--link)}
a:hover{color:#9fd0f5}

/* THE NAV. Sticky, because these documents are long and the set has to stay reachable from the
   middle of one. Horizontally scrollable on a phone rather than wrapping into three rows. */
.docnav{
  position:sticky;top:0;z-index:5;background:var(--panel);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:4px;padding:8px 16px;overflow-x:auto;
}
.docnav .home{color:var(--head);font-weight:700;margin-right:10px;text-decoration:none;white-space:nowrap}
.docnav a.tab{
  color:var(--dim);text-decoration:none;padding:4px 10px;border-radius:6px;white-space:nowrap;
  border:1px solid transparent;font-size:13px;
}
.docnav a.tab:hover{color:var(--fg);background:#1f2733}
.docnav a.tab[aria-current="page"]{color:#f2e6cf;background:#2b3444;border-color:#c8912f}

.wrap{max-width:78ch;margin:0 auto;padding:22px 16px 72px}

/* THE HEADER — what this document is and which build it describes, lifted out of the prose so the
   version is the first thing on the page, as the process rules require. */
.dochead{border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:8px}
.dochead h1{margin:0 0 6px;font-size:26px;line-height:1.25;color:var(--head);letter-spacing:.01em}
.dochead .ver{color:var(--dim);font-size:13px}
.dochead .ver b{color:#c8912f;font-weight:700}

/* CONTENTS, built from the headings actually rendered. Collapsed by default on a phone. */
.toc{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:18px 0 26px}
.toc summary{cursor:pointer;color:var(--accent);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.toc ol{list-style:none;margin:10px 0 2px;padding:0;columns:2;column-gap:26px}
.toc li{margin:0 0 4px;break-inside:avoid}
.toc li.l3{padding-left:14px;font-size:13px}
.toc a{text-decoration:none;color:var(--fg)}
.toc a:hover{color:var(--link)}
@media (max-width:640px){.toc ol{columns:1}}

h2,h3,h4{color:var(--head);line-height:1.3;margin:28px 0 8px}
h2{font-size:20px;border-bottom:1px solid var(--rule);padding-bottom:5px}
h3{font-size:16px}
h4{font-size:14px;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
p{margin:0 0 12px}
strong{color:#e8eef7}
hr{border:none;border-top:1px solid var(--rule);margin:26px 0}

/* The anchor beside a heading: invisible until the heading is hovered, so it never competes with
   the words but is always there to copy. */
.anchor{margin-left:.45em;color:var(--rule);text-decoration:none;font-weight:400;opacity:0}
h1:hover .anchor,h2:hover .anchor,h3:hover .anchor,h4:hover .anchor{opacity:1}
.anchor:hover{color:var(--link)}

ul,ol{margin:0 0 12px;padding-left:22px}
li{margin:0 0 5px}
li>ul,li>ol{margin-top:5px}

code{background:#1d232c;border:1px solid var(--line);border-radius:4px;padding:1px 5px;
  font:13px ui-monospace,SFMono-Regular,Menlo,monospace;color:#e0c89a}
pre{background:#1d232c;border:1px solid var(--line);border-radius:7px;padding:12px 14px;overflow-x:auto}
pre code{background:none;border:none;padding:0;color:var(--fg)}

blockquote{
  margin:16px 0;padding:10px 14px;background:#181f28;
  border-left:3px solid #c8912f;border-radius:0 7px 7px 0;
}
blockquote > :last-child{margin-bottom:0}

/* TABLES THAT LOOK LIKE TABLES. This is the whole reason the documentation is rendered rather than
   served as text: a card reference is mostly tables, and as plain text they are rows of pipes. */
.tablewrap{overflow-x:auto;margin:0 0 16px;border:1px solid var(--line);border-radius:8px}
table{border-collapse:collapse;width:100%;font-size:14px}
thead th{
  background:#1f2733;color:var(--accent);text-align:left;font-weight:600;
  padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:7px 12px;border-bottom:1px solid #222a34;vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even){background:#151a21}
tbody tr:hover{background:#1b222b}
.ta-right{text-align:right;font-variant-numeric:tabular-nums}
.ta-center{text-align:center}
th.ta-right,th.ta-center{text-align:inherit}

footer{margin-top:40px;padding-top:14px;border-top:1px solid var(--rule);color:var(--dim);font-size:12px}
footer a{color:var(--accent)}

@media print{
  .docnav,.toc,.anchor{display:none}
  body{background:#fff;color:#111;font-size:11pt}
  h1,h2,h3,h4,strong{color:#000}
  a{color:#000;text-decoration:underline}
  .wrap{max-width:none;padding:0}
  .tablewrap{border-color:#999}
  thead th{background:#eee;color:#000;border-bottom-color:#999}
  td{border-bottom-color:#ccc}
  tbody tr:nth-child(even){background:#f6f6f6}
  blockquote{background:#f4f4f4;border-left-color:#888}
  code,pre{background:#f4f4f4;border-color:#ccc;color:#111}
}
`;

/** The contents list, from the headings the renderer actually produced. */
function toc(headings: readonly Heading[]): string {
  // h2 and h3 only: h1 is the page title, and h4 is a label inside a section rather than a place.
  const items = headings.filter((h) => h.level === 2 || h.level === 3);
  if (items.length < 3) return '';
  const lis = items
    .map((h) => `<li class="l${h.level}"><a href="#${h.id}">${h.text.replace(/&/g, '&amp;').replace(/</g, '&lt;')}</a></li>`)
    .join('');
  return `<details class="toc" open><summary>On this page</summary><ol>${lis}</ol></details>`;
}

export function docPage(opts: {
  slug: string;
  title: string;
  version: string;
  body: string;
  headings: readonly Heading[];
}): string {
  const tabs = DOC_PAGES.map(
    (d) =>
      `<a class="tab" href="./${d.slug}.html"${d.slug === opts.slug ? ' aria-current="page"' : ''}>${d.nav}</a>`,
  ).join('');
  return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>${opts.title} — Station Master</title>
<style>${DOCS_CSS}</style>
</head>
<body>
<nav class="docnav"><a class="home" href="./index.html">Station Master</a>${tabs}</nav>
<div class="wrap">
  <header class="dochead">
    <h1>${opts.title}</h1>
    <div class="ver">${opts.version}</div>
  </header>
  ${toc(opts.headings)}
  ${opts.body}
  <footer>
    Station Master — <a href="./index.html">back to the game</a> ·
    these references are kept current with every release.
  </footer>
</div>
</body>
</html>
`;
}