#!/usr/bin/env node
// Mockup verification screenshots — sesjon 2 (DS-hoist).
// Captures the 4 mockup states × 2 themes to confirm visual identity
// after hoisting project-view CSS to shared DS.
//
// Output: playground/screenshots/v2-mockup/<state>-<theme>.png

import { chromium } from 'playwright';
import { fileURLToPath } from 'node:url';
import { dirname, resolve, join } from 'node:path';
import { mkdirSync, existsSync } from 'node:fs';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const PLUGIN_ROOT = resolve(__dirname, '..', '..');
const HTML_PATH = join(PLUGIN_ROOT, 'playground', 'v2-mockup.local.html');
const OUT_DIR = join(PLUGIN_ROOT, 'playground', 'screenshots', 'v2-mockup');
const HTML_URL = 'file://' + HTML_PATH;

const VIEWPORT = { width: 1440, height: 1200 };
const STATES = ['overview', 'artifact', 'empty', 'import'];
const THEMES = ['dark', 'light'];

if (!existsSync(OUT_DIR)) mkdirSync(OUT_DIR, { recursive: true });

const browser = await chromium.launch();
const ctx = await browser.newContext({ viewport: VIEWPORT, deviceScaleFactor: 2 });
const page = await ctx.newPage();

await page.goto(HTML_URL, { waitUntil: 'load' });

for (const theme of THEMES) {
  await page.evaluate((t) => {
    document.documentElement.setAttribute('data-theme', t);
    const btns = document.querySelectorAll('[data-action="set-theme"]');
    btns.forEach((b) => b.setAttribute('aria-pressed', b.getAttribute('data-target') === t ? 'true' : 'false'));
  }, theme);
  await page.waitForTimeout(200);

  for (const state of STATES) {
    await page.evaluate((s) => {
      const btn = document.querySelector(`[data-action="set-state"][data-target="${s}"]`);
      if (btn) btn.click();
    }, state);
    await page.waitForTimeout(300);
    const outPath = join(OUT_DIR, `${state}-${theme}.png`);
    await page.screenshot({ path: outPath, fullPage: true });
    console.log(`  → ${state}-${theme}.png`);
  }
}

await browser.close();
console.log('\nDone. 8 screenshots → ' + OUT_DIR);