// Tests for the posts FEED (slice F1, `posts.layout: "feed"`): the core's
// geometry and schedule for it (deck.mjs), the page that draws it
// (chrome-feed.mjs) and the plan it runs, compose-chrome's feed region, the
// build's framing record and its refusal, and the overlay of the feed's frames.
// The popup and the deck without posts are held to what they always were.
//
// Run with: pnpm test:scripts
import assert from "node:assert/strict";
import { chmodSync, existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
import { tmpdir } from "node:os";
import path from "node:path";
import test from "node:test";

import { FEED_MOTION, feedCues, feedHtml, feedLayout, feedWho } from "./chrome-feed.mjs";
import {
  deckChoreography, deckGeometry, deckSchedule, estimateSchedule, feedGeometry, feedOn, postHolds, postSchedule,
  postsGeometry, postWindows, validateChrome, validatePosts,
} from "./deck.mjs";
import {
  buildVideo, chromeOverlayChain, chromeRegions, deckFraming, deckFramingFilter, feedRegion, framedUnderDeck, framingProblems,
  postsRegions, segmentFraming, segmentJoins,
} from "./build-video.mjs";

const PALETTE = { bg: "#12101a", fg: "#f4f1ea", muted: "#9a93ad", accent: "#a97bff", amber: "#ffc860" };
const CHROME = { engine: "hyperframes", layout: "deck" };
const BASE = { width: 1920, height: 1080, fps: 30, transition: 0.5, palette: PALETTE };
const RENDER = { ...BASE, chrome: { ...CHROME, deck: {} } };
const FEED = { ...BASE, chrome: { ...CHROME, deck: { posts: { layout: "feed" } } } };
const PROV = { siteOrigin: "https://example.test", channelSlug: "chan" };

const CLIPS = [
  { id: "c1", type: "clip", video: "a", start: 0, end: 10, date: "2024-09-05" },
  { id: "c2", type: "clip", video: "b", start: 0, end: 20, date: "2024-10-01" },
  { id: "k1", type: "card", seconds: 4 },
  { id: "c3", type: "clip", video: "c", start: 0, end: 6, date: "2025-12-08" },
];
const DURS = [10, 20, 4, 6];
const POST = (id, date, extra = {}) => ({
  id, platform: "bluesky", author: "Pirate Software", handle: "piratesoftware.live", date,
  text: `words of ${id}`, url: `https://bsky.app/profile/piratesoftware.live/post/${id}`, ...extra,
});
// c2 carries a, b, c (October/November 2024); c3 carries z.
const POSTS = [POST("a", "2024-10-19"), POST("b", "2024-11-27"), POST("c", "2024-12-01"), POST("z", "2026-01-22")];
const sched = (render = FEED, posts = POSTS, durs = DURS, D = 0.5) =>
  deckSchedule({ entries: CLIPS, durs, D, render, provenance: PROV, posts });

// ---- the core ---------------------------------------------------------------

test("feedGeometry: a column flush with the side and top down to the deck, the footage beside it", () => {
  const g = feedGeometry(FEED);
  assert.deepEqual(g.column, { x: 1320, y: 0, width: 600, height: 890 });
  // 1320 × 890 left of the column; inset 24 all round; the frame's aspect; centred.
  assert.deepEqual(g.footage, { x: 24, y: 87, width: 1272, height: 716 });
  assert.deepEqual(g.deck, deckGeometry(FEED).deck);
  // Nothing overlaps: footage, gap, column; footage above the deck.
  assert.equal(g.column.x - (g.footage.x + g.footage.width), 24);
  assert.ok(g.footage.y + g.footage.height <= g.deck.y);
  // top-left mirrors it; a narrower column grows the footage.
  const left = { ...BASE, chrome: { ...CHROME, deck: { posts: { layout: "feed", position: "top-left", width: 520 } } } };
  const l = feedGeometry(left);
  assert.deepEqual(l.column, { x: 0, y: 0, width: 520, height: 890 });
  assert.deepEqual(l.footage, { x: 520 + 24, y: 65, width: 1352, height: 760 });
  // The posts region IS the column under the feed; the popup's is unchanged.
  assert.deepEqual(postsGeometry(FEED), g.column);
  assert.deepEqual(postsGeometry(RENDER), { x: 1920 - 24 - 600, y: 26, width: 600, height: 838 });
});

test("validation: layout is popup or feed; the feed is held to the footage left beside it", () => {
  assert.deepEqual(validateChrome(FEED.chrome, FEED), []);
  assert.match(validateChrome({ ...CHROME, deck: { posts: { layout: "sidebar" } } }, BASE)[0], /posts.layout must be "popup" or "feed"/);
  // 900 + 2·24 at 1920 leaves 972 px: allowed. At 1280×720 a 600 column leaves 632 < 640.
  assert.deepEqual(validateChrome({ ...CHROME, deck: { posts: { layout: "feed", width: 900 } } }, BASE), []);
  const small = { ...BASE, width: 1280, height: 720, chrome: { ...CHROME, deck: { posts: { layout: "feed" } } } };
  assert.match(validateChrome(small.chrome, small).join(" "), /leaves the footage 632px wide beside the feed/);
  assert.match(validatePosts([POST("p", "2024-01-01")], CLIPS, small).join(" "), /beside the feed/);
});

test("feedOn: the deck, the feed layout, shown, and a post to draw on a clip", () => {
  assert.equal(feedOn({ render: FEED, posts: POSTS, entries: CLIPS }), true);
  assert.equal(feedOn({ render: RENDER, posts: POSTS, entries: CLIPS }), false);
  assert.equal(feedOn({ render: FEED, posts: [], entries: CLIPS }), false);
  assert.equal(feedOn({ render: FEED, posts: [POST("h", "2024-01-01", { hide: true })], entries: CLIPS }), false);
  assert.equal(feedOn({ render: FEED, posts: POSTS, entries: [{ id: "k", type: "card" }] }), false);
  const off = { ...BASE, chrome: { ...CHROME, deck: { posts: { layout: "feed", show: false } } } };
  assert.equal(feedOn({ render: off, posts: POSTS, entries: CLIPS }), false);
  assert.equal(feedOn({ render: { ...FEED, chrome: undefined }, posts: POSTS, entries: CLIPS }), false);
});

test("the feed schedule: each post ticks in at its clip's start + D, a clip's next ones `seconds` apart", () => {
  const s = sched();
  assert.equal(s.layout, "feed");
  // No hold, no move: the segments are their own lengths.
  assert.deepEqual(s.segments.map((x) => x.duration), DURS);
  assert.equal(s.segments.some((x) => "hold" in x), false);
  assert.equal("moves" in s, false);
  assert.equal(postHolds({ posts: POSTS, entries: CLIPS, render: FEED }).size, 0);
  // c2 starts at 9.5: a at 10 (after the dissolve), b and c 4 s apart.
  const at = Object.fromEntries(s.posts.map((p) => [p.id, [p.segment, p.slot, p.of, p.in]]));
  assert.deepEqual(at, { a: ["c2", 0, 3, 10], b: ["c2", 1, 3, 14], c: ["c2", 2, 3, 18], z: ["c3", 0, 1, 33] });
  // A feed post has `in`, not the popup's appear/out.
  for (const p of s.posts) assert.equal("appear" in p || "out" in p, false);
  // No windows: the feed is one composition.
  assert.deepEqual(postWindows(s), []);
  assert.deepEqual(postsRegions(FEED, "/o", s), []);
  assert.equal(segmentJoins(s), null);
  // A clip too short for k × seconds shares what it has before its leave.
  const short = sched(FEED, POSTS, [10, 8, 4, 6]);
  assert.deepEqual(short.posts.filter((p) => p.segment === "c2").map((p) => p.in), [10, 12.333, 14.667]);
  // A hard cut: D = 0, the post is in at the clip's first frame.
  const hard = sched(FEED, POSTS, DURS, 0);
  assert.deepEqual(hard.posts.map((p) => p.in), [10, 14, 18, 34]);
  // The core function, unrounded, says the same.
  const segs = s.segments.map((x) => ({ id: x.id, start: x.start, duration: x.duration }));
  assert.equal(postSchedule({ posts: POSTS, entries: CLIPS, segments: segs, D: 0.5, total: s.total, render: FEED })[0].in, 10);
});

test("the popup and the deck without posts write the schedule they always did", () => {
  // A feed with nothing to draw is the deck alone, byte for byte.
  const plain = JSON.stringify(sched(RENDER, []));
  assert.equal(JSON.stringify(sched(FEED, [])), plain);
  assert.equal(JSON.stringify(sched(FEED, [POST("h", "2024-10-19", { hide: true })])), plain);
  const noShow = { ...BASE, chrome: { ...CHROME, deck: { posts: { layout: "feed", show: false } } } };
  assert.equal(JSON.stringify(sched(noShow, POSTS)), plain);
  // "popup", named, is the default: the same schedule, holds and moves and all.
  const named = { ...BASE, chrome: { ...CHROME, deck: { posts: { layout: "popup" } } } };
  assert.equal(JSON.stringify(sched(named)), JSON.stringify(sched(RENDER)));
  const popup = sched(RENDER);
  assert.equal("layout" in popup, false);
  assert.ok(popup.moves.length > 0);
  assert.ok(popup.posts.every((p) => "appear" in p && "out" in p && !("in" in p)));
  assert.equal(estimateSchedule({ render: FEED, provenance: PROV, timeline: CLIPS, posts: POSTS }).layout, "feed");
});

// ---- the plan the page runs --------------------------------------------------

const P = (posts = sched().posts) => posts.map((p) => ({ id: p.id, in: p.in }));
const byWhy = (cues, re) => cues.filter((c) => re.test(c.why));

test("feedCues: each card ticks in at its time, at the top, and the ones in move down by its height", () => {
  const plan = feedCues({ posts: P(), heights: [150, 200, 160, 180], column: 1000, ...FEED_MOTION });
  const g = FEED_MOTION.gap;
  // Every card enters `lag` after its `in`, from the side, to x 0.
  P().forEach((p, j) => {
    const [e] = byWhy(plan.cues, new RegExp(`^enter ${p.id}$`));
    assert.equal(e.k, `c${j}`);
    assert.equal(e.at, Math.round((p.in + FEED_MOTION.lag) * 1e4) / 1e4);
    assert.deepEqual(e.to, { autoAlpha: 1, x: 0 });
  });
  // b pushes a down by b's height; c pushes a and b by c's.
  assert.deepEqual(byWhy(plan.cues, /^push for b$/).map((c) => [c.k, c.at, c.to.y]), [["c0", 14, 200 + g]]);
  assert.deepEqual(byWhy(plan.cues, /^push for c$/).map((c) => [c.k, c.to.y]).sort(), [["c0", 200 + 160 + 2 * g], ["c1", 160 + g]]);
  // The highlight: the newest flares and settles; the one before it goes out.
  assert.deepEqual(byWhy(plan.cues, /^calm for b$/).map((c) => [c.k, c.to.opacity]), [["h0", 0]]);
  assert.deepEqual(byWhy(plan.cues, /^settle z$/).map((c) => [c.k, c.to.opacity]), [["h3", FEED_MOTION.newest]]);
  // No empty plate: before the first post the column is its header over its ground.
  assert.ok(!("empty" in plan.init));
  assert.ok(!plan.cues.some((c) => c.k === "empty" || /^first /.test(c.why)));
  assert.equal(plan.cues.some((c) => /^n\d+$/.test(c.k)), false);
  assert.equal(Object.keys(plan.init).some((k) => /^n\d+$/.test(k)), false);
  assert.equal(plan.gone.every((x) => x === null), true);
});

test("feedCues: when the column overflows the oldest fade out as they are pushed past it", () => {
  // A column of 400: a (150) and b (200) fit; c (160) pushes a to 376 + 150 > 400.
  const plan = feedCues({ posts: P(), heights: [150, 200, 160, 180], column: 400, ...FEED_MOTION });
  const out = byWhy(plan.cues, /^out for /);
  assert.deepEqual(out.map((c) => [c.k, c.why, c.to.autoAlpha]), [["c0", "out for c", 0], ["c1", "out for z", 0]]);
  assert.deepEqual(plan.gone, [18, 33, null, null]);
  // A gone card is never moved again.
  assert.equal(plan.cues.some((c) => c.k === "c0" && c.at > 18), false);
});

test("feedCues: every cue states its from, the last to on its element -- seek-safe", () => {
  const vis = deckChoreography({ ...sched(), segments: sched().segments.map((s) => ({ ...s, hideDeck: s.id === "k1" })) }, FEED).visibility;
  const plan = feedCues({ posts: P(), heights: [150, 200, 160, 180], column: 400, visibility: vis, slideX: 624, ...FEED_MOTION });
  const state = Object.fromEntries(Object.entries(plan.init).map(([k, v]) => [k, { ...v }]));
  let last = -Infinity;
  const ends = {};
  for (const c of plan.cues) {
    assert.ok(c.at >= last, "cues in time order");
    last = c.at;
    for (const [q, v] of Object.entries(c.from)) assert.equal(v, state[c.k][q], `${c.k}.${q} from at ${c.at}`);
    assert.ok(c.at >= (ends[c.k] ?? -Infinity) - 1e-9, `${c.k} overlaps itself at ${c.at}`);
    ends[c.k] = c.at + c.dur;
    Object.assign(state[c.k], c.to);
  }
  // The column slides off with the deck over the card and back after it.
  const col = plan.cues.filter((c) => c.k === "col");
  assert.deepEqual(col.map((c) => c.to.x), [624, 0]);
  assert.deepEqual(col.map((c) => c.at), vis.map((v) => v.at[0]));
  // Hidden from the first frame: that is the init, no cue.
  const first = feedCues({ posts: P(), heights: [1, 1, 1, 1], column: 400, startsHidden: true, slideX: 624,
    visibility: [{ i: 0, hide: true, at: [0, 0] }] });
  assert.deepEqual(first.init.col, { x: 624 });
  assert.equal(first.cues.some((c) => c.k === "col"), false);
});

// ---- the page ------------------------------------------------------------------

const FONTS = { regular: "assets/DeckSans.ttf", bold: "assets/DeckSansBold.ttf" };
const HOSTILE = POST("evil", "2024-11-27T02:36:13.745Z", {
  platform: "x", handle: '"><img src=x onerror=alert(1)>', author: "<b>bold</b>",
  text: "</script><script>alert(1)</script>\nsecond line & 'quotes'\n\nnew paragraph",
});
const dataOf = (html) => JSON.parse(/<script id="feed-data" type="application\/json">(.*?)<\/script>/s.exec(html)[1]);
const page = (posts = POSTS, opts = {}) => {
  const s = sched(FEED, posts);
  const qrSrcs = Object.fromEntries(s.posts.map((p, i) => [p.id, `assets/qr0${i}.png`]));
  return { s, qrSrcs, html: feedHtml(s, FEED, { fonts: FONTS, qrSrcs, ...opts }) };
};

test("the page: one card per post with its date, words and QR; the header; the composition contract", () => {
  const { s, html, qrSrcs } = page();
  const col = feedGeometry(FEED).column;
  assert.match(html, new RegExp(`data-composition-id="feed" data-start="0" data-duration="${s.total}"\\s+data-width="${col.width}" data-height="${col.height}"`));
  assert.match(html, /window\.__timelines\["feed"\] = tl/);
  s.posts.forEach((p, j) => {
    const open = html.indexOf(`data-post="${p.id}" data-k="c${j}"`);
    assert.ok(open > 0, `no card for ${p.id}`);
    const next = html.indexOf("<article", open + 1);
    const card = html.slice(open, next > 0 ? next : undefined);
    assert.match(card, /class="date"/);
    assert.match(card, /class="para">words of /);
    assert.ok(card.includes(`<img src="${qrSrcs[p.id]}" width="120" height="120"`), `${p.id} qr`);
    assert.ok(card.includes(`data-k="h${j}"`));
  });
  // One author: the header names them once, and the cards only date themselves.
  assert.ok(html.includes('<span class="title">@piratesoftware.live</span>'));
  assert.ok(html.includes('<span class="platform">Bluesky</span>'));
  assert.equal((html.match(/class="handle"/g) ?? []).length, 0);
  assert.ok(html.includes('<span class="date">Oct 19, 2024</span>'));
  assert.ok(!html.includes('data-k="empty"') && !html.includes("No posts yet") && !html.includes(".empty"));
  // No running count and no caption: the header is who posted, on what.
  assert.equal(/ of 4<|data-k="n\d|class="caption"|class="count"/.test(html), false);
  // The cue times are the schedule's.
  assert.deepEqual(dataOf(html).posts, s.posts.map((p) => ({ id: p.id, in: p.in })));
  assert.equal(dataOf(html).column, feedLayout(FEED).stack.height);
  // The planner is in the page under its fixed name.
  assert.ok(html.includes("const feedCues = (function feedCues("));
  // Not a feed's schedule: refused.
  assert.throws(() => feedHtml(sched(RENDER), FEED, { fonts: FONTS }), /not a feed/);
});

test("the page: post strings are text, escaped in elements, attributes and the inline JSON", () => {
  const { html } = page([...POSTS, HOSTILE]);
  assert.ok(html.includes("&lt;/script&gt;&lt;script&gt;alert(1)&lt;/script&gt;\nsecond line &amp; &#39;quotes&#39;"));
  assert.ok(html.includes("@&quot;&gt;&lt;img src=x onerror=alert(1)&gt;"));
  assert.doesNotMatch(html, /<img src=x/);
  assert.doesNotMatch(html, /<b>bold<\/b>/);
  // Two authors, two platforms: the header says "Posts" and each card its own.
  assert.ok(html.includes('<span class="title">Posts</span>'));
  assert.ok(html.includes('<span class="platform">X</span>'));
  assert.equal((html.match(/<\/script>/g) ?? []).length, 3);
  const json = /<script id="feed-data" type="application\/json">(.*?)<\/script>/s.exec(html)[1];
  assert.doesNotMatch(json, /</);
  assert.doesNotMatch(json, /alert|words of/);
  assert.deepEqual(feedWho([POST("a", "2024-01-01")]), { title: "@piratesoftware.live", platforms: ["Bluesky"], single: true });
});

test("the page: nothing leaves the machine; the posts' links are only in their QRs", () => {
  const { html } = page([POST("a", "2024-10-19", { text: "see https://example.com/x and ferrets.live" })]);
  // The words may name a link; no element loads one.
  assert.doesNotMatch(html, /(?:src|href)="(?:https?:)?\/\//, "a remote src or href");
  assert.doesNotMatch(html, /url\('(?:https?:)?\/\//, "a remote font");
  assert.doesNotMatch(html, /@import|fonts\.googleapis|cdn\.|<link/);
  assert.match(html, /<script src="assets\/gsap\.min\.js"><\/script>/);
  for (const m of html.matchAll(/font-family: ([^;]+);/g)) {
    assert.match(m[1], /^'DeckSans(?:Bold)?'(?:, sans-serif)?$/, m[1]);
  }
});

test("the page: a window of the cut plays the cut's own clock; visibility is the deck's", () => {
  const { html } = page(POSTS, { from: 12, duration: 5 });
  const d = dataOf(html);
  assert.deepEqual(d.window, { from: 12, dur: 5 });
  assert.match(html, /data-composition-id="feed" data-start="0" data-duration="5"/);
  const hidden = { ...sched(), segments: sched().segments.map((s) => ({ ...s, hideDeck: s.id === "k1" })) };
  const v = dataOf(feedHtml(hidden, FEED, { fonts: FONTS })).visibility;
  assert.deepEqual(v.map((x) => [x.hide, x.at[0]]), deckChoreography(hidden, FEED).visibility.map((x) => [x.hide, x.at[0]]));
  assert.equal(dataOf(feedHtml(hidden, FEED, { fonts: FONTS })).slideX, 600 + 24);
});

// ---- the build: framing, its record and the refusal ------------------------------

test("deckFraming: a feed frames footage into feedGeometry's box; the deck's is unchanged", () => {
  const f = feedGeometry(FEED).footage;
  assert.deepEqual(deckFraming(FEED, { feed: true }).box, f);
  assert.equal(
    deckFramingFilter(FEED, { feed: true }),
    "scale=1272:716:force_original_aspect_ratio=decrease,pad=1272:716:(ow-iw)/2:(oh-ih)/2:color=#12101a," +
      "pad=1920:1080:24:87:color=#12101a,setsar=1,fps=30",
  );
  // Without the feed (or under the popup) it is the deck's box, the filter it always was.
  assert.equal(deckFramingFilter(FEED), deckFramingFilter(RENDER));
  assert.deepEqual(segmentFraming(FEED, true), { layout: "feed", box: f });
  assert.deepEqual(segmentFraming(RENDER), { layout: "deck", box: deckGeometry(RENDER).footage });
  assert.equal(framedUnderDeck({ type: "clip" }, FEED), true);
  assert.equal(framedUnderDeck({ type: "image" }, FEED), true);
  assert.equal(framedUnderDeck({ type: "card" }, FEED), false);
  assert.equal(framedUnderDeck({ type: "teaser" }, FEED), false);
  const shown = { ...BASE, chrome: { ...CHROME, deck: { overCards: "show" } } };
  assert.equal(framedUnderDeck({ type: "card" }, shown), true);
  assert.equal(framedUnderDeck({ type: "teaser" }, shown), false);
});

test("framingProblems: segments framed for another layout are named; a record-less one is the deck's", () => {
  const entries = [...CLIPS, { id: "t", type: "teaser" }];
  const feed = segmentFraming(FEED, true);
  const deck = segmentFraming(FEED, false);
  const rec = (fr) => ({ version: 1, framing: fr });
  // All framed for the feed, wanted for the feed: nothing to say. Cards and teasers are full frame.
  assert.deepEqual(framingProblems({ entries, records: [rec(feed), rec(feed), null, rec(feed), null], render: FEED, want: feed }), []);
  // Built under the deck (with records, or before records named it) and now a feed: refused, by name.
  const [msg] = framingProblems({ entries, records: [rec(deck), null, null, rec(feed), null], render: FEED, want: feed });
  assert.match(msg, /^2 segment\(s\) are framed for another layout than this cut's posts feed \(footage 1272×716 at \(24, 87\)\)/);
  assert.match(msg, /c1 \(framed for the deck, 1574×886 at \(173, 2\)\)/);
  assert.match(msg, /c2 \(no framing record: built for the deck's 1574×886 at \(173, 2\)\)/);
  assert.match(msg, /run a normal build \(with --skip-fetch/);
  // The other way: feed-framed segments under a popup deck.
  assert.match(framingProblems({ entries, records: [rec(feed), rec(deck), null, rec(deck), null], render: RENDER, want: deck })[0],
    /1 segment\(s\) are framed for another layout than this cut's deck .*c1 \(framed for the feed, 1272×716 at \(24, 87\)\)/);
  // Legacy segments with no record pass under the deck.
  assert.deepEqual(framingProblems({ entries, records: entries.map(() => null), render: RENDER, want: deck }), []);
});

test("--chrome-only and --chrome-preview refuse a framing mismatch before rendering a teaser", async () => {
  const dir = mkdtempSync(path.join(tmpdir(), "feed-refuse-"));
  const env = process.env.HYPERFRAMES_BIN;
  try {
    // A renderer that only leaves a mark: the refusal must come first.
    const mark = path.join(dir, "rendered");
    const stub = path.join(dir, "hf-stub.sh");
    writeFileSync(stub, `#!/bin/sh\ntouch '${mark}'\nexit 1\n`);
    chmodSync(stub, 0o755);
    process.env.HYPERFRAMES_BIN = stub;
    const manifestPath = path.join(dir, "m.json");
    writeFileSync(manifestPath, JSON.stringify({
      slug: "refuse", render: FEED, provenance: PROV, posts: POSTS,
      timeline: [...CLIPS, { id: "t", type: "teaser", lines: ["Soon"] }],
    }));
    // Every footage segment on disk, framed for the deck: the cut is now a feed.
    const segDir = path.join(dir, "out", "sourced", "segments");
    mkdirSync(segDir, { recursive: true });
    for (const e of CLIPS) {
      writeFileSync(path.join(segDir, `${e.id}.mp4`), "");
      writeFileSync(path.join(segDir, `${e.id}.cut.json`), JSON.stringify({ version: 1, framing: segmentFraming(FEED, false) }));
    }
    for (const opts of [{ chromeOnly: true }, { chromePreview: { at: 1, dur: 2 } }]) {
      await assert.rejects(buildVideo({ manifestPath, opts }), /framed for another layout than this cut's posts feed/);
    }
    assert.equal(existsSync(mark), false, "a teaser was rendered before the refusal");
    assert.equal(existsSync(path.join(segDir, "t.mp4")), false);
  } finally {
    if (env === undefined) delete process.env.HYPERFRAMES_BIN;
    else process.env.HYPERFRAMES_BIN = env;
    rmSync(dir, { recursive: true, force: true });
  }
});

test("the feed's overlay is laid like the deck's: whole cut, reinit off, rgba, shortest", () => {
  const regions = [...chromeRegions(FEED, "/o"), feedRegion(FEED, "/o/chrome/feed-frames")];
  assert.deepEqual(regions[1], { name: "feed", frames: "/o/chrome/feed-frames", x: 1320, y: 0, width: 600, height: 890 });
  const hf = chromeOverlayChain(FEED, regions, "[v]", 3);
  assert.deepEqual(hf.inputs.slice(8), [
    "-reinit_filter", "0", "-framerate", "30", "-start_number", "1", "-i", "/o/chrome/feed-frames/frame_%06d.png",
  ]);
  assert.match(hf.chain, /\[4:v\]format=rgba\[hfa1\];\[hf0\]\[hfa1\]overlay=x=1320:y=0:format=yuv444:shortest=1\[hf1\]/);
  // The deck alone writes the chain it always did.
  assert.equal(chromeOverlayChain(RENDER, chromeRegions(RENDER, "/o"), "[v]", 3).chain,
    "[3:v]format=rgba[hfa0];[v][hfa0]overlay=x=0:y=890:format=yuv444:shortest=1[hf0];[hf0]format=yuv420p[vout]");
});

// ---- compose-chrome's feed region, with the renderer stubbed ----------------------

test("compose-chrome: the feed region composes, renders through the stub and caches by its key", async () => {
  const dir = mkdtempSync(path.join(tmpdir(), "feed-compose-"));
  const env = { HYPERFRAMES_BIN: process.env.HYPERFRAMES_BIN, QRENCODE_BIN: process.env.QRENCODE_BIN };
  try {
    // A renderer that writes the frames the root declares, and a qrencode
    // that writes a PNG: what the e2e stubs do.
    const stub = path.join(dir, "hf-stub.mjs");
    writeFileSync(stub, `#!/usr/bin/env node
import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
const a = process.argv.slice(2);
const out = a[a.indexOf("--output") + 1];
const fps = Number(a[a.indexOf("--fps") + 1]);
const html = readFileSync(a.at(-1) + "/index.html", "utf8");
const dur = Number(/data-composition-id="[^"]*"[^>]*data-duration="([\\d.]+)"/.exec(html)[1]);
mkdirSync(out, { recursive: true });
for (let i = 1; i <= Math.round(dur * fps); i += 1) writeFileSync(out + "/frame_" + String(i).padStart(6, "0") + ".png", "x");
`);
    chmodSync(stub, 0o755);
    process.env.HYPERFRAMES_BIN = stub;
    const s = sched();
    const font = "/usr/share/fonts/TTF/FiraSans-Regular.ttf";
    const manifest = { slug: "f", render: { ...FEED, fontRegular: font, fontBold: font, qr: { scale: 3, quiet: 3 } }, timeline: CLIPS, posts: POSTS };
    const mp = path.join(dir, "video.manifest.json");
    writeFileSync(mp, JSON.stringify(manifest));
    const out = path.join(dir, "out", "sourced");
    mkdirSync(out, { recursive: true });
    writeFileSync(path.join(out, "schedule.json"), JSON.stringify(s));
    const { composeChrome } = await import("./compose-chrome.mjs");
    let r;
    try {
      r = await composeChrome({ manifestPath: mp, region: "feed", doRender: true, fps: 30 });
    } catch (e) {
      // No qrencode or font on this machine: the page is what the tests above hold.
      if (/qrencode|ENOENT|face/.test(String(e.message))) return;
      throw e;
    }
    assert.equal(r.projDir, path.join(out, "chrome", "feed"));
    assert.equal(r.frames, path.join(out, "chrome", "feed-frames"));
    assert.equal(r.frameCount, Math.round(s.total * 30));
    assert.equal(r.cached, false);
    const html = readFileSync(path.join(r.projDir, "index.html"), "utf8");
    assert.match(html, /src="assets\/qr00\.png"/);
    const again = await composeChrome({ manifestPath: mp, region: "feed", doRender: true, fps: 30 });
    assert.equal(again.cached, true);
    // The preview project and a window each have their own name.
    const pv = await composeChrome({ manifestPath: mp, region: "feed", preview: true });
    assert.equal(pv.projDir, path.join(out, "chrome", "feed-preview"));
    const w = await composeChrome({ manifestPath: mp, region: "feed", from: 9, duration: 4 });
    assert.equal(w.projDir, path.join(out, "chrome", "feed-from9"));
    // A popup's schedule is not a feed's.
    writeFileSync(path.join(out, "schedule.json"), JSON.stringify(sched(RENDER)));
    await assert.rejects(composeChrome({ manifestPath: mp, region: "feed" }), /needs a feed's schedule/);
  } finally {
    for (const [k, v] of Object.entries(env)) if (v === undefined) delete process.env[k]; else process.env[k] = v;
    rmSync(dir, { recursive: true, force: true });
  }
});

test("the page: a post with a screenshot draws it in place of its words, its QR cell kept", () => {
  const posts = POSTS.map((p) => (p.id === "b" ? { ...p, shot: "shots/b.webp" } : p));
  const { s, html } = page(posts, { shotSrcs: { b: "assets/shot00.webp" } });
  assert.equal(s.posts.find((p) => p.id === "b").shot, "shots/b.webp");
  const j = s.posts.findIndex((p) => p.id === "b");
  const open = html.indexOf(`data-post="b" data-k="c${j}"`);
  const next = html.indexOf("<article", open + 1);
  const card = html.slice(open, next > 0 ? next : undefined);
  assert.match(html, /<article class="post has-shot" data-post="b"/);
  assert.ok(card.includes('<img class="shot" src="assets/shot00.webp" alt="">'));
  assert.doesNotMatch(card, /class="para"|class="date"/);
  assert.match(card, /<img src="assets\/qr0\d\.png"/);
  assert.equal((html.match(/class="para"/g) ?? []).length, 3, "the other three keep their words");
});