import { chromium } from "playwright";
import { mkdir, writeFile } from "node:fs/promises";
import path from "node:path";

const baseURL = process.env.PROTOTYPE_URL || "http://127.0.0.1:5174/";
const outDir = path.resolve("qa", "artifacts", "visual-redesign-audit-v31");
await mkdir(outDir, { recursive: true });

const browser = await chromium.launch({
  headless: true,
  executablePath:
    process.env.BROWSER_PATH ||
    "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe",
});
const checks = [];
const consoleErrors = [];

const inspect = async (viewport, screenshotName) => {
  const context = await browser.newContext({ viewport });
  const page = await context.newPage();
  await page.addInitScript(() => {
    Object.defineProperty(navigator, "webdriver", { get: () => false });
  });
  page.on("console", (message) => {
    if (message.type() === "error") consoleErrors.push(message.text());
  });
  await page.goto(baseURL, { waitUntil: "networkidle" });
  await page.evaluate(() => localStorage.removeItem("running-ai-prd-v1"));
  await page.reload({ waitUntil: "networkidle" });
  await page.locator(".home-page").waitFor();

  const geometry = await page.evaluate(() => {
    const title = document.querySelector(".page-header__title");
    const stage = document.querySelector(".prototype-stage");
    return {
      stageClass: stage?.className || "",
      dockDisplay: getComputedStyle(document.querySelector(".demo-dock")).display,
      noteDisplay: getComputedStyle(document.querySelector(".stage-note")).display,
      titleWidth: title?.getBoundingClientRect().width || 0,
      horizontalOverflow: document.documentElement.scrollWidth > document.documentElement.clientWidth,
    };
  });
  await page.screenshot({ path: path.join(outDir, screenshotName), fullPage: true });
  await context.close();
  return geometry;
};

try {
  const desktop = await inspect({ width: 1280, height: 980 }, "01-direct-desktop.png");
  const mobile = await inspect({ width: 390, height: 844 }, "02-direct-mobile.png");

  checks.push({
    name: "桌面保留原型导航，手机只展示产品本体",
    pass:
      desktop.stageClass.includes("is-app-preview") &&
      desktop.dockDisplay === "flex" &&
      desktop.noteDisplay === "block" &&
      mobile.stageClass.includes("is-app-preview") &&
      mobile.dockDisplay === "none" &&
      mobile.noteDisplay === "none",
    desktop,
    mobile,
  });
  checks.push({
    name: "主标题保持横向层级且页面无横向溢出",
    pass:
      desktop.titleWidth > 220 &&
      mobile.titleWidth > 250 &&
      !desktop.horizontalOverflow &&
      !mobile.horizontalOverflow,
    desktop,
    mobile,
  });
  checks.push({
    name: "浏览器控制台无错误",
    pass: consoleErrors.length === 0,
    consoleErrors,
  });
} finally {
  await browser.close();
}

const result = { ok: checks.every((item) => item.pass), checks, consoleErrors };
await writeFile(path.join(outDir, "result.json"), JSON.stringify(result, null, 2), "utf8");
console.log(JSON.stringify(result, null, 2));
if (!result.ok) process.exitCode = 1;