// Скриншоты для критика: полная страница и первый экран на 390 и 1440, плюс кадр 390 со скроллом до y=1500.
//   node scripts/screenshots.mjs <url> <каталог>
// Анимации доигрываются: страница прокручивается до низа, чтобы сработали IntersectionObserver.
import { mkdir } from 'node:fs/promises';
import { chromium } from 'playwright';

const [url = 'http://127.0.0.1:3000/', outDir = '.screenshots/critic'] = process.argv.slice(2);
await mkdir(outDir, { recursive: true });

const browser = await chromium.launch();
for (const width of [390, 1440]) {
  const page = await browser.newPage({
    viewport: { width, height: width === 390 ? 844 : 900 },
    deviceScaleFactor: width === 390 ? 2 : 1,
  });
  await page.goto(url, { waitUntil: 'networkidle' });
  await page.screenshot({ path: `${outDir}/${width}-fold.png` });
  for (let y = 0; y < (await page.evaluate(() => document.body.scrollHeight)); y += 400) {
    await page.evaluate((top) => window.scrollTo(0, top), y);
    await page.waitForTimeout(120);
  }
  await page.waitForTimeout(800);
  await page.evaluate(() => window.scrollTo(0, 0));
  await page.screenshot({ path: `${outDir}/${width}-full.png`, fullPage: true });
  if (width === 390) {
    // третий кадр: середина страницы, видна липкая CTA
    await page.evaluate(() => window.scrollTo(0, 1500));
    await page.waitForTimeout(600);
    await page.screenshot({ path: `${outDir}/${width}-scroll.png` });
    await page.evaluate(() => window.scrollTo(0, 0));
  }
  const overflow = await page.evaluate(() => document.documentElement.scrollWidth - window.innerWidth);
  console.log(`${width}: ${outDir}/${width}-full.png, горизонтальный выход за экран ${overflow}px`);
  await page.close();
}
await browser.close();