// Showcase typography stress diagnostic. This records browser geometry; it is not a WCAG conformance certification.
import fs from "node:fs";
import path from "node:path";
import url from "node:url";
import puppeteer from "puppeteer-core";
import { startPublicServer, routeForFile } from "./capture-stable.mjs";

const here = path.dirname(url.fileURLToPath(import.meta.url));
const siteRoot = path.resolve(here, "..");
const publicRoot = path.resolve(process.env.SHOWCASE_STRESS_PUBLIC_ROOT || path.join(siteRoot, "public"));
const showcaseRoot = path.join(publicRoot, "work");
const reportPath = path.resolve(process.env.SHOWCASE_STRESS_REPORT || path.join(siteRoot, "showcase-stress-report.json"));
const outputDirectory = path.resolve(process.env.SHOWCASE_STRESS_OUTPUT || path.join(siteRoot, "showcase-stress-artifacts"));
const expectedRouteCount = Number.parseInt(process.env.SHOWCASE_STRESS_EXPECTED_ROUTES || "28", 10);
const modes = [
  { name: "normal-390", width: 390, height: 844, stress: "normal" },
  { name: "text200-390", width: 390, height: 844, stress: "text200" },
  { name: "spacing-390", width: 390, height: 844, stress: "spacing" },
  { name: "reduced-motion-1440", width: 1440, height: 1000, stress: "reduced-motion" },
];

const chrome = [
  process.env.CHROME_PATH,
  "C:/Program Files/Google/Chrome/Application/chrome.exe",
  "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
].find((candidate) => candidate && fs.existsSync(candidate));

if (!chrome) throw new Error("Chrome/Chromium executable not found. Set CHROME_PATH.");
if (!Number.isInteger(expectedRouteCount) || expectedRouteCount < 1) throw new Error("SHOWCASE_STRESS_EXPECTED_ROUTES must be a positive integer.");
fs.mkdirSync(outputDirectory, { recursive: true });

function collectHtmlFiles(directory) {
  const files = [];
  const walk = (current) => {
    for (const entry of fs.readdirSync(current, { withFileTypes: true })) {
      const candidate = path.join(current, entry.name);
      if (entry.isDirectory()) {
        if (entry.name !== "assets") walk(candidate);
      } else if (entry.name.endsWith(".html")) {
        files.push(candidate);
      }
    }
  };
  walk(directory);
  return files.sort();
}

function attachBrowserEvents(page) {
  const events = { consoleErrors: [], pageErrors: [], requestFailures: [], httpErrors: [] };
  page.on("console", (message) => {
    if (message.type() === "error") events.consoleErrors.push(message.text());
  });
  page.on("pageerror", (error) => events.pageErrors.push(error.message));
  page.on("requestfailed", (request) => events.requestFailures.push(`${request.url()} ${request.failure()?.errorText || ""}`));
  page.on("response", (response) => {
    if (response.status() >= 400) events.httpErrors.push(`${response.status()} ${response.url()}`);
  });
  return events;
}

async function settle(page) {
  const result = await page.evaluate(async () => {
    await document.fonts.ready;
    const images = [...document.images];
    for (const image of images) image.loading = "eager";
    const decodeFailures = [];
    for (const image of images) {
      try {
        await image.decode();
      } catch (error) {
        decodeFailures.push(`${image.currentSrc || image.src}: ${error}`);
      }
    }
    return {
      imageFailures: [...images.filter((image) => image.complete && image.naturalWidth === 0).map((image) => image.currentSrc || image.src), ...decodeFailures],
      fontErrors: [...document.fonts].filter((face) => face.status === "error").map((face) => ({ family: face.family, weight: face.weight, status: face.status })),
    };
  });
  await new Promise((resolve) => setTimeout(resolve, 300));
  return result;
}

async function applyStressMode(page, mode) {
  if (mode.stress === "reduced-motion") return;
  if (mode.stress === "normal") return;
  await page.evaluate((stress) => {
    if (stress === "text200") {
      // Snapshot every baseline computed size before changing the root. Applying those doubled values inline
      // makes rem/em and fixed-px text exactly 2x, rather than multiplying root-scaled text twice.
      const baseline = [...document.body.querySelectorAll("*")].map((element) => ({ element, fontSize: parseFloat(getComputedStyle(element).fontSize) }));
      document.documentElement.style.fontSize = "200%";
      for (const { element, fontSize } of baseline) {
        if (Number.isFinite(fontSize) && fontSize > 0) element.style.setProperty("font-size", `${fontSize * 2}px`, "important");
      }
      return;
    }
    const style = document.createElement("style");
    style.id = "showcase-stress-spacing";
    style.textContent = "body * { line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } p { margin-block: 2em !important; }";
    document.head.append(style);
  }, mode.stress);
}

async function sampleTabFocus(page) {
  await page.evaluate(() => document.activeElement?.blur());
  const sequence = [];
  for (let index = 0; index < 10; index += 1) {
    await page.keyboard.press("Tab");
    sequence.push(await page.evaluate(() => {
      const active = document.activeElement;
      const rect = active?.getBoundingClientRect();
      const style = active ? getComputedStyle(active) : null;
      return {
        tag: active?.tagName || null,
        id: active?.id || null,
        className: active?.className || "",
        rect: rect ? { left: Math.round(rect.left), top: Math.round(rect.top), width: Math.round(rect.width), height: Math.round(rect.height) } : null,
        outlineStyle: style?.outlineStyle || null,
        outlineWidth: style?.outlineWidth || null,
      };
    }));
  }
  return sequence;
}

async function collectGeometry(page) {
  return page.evaluate(() => {
    const isHiddenModal = (element) => {
      const dialog = element.closest("dialog");
      return Boolean(dialog && !dialog.open) || Boolean(element.closest("[hidden], [aria-hidden=\"true\"]"));
    };
    const visible = (element) => {
      const style = getComputedStyle(element);
      const rect = element.getBoundingClientRect();
      return style.display !== "none" && style.visibility !== "hidden" && Number(style.opacity) !== 0 && rect.width > 0 && rect.height > 0 && !isHiddenModal(element);
    };
    const excluded = (element) => element.matches("input, textarea, canvas") || Boolean(element.closest("input, textarea, canvas"));
    const selector = (element) => element.id ? `#${element.id}` : `${element.tagName.toLowerCase()}${[...element.classList].slice(0, 2).map((name) => `.${name}`).join("")}`;
    const textElements = [...document.querySelectorAll("p,h1,h2,h3,h4,h5,h6,li,dt,dd,a,button,label,output,figcaption,td,th,span")]
      .filter((element) => visible(element) && !excluded(element) && element.childNodes.length && [...element.childNodes].some((node) => node.nodeType === Node.TEXT_NODE && node.textContent.trim()));
    const clipping = textElements.map((element) => {
      const rect = element.getBoundingClientRect();
      const style = getComputedStyle(element);
      const clipped = (style.overflowX === "hidden" || style.overflowX === "clip" || style.textOverflow !== "clip") && element.scrollWidth > element.clientWidth + 1;
      return clipped ? { selector: selector(element), text: element.textContent.trim().slice(0, 80), rect: { left: Math.round(rect.left), right: Math.round(rect.right), top: Math.round(rect.top), bottom: Math.round(rect.bottom) }, scrollWidth: element.scrollWidth, clientWidth: element.clientWidth, overflowX: style.overflowX, whiteSpace: style.whiteSpace } : null;
    }).filter(Boolean).slice(0, 30);
    const overlaps = [];
    for (let first = 0; first < textElements.length; first += 1) {
      const a = textElements[first];
      const aRect = a.getBoundingClientRect();
      for (let second = first + 1; second < textElements.length; second += 1) {
        const b = textElements[second];
        if (a.contains(b) || b.contains(a)) continue;
        const bRect = b.getBoundingClientRect();
        const horizontal = Math.min(aRect.right, bRect.right) - Math.max(aRect.left, bRect.left);
        const vertical = Math.min(aRect.bottom, bRect.bottom) - Math.max(aRect.top, bRect.top);
        if (horizontal > 2 && vertical > 2) overlaps.push({ first: selector(a), second: selector(b), overlap: { width: Math.round(horizontal), height: Math.round(vertical) } });
        if (overlaps.length >= 30) break;
      }
      if (overlaps.length >= 30) break;
    }
    return {
      wholePage: { scrollWidth: document.documentElement.scrollWidth, clientWidth: document.documentElement.clientWidth, horizontalOverflow: document.documentElement.scrollWidth > document.documentElement.clientWidth + 1 },
      textClippingCandidates: clipping,
      textOverlapCandidates: overlaps,
      brokenImages: [...document.images].filter((image) => image.complete && image.naturalWidth === 0).map((image) => image.currentSrc || image.src),
    };
  });
}

function hardFailures(row) {
  const failures = [];
  if (row.geometry.brokenImages.length) failures.push(`broken images ${row.geometry.brokenImages.length}`);
  if (row.events.consoleErrors.length) failures.push(`console errors ${row.events.consoleErrors.length}`);
  if (row.events.pageErrors.length) failures.push(`page errors ${row.events.pageErrors.length}`);
  if (row.events.requestFailures.length) failures.push(`network failures ${row.events.requestFailures.length}`);
  if (row.events.httpErrors.length) failures.push(`HTTP responses >=400 ${row.events.httpErrors.length}`);
  if (row.fontErrors.length) failures.push(`font status errors ${row.fontErrors.length}`);
  return failures;
}

function screenshotPath(route, mode) {
  return path.join(outputDirectory, `${route.replace(/^\//, "").replace(/[\\/]/g, "__").replace(/\.html$/, "")}-${mode}.png`);
}

function writePartial(report) {
  fs.mkdirSync(path.dirname(reportPath), { recursive: true });
  fs.writeFileSync(reportPath, JSON.stringify(report, null, 2));
}

const report = { generatedAt: new Date().toISOString(), publicRoot, expectedRouteCount, routes: [], modes: modes.map((mode) => mode.name), rows: [], runnerErrors: [] };
let server;
let browser;

try {
  if (!fs.existsSync(showcaseRoot) || !fs.statSync(showcaseRoot).isDirectory()) throw new Error(`showcase root not found: ${showcaseRoot}`);
  const files = collectHtmlFiles(showcaseRoot);
  report.routes = files.map((file) => routeForFile(publicRoot, file));
  if (report.routes.length !== expectedRouteCount) throw new Error(`route count ${report.routes.length}; expected ${expectedRouteCount}`);
  server = await startPublicServer(publicRoot);
  browser = await puppeteer.launch({ executablePath: chrome, headless: "new", args: ["--no-sandbox", "--use-angle=swiftshader", "--enable-unsafe-swiftshader", "--force-device-scale-factor=1"] });
  for (const route of report.routes) {
    for (const mode of modes) {
      console.log(`RUN ${route} ${mode.name}`);
      const page = await browser.newPage();
      const row = { route, mode: mode.name, width: mode.width, rawObservations: null, focusOrder: [], events: null, hardFailures: [] };
      const events = attachBrowserEvents(page);
      try {
        await page.setViewport({ width: mode.width, height: mode.height, isMobile: mode.width < 500, hasTouch: mode.width < 500 });
        await page.emulateMediaFeatures(mode.stress === "reduced-motion" ? [{ name: "prefers-reduced-motion", value: "reduce" }] : []);
        await page.goto(`${server.origin}${route}`, { waitUntil: "networkidle0", timeout: 30000 });
        await applyStressMode(page, mode);
        const settled = await settle(page);
        row.geometry = await collectGeometry(page);
        row.geometry.brokenImages = [...new Set([...row.geometry.brokenImages, ...settled.imageFailures])];
        row.fontErrors = settled.fontErrors;
        row.focusOrder = await sampleTabFocus(page);
        if (mode.stress === "text200" || mode.stress === "spacing") {
          const file = screenshotPath(route, mode.name);
          await page.screenshot({ path: file, fullPage: true });
          row.screenshot = file;
        }
      } catch (error) {
        events.pageErrors.push(`stress runner: ${error.stack || error.message}`);
        row.geometry = { wholePage: null, textClippingCandidates: [], textOverlapCandidates: [], brokenImages: [] };
        row.fontErrors = [];
      } finally {
        await page.close();
      }
      row.events = events;
      row.fontErrors ||= [];
      row.rawObservations = { wholePage: row.geometry.wholePage, textClippingCandidates: row.geometry.textClippingCandidates, textOverlapCandidates: row.geometry.textOverlapCandidates };
      row.hardFailures = hardFailures(row);
      report.rows.push(row);
      writePartial(report);
      console.log(`${row.hardFailures.length ? "FAIL" : "PASS"} ${route} ${mode.name}${row.hardFailures.length ? ` — ${row.hardFailures.join(" · ")}` : ""}`);
    }
  }
} catch (error) {
  report.runnerErrors.push(error.stack || error.message);
} finally {
  if (browser) await browser.close();
  if (server) await server.close();
  writePartial(report);
  const failedRows = report.rows.filter((row) => row.hardFailures.length);
  console.log(`\n${failedRows.length || report.runnerErrors.length ? "✗" : "✓"} typography stress diagnostic — rows ${report.rows.length}, hard failures ${failedRows.length}`);
  process.exitCode = failedRows.length || report.runnerErrors.length ? 1 : 0;
}