/**
 * Every page, server-rendered, script-free. The oracle speaks in a serif and
 * keeps its bookkeeping in a sans — the voice and the ledger should not look
 * like the same thing.
 */

import { calibrate, verdictOnItself, type Calibration } from "./oracle.ts";
import type { Filter, Row } from "./db.ts";

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

const STYLE = `
  :root {
    color-scheme: light dark;
    --ink: light-dark(#1b1a17, #ece7dd);
    --dim: light-dark(#6b665c, #9a9387);
    --rule: light-dark(#1b1a1722, #ece7dd22);
    --ground: light-dark(#faf7f1, #16151a);
    font: 17px/1.6 system-ui, sans-serif;
  }
  * { box-sizing: border-box; }
  body { max-width: 44rem; margin: 0 auto; padding: 2rem 1rem 4rem; background: var(--ground); color: var(--ink); }
  a { color: inherit; }
  h1 { font: 600 1.5rem/1.2 ui-serif, Georgia, serif; letter-spacing: .02em; margin: 0; }
  h1 a { text-decoration: none; }
  .sub { color: var(--dim); margin: .25rem 0 2rem; font-size: .95rem; }
  .stance { font: 400 1.6rem/1.35 ui-serif, Georgia, serif; margin: .5rem 0 1rem; }
  .auspice { font: italic 400 1.05rem/1.5 ui-serif, Georgia, serif; color: var(--dim); }
  .label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
  form.ask { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }
  input[type=text] { flex: 1 1 14rem; min-height: 48px; padding: .7rem .9rem; font: inherit;
    color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: .6rem; }
  button { min-height: 48px; padding: .7rem 1.1rem; font: inherit; cursor: pointer;
    border: 1px solid var(--rule); border-radius: .6rem; background: var(--ink); color: var(--ground); }
  button.quiet { background: transparent; color: var(--ink); }
  .meter { height: 6px; border-radius: 999px; background: var(--rule); overflow: hidden; margin: .4rem 0 1rem; }
  .meter div { height: 100%; background: var(--ink); }
  .card { border-top: 1px solid var(--rule); padding: 1.1rem 0; }
  .card p { margin: .3rem 0; }
  .q { font-weight: 600; }
  .row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
  .tag { font-size: .78rem; padding: .15rem .5rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--dim); }
  .tag.right { color: light-dark(#166534, #86efac); }
  .tag.wrong { color: light-dark(#9f1239, #fda4af); }
  footer { margin-top: 3rem; color: var(--dim); font-size: .85rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
  nav { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; font-size: .9rem; }
  ul { padding: 0; margin: 0; list-style: none; }
`;

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

function where(chrome: Chrome): string {
  return chrome.env === "preview"
    ? `preview of pull #${chrome.pull ?? "?"}`
    : chrome.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>
<h1><a href="/">the oracle</a></h1>
<p class="sub">Ask once. It answers with conviction, never twice differently, and keeps score of how often it was right.</p>
${body}
<footer>
  <p><span class="tag">${escape(where(chrome))}</span>${chrome.commit ? ` <span class="tag">@ ${escape(chrome.commit)}</span>` : ""}</p>
  ${chrome.ssh ? `<p>Same ledger in a terminal: <code>${escape(chrome.ssh)}</code></p>` : ""}
  <p>Verdicts are derived from the question itself, not from chance — the joke and the honesty are the same mechanism.</p>
</footer>
`;
}

function meter(confidence: number): string {
  return `<div class="meter"><div style="width:${Math.max(0, Math.min(100, confidence))}%"></div></div>`;
}

function outcomeTag(row: Row): string {
  if (row.outcome === "right") return `<span class="tag right">judged right</span>`;
  if (row.outcome === "wrong") return `<span class="tag wrong">judged wrong</span>`;
  return `<span class="tag">unjudged</span>`;
}

function card(row: Row): string {
  return `<li class="card">
  <p class="q"><a href="/v/${row.id}">${escape(row.question)}</a></p>
  <p>${escape(row.stance)}</p>
  <p class="row"><span class="tag">${row.confidence}% sure</span>${outcomeTag(row)}${
    row.asked_count > 1 ? `<span class="tag">asked ${row.asked_count}×</span>` : ""
  }</p>
</li>`;
}

function calibrationBlock(c: Calibration): string {
  const line = escape(verdictOnItself(c));
  if (c.accuracy === undefined) return `<p class="label">its record</p><p>${line}</p>`;
  return `<p class="label">its record</p>
<p>${line}</p>
${meter(c.accuracy)}
<p class="row"><span class="tag">${c.right} right of ${c.judged}</span><span class="tag">claimed ${c.claimed}%</span><span class="tag">${
    (c.gap ?? 0) > 0 ? `overconfident by ${c.gap}` : (c.gap ?? 0) < 0 ? `modest by ${-(c.gap ?? 0)}` : "square"
  }</span></p>`;
}

export function homePage(
  chrome: Chrome,
  rows: readonly Row[],
  scores: readonly { confidence: number; outcome: string }[],
): string {
  const recent =
    rows.length === 0
      ? `<p class="auspice">No one has asked it anything yet. Be the first; it has been waiting.</p>`
      : `<p class="label">lately</p><ul>${rows.map(card).join("")}</ul>`;
  return layout(
    chrome,
    "the oracle",
    `<form class="ask" method="post" action="/ask">
  <input type="text" name="question" placeholder="Should I ship it on Friday?" required maxlength="280" autofocus>
  <button>Ask</button>
</form>
${calibrationBlock(calibrate(scores))}
${recent}
<nav><a href="/ledger">the whole ledger →</a></nav>`,
  );
}

export function verdictPage(chrome: Chrome, row: Row): string {
  return layout(
    chrome,
    `${row.question} — the oracle`,
    `<p class="label">you asked</p>
<p class="q">${escape(row.question)}</p>
<p class="stance">${escape(row.stance)}</p>
${meter(row.confidence)}
<p class="row"><span class="tag">${row.confidence}% sure</span>${outcomeTag(row)}${
      row.asked_count > 1 ? `<span class="tag">asked ${row.asked_count}×</span>` : ""
    }<span class="tag">${escape(row.asked_at)}</span></p>
<p class="label">the sign it read</p>
<p class="auspice">${escape(row.auspice)}</p>
<p class="label">how did it turn out?</p>
<form class="ask" method="post" action="/v/${row.id}/judge">
  <button name="outcome" value="right">It was right</button>
  <button class="quiet" name="outcome" value="wrong">It was wrong</button>
  ${row.outcome === "unjudged" ? "" : `<button class="quiet" name="outcome" value="unjudged">Take that back</button>`}
</form>
<nav><a href="/">ask another</a> <a href="/ledger">the ledger</a></nav>`,
  );
}

export function ledgerPage(chrome: Chrome, rows: readonly Row[], filter: Filter): string {
  const tab = (f: Filter, label: string): string =>
    f === filter ? `<strong>${label}</strong>` : `<a href="/ledger?show=${f}">${label}</a>`;
  return layout(
    chrome,
    "the ledger — the oracle",
    `<nav>${tab("all", "all")} ${tab("unjudged", "unjudged")} ${tab("right", "right")} ${tab("wrong", "wrong")} <a href="/">ask</a></nav>
${rows.length === 0 ? `<p class="auspice">Nothing here.</p>` : `<ul>${rows.map(card).join("")}</ul>`}`,
  );
}

export function notFoundPage(chrome: Chrome): string {
  return layout(
    chrome,
    "not found — the oracle",
    `<p class="stance">There is no such verdict.</p>
<p class="auspice">It may never have been asked, or you may have invented the number.</p>
<nav><a href="/">ask something real</a></nav>`,
  );
}