const { chromium } = require('playwright');

async function captureScreenshots() {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    viewport: { width: 1920, height: 1080 }
  });
  
  const demos = [
    'vaccine_timeseries/vaccine_timeseries_1_measles/index.html',
    'vaccine_timeseries/vaccine_timeseries_2_polio/index.html',
    'vaccine_timeseries/vaccine_timeseries_3_covid/index.html'
  ];
  
  for (const demo of demos) {
    const page = await context.newPage();
    const url = `http://localhost:8889/${demo}`;
    const screenshotName = demo.replace(/\//g, '_').replace('index.html', 'index.png');
    
    console.log(`📸 Capturing ${demo}...`);
    
    try {
      await page.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
      await page.waitForTimeout(3000); // Wait for Mapbox to render
      await page.screenshot({ 
        path: `screenshots/${screenshotName}`,
        fullPage: false 
      });
      console.log(`   ✅ Saved: ${screenshotName}`);
    } catch (e) {
      console.log(`   ❌ Failed: ${e.message}`);
    }
    
    await page.close();
  }
  
  await browser.close();
  console.log('\n✅ All vaccine timeseries screenshots captured!');
}

captureScreenshots().catch(console.error);