import { test } from "node:test";
import assert from "node:assert/strict";
import { readFileSync } from "node:fs";
import path from "node:path";
import { fileURLToPath } from "node:url";
import * as React from "react";
import { renderToStaticMarkup } from "react-dom/server";
import type { Report } from "../../lib/report/schema";
import { validateReport } from "../../lib/report/validate";
import { buildReportPageView, type ReportPageView } from "../../lib/report/views";
import { buildReportSlides } from "../../lib/report/slides";
import { reportSlidesHtml, slidesImagePaths, SLIDES_EXPORT_CSS } from "../../lib/report/exportSlidesHtml";
import { Slide } from "./slides/Slide";

(globalThis as { React?: typeof React }).React = React;

const HERE = path.dirname(fileURLToPath(import.meta.url));
const CSS = readFileSync(path.join(HERE, "..", "..", "styles", "slides.css"), "utf8");

function report(): Report {
  return {
    format: "archilyzer-report",
    version: 1,
    id: "demo",
    kind: "factcheck",
    series: "Demo Checks",
    title: "A demo <fact-check>",
    summary: "One thing [right](cite:v1).",
    published: "2026-10-01",
    subject: { source: "s0" },
    sources: { s0: { kind: "article", title: "An article", accent: "#8a6fb0" } },
    citations: {
      v1: { kind: "video", channel: "demo-channel", id: "abc123", start: 10, end: 20, quote: "one" },
      p1: { kind: "post", channel: "demo-social", id: "123", quote: "three" },
      a1: { kind: "source", source: "s0", quote: "the claim", image: "stills/a1.png" },
    },
    slides: { closing: "The end." },
    entries: [{ id: "e1", date: "2026-10-03T08:00:00Z", title: "An update", body: "It [moved](cite:v1). Then more. And more." }],
    sections: [
      {
        id: "ch1",
        title: "Chapter one",
        body: "Opening. Second.",
        slide: { points: ["A point [citing](cite:v1)"], cite: "a1" },
        claims: [
          { id: "k1", text: "Claim one.", verdict: "CONTRADICTED", gist: "No.", sourceQuote: { citation: "a1" }, citations: ["a1", "v1"] },
          { id: "k2", text: "Claim two.", verdict: "PARTLY", citations: ["p1"], slide: { layout: "quote" } },
          { id: "k3", text: "Claim three.", flag: "No source given" },
        ],
      },
    ],
  };
}

function view(r = report()): ReportPageView {
  assert.deepEqual(validateReport(r), []);
  return buildReportPageView(r, {
    record: (c) => ({ channel: c.channel, id: c.id, title: `Record ${c.id}` }),
    poster: () => "/media/posters/abc123.png",
    post: () => ({ author: "@demo", shot: "/media/posts/demo-social/123/shot.png" }),
  });
}

const FOOTER = { revision: 2, date: "2026-10-04", reportSha256: "ab".repeat(32) };
const images: Record<string, string> = {
  "/media/posters/abc123.png": "data:image/png;base64,AAA",
  "/reports/demo/stills/a1.png": "data:image/png;base64,BBB",
  "/media/posts/demo-social/123/shot.png": "data:image/png;base64,CCC",
};
const html = (v = view(), siteUrl = "https://site.example/") =>
  reportSlidesHtml(v, { css: CSS, accent: "#6a4bc4", siteUrl, footer: FOOTER, image: (p) => images[p] });

test("one page per slide, numbered as the site's hash numbers them, in the slides' order", () => {
  const v = view();
  const slides = buildReportSlides(v);
  const out = html(v);
  const pages = [...out.matchAll(/<section class="rs-page" id="s-(\d+)"/g)].map((m) => Number(m[1]));
  assert.deepEqual(pages, slides.map((s) => s.n));
  const keys = [...out.matchAll(/<article class="rs-slide" data-slide="([^"]+)"/g)].map((m) => m[1]);
  assert.deepEqual(keys, slides.map((s) => s.key));
});

test("one file: the stylesheet and the script inline, every picture the resolver's, nothing fetched", () => {
  const out = html();
  assert.ok(out.includes(CSS.slice(0, 200)));
  assert.ok(out.includes(SLIDES_EXPORT_CSS.slice(0, 80)));
  assert.equal([...out.matchAll(/<script>/g)].length, 1);
  assert.doesNotMatch(out, /<script [^>]*src=|<link /);
  const srcs = [...out.matchAll(/<img [^>]*src="([^"]+)"/g)].map((m) => m[1]);
  // The clip's poster on k1's evidence, the still on the section's; k2's
  // quote shows its post's words, not its capture.
  assert.deepEqual(srcs.sort(), ["data:image/png;base64,AAA", "data:image/png;base64,BBB"]);
  assert.deepEqual(slidesImagePaths(view()), ["/media/posters/abc123.png", "/reports/demo/stills/a1.png"]);
  // The site's accent, on the light base.
  assert.match(out, /<html lang="en" class="rs-root" style="--brand:#6a4bc4;/);
  // Escaped, as everywhere.
  assert.match(out, /A demo &lt;fact-check&gt;/);
});

test("the way back: each slide links to its place in the article on the site; with no site, nowhere", () => {
  const out = html();
  assert.match(out, /href="https:\/\/site\.example\/reports\/demo\/#k1" data-slide-read="k1"/);
  assert.match(out, /href="https:\/\/site\.example\/reports\/demo\/#report-end" data-slide-read="report-end"/);
  assert.doesNotMatch(html(view(), ""), /data-slide-read=/);
  // A citation's number goes to the reference list under the deck, which links out.
  assert.match(out, /<a href="#c-v1">\[1\]<\/a>/);
  assert.match(out, /<li id="c-v1" value="1">/);
  assert.match(out, /href="https:\/\/site\.example\/m\/demo-channel\/abc123\/10\.00-20\.00\/"/);
});

test("a timeline entry is a slide: its date, its title, its first sentences", () => {
  const out = html();
  assert.match(
    out,
    /data-slide="entry:e1" data-slide-kind="entry" data-layout="statement"[^>]*>.*<b>Timeline<\/b> · 1 of 1.*<p class="rs-dates"><time datetime="2026-10-03T08:00:00Z">2026-10-03<\/time><\/p><h2 class="rs-h">An update<\/h2><div class="rs-statement"><div class="rs-md"><p>It moved<sup[^>]*><a href="#c-v1">\[1\]<\/a><\/sup>\. Then more\.<\/p>/s,
  );
  assert.match(out, /href="https:\/\/site\.example\/reports\/demo\/#e1" data-slide-read="e1"/);
});

test("the sources slide names which document this is", () => {
  assert.match(html(), /data-export-footer="">Revision 2 · 2026-10-04 · report sha256 abababababab</);
  assert.match(html(), /The end\./);
});

test("the string slides mirror Slide.tsx: the same `rs-` classes, slide by slide", () => {
  const v = view();
  const slides = buildReportSlides(v);
  // The export's own line on the sources slide (which document this is) is
  // the one difference.
  const out = html(v).replace(/<p class="rs-dates" data-export-footer="">[^<]*<\/p>/, "");
  const classes = (markup: string) =>
    [...new Set([...markup.matchAll(/class="([^"]*)"/g)].flatMap((m) => m[1].split(/\s+/)).filter((c) => c.startsWith("rs-") && c !== "rs-n"))].sort();
  const articles = out.split(/(?=<article class="rs-slide")/).slice(1).map((a) => a.slice(0, a.indexOf("</article>") + 10));
  slides.forEach((s, i) => {
    const react = renderToStaticMarkup(
      React.createElement(Slide, { slide: s, view: v, total: slides.length, pageUrl: "https://site.example/reports/demo/" }),
    );
    assert.deepEqual(classes(articles[i]), classes(react), s.key);
  });
});

test("every `rs-` class a slide uses has a rule in slides.css", () => {
  const used = new Set([...html().matchAll(/class="([^"]*)"/g)].flatMap((m) => m[1].split(/\s+/)).filter((c) => c.startsWith("rs-")));
  const styled = new Set([...(CSS + SLIDES_EXPORT_CSS).matchAll(/\.(rs-[a-z-]+)/g)].map((m) => m[1]));
  assert.deepEqual([...used].filter((c) => !styled.has(c)), []);
});