import { chromium } from '/usr/lib/node_modules/playwright/index.mjs';
import { mkdirSync } from 'fs';
import { dirname, join } from 'path';
import { fileURLToPath } from 'url';

const root = join(dirname(fileURLToPath(import.meta.url)), '..');
const out = join(root, 'screenshots');
mkdirSync(out, { recursive: true });

const browser = await chromium.launch({
  args: ['--no-sandbox', '--disable-dev-shm-usage'],
});
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
await page.goto('http://127.0.0.1:8080/', { waitUntil: 'networkidle' });
await page.waitForTimeout(800);
await page.screenshot({ path: join(out, '01-title.png') });

await page.goto('http://127.0.0.1:8080/?screen=howto');
await page.waitForTimeout(400);
await page.screenshot({ path: join(out, '03-howto.png') });

await page.goto('http://127.0.0.1:8080/?screen=play&level=0');
await page.waitForTimeout(500);
const placed = await page.evaluate(() => {
  const api = window.__conduit;
  if (!api?.game) return { ok: false, reason: 'no game' };
  const path = [
    [1, 3, 'h'],
    [2, 3, 'h'],
    [3, 3, 'sw'],
    [3, 4, 'v'],
    [3, 5, 'v'],
    [3, 6, 'nw'],
    [2, 6, 'h'],
    [1, 6, 'h'],
    [0, 6, 'ne'],
  ];
  for (const [x, y, id] of path) {
    api.game.queue[0] = id;
    api.game.placeAt(x, y);
  }
  api.game.beginFlow();
  for (let i = 0; i < 12; i++) api.game.update(0.2);
  return {
    ok: true,
    phase: api.game.phase,
    dist: api.game.distance,
    cols: api.game.cols,
  };
});
console.log('mid state', placed);
await page.waitForTimeout(400);
await page.screenshot({ path: join(out, '02-mid-game.png') });

const won = await page.evaluate(() => {
  const api = window.__conduit;
  api.game.fast = true;
  for (let i = 0; i < 240; i++) api.game.update(0.08);
  return {
    phase: api.game.phase,
    dist: api.game.distance,
    overlay: !document.getElementById('overlay-result').hidden,
    score: api.game.levelScore,
  };
});
console.log('win state', won);
await page.waitForTimeout(500);
await page.screenshot({ path: join(out, '04-sector-clear.png') });

await page.goto('http://127.0.0.1:8080/?screen=settings');
await page.waitForTimeout(400);
await page.screenshot({ path: join(out, '03b-settings.png') });

const clickTest = await browser.newPage({ viewport: { width: 1440, height: 900 } });
await clickTest.goto('http://127.0.0.1:8080/?screen=play&level=0', { waitUntil: 'networkidle' });
await clickTest.waitForTimeout(400);
const clickResult = await clickTest.evaluate(() => {
  const api = window.__conduit;
  const canvas = document.getElementById('board-canvas');
  const r = canvas.getBoundingClientRect();
  const c = api.view.cellCenter(2, 3);
  const x = r.left + c.x;
  const y = r.top + c.y;
  return { x, y, size: api.view.layout.size, before: api.game.board[3][2].kind };
});
await clickTest.mouse.click(clickResult.x, clickResult.y);
const after = await clickTest.evaluate(() => {
  const api = window.__conduit;
  const c = api.game.board[3][2];
  return { kind: c.kind, pipe: c.pipe && c.pipe.id, phase: api.game.phase };
});
console.log('click test', clickResult, after);
await clickTest.close();

const mobile = await browser.newPage({ viewport: { width: 390, height: 844 } });
await mobile.goto('http://127.0.0.1:8080/', { waitUntil: 'networkidle' });
await mobile.waitForTimeout(500);
await mobile.screenshot({ path: join(out, '05-mobile-title.png') });

await browser.close();
console.log('shots written to', out);
