/**
 * The screen. One committed look — a lit room at the bottom of a hole — so
 * the page paints its own dark ground rather than borrowing the browser's.
 *
 * The map is the whole design: lit tiles are warm, remembered tiles are cold
 * and thin, and everything else is the dark. That difference is the game's
 * only real information, so nothing else on the page is allowed to be as
 * bright as the lantern.
 */

import { DEPTHS, HEIGHT, WIDTH, xy } from "./dungeon.ts";
import { breedOf, type View } from "./game.ts";
import { ordinal } from "./names.ts";
import type { Delver, Grave, Score } from "./db.ts";

export const escape = (s: string): string =>
  s.replace(
    /[&<>"']/g,
    (c) =>
      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c] ??
      c,
  );

const STYLE = `
  :root {
    --dark: #0a0b0e;
    --stone: #14161c;
    --rule: #242832;
    --ink: #d9d4c7;
    --dim: #6d6a63;
    --memory: #3b414d;
    --lantern: #e8c07a;
    --floor-lit: #8a7a5c;
    --wall-lit: #5d5344;
    --gold: #e0b341;
    --blood: #c4513f;
    --bone: #b9a8d4;
    --stair: #6fae86;
    --you: #f3ece0;
    color-scheme: dark;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--dark); color: var(--ink);
    font: 15px/1.6 ui-monospace, "SF Mono", Menlo, monospace;
    padding: 1.25rem 1rem 3rem;
  }
  .wrap { max-width: 63rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.1rem; }
  header { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: baseline; }
  h1 { font-size: 1.1rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; margin: 0; color: var(--lantern); }
  h1 a { color: inherit; text-decoration: none; }
  .tag { color: var(--dim); font-size: .82rem; }
  a { color: var(--stair); }

  .board { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: flex-start; }
  .glass { flex: 1 1 32rem; min-width: 0; background: #06070a; border: 1px solid var(--rule); border-radius: 3px; padding: .7rem; overflow-x: auto; }
  .map { display: grid; grid-template-columns: repeat(${WIDTH}, 1ch); line-height: 1.05; font-size: clamp(9px, 2.1vw, 15px); white-space: pre; }
  .map span { display: block; text-align: center; }
  .u { color: #0d0e12; }                 /* never seen */
  .m { color: var(--memory); }           /* remembered */
  .f { color: var(--floor-lit); }        /* lit floor */
  .w { color: var(--wall-lit); }         /* lit wall */
  .s { color: var(--stair); font-weight: 700; }
  .c { color: var(--gold); }
  .g { color: var(--bone); }
  .e { color: var(--blood); font-weight: 700; }
  .o { color: #7fa7c4; font-weight: 700; }
  .y { color: var(--you); font-weight: 700; text-shadow: 0 0 6px var(--lantern); }

  aside { flex: 1 1 15rem; display: flex; flex-direction: column; gap: 1rem; min-width: 13rem; }
  .panel { background: var(--stone); border: 1px solid var(--rule); border-radius: 3px; padding: .8rem .9rem; }
  .panel h2 { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin: 0 0 .5rem; font-weight: 600; }
  .stat { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }
  .stat b { font-weight: 600; color: var(--ink); }
  .hp { height: 7px; background: #241a18; border-radius: 2px; overflow: hidden; margin: .45rem 0 .2rem; }
  .hp div { height: 100%; background: linear-gradient(90deg, var(--blood), #d98b5f); }
  .entry { font-size: .82rem; color: var(--dim); padding: .3rem 0; border-top: 1px solid var(--rule); }
  .entry:first-of-type { border-top: 0; }
  .entry b { color: var(--bone); font-weight: 600; }
  .entry i { color: var(--gold); font-style: normal; }

  .log { background: #06070a; border: 1px solid var(--rule); border-radius: 3px; padding: .7rem .9rem; min-height: 6.5rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .1rem; }
  .log p { margin: 0; font-size: .86rem; color: var(--dim); }
  .log p:last-child { color: var(--ink); }

  .controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
  .pad { display: grid; grid-template-columns: repeat(3, 3rem); grid-template-rows: repeat(2, 3rem); gap: .35rem; }
  form.inline { display: contents; }
  button {
    font: inherit; min-height: 44px; min-width: 3rem; padding: .4rem .7rem; cursor: pointer;
    color: var(--ink); background: #171a21; border: 1px solid var(--rule); border-radius: 3px;
  }
  button:hover { border-color: var(--lantern); color: var(--lantern); }
  button:focus-visible { outline: 2px solid var(--lantern); outline-offset: 2px; }
  .pad .n { grid-column: 2; grid-row: 1; }
  .pad .w { grid-column: 1; grid-row: 2; }
  .pad .s { grid-column: 2; grid-row: 2; }
  .pad .e { grid-column: 3; grid-row: 2; }
  .others { display: flex; flex-wrap: wrap; gap: .4rem; }
  .keys { color: var(--dim); font-size: .78rem; }
  .legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; color: var(--dim); font-size: .78rem; }
  .dead { text-align: center; padding: 2rem 1rem; }
  .dead h2 { color: var(--blood); letter-spacing: .1em; font-size: 1rem; }
  .dead p { color: var(--dim); max-width: 34rem; margin: .5rem auto; }
  footer { color: var(--dim); font-size: .76rem; border-top: 1px solid var(--rule); padding-top: .8rem; }
`;

export interface Chrome {
  env: string;
  pull: string | undefined;
  commit: string;
  ssh: string | undefined;
}

const where = (c: Chrome): string =>
  c.env === "preview" ? `preview of pull #${c.pull ?? "?"}` : c.env;

function layout(chrome: Chrome, title: string, body: string): string {
  return `<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>${escape(title)}</title>
<style>${STYLE}</style>
<div class="wrap">
<header>
  <h1><a href="/">lanternfall</a></h1>
  <span class="tag">one dungeon · five floors · everyone's map</span>
</header>
${body}
<footer>
  <p>${escape(where(chrome))}${chrome.commit ? ` · ${escape(chrome.commit)}` : ""}${chrome.ssh ? ` · terminal: ${escape(chrome.ssh)}` : ""}</p>
  <p>The floors are generated from a seed, so they are the same for everyone and always will be. Only what has happened is written down.</p>
</footer>
</div>
<script src="/static/keys.v1.js" defer></script>
`;
}

/** The dungeon as the delver currently understands it. */
function mapOf(view: View, delver: Delver, caches: Set<number>): string {
  const cells: string[] = [];
  for (let cell = 0; cell < WIDTH * HEIGHT; cell += 1) {
    const tile = view.floor.tiles[cell] ?? "#";
    const lit = view.visible.has(cell);
    const known = view.seen.has(cell);
    let glyph = tile === "#" ? "#" : tile === "." ? "·" : tile;
    let cls = lit ? (tile === "#" ? "w" : "f") : known ? "m" : "u";
    if (!lit && !known) {
      cells.push(`<span class="u"> </span>`);
      continue;
    }
    if (tile === ">" || tile === "<") cls = lit ? "s" : "m";
    // Things are only there when you can see them; the map remembers rooms,
    // not what is standing in them.
    if (lit) {
      if (caches.has(cell)) {
        glyph = "$";
        cls = "c";
      }
      const monster = view.monsters.find((m) => m.cell === cell);
      if (monster) {
        glyph = breedOf(monster.kind).glyph;
        cls = "e";
      } else if (view.others.has(cell)) {
        glyph = "@";
        cls = "o";
      }
    }
    if (view.graves.has(cell) && (lit || known)) {
      glyph = "†";
      cls = lit ? "g" : "m";
    }
    if (cell === delver.cell) {
      glyph = "@";
      cls = "y";
    }
    cells.push(`<span class="${cls}">${glyph}</span>`);
  }
  return `<div class="glass"><div class="map" role="img" aria-label="the dungeon floor, drawn in ascii">${cells.join("")}</div></div>`;
}

const button = (action: string, label: string, extra = ""): string =>
  `<form class="inline" method="post" action="/act"><button class="${extra}" name="action" value="${action}">${label}</button></form>`;

export function gamePage(
  chrome: Chrome,
  delver: Delver,
  view: View,
  caches: Set<number>,
  log: readonly string[],
  graves: readonly Grave[],
  scores: readonly Score[],
  known: number,
): string {
  const tile = view.floor.tiles[delver.cell];
  const stairs =
    (tile === ">" ? button("descend", "descend ›") : "") +
    (tile === "<" ? button("ascend", delver.depth === 1 ? "climb out ↑" : "climb up ↑") : "");
  return layout(
    chrome,
    `floor ${delver.depth} — lanternfall`,
    `<div class="board">
${mapOf(view, delver, caches)}
<aside>
  <div class="panel">
    <h2>${escape(delver.name)}</h2>
    <div class="stat"><span>health</span><b>${delver.hp} / ${delver.max_hp}</b></div>
    <div class="hp"><div style="width:${Math.max(0, Math.round((delver.hp / delver.max_hp) * 100))}%"></div></div>
    <div class="stat"><span>carrying</span><b>${delver.gold} gold</b></div>
    <div class="stat"><span>depth</span><b>${ordinal(delver.depth)} floor</b></div>
    <div class="stat"><span>turns</span><b>${delver.turns}</b></div>
  </div>
  <div class="panel">
    <h2>the dead</h2>
    ${graves.length === 0 ? `<p class="entry">Nobody yet.</p>` : graves
      .slice(0, 5)
      .map(
        (g) =>
          `<p class="entry"><b>${escape(g.name)}</b> · floor ${g.depth} · <i>${g.gold}g</i><br>${escape(g.epitaph)}</p>`,
      )
      .join("")}
  </div>
  <div class="panel">
    <h2>climbed out</h2>
    ${scores.length === 0 ? `<p class="entry">Nobody has come back up yet.</p>` : scores
      .slice(0, 5)
      .map(
        (s) => `<p class="entry"><b>${escape(s.name)}</b> · <i>${s.gold}g</i> · floor ${s.depth}</p>`,
      )
      .join("")}
  </div>
  <div class="panel">
    <h2>the dungeon remembers</h2>
    <div class="stat"><span>tiles lit, ever</span><b>${known}</b></div>
    <div class="stat"><span>floors</span><b>${DEPTHS}</b></div>
  </div>
</aside>
</div>

<div class="log">${log.length === 0 ? `<p>You are at the mouth of the dungeon. Your lantern throws about four paces.</p>` : log.map((line) => `<p>${escape(line)}</p>`).join("")}</div>

<div class="controls">
  <div class="pad">
    ${button("north", "↑", "n")}${button("west", "←", "w")}${button("south", "↓", "s")}${button("east", "→", "e")}
  </div>
  <div class="others">
    ${button("wait", "wait / rest")}
    ${stairs}
  </div>
  <p class="keys">arrows or wasd move · <b>.</b> waits · <b>&gt;</b> descends · <b>&lt;</b> climbs</p>
</div>
<p class="legend">
  <span><b class="y">@</b> you</span><span><b style="color:#7fa7c4">@</b> another delver</span>
  <span><b style="color:var(--blood)">r g G S W</b> what lives here</span><span><b style="color:var(--gold)">$</b> a cache</span>
  <span><b style="color:var(--bone)">†</b> a grave</span><span><b style="color:var(--stair)">&gt; &lt;</b> stairs</span>
</p>`,
  );
}

export function endPage(
  chrome: Chrome,
  delver: Delver,
  climbedOut: boolean,
  log: readonly string[],
): string {
  return layout(
    chrome,
    climbedOut ? "climbed out — lanternfall" : "died — lanternfall",
    `<div class="dead">
  <h2>${climbedOut ? "You climbed out." : "You died."}</h2>
  <p>${escape(delver.name)} ${climbedOut ? `banked ${delver.gold} gold` : `fell on the ${ordinal(delver.depth)} floor with ${delver.gold} gold`} after ${delver.turns} turns.</p>
  ${delver.epitaph ? `<p>${escape(delver.epitaph)}</p>` : ""}
  ${climbedOut ? "" : `<p>Your grave is where you fell, and whoever finds it takes half of what you were carrying.</p>`}
  <div class="log" style="max-width:34rem;margin:1.2rem auto;">${log.map((l) => `<p>${escape(l)}</p>`).join("")}</div>
  <form method="post" action="/act"><button name="action" value="wait">send someone else down</button></form>
</div>`,
  );
}

export function notFoundPage(chrome: Chrome): string {
  return layout(
    chrome,
    "not found — lanternfall",
    `<div class="dead"><h2>There is nothing here.</h2><p><a href="/">Back to the dungeon.</a></p></div>`,
  );
}