// Read-only fixture: no accounts/reports created.
import assert from 'node:assert/strict';
import { execSync } from 'node:child_process';
import { pathToFileURL } from 'node:url';
const { chromium } = await import(pathToFileURL(execSync('npm root -g', { encoding:'utf8' }).trim() + '/playwright/index.mjs').href);
const browser = await chromium.launch();
try {
  const page = await browser.newPage({ viewport:{ width:375, height:726 } });
  await page.route('**/api/**', route => {
    assert.equal(route.request().method(), 'GET');
    return route.fulfill({ json:{ ok:true, user:null } });
  });
  await page.goto(process.env.H5_BASE_URL || 'http://127.0.0.1:8080/');
  await page.click('[data-action="guest-experience"]');
  await page.waitForSelector('#s-splash.active');
  const brand = page.locator('#s-splash .splash-slogan');
  assert.match(await brand.getAttribute('aria-label'), /^1'me/);
  await page.waitForFunction(() => [...document.querySelectorAll('#s-splash .splash-slogan img')].every(i => i.complete && i.naturalWidth));
  assert.equal(await page.locator('#s-splash .splash-slogan-brand').isVisible(), true);
  assert.equal(await page.locator('#s-splash .splash-slogan-brand').textContent(), "1'me,");
  assert.equal(await page.locator('#s-splash .splash-slogan-brand').evaluate(el => getComputedStyle(el).fontWeight), '400');
  for (const root of ['#s-splash', '#p-photoguide']) {
    assert.equal(await page.locator(root + ' .splash-slogan-brand').textContent(), "1'me,");
    const fonts = await page.locator(root + ' .splash-slogan').evaluate(el => {
      return ['.splash-slogan-brand', '.splash-slogan-english'].map(selector => {
        const s = getComputedStyle(el.querySelector(selector));
        return [s.fontFamily, s.fontSize, s.fontWeight, s.lineHeight];
      });
    });
    assert.deepEqual(fonts[0], fonts[1], root + ': identical English font settings');
    assert.equal(fonts[0][1], '23px');
    assert.equal(fonts[0][2], '400');
    assert.match(await page.locator(root + ' .splash-slogan').getAttribute('aria-label'), /^1'me/);
  }
  const button = page.locator('#s-splash [data-action="open-privacy"]');
  await button.focus();
  const style = await button.evaluate(el => {
    const s = getComputedStyle(el);
    return { border:s.borderTopWidth, outline:s.outlineStyle, shadow:s.boxShadow, background:s.backgroundColor };
  });
  assert.deepEqual(style, { border:'0px', outline:'none', shadow:'none', background:'rgb(245, 240, 120)' });
  await button.evaluate(el => el.blur());
  await page.waitForTimeout(400); // finish the entry screen fade before the screenshot
  await page.screenshot({ path:'/tmp/juzi-splash-brand-20261013.png' });
  await button.click();
  await page.waitForSelector('#p-privacy.show');
  await page.evaluate(() => {
    document.querySelector('#p-privacy').classList.remove('show');
    document.querySelector('#p-photoguide').classList.add('show');
  });
  await page.waitForTimeout(400);
  await page.screenshot({ path:'/tmp/juzi-photoguide-brand-20261013.png' });
  console.log('PASS splash brand, borderless focused start button, yellow fill, privacy entry');
} finally { await browser.close(); }