// ============================================================================
//  Project   : anomaly-atlas
//  File      : web/lib/render.js
//  Purpose   : HTML layout, markdown/code rendering for the atlas platform
//  Author    : Simon-Pierre Boucher
//  Contact   : contact@spboucher.ai
//  Data src  : hfmarketdata.io (sole data source)
//  Created   : 2026-08-12
//  Modified  : 2026-08-12
//  Platform  : macOS / Apple Silicon (arm64) — Node.js (deployed on MacLustr)
//  License   : All rights reserved (research code)
// ============================================================================
"use strict";

const { Marked } = require("marked");
const hljs = require("highlight.js");

function esc(s) {
  return String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
}

function slugify(s) {
  return s.toLowerCase().replace(/[^\w\s-]/g, "").trim().replace(/\s+/g, "-").slice(0, 80);
}

/**
 * Render markdown → { html, toc }. A fresh Marked instance per call (a shared
 * global `marked.use()` would stack walkTokens handlers on every render).
 * Headings get stable anchor ids collected into a table of contents.
 */
function markdownToHtml(md, baseRel) {
  const toc = [];
  const seen = new Set();
  const m = new Marked({
    renderer: {
      code({ text, lang }) {
        const html = lang && hljs.getLanguage(lang)
          ? hljs.highlight(text, { language: lang }).value
          : esc(text);
        return `<pre class="codeblock"><code class="hljs">${html}</code></pre>`;
      },
      heading({ tokens, depth }) {
        const html = this.parser.parseInline(tokens);
        const plain = html.replace(/<[^>]+>/g, "");
        let id = slugify(plain) || "section";
        while (seen.has(id)) id += "-x";
        seen.add(id);
        if (depth >= 2 && depth <= 3) toc.push({ depth, id, text: plain });
        return `<h${depth} id="${id}">${html}<a class="hanchor" href="#${id}" aria-label="Link to section">#</a></h${depth}>\n`;
      },
    },
    walkTokens(token) {
      if (token.type === "link" && token.href && !/^(https?:|mailto:|#|\/)/.test(token.href)) {
        const base = baseRel.includes("/") ? baseRel.slice(0, baseRel.lastIndexOf("/")) : "";
        const joined = (base ? base + "/" : "") + token.href;
        const norm = joined.split("/").reduce((acc, part) => {
          if (part === "..") acc.pop();
          else if (part !== "." && part !== "") acc.push(part);
          return acc;
        }, []).join("/");
        token.href = norm.endsWith(".md") ? "/doc/" + norm : "/file/" + norm;
      }
    },
  });
  return { html: m.parse(md), toc };
}

/** Sticky table-of-contents sidebar for long documents. */
function tocHtml(toc) {
  if (!toc || toc.length < 3) return "";
  const items = toc
    .map((t) => `<li class="toc-d${t.depth}"><a href="#${t.id}">${esc(t.text)}</a></li>`)
    .join("");
  return `<nav class="toc" aria-label="Table of contents"><span class="toc-title">On this page</span><ul>${items}</ul></nav>`;
}

/** Professional document header from front matter. */
function docHeader(data, rel) {
  const title = (data.document || rel).split("/").pop().replace(/[_-]/g, " ");
  const status = data.status || "draft";
  const meta = [
    data.created ? `created ${data.created}` : null,
    data.modified ? `updated ${data.modified}` : null,
    data.author || null,
  ].filter(Boolean).join(" · ");
  return `<header class="doc-head">
    <div class="doc-head-row">
      <h1>${esc(title)}</h1>
      <span class="badge badge-${status === "reviewed" || status === "final" ? "done" : "in-progress"}">${esc(status)}</span>
    </div>
    <p class="doc-head-meta">${esc(data.document || rel)}${meta ? " · " + esc(meta) : ""}</p>
  </header>`;
}

/** Research-log timeline: entries already split by content.parseLogEntries. */
function logTimeline(entries, baseRel) {
  const items = entries
    .slice()
    .reverse()
    .map((e) => {
      const [when, ...rest] = e.title.split(" — ");
      const title = rest.join(" — ") || when;
      const body = markdownToHtml(e.body, baseRel).html;
      return `<article class="tl-entry">
        <div class="tl-rail"><span class="tl-dot"></span></div>
        <div class="tl-card">
          <time class="tl-time">${esc(rest.length ? when : "")}</time>
          <h3>${esc(title)}</h3>
          <div class="md md-compact">${body}</div>
        </div>
      </article>`;
    })
    .join("");
  return `<div class="timeline">${items}</div>`;
}

function highlightFile(text, filename) {
  const ext = filename.slice(filename.lastIndexOf(".") + 1).toLowerCase();
  const langMap = {
    py: "python", sh: "bash", js: "javascript", css: "css", json: "json",
    toml: "ini", yaml: "yaml", yml: "yaml", cff: "yaml", md: "markdown", sql: "sql",
  };
  const lang = filename === "Makefile" ? "makefile" : langMap[ext];
  if (lang && hljs.getLanguage(lang)) return hljs.highlight(text, { language: lang }).value;
  return esc(text);
}

/** Confidence-level badge (Levels 0-3, CLAUDE.md §10). */
const LEVEL_LABELS = {
  0: "Level 0 — in-sample only",
  1: "Level 1 — corrected & OOS",
  2: "Level 2 — robust",
  3: "Level 3 — cost-real & held-out",
};
function levelBadge(level) {
  return `<span class="badge badge-level-${level}">${LEVEL_LABELS[level] || "Level ?"}</span>`;
}

const NAV = [
  ["/", "Home"],
  ["/atlas", "Atlas"],
  ["/publications", "Publications"],
  ["/research", "Research"],
  ["/experiments", "Experiments"],
  ["/results", "Results"],
  ["/code", "Code"],
  ["/comments", "Comments"],
  ["/about", "About"],
];

function layout({ title, active, body, buildInfo = {} }) {
  const nav = NAV.map(
    ([href, label]) =>
      `<a href="${href}" class="${active === label ? "active" : ""}">${label}</a>`
  ).join("");
  const commit = buildInfo.commit ? buildInfo.commit.slice(0, 7) : "dev";
  const synced = buildInfo.generated ? buildInfo.generated.slice(0, 10) : "";
  return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>${esc(title)} · anomaly-atlas</title>
<meta name="description" content="anomaly-atlas — systematic discovery & rigorous validation of statistical anomalies in open HF market data (hfmarketdata.io). Research by Simon-Pierre Boucher. Not investment advice.">
<meta name="theme-color" content="#faf8f4">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=Inter:wght@400..700&family=JetBrains+Mono:wght@400..600&display=swap">
<link rel="stylesheet" href="/static/style.css">
<link rel="icon" type="image/svg+xml" href="/static/logo.svg">
<link rel="apple-touch-icon" href="/static/logo.svg">
</head>
<body>
<header class="site-header">
  <div class="wrap header-row">
    <a class="brand" href="/"><img class="brand-mark" src="/static/logo.svg" alt="" width="30" height="30">anomaly<span class="brand-dim">-atlas</span></a>
    <input type="checkbox" id="nav-toggle" class="nav-toggle" aria-label="Open menu">
    <label for="nav-toggle" class="nav-burger" aria-hidden="true"><span></span><span></span><span></span></label>
    <nav class="site-nav">${nav}</nav>
  </div>
</header>
<div class="honesty-banner"><div class="wrap">
  <strong>Honesty doctrine.</strong> Every candidate anomaly is an artifact until proven otherwise;
  in-sample results are never findings; past statistical regularity does not imply future returns.
  This is research on statistical properties of market data — <strong>not investment advice, not a trading system</strong>.
</div></div>
<main class="wrap">${body}</main>
<footer class="site-footer">
  <div class="wrap">
    <span>© 2026 Simon-Pierre Boucher — <a href="mailto:contact@spboucher.ai">contact@spboucher.ai</a> · All rights reserved (research code) · Data source: <a href="https://www.hfmarketdata.io">hfmarketdata.io</a> (sole source)</span>
    <span class="footer-meta">snapshot ${esc(commit)}${synced ? " · synced " + esc(synced) : ""} · not trading advice</span>
  </div>
</footer>
</body>
</html>`;
}

module.exports = { esc, markdownToHtml, tocHtml, docHeader, logTimeline, highlightFile, layout, levelBadge, LEVEL_LABELS };