/**
 * Compare the computed theme variables of two running builds.
 *
 * Screenshots say THAT something changed; this says WHICH VARIABLE changed, which is the question worth
 * asking after an extraction. Seven dark screens differed between the old stylesheet and the new one, and
 * staring at two near-identical dark screenshots is not a way to find a hue that moved by 2%.
 *
 *   bun scripts/theme-vardiff.ts <token> [oldUrl] [newUrl]
 */
import { chromium } from 'playwright';

const token = process.argv[2];
if (!token) {
  console.log('  usage: bun scripts/theme-vardiff.ts <jwt> [oldUrl] [newUrl]');
  process.exit(1);
}
const oldUrl = process.argv[3] ?? 'http://127.0.0.1:9000';
const newUrl = process.argv[4] ?? 'http://127.0.0.1:9010';

const VARS = [
  '--background',
  '--foreground',
  '--card',
  '--card-foreground',
  '--popover',
  '--popover-foreground',
  '--primary',
  '--primary-foreground',
  '--secondary',
  '--secondary-foreground',
  '--muted',
  '--muted-foreground',
  '--accent',
  '--accent-foreground',
  '--destructive',
  '--destructive-foreground',
  '--success',
  '--success-foreground',
  '--warning',
  '--warning-foreground',
  '--info',
  '--info-foreground',
  '--border',
  '--input',
  '--ring',
  '--brand',
  '--brand-foreground',
  '--brand-muted',
  '--radius',
  '--cta',
  '--cta-foreground',
  '--ctahover',
  '--naturegreen',
  '--naturegreen-foreground',
  '--duck-teal',
  '--duck-dark',
  '--duck-yellow',
  '--duck-forest',
  '--duck-beige',
  '--duck-orange',
  '--glass-bg',
  '--glass-border',
  '--dock-bg',
  '--dock-border',
  '--dock-tooltip-bg',
  '--card-bg',
  '--card-grid-color',
  '--pixel-grid-color',
  '--chart-primary',
  '--chart-secondary',
  '--status-success',
  '--status-warning',
  '--status-in-progress',
];

const browser = await chromium.launch();

async function read(url: string, extra: string): Promise<Record<string, string>> {
  const context = await browser.newContext({ viewport: { width: 1000, height: 700 } });
  await context.addInitScript(`localStorage.setItem('BEARER_TOKEN', ${JSON.stringify(token)}); ${extra}`);
  const page = await context.newPage();
  // `commit` rather than `load`: this app holds websockets open, so waiting for a quiet network can hang.
  await page.goto(`${url}/jobs`, { waitUntil: 'commit', timeout: 20_000 });
  await page.waitForTimeout(2500);
  const values = await page.evaluate((vars: string[]) => {
    const cs = getComputedStyle(document.documentElement);
    const out: Record<string, string> = {};
    for (const v of vars) out[v] = cs.getPropertyValue(v).trim();
    return out;
  }, VARS);
  await context.close();
  return values;
}

// The OLD build spoke in colour modes; the NEW one in themes. Same appearance, different vocabulary — which
// is the entire refactor, and why the two sides are set up differently here.
const before = await read(oldUrl, `localStorage.setItem('officer-color-mode','dark');`);
const after = await read(newUrl, `localStorage.setItem('officer-theme','duck-dark');`);
await browser.close();

let differing = 0;
for (const key of VARS) {
  const a = before[key] ?? '';
  const b = after[key] ?? '';
  if (a !== b) {
    console.log(`  DIFF ${key.padEnd(24)} old=${JSON.stringify(a)}  new=${JSON.stringify(b)}`);
    differing += 1;
  }
}
console.log(differing === 0 ? '  every variable matches' : `  ${differing} of ${VARS.length} differ`);
process.exit(0);