import fs from 'fs';
import path from 'path';
import { chromium } from 'playwright';

async function captureRegions(url) {
  const browser = await chromium.launch({ headless: true, args: ['--no-sandbox'] });
  const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
  await page.goto(url, { waitUntil: 'networkidle' });
  await page.waitForTimeout(500);

  const regions = [
    { name: 'video_preview', selector: '.video-preview' },
    { name: 'mic_status', selector: '.mic-status' },
    { name: 'controls', selector: '.controls' },
    { name: 'form', selector: 'form' }
  ];

  const outDir = '/tmp';
  const report = { url, captures: [] };

  for (const r of regions) {
    try {
      const el = await page.$(r.selector);
      if (!el) {
        console.warn('Selector not found', r.selector);
        report.captures.push({ name: r.name, selector: r.selector, found: false });
        continue;
      }
      const box = await el.boundingBox();
      const outPath = path.join(outDir, `prejoin_region_${r.name}.png`);
      // use element screenshot to crop
      await el.screenshot({ path: outPath });
      report.captures.push({ name: r.name, selector: r.selector, found: true, box, path: outPath });
    } catch (e) {
      console.error('Failed capture for', r.selector, e);
      report.captures.push({ name: r.name, selector: r.selector, found: false, error: String(e) });
    }
  }

  await browser.close();
  const reportPath = path.join(outDir, 'prejoin_regions_report.json');
  fs.writeFileSync(reportPath, JSON.stringify(report, null, 2));
  console.log('Wrote report', reportPath);
  return reportPath;
}

(async () => {
  try {
    const url = process.argv[2] || 'http://127.0.0.1:8000/docs/prejoin_template.html';
    const rp = await captureRegions(url);
    console.log('Done, report at', rp);
  } catch (e) {
    console.error('Error running captureRegions', e);
    process.exit(2);
  }
})();