import { chromium } from '/usr/lib/node_modules/playwright/index.mjs';

const browser = await chromium.launch({ args: ['--no-sandbox', '--disable-dev-shm-usage'] });
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
const fail = [];
const ok = (cond, msg) => {
  if (!cond) fail.push(msg);
  else console.log('ok', msg);
};

await page.goto('http://127.0.0.1:8080/', { waitUntil: 'networkidle' });
ok(await page.locator('h1.logo').isVisible(), 'title logo');
ok(await page.locator('#btn-play').isVisible(), 'play button');

await page.click('#btn-howto');
ok(await page.locator('#screen-howto:not([hidden])').isVisible(), 'howto');
await page.click('#screen-howto [data-back]');
ok(await page.locator('#screen-title:not([hidden])').isVisible(), 'back to title');

await page.click('#btn-settings');
ok(await page.locator('#screen-settings:not([hidden])').isVisible(), 'settings');
await page.selectOption('#set-palette', 'amber');
await page.click('#screen-settings [data-back]');

await page.click('#btn-play');
ok(await page.locator('#screen-level:not([hidden])').isVisible(), 'level intro');
ok((await page.locator('#level-name').innerText()).includes('First Pressure'), 'sector 1 name');
await page.click('#btn-level-go');
await page.waitForTimeout(300);
ok(await page.locator('#screen-game:not([hidden])').isVisible(), 'game screen');

const placed = await page.evaluate(() => {
  const { game, view } = window.__conduit;
  const canvas = document.getElementById('board-canvas');
  const r = canvas.getBoundingClientRect();
  const c = view.cellCenter(2, 3);
  return {
    phase: game.phase,
    queue: game.queue.length,
    x: r.left + c.x,
    y: r.top + c.y,
  };
});
ok(placed.phase === 'countdown', 'countdown phase');
ok(placed.queue === 5, 'queue of 5');
await page.mouse.click(placed.x, placed.y);
const afterClick = await page.evaluate(() => window.__conduit.game.board[3][2].kind);
ok(afterClick === 'pipe', 'click placed a pipe');

await page.keyboard.press('r');
await page.keyboard.press('z');
const afterUndo = await page.evaluate(() => window.__conduit.game.board[3][2].kind);
ok(afterUndo === 'empty', 'Z undoes');

await page.keyboard.press('Escape');
ok(await page.locator('#overlay-pause:not([hidden])').isVisible(), 'pause overlay');
await page.click('#btn-resume');
ok(await page.locator('#overlay-pause[hidden]').count().then((n) => n === 1), 'resumed');

await page.click('#btn-pause');
await page.click('#btn-quit');
ok(await page.locator('#screen-title:not([hidden])').isVisible(), 'quit to title');

await page.click('#btn-endless');
ok(await page.locator('#screen-level:not([hidden])').isVisible(), 'endless intro');
const endlessName = await page.locator('#level-name').innerText();
ok(endlessName.includes('Endless'), 'endless name');
await page.click('#btn-level-go');
const wrap = await page.evaluate(() => window.__conduit.game.wrap);
ok(wrap === true, 'endless wraps');

await page.goto('http://127.0.0.1:8080/?screen=play&level=0');
await page.waitForTimeout(200);
const win = await page.evaluate(() => {
  const g = window.__conduit.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) {
    g.queue[0] = id;
    g.placeAt(x, y);
  }
  g.beginFlow();
  g.fast = true;
  for (let i = 0; i < 240; i++) g.update(0.08);
  return {
    phase: g.phase,
    overlay: !document.getElementById('overlay-result').hidden,
    nextVisible: !document.getElementById('btn-next').hidden,
  };
});
ok(win.phase === 'won', 'auto-win sector 1');
ok(win.overlay, 'result overlay');
ok(win.nextVisible, 'next sector button');

await page.click('#btn-next');
await page.waitForTimeout(200);
ok(await page.locator('#screen-level:not([hidden])').isVisible(), 'sector 2 intro');
const s2 = await page.locator('#level-name').innerText();
ok(s2.includes('Elbow'), 'sector 2 name');

await browser.close();
if (fail.length) {
  console.error('FAIL', fail);
  process.exit(1);
}
console.log('smoke ok');
