// Did the candidate CSS actually reach the pixels? Computed-style probe for #53.
const fs = require('fs');
const path = require('path');
const { chromium } = require('playwright');
const BASE = process.env.BASE || 'http://localhost:4567';
const read = (f) => fs.readFileSync(path.join(__dirname, f), 'utf8');
const base = read('_base-plumnoir.css');
const CANDIDATES = { baseline: '', a: base, b: base + read('candidate-b.css') };

const PROBES = [
  ['body', 'backgroundColor'],
  ['[component="post"]', 'backgroundColor'],
  ['[component="post"] .post-header, [component="post"] .topic-item-header', 'color'],
  ['.timeago', 'color'],
  ['[component="post"]', 'borderTopColor'],
  ['.topic-title, h1', 'color'],
  ['a[href^="/user/"]', 'color'],
];

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage({ viewport: { width: 1600, height: 1000 } });
  await page.goto(BASE + '/login');
  await page.fill('#username', 'admin');
  await page.fill('#password', 'Admin12345!');
  await page.click('#login');
  await page.waitForLoadState('networkidle');

  const rows = {};
  for (const [name, css] of Object.entries(CANDIDATES)) {
    await page.goto(BASE + '/topic/2', { waitUntil: 'networkidle' });
    if (css) await page.addStyleTag({ content: css });
    rows[name] = await page.evaluate(
      (probes) =>
        probes.map(([sel, prop]) => {
          const el = document.querySelector(sel);
          return el ? getComputedStyle(el)[prop] : 'MISSING';
        }),
      PROBES,
    );
  }
  PROBES.forEach(([sel, prop], i) => {
    console.log(
      `${sel} ${prop}\n  baseline ${rows.baseline[i]}\n  a        ${rows.a[i]}\n  b        ${rows.b[i]}`,
    );
  });
  await browser.close();
})();