import puppeteer from 'puppeteer';
import path from 'path';
import { fileURLToPath } from 'url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

const fragments = [
  {
    file: 'fragments/fragment-exploration.html',
    output: 'screenshots/screenshot-exploration.png',
    viewport: { width: 780, height: 460 },
    clip: null
  },
  {
    file: 'fragments/fragment-splitting.html',
    output: 'screenshots/screenshot-splitting.png',
    viewport: { width: 780, height: 600 },
    clip: null
  },
  {
    file: 'fragments/fragment-collecting.html',
    output: 'screenshots/screenshot-collecting.png',
    viewport: { width: 794, height: 1123 }, // A4 at 96dpi
    clip: null
  },
  {
    // Full A4 page, clip to top 4 cards (skip header, take cards area)
    file: 'fragments/fragment-cargo-full.html',
    output: 'screenshots/screenshot-cargo.png',
    viewport: { width: 794, height: 1123 }, // A4 at 96dpi
    clip: { x: 0, y: 95, width: 794, height: 610 } // cards area below header
  }
];

async function main() {
  const browser = await puppeteer.launch({ headless: 'new', args: ['--no-sandbox'] });

  for (const frag of fragments) {
    const page = await browser.newPage();
    await page.setViewport(frag.viewport);

    const filePath = path.resolve(__dirname, frag.file);
    await page.goto(`file://${filePath}`, { waitUntil: 'networkidle0', timeout: 30000 });

    // Wait for Tailwind to process
    await new Promise(r => setTimeout(r, 2000));

    const outputPath = path.resolve(__dirname, frag.output);

    if (frag.clip) {
      await page.screenshot({ path: outputPath, clip: frag.clip });
    } else {
      // Capture just the content (not grey background)
      const bodyHandle = await page.$('body > div, body > .card-grid, body > .grid');
      if (bodyHandle) {
        await bodyHandle.screenshot({ path: outputPath });
      } else {
        await page.screenshot({ path: outputPath, fullPage: false });
      }
    }

    console.log(`✓ ${frag.output}`);
    await page.close();
  }

  await browser.close();
  console.log('Done!');
}

main().catch(console.error);