// Usage: node tests/e2e/shots.mjs <before|after> [baseURL]

import { mkdirSync } from "node:fs";
import { chromium, devices } from "@playwright/test";

const phase = process.argv[2] ?? "after";
const base = process.argv[3] ?? "http://localhost:8471";
const out = `tests/e2e/screenshots/redesign/${phase}`;
mkdirSync(out, { recursive: true });
const widths = [375, 390, 430, 768, 1024, 1440];
const pages = [
  ["home", "/"],
  ["research", "/research"],
  ["methodology", "/methodology"],
  ["about", "/about"],
  ["paper", "/research/as-wp-2026-0000-staging-sample"],
  ["infrastructure", "/infrastructure"],
];
const browser = await chromium.launch();
const pw = process.env.ADMIN_PASSWORD;
for (const w of widths) {
  const mobile = w <= 430;
  const ctx = await browser.newContext({
    ...(mobile ? devices["iPhone 14"] : {}),
    viewport: { width: w, height: mobile ? 844 : 900 },
    deviceScaleFactor: 2,
  });
  const page = await ctx.newPage();
  for (const [name, path] of pages) {
    await page.goto(base + path, { waitUntil: "networkidle" });
    await page.screenshot({ path: `${out}/${name}-${w}.png`, fullPage: true });
    await page.screenshot({ path: `${out}/${name}-${w}-fold.png`, fullPage: false });
    const overflow = await page.evaluate(
      () => document.documentElement.scrollWidth - document.documentElement.clientWidth,
    );
    if (overflow > 0) console.log(`OVERFLOW ${name}@${w}: +${overflow}px`);
  }
  if (pw) {
    const r = await page.request.post(base + "/api/admin/auth/login", {
      data: { username: "admin", password: pw },
    });
    if (r.ok()) {
      for (const [name, path] of [
        ["admin-overview", "/admin"],
        ["admin-runs", "/admin/runs"],
        ["admin-new", "/admin/new"],
        ["admin-maclustr", "/admin/maclustr"],
      ]) {
        await page.goto(base + path, { waitUntil: "networkidle" });
        await page.screenshot({ path: `${out}/${name}-${w}.png`, fullPage: true });
      }
    } else console.log("admin login failed", r.status());
  }
  await ctx.close();
}
await browser.close();
console.log("done", phase);