// Store screenshots + Play feature graphic at exact pixel sizes, from raw app or game frames and per-language copy.
//   storebound shots render [--lang en,tr] [--size ios69,play,feature] [--scenes hero,battle] [--variant b | --variants]
//                           [--no-sheet] [--port 8792] [--concurrency N] [--dry]
// Out: <shots.out>/<lang>/<size>/NN.png (24-bit RGB: Play rejects alpha / palette PNGs), <lang>/feature/1024x500.png,
// <lang>/sheet.png (contact sheet of every size packed into a grid, for a quick review) and <shots.out>/report.json (text overflow flags
// per image, read by `shots check` and `shots gallery`). Variants go to <shots.out>/<variant>/<lang>/...
// Default sizes: defaultSizes() (ipad13 only with apple.ipad; tab7 / tab10 only with play.tablets, default: tablet renders
// already exist). Needs playwright + ffmpeg.
// Fonts: the per-language stacks from .storebound/fonts/fonts.json (`shots fonts`). Before rendering, every character
// of the copy is checked against the cmaps of the downloaded faces (stale fonts fail with the language and the
// characters); while rendering, the page measures which face drew every character, and report.json records it per
// image (`fonts`: faces used, automatic fallbacks, system-font glyphs) for `shots check`. Local font files (shots.fonts
// paths) are served from where they are at /fonts/local/... (local-fonts.ts); a file changed since `shots fonts` fails.
// Style: shotsStyle() = shots.style, else app for the app / subscription-app profiles (template-app.html,
// feature-app.html: calm gradient, device frame, headline + subline), else game (template.html, feature.html).
import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
import { SHOTS_PAGES } from '../lib/embedded';
import { fontCodepoints } from './cmap';
import { readManifest } from './fonts';
import { type FontManifest, fontUsage, measureFonts, roleTexts, uncoveredChars } from './glyphs';
import { join, relative } from 'node:path';
import type { Ctx } from '../lib/ctx';
import { need } from '../lib/ctx';
import { done, log, warn } from '../lib/log';
import { closeBrowser, launch } from './browser';
import { defaultConcurrency, pool, progressLine } from './capture-web';
import { shotsStyle } from '../lib/config';
import { type CopyFile, type DeviceBox, type TextBox, SIZES, renderDims, sheetTimeoutMs, featureLayout, copyText, defaultSizes, frameDims, mergeCopy, palette, renderDir, scriptFont, sheetLayout, validateCopy, variantScenes } from './lib';
import { bgCss, bgTone, type ContrastSample, contrastIssues, parseColour, photoBackground, photoCss, type RGB, worstContrast } from './palette';
import { type WeightSample, weightIssues } from './weights';
import type { Palette } from '../lib/config';
import { faceFilePath, fontsRoute, resolveShotFonts, staleLocalFonts } from './local-fonts';
import { type RenderReport, mergeReport, readReport, resolvedTablets } from './report';
import * as rt from '../lib/rt';
import { cpus, loadavg } from 'node:os';

/** max(1-min, 5-min load) / cores, 1..5 (the same factor tests/helpers/load.ts uses; STOREBOUND_LOAD_FACTOR overrides). */
export function loadFactor(env = process.env, load = loadavg(), cores = cpus().length): number {
  const forced = Number(env.STOREBOUND_LOAD_FACTOR);
  if (Number.isFinite(forced) && forced > 0) return Math.min(5, Math.max(1, forced));
  return Math.min(5, Math.max(1, Math.max(load[0] ?? 0, load[1] ?? 0) / Math.max(1, cores)));
}

const TYPES: Record<string, string> = { html: 'text/html; charset=utf-8', png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg',
  webp: 'image/webp', woff2: 'font/woff2', woff: 'font/woff', ttf: 'font/ttf', otf: 'font/otf', css: 'text/css', svg: 'image/svg+xml' };

export async function run(ctx: Ctx): Promise<void> {
  const { config, root, resolve } = ctx.loaded;
  const shots = need(config.shots, 'shots');
  const a = ctx.args;
  const langs = a.list('lang').length ? a.list('lang') : config.languages.map(l => l.id);
  const tablets = resolvedTablets(config, resolve(shots.out));
  const sizes = a.list('size').length ? a.list('size') : defaultSizes(config, tablets);
  if (config.play && !tablets && !a.list('size').length)
    log('shots', `Play tablet screenshots: not rendered (${config.play.tablets === false ? 'play.tablets is false' : 'no tablet renders yet; set play.tablets: true to render tab7 / tab10'}; optional on Play)`);
  for (const s of sizes) if (!SIZES[s]) throw new Error(`unknown size ${s} (${Object.keys(SIZES).join(', ')})`);
  const variants: (string | undefined)[] = a.has('variants') ? [undefined, ...Object.keys(shots.variants ?? {})] : [a.get('variant')];
  const baseCopy = JSON.parse(readFileSync(resolve(shots.copy), 'utf8')) as CopyFile;
  const jobs = new Map<string, { scenes: typeof shots.scenes; copy: CopyFile }>();
  for (const v of variants) {
    const scenes = variantScenes(shots, v);
    const vc = v && shots.variants?.[v]?.copy ? JSON.parse(readFileSync(resolve(shots.variants[v]!.copy!), 'utf8')) as CopyFile : undefined;
    const copy = mergeCopy(baseCopy, vc);
    const problems = validateCopy(copy, { ...shots, scenes }, langs);
    if (problems.length) throw new Error(`shots copy${v ? ` (variant ${v})` : ''}:\n  ` + problems.join('\n  '));
    jobs.set(v ?? '', { scenes, copy });
  }
  for (const [v, job] of jobs) {
    const bad = a.list('scenes').filter(id => !job.scenes.some(s => s.id === id));
    if (bad.length) throw new Error(`--scenes: unknown scene id${bad.length > 1 ? 's' : ''} ${bad.join(', ')}${v ? ` (variant ${v})` : ''}; scene ids: ${job.scenes.map(s => s.id).join(', ')}`);
  }
  const framesDir = resolve(shots.frames), outDir = resolve(shots.out);
  if (a.has('dry')) {
    let n = 0;
    for (const [v, job] of jobs) for (const lang of langs) {
      const scenes = a.list('scenes').length ? a.list('scenes') : job.scenes.map(s => s.id);
      const files = sizes.reduce((t, s) => t + (SIZES[s]!.feature ? 1 : scenes.length), 0);
      n += files;
      log('shots', `would render ${renderDir(outDir, lang, v || undefined)}: ${files} images (${sizes.join(', ')}; scenes ${scenes.join(', ')})`);
    }
    return done('shots', `render planned (dry run): ${n} images`);
  }
  const fontsDir = join(root, '.storebound', 'fonts');
  if (!existsSync(join(fontsDir, 'fonts.css'))) warn('shots', 'no .storebound/fonts/fonts.css: run `storebound shots fonts` first (falling back to system fonts; shots check will fail)');
  const { phone, tablet } = frameDims(config);
  const rtl = new Map(config.languages.map(l => [l.id, !!l.rtl] as const));
  const style = shotsStyle(config);
  const rf = resolveShotFonts(shots, style, resolve, root);
  const sf = { title: rf.title.family, body: rf.body.family };
  const fonts = { title: sf.title, body: sf.body };
  const manifest = existsSync(join(fontsDir, 'fonts.css')) ? readManifest(fontsDir) : null;
  if (existsSync(join(fontsDir, 'fonts.css')) && !manifest) warn('shots', 'fonts from an older storebound (no fonts.json): run `storebound shots fonts` again for the glyph coverage check');
  if (manifest && (!manifest.faces[sf.title] || !manifest.faces[sf.body])) throw new Error(`shots render: .storebound/fonts has other fonts than shots.fonts (${sf.title} / ${sf.body}): run \`storebound shots fonts\``);
  const stacks = (lang: string, copy: CopyFile): { title: string[]; body: string[]; script: string | null } => {
    const m = manifest?.langs[lang];
    if (m) return { title: m.title, body: m.body, script: m.title[0]?.startsWith('Store ') && !m.title[0].startsWith('Store fb ') ? m.title[0] : null };
    const sc = scriptFont(lang, copyText(lang, copy[lang]));
    const x = sc ? `Store ${sc.slug}` : null;
    return { title: [...(x ? [x] : []), sf.title], body: [...(x ? [x] : []), sf.body], script: x };
  };
  const faces: FontManifest['faces'] = manifest?.faces ?? { [sf.title]: { family: sf.title, file: '', kind: 'title', chosen: true }, [sf.body]: { family: sf.body, file: '', kind: 'body', chosen: true } };
  if (!manifest) for (const [, job] of jobs) for (const lang of langs) {
    const x = stacks(lang, job.copy).script;
    if (x) faces[x] = { family: x, file: '', kind: 'script', chosen: true };
  }
  if (manifest) {
    const stale = staleLocalFonts(manifest, root);
    if (stale.length) throw new Error(`shots render: local font files changed since \`shots fonts\`: run \`storebound shots fonts\`\n  ${stale.join('\n  ')}`);
  }
  if (manifest) { // glyph coverage of the local font files, before rendering anything
    const cmaps = new Map<string, Set<number>>();
    const cps = (face: string): Set<number> => {
      if (!cmaps.has(face)) { const f = manifest.faces[face]; const file = f && faceFilePath(fontsDir, root, f); cmaps.set(face, file && existsSync(file) ? fontCodepoints(readFileSync(file)) : new Set()); }
      return cmaps.get(face)!;
    };
    const gaps: string[] = [];
    for (const [, job] of jobs) for (const lang of langs) {
      if (!manifest.langs[lang]) { gaps.push(`${lang}: no font stack (language added after \`shots fonts\`)`); continue; }
      const t = roleTexts(lang, job.copy[lang], config.app.name);
      for (const role of ['title', 'body'] as const) {
        const miss = uncoveredChars(t[role], manifest.langs[lang]![role].map(cps));
        if (miss.length) gaps.push(`${lang} (${role}): ${miss.join(' ')}`);
      }
    }
    if (gaps.length) throw new Error(`shots render: the downloaded fonts do not cover the copy (edited since \`shots fonts\`?): run \`storebound shots fonts\`\n  ${[...new Set(gaps)].join('\n  ')}`);
    for (const lang of langs) for (const f of manifest.langs[lang]?.fallbacks ?? [])
      (manifest.faces[f.face]?.chosen ? log : warn)('shots', `${lang} ${f.role}: ${[...f.chars].join(' ')} from ${f.family}${manifest.faces[f.face]?.chosen ? '' : ' (automatic fallback: shots check will fail)'}`);
  }
  // palette backgrounds as CSS (colour, gradient string or stops) and photo backgrounds, served at /bgimg/<n>
  const photos: string[] = [];
  const look = (pl: Palette, angle: number, mid: number, featureBg?: NonNullable<typeof shots.feature>['background']): Palette & { bgCss: string; bgTone: string; photo?: { overlay: number } } => {
    const ph = photoBackground(pl, featureBg);
    let css = bgCss(pl.bg, angle, mid);
    if (ph) {
      const abs = resolve(ph.image);
      if (!existsSync(abs)) throw new Error(`shots render: background image ${ph.image} not found (${abs})`);
      if (!photos.includes(abs)) photos.push(abs);
      css = photoCss(`/bgimg/${photos.indexOf(abs)}`, ph.overlay) + ', ' + css;
    }
    return { ...pl, bgCss: css, bgTone: ph && ph.overlay >= 0.35 ? '#000000' : bgTone(pl.bg), ...(ph ? { photo: { overlay: ph.overlay } } : {}) };
  };
  const server = await rt.serve({
    port: a.num('port', 8792), hostname: '127.0.0.1',
    async fetch(req) {
      const url = new URL(req.url);
      const p = decodeURIComponent(url.pathname);
      if (p === '/job.json') {
        const lang = url.searchParams.get('lang') ?? '';
        const { scenes, copy } = jobs.get(url.searchParams.get('v') ?? '') ?? jobs.values().next().value!;
        const st = stacks(lang, copy);
        const ls = shots.landscape?.size;
        const landscape = { w: ls?.w ?? 1440, h: ls?.h ?? 900, bar: 0 };
        const base = { style, phone, tablet, landscape, side: shots.landscape?.side ?? 'left', rtl: rtl.get(lang), logo: !!shots.logo, appName: config.app.name,
          fonts: { ...fonts, script: st.script, titleStack: st.title, bodyStack: st.body } };
        if (url.searchParams.has('feature'))
          return Response.json({ ...base, frame: shots.feature?.frame ?? scenes[0]!.frames[0]!.src,
            device: featureLayout(style, phone, { fit: shots.feature?.fit, scale: shots.feature?.scale }),
            palette: look(palette(shots.feature?.palette ?? scenes[0]!.palette, style), style === 'app' ? 135 : 160, style === 'app' ? 55 : 50, shots.feature?.background) });
        const sid = url.searchParams.get('s') ?? '';
        const scene = scenes.find(s => s.id === sid)!;
        const number = scenes.filter(s => !s.hero).indexOf(scene) + 1;
        return Response.json({ ...base, scene, number, palette: look(palette(scene.palette, style), 180, style === 'app' ? 55 : 48), copy: copy[lang]?.[sid] ?? {} });
      }
      let file = '';
      if (p === '/logo' && shots.logo) file = resolve(shots.logo);
      else if (p.startsWith('/bgimg/')) file = photos[Number(p.slice(7))] ?? '';
      else if (p.startsWith('/frames/')) file = join(framesDir, p.slice(8));
      else if (p.startsWith('/fonts/')) file = fontsRoute(p.slice(7), fontsDir, root, manifest) ?? '';
      else if (p.startsWith('/out/')) file = join(outDir, p.slice(5));
      else if (/^\/(template|feature)(-app)?\.html$/.test(p)) return new Response(SHOTS_PAGES[p.slice(1)]!, { headers: { 'content-type': TYPES.html! } });
      if (!file || file.includes('..')) return new Response('no', { status: 404 });
      return rt.fileResponse(file, { 'content-type': TYPES[file.split('.').pop()!.toLowerCase()] ?? 'application/octet-stream' }) ?? new Response('missing ' + p, { status: 404 });
    },
  });
  const base = `http://127.0.0.1:${server.port}`;
  const browser = await launch(root, { headless: true });
  const concurrency = a.num('concurrency', defaultConcurrency('render'));
  // one page per worker, each with its own error list
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const pages: { page: any; errs: string[] }[] = [];
  const pageFor = async (k: number): Promise<{ page: any; errs: string[] }> => { // eslint-disable-line @typescript-eslint/no-explicit-any
    if (pages[k]) return pages[k]!;
    const page = await (await browser.newContext({ deviceScaleFactor: 1 })).newPage(); // own context: no background-tab throttling
    const errs: string[] = [];
    page.on('pageerror', (e: Error) => errs.push(e.message));
    page.on('response', (r: { status(): number; url(): string }) => { if (r.status() >= 400 && !r.url().includes('/fonts/')) errs.push(`${r.status()} ${r.url()}`); });
    return (pages[k] = { page, errs });
  };
  let warnings = 0, finished = 0, total = 0;
  const started = Date.now();
  const report: RenderReport = {};

  async function shoot(p: { page: any; errs: string[] }, url: string, w: number, h: number, out: string, timeout = 30000, what = ''): Promise<void> { // eslint-disable-line @typescript-eslint/no-explicit-any
    const { page, errs } = p;
    const t0 = Date.now();
    // heartbeat for long waits (the contact sheet decodes every image): one line every 15 s, the budget on timeout
    const beat = timeout > 30000 ? setInterval(() => log('shots', `${what || relative(root, out)}: still loading (${Math.round((Date.now() - t0) / 1000)} s of ${Math.round(timeout / 1000)} s)`), 15000) : null;
    try {
    errs.length = 0;
    mkdirSync(join(out, '..'), { recursive: true });
    await page.setViewportSize({ width: w, height: h });
    await page.goto(url, { waitUntil: 'load' });
    await page.waitForFunction("document.body.dataset.ready === '1'", null, { timeout }).catch((e: Error) => {
      throw new Error(`${what || relative(root, out)}: not ready after ${Math.round((Date.now() - t0) / 1000)} s (budget ${Math.round(timeout / 1000)} s; ${errs.length ? errs.join(' | ') : 'no page errors'}): ${e.message.split('\n')[0]}`);
    });
    } finally { if (beat) clearInterval(beat); }
    await page.waitForTimeout(200);
    const tmp = out + '.tmp.png';
    const overflow = JSON.parse((await page.evaluate('document.body.dataset.overflow')) ?? '[]') as string[];
    const devices = JSON.parse((await page.evaluate('document.body.dataset.devices')) ?? '[]') as DeviceBox[];
    const bleed = (await page.evaluate('document.body.dataset.bleed')) === '1';
    const boxes = JSON.parse((await page.evaluate('document.body.dataset.boxes')) ?? '[]') as TextBox[];
    if (!out.endsWith('sheet.png')) {
      const measured = await measureFonts(page, Object.keys(faces));
      const usage = fontUsage(measured, faces);
      const weights = await titleWeights(page, sf.title);
      report[relative(outDir, out)] = { overflow, devices, ...(bleed ? { bleed } : {}), ...(boxes.length ? { boxes } : {}), missing: errs.filter(e => e.startsWith('404')), fonts: usage, ...(weights.length ? { weights } : {}) };
      for (const i of weightIssues(weights)) warn('shots', `${relative(root, out)}: ${i.msg}`);
      for (const f of usage.fallback) warn('shots', `${relative(root, out)}: ${f.el} ${[...f.chars].join(' ')} drawn with ${f.family} (automatic fallback)`);
      for (const f of usage.missing) warn('shots', `${relative(root, out)}: ${f.el} ${[...f.chars].join(' ')} drawn with a system font`);
    }
    if (overflow.length) warn('shots', `${relative(root, out)}: ${overflow.join('; ')}`);
    await page.screenshot({ path: tmp, clip: { x: 0, y: 0, width: w, height: h } });
    if (style === 'app' && !out.endsWith('sheet.png')) { // contrast guard: title ink vs. the pixels behind it (text hidden)
      const contrast = await titleContrast(page, w, h);
      const r = report[relative(outDir, out)];
      if (r && contrast.length) r.contrast = contrast;
      for (const i of contrastIssues(contrast)) warn('shots', `${relative(root, out)}: ${i.msg}`);
    }
    const ff = rt.spawn(['ffmpeg', '-v', 'error', '-y', '-i', tmp, '-pix_fmt', 'rgb24', out], { stderr: 'pipe' });
    const code = await ff.exited;
    rmSync(tmp, { force: true });
    if (code !== 0) throw new Error('ffmpeg: ' + await new Response(ff.stderr).text());
    if (errs.length) warnings++;
    finished++;
    log('shots', `${progressLine(finished, total, started)} ${errs.length ? 'WARN ' : ''}${relative(root, out)}${errs.length ? ' ' + errs.join(' | ') : ''}`);
  }

  // every image first (in parallel), then one contact sheet per language from its finished images
  const items: { url: string; w: number; h: number; out: string }[] = [];
  const sheets: { dir: string; rows: { size: string; files: string[]; dims?: { w: number; h: number } }[] }[] = [];
  for (const [v, job] of jobs) for (const lang of langs) {
    const sceneIds = a.list('scenes').length ? a.list('scenes') : job.scenes.map(s => s.id);
    const vq = v ? `&v=${encodeURIComponent(v)}` : '';
    const dir = renderDir(outDir, lang, v || undefined);
    const rows: { size: string; files: string[]; dims?: { w: number; h: number } }[] = [];
    for (const size of sizes) {
      const s = SIZES[size]!, d = renderDims(size, shots);
      if (s.feature) {
        const f = join(dir, 'feature', '1024x500.png');
        items.push({ url: `${base}/${style === 'app' ? 'feature-app' : 'feature'}.html?lang=${encodeURIComponent(lang)}${vq}`, w: s.w, h: s.h, out: f });
        rows.push({ size, files: [f] });
        continue;
      }
      const files: string[] = [];
      for (const [i, id] of sceneIds.entries()) {
        const f = join(dir, size, `${String(i + 1).padStart(2, '0')}.png`);
        const dev = d.landscape ? `&device=landscape&frame=${d.frame}` : s.device ? '&device=tablet' : '';
        items.push({ url: `${base}/${style === 'app' ? 'template-app' : 'template'}.html?s=${encodeURIComponent(id)}&w=${d.w}&h=${d.h}&lang=${encodeURIComponent(lang)}${dev}${size === 'tab7' || size === 'tab10' ? '&style=android' : ''}${vq}`, w: d.w, h: d.h, out: f });
        files.push(f);
      }
      rows.push({ size, files, dims: { w: d.w, h: d.h } });
    }
    if (!a.has('no-sheet') && rows.length) sheets.push({ dir, rows });
  }
  total = items.length + sheets.length;
  log('shots', `rendering ${items.length} images${sheets.length ? ` + ${sheets.length} contact sheets` : ''}, ${Math.min(concurrency, items.length)} at a time (--concurrency)`);
  try {
    const slot = new Map<number, number>();
    let nextSlot = 0;
    const withPage = async (fn: (p: { page: any; errs: string[] }) => Promise<void>): Promise<void> => { // eslint-disable-line @typescript-eslint/no-explicit-any
      const free = [...Array(concurrency).keys()].find(k => !slot.has(k)) ?? nextSlot++ % concurrency;
      slot.set(free, 1);
      try { await fn(await pageFor(free)); } finally { slot.delete(free); }
    };
    await pool(items, concurrency, it => withPage(p => shoot(p, it.url, it.w, it.h, it.out)));
    await pool(sheets, concurrency, async ({ dir, rows }) => {
      const lay = sheetLayout(rows);
      const imgs = lay.tiles.map(t => `<img src="/out/${relative(outDir, t.file)}" style="position:absolute;left:${t.x}px;top:${t.y}px;width:${t.w}px;height:${t.h}px;border-radius:14px">`).join('');
      const sheet = join(dir, '.sheet.html');
      writeFileSync(sheet, `<!doctype html><body style="margin:0;background:#141418;width:${lay.w}px;height:${lay.h}px;position:relative">${imgs}
<script>Promise.all([...document.images].map(i=>i.decode())).then(()=>document.body.dataset.ready='1')</script></body>`);
      const ms = sheetTimeoutMs(lay.tiles.length, rows.length, loadFactor());
      await withPage(p => shoot(p, `${base}/out/${relative(outDir, sheet)}`, lay.w, lay.h, join(dir, 'sheet.png'), ms, `${relative(root, join(dir, 'sheet.png'))} (${lay.tiles.length} images, ${rows.length} sizes)`));
      rmSync(sheet, { force: true });
    });
  } finally {
    for (const p of pages) await p?.page.context().close().catch(() => {});
    await closeBrowser(browser);
    server.stop(true);
    if (Object.keys(report).length) writeFileSync(join(outDir, 'report.json'), JSON.stringify(mergeReport(readReport(outDir), report), null, 1) + '\n');
  }
  const flagged = Object.values(report).filter(r => r.overflow.length).length;
  if (flagged) warn('shots', `${flagged} images with text overflow flags: storebound shots check / shots gallery`);
  done('shots', `render done${warnings ? `, ${warnings} with warnings (missing frames or fonts?)` : ''}`);
}

/** Title elements' asked weight vs. the weights the loaded faces of the title family serve (report.json `weights`). */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export async function titleWeights(page: any, family: string): Promise<WeightSample[]> {
  return (await page.evaluate(`(() => {
    const fam = ${JSON.stringify(family)};
    const served = [...document.fonts].filter(f => f.family.replace(/["']/g, '') === fam && f.status === 'loaded').map(f => String(f.weight));
    const seen = new Set(), out = [];
    for (const e of document.querySelectorAll('h1 span, .name')) {
      const want = Number(getComputedStyle(e).fontWeight), el = e.matches('.name') ? 'app name' : 'title';
      if (!e.textContent.trim() || seen.has(el + want)) continue;
      seen.add(el + want);
      out.push({ el, family: fam, want, served: [...new Set(served)] });
    }
    return out;
  })()`)) as WeightSample[];
}

/** Title ink vs. the background behind it: hides the title text, screenshots each title box, averages it into a
 *  small grid with ffmpeg and keeps the worst contrast (report.json `contrast`). Run after the real screenshot. */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export async function titleContrast(page: any, W: number, H: number): Promise<ContrastSample[]> {
  const els = (await page.evaluate(`(() => {
    const out = [];
    for (const e of document.querySelectorAll('h1 span, .name')) {
      if (!e.textContent.trim()) continue;
      const r = e.getBoundingClientRect();
      out.push({ el: e.matches('.name') ? 'app name' : 'title', ink: getComputedStyle(e).color, x: r.x, y: r.y, w: r.width, h: r.height });
    }
    for (const e of document.querySelectorAll('h1, .name')) e.style.visibility = 'hidden';
    return out;
  })()`)) as { el: string; ink: string; x: number; y: number; w: number; h: number }[];
  const out: ContrastSample[] = [];
  for (const e of els) {
    const ink = parseColour(e.ink);
    const x = Math.max(0, Math.floor(e.x)), y = Math.max(0, Math.floor(e.y));
    const cw = Math.min(W - x, Math.ceil(e.w)), ch = Math.min(H - y, Math.ceil(e.h));
    if (!ink || cw < 2 || ch < 2) continue;
    const png = await page.screenshot({ clip: { x, y, width: cw, height: ch } }) as Uint8Array;
    const r = rt.spawnSync(['ffmpeg', '-v', 'error', '-i', 'pipe:0', '-vf', 'scale=8:3:flags=area', '-f', 'rawvideo', '-pix_fmt', 'rgb24', 'pipe:1'], { stdin: png, timeout: 15000 });
    const raw = r.stdout;
    if (r.exitCode !== 0 || raw.length < 3) continue;
    const samples: RGB[] = [];
    for (let i = 0; i + 2 < raw.length; i += 3) samples.push([raw[i]!, raw[i + 1]!, raw[i + 2]!]);
    const wc = worstContrast(ink, samples);
    out.push({ el: e.el, ink: e.ink, worst: wc.worst, ratio: Math.round(wc.ratio * 100) / 100 });
  }
  return out;
}