/**
 * QA sweep: key routes at 390 and 1440 px, dark and light — HTTP status, console errors, horizontal overflow, screenshot.
 * Also asserts that the homepage counters match GET /api/v1/stats.
 * Run: node qa/screens.mjs [BASE_URL] [API_URL]   (defaults http://localhost:8330, http://127.0.0.1:8331)
 */
import { chromium } from '/Users/simon-pierreboucher/Desktop/uqo-eval/node_modules/playwright/index.mjs';
import { mkdirSync } from 'node:fs';

const BASE = process.argv[2] ?? 'http://localhost:8330';
const API = process.argv[3] ?? 'http://127.0.0.1:8331';
const OUT = new URL('./screens/', import.meta.url).pathname;
mkdirSync(OUT, { recursive: true });

const PAGES = ['/', '/search?q=claude', '/models', '/models?openness=open-weights&sort=params', '/models/claude-opus-5', '/companies', '/companies/anthropic', '/providers', '/providers/anthropic-2', '/benchmarks', '/benchmarks/tau-bench', '/hardware/nvidia-dgx-b200', '/hardware', '/papers', '/frameworks', '/datasets', '/tools', '/changes', `/changes/${new Date().toISOString().slice(0, 10)}`, '/timeline', '/compare', '/explore', '/methodology', '/sources', '/about', '/developers', '/bot', '/models/does-not-exist', '/does-not-exist'];
const WIDTHS = [390, 1440];
const THEMES = ['dark', 'light'];
const fmt0 = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 });

const browser = await chromium.launch();
let failures = 0;
for (const theme of THEMES) {
  for (const width of WIDTHS) {
    const mobile = width < 768;
    const ctx = await browser.newContext({ viewport: { width, height: mobile ? 844 : 900 }, deviceScaleFactor: 1, isMobile: mobile, hasTouch: mobile, colorScheme: theme });
    await ctx.addInitScript((t) => localStorage.setItem('aia-theme', t), theme);
    const page = await ctx.newPage();
    for (const path of PAGES) {
      if (theme === 'light' && !['/', '/models', '/models/claude-opus-5', '/changes', '/search?q=claude', '/companies/anthropic'].includes(path)) continue;
      const errors = [];
      const onErr = (e) => errors.push(String(e));
      const onCon = (m) => { if (m.type() === 'error') errors.push(m.text()); };
      page.on('pageerror', onErr);
      page.on('console', onCon);
      const t0 = Date.now();
      const res = await page.goto(BASE + path, { waitUntil: 'networkidle', timeout: 60000 }).catch((e) => ({ status: () => `ERR ${e.message.slice(0, 40)}` }));
      await page.waitForTimeout(600);
      const overflow = await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth).catch(() => -1);
      const applied = await page.evaluate(() => document.documentElement.getAttribute('data-theme')).catch(() => null);
      const expected = /does-not-exist/.test(path) ? 404 : 200;
      const status = res.status();
      // Dynamic-route 404s use Next's client-rendered error shell; React DEV warns about the inline theme <script> there
      // (verified absent in `next start`). Everything else must be clean.
      const filtered = errors.filter((e) => !/favicon|Failed to load resource: the server responded with a status of 404/.test(e)).filter((e) => !(expected === 404 && /Encountered a script tag while rendering React component/.test(e)));
      const ok = status === expected && overflow <= 0 && filtered.length === 0 && applied === theme;
      if (!ok) failures++;
      console.log(`${ok ? 'OK  ' : 'FAIL'} ${theme.padEnd(5)} ${width} ${status} ${String(Date.now() - t0).padStart(5)}ms overflow=${overflow} errors=${filtered.length} theme=${applied} ${path}${filtered.length ? ' :: ' + filtered[0].slice(0, 140) : ''}`);
      await page.screenshot({ path: `${OUT}${theme}-${width}-${path.replace(/[^a-z0-9]+/gi, '_').replace(/^_|_$/g, '') || 'home'}.png`, fullPage: false }).catch(() => undefined);
      page.off('pageerror', onErr);
      page.off('console', onCon);
    }
    await ctx.close();
  }
}

// Homepage counters must come from /api/v1/stats (never hardcoded). The homepage is ISR-cached for 60 s while the API may be
// ingesting, so a counter is accepted when it lies between (stats before − growth over 60 s) and (stats after the page load):
// the tolerance is derived from the observed ingestion rate and is zero when the database is static.
try {
  const pick = (s) => ({ models: s.entities?.model, 'change events': s.change_events, sources: s.sources, papers: s.entities?.paper, providers: s.entities?.provider, benchmarks: s.entities?.benchmark });
  const t0 = Date.now();
  const before = pick(await (await fetch(`${API}/api/v1/stats`)).json());
  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
  const page = await ctx.newPage();
  await page.goto(BASE + '/', { waitUntil: 'networkidle' });
  const text = await page.evaluate(() => document.body.innerText);
  await ctx.close();
  const after = pick(await (await fetch(`${API}/api/v1/stats`)).json());
  const elapsed = Math.max(1, (Date.now() - t0) / 1000);
  const nums = [...text.matchAll(/\d{1,3}(?:,\d{3})*/g)].map((m) => Number(m[0].replace(/,/g, '')));
  for (const label of Object.keys(before)) {
    const a = Number(before[label]);
    const b = Number(after[label]);
    if (!Number.isFinite(a) || !Number.isFinite(b)) continue;
    const rate = Math.max(0, b - a) / elapsed;
    const lo = a - Math.ceil(rate * 60);
    const hit = nums.some((n) => n >= lo && n <= b);
    if (!hit) failures++;
    console.log(`${hit ? 'OK  ' : 'FAIL'} counter ${label}: page shows a value in [${fmt0.format(lo)}, ${fmt0.format(b)}] (stats ${fmt0.format(a)} → ${fmt0.format(b)} in ${elapsed.toFixed(0)} s)${hit ? '' : ' — NOT found'}`);
  }
} catch (e) {
  console.log(`SKIP counters check: API unreachable (${e.message})`);
}

await browser.close();
console.log(failures ? `\n${failures} failure(s)` : '\nall checks OK');
process.exit(failures ? 1 : 0);