/**
 * Capture wow-brief verification screenshots across 4 viewports.
 * Usage: PW_EXECUTABLE=... node tests/helpers/wow-screenshots.mjs
 */
import { chromium } from 'playwright';

const BASE_URL = process.env.BASE_URL ?? 'http://localhost:3000';
const executablePath = process.env.PW_EXECUTABLE;

const viewports = [
  { name: '1280x800', width: 1280, height: 800 },
  { name: '1024x768', width: 1024, height: 768 },
  { name: '844x390', width: 844, height: 390 },
  { name: '390x844', width: 390, height: 844 },
];

async function dismissDevToolbar(page) {
  await page.evaluate(() => {
    document.querySelector('astro-dev-toolbar')?.remove();
  });
}

async function clickButton(page, name) {
  await dismissDevToolbar(page);
  await page.getByRole('button', { name }).click({ force: true });
}

async function capture(page, path) {
  await dismissDevToolbar(page);
  await page.screenshot({ path, fullPage: false });
  console.log(`saved ${path}`);
}

async function enterPlayerName(page, label, name, inputId) {
  await clickButton(page, `Name für ${label} eingeben`);
  const dialog = page.getByRole('dialog');
  const input = dialog.locator(`#${inputId}`);
  await input.waitFor({ state: 'visible' });
  await input.click();
  await input.pressSequentially(name, { delay: 15 });
  await dialog.getByRole('button', { name: 'Übernehmen' }).click({ force: true });
  await dialog.waitFor({ state: 'hidden', timeout: 10000 });
}

async function freshPage(page, vp) {
  await page.setViewportSize({ width: vp.width, height: vp.height });
  await page.goto(`${BASE_URL}/?t=${Date.now()}`, { waitUntil: 'domcontentloaded' });
  await dismissDevToolbar(page);
  await page.waitForTimeout(400);
}

async function runWizardToScoreboard(page) {
  await clickButton(page, 'Neues Spiel starten');
  await enterPlayerName(page, 'Spieler 1', 'Alice', 'player1-input');
  await enterPlayerName(page, 'Spieler 2', 'Bob', 'player2-input');
  await clickButton(page, 'Überspringen');
  await clickButton(page, '9-Ball');
  await clickButton(page, '3');
  await clickButton(page, 'Break-Regel wählen: Winnerbreak');
  await clickButton(page, 'Zuerst: Alice');
}

async function main() {
  const browser = await chromium.launch({
    headless: true,
    ...(executablePath ? { executablePath } : {}),
  });

  const page = await browser.newPage();

  for (const vp of viewports) {
    await freshPage(page, vp);
    await capture(page, `/tmp/wow-list-${vp.name}.png`);

    await clickButton(page, 'Neues Spiel starten');
    await page.waitForTimeout(400);
    await capture(page, `/tmp/wow-wizard-${vp.name}.png`);

    await freshPage(page, vp);
    await runWizardToScoreboard(page);
    await page.waitForTimeout(400);
    await capture(page, `/tmp/wow-scoreboard-${vp.name}.png`);

    for (let score = 0; score < 3; score++) {
      await clickButton(page, `Punkt für Alice. Aktueller Stand: ${score}`);
      await page.waitForTimeout(150);
    }
    await page.waitForTimeout(600);
    await capture(page, `/tmp/wow-victory-${vp.name}.png`);
  }

  await browser.close();
  console.log('Done — screenshots in /tmp/wow-*.png');
}

main().catch((err) => {
  console.error(err);
  process.exit(1);
});