// The fact-check STAMPS' composition: one HyperFrames page for a whole report
// cut, a small transparent region over the footage box (deck.mjs
// stampGeometry) where each claim's verdict slams in at the end of the
// claim's last segment and leaves with that segment's transition.
//
// PURE, like chrome-deck.mjs: a schedule and a render block in, an HTML string
// out. compose-chrome.mjs copies the assets in beside it, writes it and renders
// it (`region: "stamp"`); the build lays the frames over the cut as it lays
// the deck's.
//
// The timeline is cues, computed here, each stating its from -- a render is a
// seek per frame, from parallel workers, in any order (chrome-deck.mjs says
// why at length). The times are factcheck.mjs `stampSchedule`'s, untouched.
import { pageDuration, stampGeometry } from "./deck.mjs";
import { mix, rgba } from "./chrome-deck.mjs";
import { resolveFactcheck, STAMP_MOTION } from "./factcheck.mjs";

/** Instant cues still take a millisecond: a zero-duration tween has its own seek rules. */
const INSTANT = 0.001;

const esc = (s) =>
  String(s ?? "")
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;");

const r4 = (v) => Math.round(v * 10000) / 10000;

/** The stamp's tilt at rest, and how far past it (and how large) it starts its slam. */
export const STAMP_POSE = Object.freeze({ rest: -6, from: -14, scale: 1.7, leaveScale: 0.96 });

/**
 * Everything the stamps' timeline does, as data. Stamp j is `st<j>` (autoAlpha,
 * scale, rotation) with its flash `fl<j>` (opacity): it slams in from
 * `STAMP_POSE.scale` × and `from`° over `STAMP_MOTION.slam`, ending at its
 * `landed` -- the second the tally steps -- flashes, holds, and fades over its
 * `out`.
 *
 * @returns {{ init: Record<string, object>, cues: Array<{ k: string, at: number,
 *   dur: number, from: object, to: object, ease: string, why: string }> }}
 */
export function stampCues(schedule) {
  const stamps = schedule.factcheck?.stamps ?? [];
  const P = STAMP_POSE;
  const m = STAMP_MOTION;
  const init = {};
  const ev = [];
  const add = (k, at, dur, to, ease, why) => ev.push({ k, at: r4(at), dur: r4(Math.max(INSTANT, dur)), to, ease, why });
  stamps.forEach((s, j) => {
    init[`st${j}`] = { autoAlpha: 0, scale: P.scale, rotation: P.from };
    init[`fl${j}`] = { opacity: 0 };
    const why = `stamp ${s.claim}`;
    add(`st${j}`, s.at, s.landed - s.at, { autoAlpha: 1, scale: 1, rotation: P.rest }, "power4.in", `${why} in`);
    add(`fl${j}`, s.landed, m.flashUp, { opacity: 1 }, "none", `${why} flash`);
    add(`fl${j}`, s.landed + m.flashUp, m.flashDown, { opacity: 0 }, "power2.out", `${why} flash`);
    add(`st${j}`, s.out[0], s.out[1] - s.out[0], { autoAlpha: 0, scale: P.leaveScale }, "power1.in", `${why} out`);
  });
  // Order, clamp (a cue never starts before the last on its element ends),
  // and state every from: the last to on its element, or its init.
  ev.forEach((e, n) => { e.n = n; });
  ev.sort((a, b) => a.at - b.at || a.n - b.n);
  const state = Object.fromEntries(Object.entries(init).map(([k, v]) => [k, { ...v }]));
  const freeAt = new Map();
  const cues = [];
  for (const e of ev) {
    let { at, dur } = e;
    const free = freeAt.get(e.k) ?? 0;
    if (at < free) {
      const end = at + dur;
      at = r4(free);
      dur = r4(Math.max(INSTANT, end - at));
    }
    const cur = state[e.k] ?? (state[e.k] = {});
    const from = {};
    for (const p of Object.keys(e.to)) from[p] = cur[p];
    Object.assign(cur, e.to);
    freeAt.set(e.k, r4(at + dur));
    cues.push({ k: e.k, at, dur, from, to: e.to, ease: e.ease, why: e.why });
  }
  return { init, cues };
}

/**
 * The stamps composition's HTML, for the whole cut -- or a window of it
 * (`from`/`duration`, as the deck's). `fonts` = `{ regular, bold }`
 * asset-relative paths (DeckSans / DeckSansBold); `gsap` the vendored script.
 * The region is `stampGeometry(render, { feed })`, region-local, transparent
 * outside the stamp. `?still=<t>` and the preview's `deck:seek` take CUT
 * seconds.
 */
export function stampHtml(schedule, render, opts = {}) {
  const stamps = schedule.factcheck?.stamps ?? [];
  if (!stamps.length) throw new Error("stamp: the schedule stamps no claim");
  const geo = stampGeometry(render, { feed: schedule.layout === "feed" });
  const fc = resolveFactcheck(render);
  const pal = render.palette;
  const W = geo.width, H = geo.height;
  const fonts = opts.fonts ?? {};
  const gsapSrc = opts.gsap ?? "assets/gsap.min.js";
  const total = schedule.total;
  const from = Number(opts.from ?? 0);
  const dur = opts.duration != null ? r4(Number(opts.duration)) : r4(total - from);
  if (!(dur > 0)) throw new Error(`stamp: nothing to render from ${from}s of a ${total}s cut`);
  const windowed = from > 0 || Math.abs(dur - total) > 1e-6;
  const { init, cues } = stampCues(schedule);

  // The stamp's box: inside the region with room for its tilt, so no corner
  // is clipped at rest (the slam's overscale passes the edges for a moment).
  const bw = Math.round(W * 0.84);
  const bh = Math.round(H * 0.62);
  const size = Math.round(bh * 0.46);
  const stampHtmlList = stamps
    .map((s, j) => {
      const v = fc.verdicts[s.verdict] ?? { label: s.verdict, color: pal.accent };
      return (
        `<div class="stamp" data-claim="${esc(s.claim)}" data-verdict="${esc(s.verdict)}" data-k="st${j}" ` +
        `style="--vc:${esc(v.color)}; --vg:${rgba(v.color, 0.6)}; --vb:${rgba(mix(pal.bg, v.color, 0.12), 0.82)}">` +
        `<div class="word">${esc(v.label)}</div>` +
        `<div class="flash" data-k="fl${j}"></div></div>`
      );
    })
    .join("\n          ");

  const data = {
    total: r4(total),
    window: windowed ? { from: r4(from), dur } : null,
    size,
    floor: Math.ceil(size * 0.5),
    ids: stamps.map((s) => s.claim),
    init,
    cues: cues.map(({ why, ...c }) => c),
  };
  // `</script>` inside a JSON string would close the tag; a claim id is the manifest's.
  const json = JSON.stringify(data).replace(/</g, "\\u003c");
  const fps = schedule.fps ?? render.fps ?? 30;

  return `<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=${W}, height=${H}" />
    <script src="${esc(gsapSrc)}"></script>
    <style>
      /* The deck's faces, under the deck's private names -- see docs/quirks.md. */
      @font-face { font-family: 'DeckSans'; font-weight: 400; font-style: normal;
                   src: url('${esc(fonts.regular ?? "")}'); }
      @font-face { font-family: 'DeckSansBold'; font-weight: 400; font-style: normal;
                   src: url('${esc(fonts.bold ?? "")}'); }
      * { margin: 0; padding: 0; box-sizing: border-box; }
      html, body { width: ${W}px; height: ${H}px; overflow: hidden; background: transparent; }
      body { font-family: 'DeckSansBold', sans-serif; font-synthesis: none;
             -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
      #root { position: relative; width: ${W}px; height: ${H}px; overflow: hidden; }
      #stamp-clip { position: absolute; left: 0; top: 0; width: ${W}px; height: ${H}px; }
      /* A rubber stamp: a double rule in the verdict's colour round its word,
         on a dark wash so it reads over any footage. Hidden until its cue. */
      .stamp { position: absolute; left: ${Math.round((W - bw) / 2)}px; top: ${Math.round((H - bh) / 2)}px;
               width: ${bw}px; height: ${bh}px; border-radius: 12px; visibility: hidden; opacity: 0;
               display: flex; align-items: center; justify-content: center;
               background: var(--vb); border: 5px solid var(--vc);
               box-shadow: inset 0 0 0 4px var(--vb), inset 0 0 0 7px var(--vc), 0 10px 30px rgba(0, 0, 0, 0.45); }
      .word { max-width: ${bw - 48}px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
              font-size: ${size}px; line-height: ${Math.round(size * 1.15)}px; letter-spacing: 0.06em;
              text-transform: uppercase; color: var(--vc); }
      .flash { position: absolute; inset: -5px; border-radius: 12px; opacity: 0; pointer-events: none;
               box-shadow: 0 0 0 3px var(--vc), 0 0 36px 10px var(--vg); }
    </style>
  </head>
  <body>
    <div id="root" data-composition-id="stamp" data-start="0" data-duration="${pageDuration(dur, fps)}"
         data-width="${W}" data-height="${H}">
      <div id="stamp-clip" class="clip" data-start="0" data-duration="${pageDuration(dur, fps)}" data-track-index="1">
          ${stampHtmlList}
      </div>
    </div>

    <script id="stamp-data" type="application/json">${json}</script>
    <script>
      const S = JSON.parse(document.getElementById("stamp-data").textContent);
      const byK = {};
      for (const el of document.querySelectorAll("[data-k]")) byK[el.dataset.k] = el;

      // t = 0, then the cues. Every cue states its from, so a seek from
      // anywhere to anywhere lands on the same pixels.
      for (const k of Object.keys(S.init)) if (byK[k]) gsap.set(byK[k], S.init[k]);
      const inner = gsap.timeline({ paused: true });
      for (const c of S.cues) {
        const el = byK[c.k];
        if (!el) continue;
        inner.fromTo(el, c.from, { ...c.to, duration: c.dur, ease: c.ease, immediateRender: false }, c.at);
      }
      // The timeline runs to the cut's end, whatever its last cue.
      inner.set({}, {}, S.total);
      let tl = inner;
      if (S.window) {
        tl = gsap.timeline({ paused: true });
        tl.add(inner.tweenFromTo(S.window.from, S.window.from + S.window.dur, { duration: S.window.dur, ease: "none" }), 0);
      }
      window.__timelines = window.__timelines || {};
      window.__timelines["stamp"] = tl;

      // A label wider than its stamp shrinks a pixel at a time to half its
      // size, then ellipsizes (the CSS already does), once the face is in.
      function fitWord(node) {
        let s = S.size;
        node.style.fontSize = s + "px";
        while (s > S.floor && node.scrollWidth > node.clientWidth + 0.5) {
          s -= 1;
          node.style.fontSize = s + "px";
        }
      }
      const ready = document.fonts.load(S.size + "px DeckSansBold").catch(() => {}).then(() => {
        document.querySelectorAll(".word").forEach(fitWord);
        document.documentElement.dataset.fit = "1";
      });

      const params = new URLSearchParams(location.search);
      // A window plays the cut's [from, from + dur]; the page is seeked in its own seconds.
      const local = (t) => {
        const v = Number(t) || 0;
        return S.window ? Math.max(0, Math.min(S.window.dur, v - S.window.from)) : Math.max(0, v);
      };
      const still = params.get("still");
      if (still !== null) {
        tl.seek(local(still), false);
        ready.then(() => tl.seek(local(still), false));
      }

      // umtool's live preview: the parent seeks in cut seconds, as it seeks the deck.
      if (params.get("preview") === "1") {
        window.addEventListener("message", (e) => {
          const m = e.data || {};
          if (m.type === "deck:seek") tl.seek(local(m.t), false);
        });
        ready.then(() => {
          if (window.parent !== window) {
            window.parent.postMessage({ type: "stamp:ready", total: S.total, ids: S.ids }, "*");
          }
        });
      }
    </script>
  </body>
</html>
`;
}