/**
 * Final integration sweep (production build + real API): every public route × 320/375/390/430/768/1440/1920,
 * light (plus dark at 390 and 1440). Asserts: HTTP 200, no horizontal overflow, no console errors, no failed
 * API requests, no "undefined/NaN/null" text, footer credits present, tap targets ≥ 44 px on phones (excluding
 * sr-only/inputs inside 44 px labels), and every internal link on the page resolves (HEAD/GET once per URL).
 *
 *   node qa/final-sweep.mjs [BASE_URL] [--quick]
 */
import { chromium } from '/Users/simon-pierreboucher/Desktop/uqo-eval/node_modules/playwright/index.mjs';
import { mkdirSync, writeFileSync } from 'node:fs';

const args = process.argv.slice(2);
const quick = args.includes('--quick');
const BASE = args.find((a) => a.startsWith('http')) ?? 'http://localhost:8290';
const OUT = new URL('./screens/final/', import.meta.url).pathname;
mkdirSync(OUT, { recursive: true });

const ROUTES = [
  '/', '/explore', '/explore?indicator=life-expectancy&year=1990', '/trajectories', '/scatter', '/finder?f=gdp-per-capita:gt:40000&f=population:gt:10000000', '/extremes',
  '/peers', '/stories', '/stories/the-world-is-getting-older', '/download', '/updates', '/api', '/countries', '/countries/canada', '/countries/canada/economy',
  '/countries/nigeria', '/compare', '/compare/canada/australia', '/compare/canada/united-states/france?tab=economy', '/rankings', '/rankings/gdp-per-capita',
  '/rankings/life-expectancy?group=oecd&view=map', '/indicators', '/indicators/life-expectancy', '/indicators/inflation', '/regions', '/regions/g7', '/regions/compare',
  '/changes', '/sources', '/sources/worldbank', '/methodology',
];
const WIDTHS = quick ? [390, 1440] : [320, 375, 390, 430, 768, 1440, 1920];
const slug = (p) => (p === '/' ? 'home' : p.slice(1).replace(/[/?=&:]+/g, '_'));
const report = [];
const linkStatus = new Map();
const browser = await chromium.launch();

async function checkLinks(page, hrefs) {
  const bad = [];
  for (const h of hrefs) {
    if (linkStatus.has(h)) {
      if (linkStatus.get(h) >= 400) bad.push(`${h} → ${linkStatus.get(h)}`);
      continue;
    }
    try {
      const r = await page.request.get(BASE + h, { maxRedirects: 3, timeout: 60_000 });
      linkStatus.set(h, r.status());
      if (r.status() >= 400) bad.push(`${h} → ${r.status()}`);
    } catch (e) {
      linkStatus.set(h, 599);
      bad.push(`${h} → ERR ${String(e).slice(0, 60)}`);
    }
  }
  return bad;
}

for (const width of WIDTHS) {
  const themes = width === 390 || width === 1440 ? ['light', 'dark'] : ['light'];
  for (const theme of themes) {
    const mobile = width < 768;
    const ctx = await browser.newContext({ viewport: { width, height: mobile ? 844 : 900 }, deviceScaleFactor: 1, isMobile: mobile, hasTouch: mobile, colorScheme: theme });
    const page = await ctx.newPage();
    const errors = [];
    const failed = [];
    page.on('pageerror', (e) => errors.push(`pageerror: ${String(e).slice(0, 200)}`));
    page.on('console', (m) => {
      if (m.type() === 'error') errors.push(m.text().slice(0, 200));
    });
    page.on('response', (r) => {
      if (r.url().includes('/api/v1/') && r.status() >= 400) failed.push(`${r.status()} ${r.url().slice(BASE.length, BASE.length + 100)}`);
    });
    for (const path of ROUTES) {
      let status = 0;
      try {
        const resp = await page.goto(BASE + path, { waitUntil: 'networkidle', timeout: 90_000 });
        status = resp?.status() ?? 0;
      } catch (e) {
        report.push({ path, width, theme, status: 'ERR', error: String(e).slice(0, 200) });
        continue;
      }
      await page.evaluate(() => document.fonts.ready);
      await page.waitForTimeout(500);
      const full = await page.evaluate(() => document.querySelector('main')?.getAttribute('data-layout') === 'full');
      if (!full) {
        await page.evaluate(async () => {
          const h = document.documentElement.scrollHeight;
          for (let y = 0; y < h; y += 800) {
            window.scrollTo(0, y);
            await new Promise((r) => setTimeout(r, 40));
          }
          window.scrollTo(0, 0);
        });
        await page.waitForLoadState('networkidle').catch(() => {});
        await page.waitForTimeout(400);
      }
      const m = await page.evaluate(
        ({ mobile }) => {
          const de = document.documentElement;
          const overflow = de.scrollWidth - de.clientWidth;
          const wide = [...document.querySelectorAll('body *')]
            .filter((el) => {
              const r = el.getBoundingClientRect();
              if (!(r.right > de.clientWidth + 1 && r.width > 0)) return false;
              // inside an intentional horizontal scroller?
              let p = el.parentElement;
              while (p) {
                const cs = getComputedStyle(p);
                if (/(auto|scroll)/.test(cs.overflowX)) return false;
                p = p.parentElement;
              }
              return true;
            })
            .slice(0, 5)
            .map((el) => `${el.tagName.toLowerCase()}.${String(el.className).split(' ').slice(0, 3).join('.')} right=${Math.round(el.getBoundingClientRect().right)}`);
          const vis = (el) => {
            const r = el.getBoundingClientRect();
            if (r.width === 0 || r.height === 0) return false;
            const cs = getComputedStyle(el);
            return cs.visibility !== 'hidden' && cs.display !== 'none';
          };
          const small = mobile
            ? [...document.querySelectorAll('a,button,[role=button],select,summary,[role=radio],[role=tab]')]
                .filter(vis)
                .filter((el) => {
                  const r = el.getBoundingClientRect();
                  if (!(r.height < 40 && r.width < 40)) return false;
                  if (el.closest('svg')) return false;
                  return true;
                })
                .map((el) => `${el.tagName.toLowerCase()} "${(el.getAttribute('aria-label') || el.textContent || '').trim().slice(0, 30)}" ${Math.round(el.getBoundingClientRect().width)}x${Math.round(el.getBoundingClientRect().height)}`)
            : [];
          const text = document.body.innerText || '';
          const bad = [];
          for (const re of [/\bundefined\b/g, /\bNaN\b/g, /(?<![\w"':/])null(?![\w"':])/g, /\[object Object\]/g]) {
            let mm;
            let n = 0;
            while ((mm = re.exec(text)) && n < 3) {
              bad.push(`${mm[0]} @ "${text.slice(Math.max(0, mm.index - 40), mm.index + 30).replace(/\s+/g, ' ')}"`);
              n++;
            }
          }
          const footer = document.querySelector('footer');
          const ft = footer ? footer.innerText : '';
          const credits = /Simon-Pierre Boucher/.test(ft) && /contact@spboucher\.ai/.test(ft) && /MacLustr/.test(ft) && !!footer?.querySelector('a[href="https://www.maclustr.io"]');
          const hrefs = [...new Set([...document.querySelectorAll('a[href^="/"]')].map((a) => a.getAttribute('href')).filter((h) => h && !h.startsWith('/api/v1/') && !h.startsWith('//')))];
          const keys = new Set();
          return { overflow, wide, small: small.slice(0, 8), nSmall: small.length, bad, credits, hrefs: hrefs.slice(0, 80), title: document.title, docH: de.scrollHeight, full: !!document.querySelector('main[data-layout="full"]') };
        },
        { mobile },
      );
      const badLinks = theme === 'light' && (width === 1440 || width === 390) ? await checkLinks(page, m.hrefs) : [];
      const file = `${slug(path)}-${width}-${theme}.png`;
      await page.screenshot({ path: OUT + file, fullPage: !m.full }).catch(() => {});
      report.push({ path, width, theme, status, ...m, hrefs: undefined, badLinks, errors: errors.splice(0), failed: failed.splice(0), file });
      writeFileSync(OUT + 'report.json', JSON.stringify(report, null, 2));
    }
    await ctx.close();
  }
}
await browser.close();

let fails = 0;
for (const r of report) {
  const flags = [];
  if (r.status !== 200) flags.push(`HTTP ${r.status}`);
  if (r.overflow > 0) flags.push(`OVERFLOW +${r.overflow}px`);
  if (r.wide?.length) flags.push(`${r.wide.length} wide`);
  if (r.nSmall) flags.push(`${r.nSmall} small`);
  if (r.bad?.length) flags.push(`BAD TEXT ${r.bad.length}`);
  if (r.errors?.length) flags.push(`${r.errors.length} console`);
  if (r.failed?.length) flags.push(`${r.failed.length} failed API`);
  if (r.credits === false) flags.push('NO CREDITS');
  if (r.badLinks?.length) flags.push(`${r.badLinks.length} broken links`);
  if (flags.length) fails++;
  console.log(`${String(r.width).padStart(4)} ${(r.theme || '').padEnd(5)} ${r.path.padEnd(60)} ${flags.join(' · ') || 'ok'}`);
  if (r.wide?.length) console.log('       wide:', r.wide.join(' | '));
  if (r.small?.length) console.log('       small:', r.small.slice(0, 4).join(' | '));
  if (r.bad?.length) console.log('       bad:', r.bad.join(' | '));
  if (r.errors?.length) console.log('       errors:', r.errors.slice(0, 3).join(' | '));
  if (r.failed?.length) console.log('       failed:', r.failed.slice(0, 3).join(' | '));
  if (r.badLinks?.length) console.log('       links:', r.badLinks.slice(0, 5).join(' | '));
}
console.log(`\n${report.length} renders, ${fails} with flags, ${linkStatus.size} internal links checked`);