#!/usr/bin/env node
/*
 * Copyright (c) Sandflow Consulting LLC
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *
 * * Redistributions of source code must retain the above copyright notice, this
 *   list of conditions and the following disclaimer.
 * * Redistributions in binary form must reproduce the above copyright notice,
 *   this list of conditions and the following disclaimer in the documentation
 *   and/or other materials provided with the distribution.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
 * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
 * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 * POSSIBILITY OF SUCH DAMAGE.
 */

/*
 * Generates a static website that compares the HTML renders generated by
 * imscJS for the imsc-tests test suites with the reference PNGs included in
 * imsc-tests.
 *
 * imscJS renders the events of a test live, when the test is selected, in the
 * browser viewing the site, so that layout-dependent values (e.g. fillLineGap
 * paddings) are computed using that browser's fonts. The reference PNG is shown next to the render and can be
 * overlaid on top of it, either blended in difference mode or with adjustable
 * opacity.
 *
 * TTML documents are embedded in the pages, since browsers do not allow
 * fetch() from file:// pages, and the site can therefore be opened directly
 * from disk.
 *
 * Requires dist/imsc.debug.js (npm run build).
 *
 * Usage:
 *   node src/test/script/gen-compare-site.mjs [imsc-tests/imsc1 imsc-tests/imsc1_1 ...] [--out=build/compare]
 *
 * Open <out>/index.html in a browser.
 */

import fs from "node:fs";
import path from "node:path";
import { RESOURCES_DIR, IMSC_BUNDLE_PATH } from "./render-harness.mjs";

const DEFAULT_REFFILES_ROOTS = ["imsc-tests/imsc1", "imsc-tests/imsc1_1", "imsc-tests/imsc1_2", "imsc-tests/imsc1_3"];

/* Must match the dimensions of the reference PNGs */
const RENDER_WIDTH = 640;
const RENDER_HEIGHT = 360;

function escapeHTML(s) {
    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
}

/* JSON that can be safely embedded in a <script> element */
function scriptJSON(v) {
    return JSON.stringify(v).replace(/</g, "\\u003c");
}

function writeFile(filePath, contents) {
    fs.mkdirSync(path.dirname(filePath), { recursive: true });
    fs.writeFileSync(filePath, contents);
}

const PAGE_STYLE = `
:root { color-scheme: light dark; --fg: #1a1a1a; --bg: #fafafa; --muted: #666; --border: #ccc; --bad: #c62828; --sel: #dde7f5; }
@media (prefers-color-scheme: dark) { :root { --fg: #e6e6e6; --bg: #181818; --muted: #999; --border: #444; --bad: #ef5350; --sel: #2a3a52; } }
body { font-family: system-ui, sans-serif; color: var(--fg); background: var(--bg); margin: 0 16px 32px; }
a { color: inherit; }
header { position: sticky; top: 0; background: var(--bg); padding: 12px 0; border-bottom: 1px solid var(--border); z-index: 1; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
header h1 { font-size: 1.1rem; margin: 0; }
.muted { color: var(--muted); }
.layout { display: flex; gap: 24px; align-items: flex-start; }
nav { position: sticky; top: 64px; flex: 0 0 260px; max-height: calc(100vh - 80px); overflow-y: auto; padding-top: 12px; }
nav ul { list-style: none; margin: 0; padding: 0; }
nav a { display: block; padding: 2px 6px; text-decoration: none; font-family: ui-monospace, monospace; font-size: 0.8rem; border-radius: 3px; overflow-wrap: anywhere; }
nav a:hover { background: var(--sel); }
nav a[aria-current] { background: var(--sel); font-weight: bold; }
main { flex: 1; min-width: 0; padding-top: 12px; }
main h2 { font-size: 1rem; margin: 0 0 4px; font-family: ui-monospace, monospace; }
.event { margin: 12px 0; }
.event h3 { font-size: 0.85rem; font-weight: normal; margin: 0 0 4px; font-family: ui-monospace, monospace; }
.row { display: flex; flex-wrap: wrap; gap: 12px; }
figure { margin: 0; }
figcaption { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.frame { position: relative; width: ${RENDER_WIDTH}px; height: ${RENDER_HEIGHT}px; outline: 1px solid var(--border); overflow: hidden; }
.frame > .render, .frame > img, .frame > .missing { position: absolute; inset: 0; width: ${RENDER_WIDTH}px; height: ${RENDER_HEIGHT}px; display: block; }
/* reproduces the #render-div container of render-harness.browser.js, and isolates the render from the page styles */
.frame > .render { background: #A9A9A9; font: initial; color: initial; line-height: normal; text-align: initial; }
.frame > img.over { pointer-events: none; }
.missing { display: flex; align-items: center; justify-content: center; color: var(--bad); white-space: pre-wrap; text-align: center; }
body.blend-difference .frame > img.over { mix-blend-mode: difference; opacity: 1 !important; }
body.hide-overlay .frame > img.over { display: none; }
`;

/* Runs in the browser */
function pageScript() {
    /* global imsc, TESTS, W, H */

    function el(tag, attrs, ...children) {
        const e = document.createElement(tag);
        for (const [k, v] of Object.entries(attrs || {})) e.setAttribute(k, v);
        for (const c of children) e.append(c);
        return e;
    }

    function missing(what) {
        return el("div", { class: "missing" }, what);
    }

    function refImg(t, offset, cls) {
        return el("img", { src: t.refDir + offset + ".png", width: W, height: H, alt: "reference", class: cls });
    }

    function figure(caption, ...content) {
        return el("figure", {}, el("div", { class: "frame" }, ...content), el("figcaption", {}, caption));
    }

    function errorHandler(name) {
        const log = (level) => (msg) => {
            console.log(name + ": " + level + ": " + msg);
            return false;
        };
        return { info: log("info"), warn: log("warn"), error: log("error"), fatal: log("fatal") };
    }

    /* Renders the event at offset of test t into div */
    function render(t, doc, offset, div) {
        try {
            const isd = imsc.generateISD(doc, parseFloat(offset), errorHandler(t.name));
            const imgr = (uri) => t.ttmlDir + uri;
            imsc.renderHTML(isd, div, imgr, H, W, t.params.displayForcedOnlyMode === true, errorHandler(t.name));
        } catch (e) {
            div.replaceWith(missing("imscJS error:\n" + e));
        }
    }

    const nav = document.getElementById("tests");
    const main = document.getElementById("test");

    const links = new Map();

    for (const t of TESTS) {
        const a = el("a", { href: "#" + encodeURIComponent(t.name), "data-name": t.name.toLowerCase() }, t.name);
        links.set(t.name, a);
        nav.append(el("li", {}, a));
    }

    /* Parses the selected test and renders all its events */
    function showTest(t) {
        for (const a of links.values()) a.removeAttribute("aria-current");

        main.replaceChildren();

        if (!t) {
            main.append(el("p", { class: "muted" }, "Select a test."));
            return;
        }

        const link = links.get(t.name);
        link.setAttribute("aria-current", "page");
        link.scrollIntoView({ block: "nearest" });

        document.title = t.name + " - " + document.body.dataset.suite;

        main.append(
            el("h2", {}, t.name),
            el("div", { class: "muted" }, el("a", { href: t.ttmlDir + t.path.split("/").pop() }, t.path)));

        let doc = null;
        let renderedEvents = [];

        try {
            doc = imsc.fromXML(t.ttml.replace(/\r\n/g, "\n"), errorHandler(t.name));
            renderedEvents = doc.getMediaTimeEvents().map((o) => o.toFixed(6));
        } catch (e) {
            main.append(missing("imscJS error:\n" + e));
        }

        const offsets = [...new Set([...renderedEvents, ...t.refEvents])].sort((a, b) => parseFloat(a) - parseFloat(b));

        for (const offset of offsets) {
            const hasRef = t.refEvents.includes(offset);
            const hasRender = renderedEvents.includes(offset);

            let renderFigure;

            if (hasRender) {
                const div = el("div", { class: "render" });
                const frame = el("div", { class: "frame" }, div);
                if (hasRef) frame.append(refImg(t, offset, "over"));
                renderFigure = el("figure", {}, frame, el("figcaption", {}, "imscJS" + (hasRef ? " (reference overlaid)" : "")));
                /* rendered once attached, since imscJS measures the layout */
                renderFigure.renderEvent = () => render(t, doc, offset, div);
            } else {
                renderFigure = figure("imscJS", missing("no imscJS event at this offset"));
            }

            main.append(el("div", { class: "event" },
                el("h3", {}, offset + " s"),
                el("div", { class: "row" },
                    hasRef
                        ? figure(el("a", { href: t.refDir + offset + ".png" }, "reference PNG"), refImg(t, offset, ""))
                        : figure("reference PNG", missing("reference PNG missing")),
                    renderFigure)));

            if (renderFigure.renderEvent) renderFigure.renderEvent();
        }

        applyMode();
    }

    function selectedTest() {
        const name = decodeURIComponent(location.hash.slice(1));
        return TESTS.find((t) => t.name === name);
    }

    const filter = document.getElementById("filter");
    const mode = document.getElementById("mode");
    const opacity = document.getElementById("opacity");
    const count = document.getElementById("count");

    function applyFilter() {
        const q = filter.value.trim().toLowerCase();
        let n = 0;
        for (const a of links.values()) {
            const show = a.dataset.name.includes(q);
            a.parentElement.hidden = !show;
            if (show) n++;
        }
        count.textContent = n + " / " + TESTS.length + " tests";
    }

    function applyMode() {
        document.body.classList.toggle("blend-difference", mode.value === "difference");
        document.body.classList.toggle("hide-overlay", mode.value === "none");
        document.getElementById("opacity-label").hidden = mode.value !== "opacity";
        for (const img of document.querySelectorAll("img.over")) img.style.opacity = opacity.value;
    }

    /* Up/down arrow keys move to the previous/next visible test */
    function step(dir) {
        const visible = [...links.values()].filter((a) => !a.parentElement.hidden);
        const current = selectedTest();
        const i = current ? visible.indexOf(links.get(current.name)) : -1;
        const next = visible[i < 0 ? 0 : i + dir];
        if (next) location.hash = next.getAttribute("href");
    }

    document.addEventListener("keydown", (e) => {
        if (e.target instanceof HTMLInputElement || e.target instanceof HTMLSelectElement) return;
        if (e.key === "ArrowDown" || e.key === "j") { step(1); e.preventDefault(); }
        if (e.key === "ArrowUp" || e.key === "k") { step(-1); e.preventDefault(); }
    });

    filter.addEventListener("input", applyFilter);
    mode.addEventListener("change", applyMode);
    opacity.addEventListener("input", applyMode);
    window.addEventListener("hashchange", () => showTest(selectedTest()));

    applyFilter();
    showTest(selectedTest() || null);
}

function suitePage(suiteName, tests) {
    return `<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>${escapeHTML(suiteName)} renders</title>
<style>${PAGE_STYLE}</style>
<script src="../imsc.debug.js"></script>
</head>
<body data-suite="${escapeHTML(suiteName)}">
<header>
<h1><a href="../index.html">imscJS</a> / ${escapeHTML(suiteName)}</h1>
<label>Filter <input id="filter" type="search" placeholder="test name"></label>
<label>Overlay
<select id="mode">
<option value="none">hidden</option>
<option value="difference">difference</option>
<option value="opacity">opacity</option>
</select></label>
<label id="opacity-label">Reference opacity <input id="opacity" type="range" min="0" max="1" step="0.05" value="0.5"></label>
<span id="count" class="muted"></span>
<span class="muted">↑/↓: previous/next test</span>
</header>
<div class="layout">
<nav><ul id="tests"></ul></nav>
<main id="test"></main>
</div>
<script>
const TESTS = ${scriptJSON(tests)};
const W = ${RENDER_WIDTH}, H = ${RENDER_HEIGHT};
(${pageScript.toString()})();
</script>
</body>
</html>
`;
}

function indexPage(suites) {
    const items = suites
        .map(({ name, testCount }) =>
            `<li><a href="${encodeURIComponent(name)}/index.html">${escapeHTML(name)}</a> ` +
            `<span class="muted">${testCount} tests</span></li>`)
        .join("\n");

    return `<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>imscJS renders</title>
<style>${PAGE_STYLE}</style>
</head>
<body>
<header><h1>imscJS renders vs. imsc-tests reference PNGs</h1></header>
<p class="muted">Generated ${escapeHTML(new Date().toISOString())}</p>
<ul>
${items}
</ul>
</body>
</html>
`;
}

function generateSuite(reffilesRoot, outDir) {
    const suiteName = path.basename(reffilesRoot);
    const suiteDir = path.join(outDir, suiteName);
    const srcDir = path.join(RESOURCES_DIR, reffilesRoot);

    const testList = JSON.parse(fs.readFileSync(path.join(srcDir, "tests.json"), "utf8"));

    fs.rmSync(suiteDir, { recursive: true, force: true });

    /* images referenced by the TTML documents are resolved relative to them */
    fs.cpSync(path.join(srcDir, "ttml"), path.join(suiteDir, "ttml"), { recursive: true });
    fs.cpSync(path.join(srcDir, "png"), path.join(suiteDir, "ref"), { recursive: true });

    const tests = [];

    for (const finfo of testList) {
        const name = finfo.name || path.basename(finfo.path).split(".")[0];

        const refDir = path.join(srcDir, "png", name);
        const refEvents = fs.existsSync(refDir)
            ? fs.readdirSync(refDir).filter((f) => f.endsWith(".png")).map((f) => f.slice(0, -4))
            : [];

        tests.push({
            name,
            path: finfo.path,
            params: finfo.params || {},
            ttml: fs.readFileSync(path.join(srcDir, "ttml", finfo.path), "utf8"),
            ttmlDir: "ttml/" + path.posix.dirname(finfo.path) + "/",
            refDir: "ref/" + name + "/",
            refEvents,
        });
    }

    writeFile(path.join(suiteDir, "index.html"), suitePage(suiteName, tests));

    console.log(`Wrote ${suiteDir} (${tests.length} tests)`);

    return { name: suiteName, testCount: tests.length };
}

function main() {
    if (!fs.existsSync(IMSC_BUNDLE_PATH)) {
        throw new Error(`${IMSC_BUNDLE_PATH} does not exist.`);
    }

    const args = process.argv.slice(2).filter((a) => !a.startsWith("--"));
    const reffilesRoots = args.length ? args : DEFAULT_REFFILES_ROOTS;

    const outArg = process.argv.find((a) => a.startsWith("--out="));
    const outDir = path.resolve(outArg ? outArg.split("=")[1] : "build/compare");

    fs.mkdirSync(outDir, { recursive: true });
    fs.copyFileSync(IMSC_BUNDLE_PATH, path.join(outDir, "imsc.debug.js"));
    if (fs.existsSync(IMSC_BUNDLE_PATH + ".map")) {
        fs.copyFileSync(IMSC_BUNDLE_PATH + ".map", path.join(outDir, "imsc.debug.js.map"));
    }

    const suites = reffilesRoots.map((reffilesRoot) => generateSuite(reffilesRoot, outDir));

    writeFile(path.join(outDir, "index.html"), indexPage(suites));

    console.log(`Open ${path.join(outDir, "index.html")}`);
}

main();