import { chromium } from 'playwright';
/* Checks the hero video: does it load and play, is it gated off on phones and under reduced
   motion, and does the hero fill the viewport. */
const [,, url, prefix] = process.argv;
const browser = await chromium.launch();

async function probe(label, opts, shots = []) {
  const ctx = await browser.newContext(opts);
  const page = await ctx.newPage();
  const requested = [];
  page.on('request', (r) => { if (/\.(mp4|webm)$/.test(r.url())) requested.push(r.url().split('/').pop()); });
  await page.goto(url, { waitUntil: 'networkidle' });
  await page.waitForTimeout(2500);
  const info = await page.evaluate(() => {
    const v = document.querySelector('video');
    const hero = document.querySelector('.hero');
    return {
      hasVideo: !!v,
      ready: v?.hasAttribute('data-ready') ?? null,
      paused: v?.paused ?? null,
      currentTime: v ? Math.round(v.currentTime * 10) / 10 : null,
      videoSize: v ? `${v.videoWidth}x${v.videoHeight}` : null,
      heroHeight: Math.round(hero.getBoundingClientRect().height),
      viewport: window.innerHeight,
      headerH: Math.round(document.querySelector('header').getBoundingClientRect().height),
    };
  });
  for (const t of shots) {
    await page.waitForTimeout(t);
    await page.screenshot({ path: `${prefix}-${label}-${t}.png` });
  }
  console.log(label, JSON.stringify({ ...info, requested }));
  await ctx.close();
}

await probe('desktop', { viewport: { width: 1440, height: 900 } }, [0, 2500]);
await probe('mobile', { viewport: { width: 390, height: 844 } });
await probe('reduced', { viewport: { width: 1440, height: 900 }, reducedMotion: 'reduce' });
await browser.close();