import { chromium } from 'playwright';
import { mkdirSync } from 'node:fs';
import { resolve } from 'node:path';

const BASE = process.env.BASE ?? 'http://localhost:5173';
const CASE = process.env.CASE_ID ?? '91d85d3d-3351-4a7d-8d29-164cdea76518';
const OUT = resolve('out');
mkdirSync(OUT, { recursive: true });

const shot = async (page, name, opts = {}) => {
  await page.screenshot({ path: `${OUT}/${name}.png`, ...opts });
  console.log('wrote', name);
};

const EXE = process.env.CHROME_PATH;
const browser = await chromium.launch(EXE ? { executablePath: EXE } : {});
const page = await browser.newPage({
  viewport: { width: 1440, height: 1000 },
  deviceScaleFactor: 2
});

// 1. case list
await page.goto(`${BASE}/`, { waitUntil: 'networkidle' });
await page.waitForSelector('.caselist li', { timeout: 20000 });
await shot(page, '01-cases', { fullPage: true });

// 2. the published case: funnel, filters, ranked candidates
await page.goto(`${BASE}/cases/${CASE}`, { waitUntil: 'networkidle' });
await page.waitForSelector('.candidate', { timeout: 30000 });
await page.waitForTimeout(600);
await shot(page, '02-case', { fullPage: true });

// 3. the evidence panel for the top candidate: the components table, abstentions and all
await page.locator('.candidate').first().click();
await page.waitForSelector('.panel', { timeout: 20000 });
await page.waitForTimeout(600);
await shot(page, '03-variant-panel', { fullPage: true });

// just the panel, cropped, for a tighter figure
const panel = page.locator('.panel').first();
await panel.screenshot({ path: `${OUT}/04-panel-only.png` });
console.log('wrote 04-panel-only');

// just the funnel
const funnel = page.locator('.funnel, [class*="funnel"]').first();
if (await funnel.count()) {
  await funnel.screenshot({ path: `${OUT}/05-funnel.png` });
  console.log('wrote 05-funnel');
}

// 4. the case report
await page.goto(`${BASE}/cases/${CASE}/report`, { waitUntil: 'networkidle' });
await page.waitForTimeout(1200);
await shot(page, '06-report', { fullPage: true });

// 5. local diagram pages rendered to PNG
for (const name of process.env.DIAGRAMS?.split(',').filter(Boolean) ?? []) {
  await page.goto(`file://${resolve(`${name}.html`)}`, {
    waitUntil: 'networkidle'
  });
  await page.waitForTimeout(300);
  const box = page.locator('#frame');
  await box.screenshot({ path: `${OUT}/${name}.png` });
  console.log('wrote', name);
}

await browser.close();