// The THREAD RAIL's composition: one HyperFrames page for a whole cut, the
// frame's left side beside the footage (deck.mjs threadsGeometry), a card per
// thread (threads.mjs). The card of the thread on screen is lit and strung
// across to the picture; its dots fill clip by clip; its outcome is stamped on
// it as its last clip ends. The rail steps aside while a popup post has moved
// the footage over it.
//
// PURE, like chrome-stamp.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: "threads"`); the build lays the frames over the cut as
// it lays the deck's.
//
// The timeline is threads.mjs `threadCues`, each cue stating its from -- a
// render is a seek per frame, from parallel workers, in any order.
import { pageDuration, threadsGeometry } from "./deck.mjs";
import { mix, rgba } from "./chrome-deck.mjs";
import { threadCues } from "./threads.mjs";

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 cards' sizes in the rail's height for `n` threads: each card `h` px tall
 * (at most `max`), `gap` apart, the stack centred (`top`).
 */
export function railLayout(height, n, { gap = 14, max = 190 } = {}) {
  const h = Math.min(max, Math.floor((height - (n - 1) * gap) / n));
  const total = n * h + (n - 1) * gap;
  return { h, gap, top: Math.max(0, Math.floor((height - total) / 2)) };
}

/**
 * The rail'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. `?still=<t>` and the
 * preview's `deck:seek` take CUT seconds.
 */
export function threadsHtml(schedule, render, opts = {}) {
  const sched = schedule.threads;
  if (!sched?.threads?.length) throw new Error("threads: the schedule has no thread rail");
  const geo = threadsGeometry(render);
  const pal = render.palette;
  const W = geo.width, H = geo.height;
  const C = geo.cards;
  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(`threads: nothing to render from ${from}s of a ${total}s cut`);
  const windowed = from > 0 || Math.abs(dur - total) > 1e-6;
  const { init, cues } = threadCues(sched);
  const n = sched.threads.length;
  const lay = railLayout(C.height, n);
  // Type scales with the card: a rail of eight is denser than a rail of three.
  const k = Math.min(1, lay.h / 170);
  const idxSize = Math.round(17 * Math.max(0.8, k));
  const labelSize = Math.round(27 * Math.max(0.72, k));
  const labelLine = Math.round(labelSize * 1.12);
  const outSize = Math.round(16 * Math.max(0.8, k));
  const dot = Math.round(11 * Math.max(0.8, k));
  const pad = Math.round(16 * Math.max(0.75, k));
  const rail = 5;

  const cardsHtml = sched.threads
    .map((t, j) => {
      const top = lay.top + j * (lay.h + lay.gap);
      const oc = t.outcome?.color ?? pal.accent;
      const dots = t.clips.map((_, d) => `<i class="dot" data-k="d${j}-${d}"></i>`).join("");
      return (
        `<div class="card" data-thread="${esc(t.id)}" data-k="c${j}" style="top:${top}px; --oc:${esc(oc)}; ` +
        `--og:${rgba(oc, 0.6)}; --ob:${rgba(mix(pal.bg, oc, 0.14), 0.92)}">` +
        `<div class="wash" data-k="w${j}"></div>` +
        `<div class="head"><span class="idx">${String(j + 1).padStart(2, "0")}</span><span class="dots">${dots}</span></div>` +
        `<div class="label">${esc(t.label)}</div>` +
        (t.outcome
          ? `<div class="outcome" data-k="o${j}"><span class="word">${esc(t.outcome.label)}</span>` +
            `<span class="oflash" data-k="f${j}"></span></div>`
          : "") +
        `</div>` +
        `<div class="string" data-k="s${j}" style="top:${top + Math.round(lay.h / 2) - 1}px"></div>`
      );
    })
    .join("\n          ");

  const data = {
    total: r4(total),
    window: windowed ? { from: r4(from), dur } : null,
    labelSize,
    ids: sched.threads.map((t) => t.id),
    init,
    cues: cues.map(({ why, ...c }) => c),
  };
  const json = JSON.stringify(data).replace(/</g, "\\u003c");
  const fps = schedule.fps ?? render.fps ?? 30;
  const cardBg = mix(mix(pal.bg, pal.fg, 0.07), pal.accent, 0.05);
  const litBg = mix(mix(pal.bg, pal.fg, 0.12), pal.accent, 0.14);

  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: 'DeckSans', sans-serif; font-synthesis: none; color: ${pal.fg};
             -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
      #root { position: relative; width: ${W}px; height: ${H}px; overflow: hidden; }
      #threads-clip { position: absolute; left: 0; top: 0; width: ${W}px; height: ${H}px; }
      .rail { position: absolute; left: 0; top: 0; width: ${W}px; height: ${H}px; }
      /* A card: its number, a dot per clip, its label; the outcome stamped at
         its foot. Ahead of its thread it is dim; lit while it plays; after,
         it keeps its outcome at a quieter rest. */
      .card { position: absolute; left: ${C.x}px; width: ${C.width}px; height: ${lay.h}px; opacity: 0;
              border-radius: 10px; overflow: hidden; background: ${cardBg};
              border-left: ${rail}px solid ${pal.accent};
              box-shadow: inset 0 0 0 1px ${rgba(pal.fg, 0.1)}; padding: ${pad - 2}px ${pad}px ${pad}px ${pad}px; }
      .wash { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: ${litBg};
              box-shadow: inset 0 0 0 2px ${rgba(pal.accent, 0.9)}, inset 0 0 26px ${rgba(pal.accent, 0.35)}; }
      .head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
              height: ${idxSize + 8}px; }
      .idx { font-family: 'DeckSansBold', sans-serif; font-size: ${idxSize}px; line-height: ${idxSize + 8}px;
             letter-spacing: 0.12em; color: ${pal.accent}; font-variant-numeric: tabular-nums; }
      .dots { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: ${Math.round(dot * 0.55)}px; }
      .dot { display: block; width: ${dot}px; height: ${dot}px; border-radius: 50%; background: ${pal.fg};
             box-shadow: 0 0 8px ${rgba(pal.fg, 0.45)}; }
      .label { position: relative; margin-top: ${Math.round(pad * 0.45)}px; font-family: 'DeckSansBold', sans-serif;
               font-size: ${labelSize}px; line-height: ${labelLine}px; letter-spacing: -0.005em; color: ${pal.fg};
               display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
      /* The outcome: a small rubber stamp in its verdict's colour. */
      .outcome { position: absolute; left: ${pad}px; bottom: ${pad - 4}px; visibility: hidden; opacity: 0;
                 max-width: ${C.width - 2 * pad - rail}px; padding: 3px 10px 4px; border-radius: 5px;
                 background: var(--ob); border: 2px solid var(--oc); transform-origin: 30% 50%; rotate: -4deg; }
      .outcome .word { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                       font-family: 'DeckSansBold', sans-serif; font-size: ${outSize}px; line-height: ${outSize + 6}px;
                       letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc); }
      .oflash { position: absolute; inset: -3px; border-radius: 6px; opacity: 0; pointer-events: none;
                box-shadow: 0 0 0 2px var(--oc), 0 0 22px 6px var(--og); }
      /* The string: from the lit card across to the picture's edge. */
      .string { position: absolute; left: ${C.x + C.width}px; width: ${W - C.x - C.width}px; height: 3px;
                border-radius: 2px; transform-origin: 0% 50%; transform: scaleX(0);
                background: linear-gradient(90deg, ${pal.accent} 0%, ${rgba(pal.accent, 0.35)} 100%);
                box-shadow: 0 0 10px ${rgba(pal.accent, 0.7)}; }
    </style>
  </head>
  <body>
    <div id="root" data-composition-id="threads" data-start="0" data-duration="${pageDuration(dur, fps)}"
         data-width="${W}" data-height="${H}">
      <div id="threads-clip" class="clip" data-start="0" data-duration="${pageDuration(dur, fps)}" data-track-index="1">
        <div class="rail" data-k="rail">
          ${cardsHtml}
        </div>
      </div>
    </div>

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

      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);
      }
      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["threads"] = tl;

      const ready = document.fonts.load(S.labelSize + "px DeckSansBold").catch(() => {}).then(() => {
        document.documentElement.dataset.fit = "1";
      });

      const params = new URLSearchParams(location.search);
      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));
      }
      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: "threads:ready", total: S.total, ids: S.ids }, "*");
        });
      }
    </script>
  </body>
</html>
`;
}