import { createRequire } from "node:module";
import { mkdir } from "node:fs/promises";
import { join } from "node:path";

const require = createRequire(process.env.PLAYWRIGHT_REQUIRE_FROM ?? import.meta.url);
const { chromium } = require("playwright");
const browserName = process.env.BROWSER_NAME ?? "chrome";
const executablePath = process.env.BROWSER_PATH;
if (!executablePath) throw new Error("BROWSER_PATH is required");

const outputDirectory = new URL(`./screenshots/compatibility/${browserName}/`, import.meta.url);
const outputPath = decodeURIComponent(outputDirectory.pathname.replace(/^\/(.:)/, "$1"));
await mkdir(outputPath, { recursive: true });

const browser = await chromium.launch({ headless: true, executablePath });
const page = await browser.newPage({ viewport: { width: 1440, height: 1000 }, deviceScaleFactor: 1 });
const consoleErrors = [];
const failedRequests = [];
page.on("console", (message) => { if (message.type() === "error") consoleErrors.push(message.text()); });
page.on("pageerror", (error) => consoleErrors.push(`pageerror: ${error.message}`));
page.on("requestfailed", (request) => {
  const failure = request.failure()?.errorText ?? "failed";
  if (request.url().includes("/api/v1/events") && failure.includes("ERR_ABORTED")) return;
  failedRequests.push(`${request.method()} ${request.url()} ${failure}`);
});

const scanOverflow = async (label) => ({
  label,
  documentOverflow: await page.evaluate(() => document.documentElement.scrollWidth > window.innerWidth + 2),
  elements: await page.evaluate(() => [...document.querySelectorAll("body *")]
    .filter((element) => element instanceof HTMLElement && element.scrollWidth > element.clientWidth + 2 && getComputedStyle(element).overflowX === "visible")
    .slice(0, 20)
    .map((element) => `${element.tagName}.${element.className}: ${element.clientWidth}/${element.scrollWidth}`)),
});

try {
  await page.goto("http://localhost:3100", { waitUntil: "networkidle" });
  await page.getByRole("button", { name: "登录研发环境" }).click();
  await page.waitForURL(/localhost:58180/);
  await page.locator("#username").fill("owner");
  await page.locator("#password").fill("LocalOnly123!");
  await page.locator("#kc-login").click();
  await page.waitForURL(/^http:\/\/localhost:3100(?:\/|$)/, { timeout: 15000 });

  for (const heading of ["配置发布与版本控制", "用量、费用与额度", "告警监测与处置闭环", "家庭业务工作台"]) {
    await page.getByRole("heading", { name: heading }).waitFor({ timeout: 15000 });
  }
  await page.getByText("状态实时更新", { exact: true }).waitFor({ timeout: 15000 });

  const checks = [];
  checks.push(await scanOverflow("desktop-overview"));
  const tabs = ["家庭成员", "长者与授权", "设备管理", "固件发布", "通话记录", "故事与记忆", "资源分享", "隐私请求"];
  for (const tab of tabs) {
    await page.getByRole("button", { name: tab, exact: true }).click();
    await page.waitForTimeout(250);
    checks.push(await scanOverflow(`desktop-${tab}`));
  }
  await page.screenshot({ path: join(outputPath, "desktop.png"), fullPage: true });

  await page.setViewportSize({ width: 1024, height: 900 });
  for (const tab of tabs) {
    await page.getByRole("button", { name: tab, exact: true }).click();
    await page.waitForTimeout(250);
    checks.push(await scanOverflow(`tablet-${tab}`));
  }
  await page.screenshot({ path: join(outputPath, "tablet.png"), fullPage: true });

  const firstContentfulPaint = await page.evaluate(() => performance.getEntriesByName("first-contentful-paint")[0]?.startTime ?? null);
  const version = await browser.version();
  const failures = checks.filter((item) => item.documentOverflow || item.elements.length);
  const result = {
    browser: browserName,
    version,
    firstContentfulPaintMs: firstContentfulPaint,
    viewports: ["1440x1000", "1024x900"],
    tabsChecked: tabs,
    overflowFailures: failures,
    consoleErrors,
    failedRequests,
    realtimeConnected: await page.getByText("状态实时更新", { exact: true }).isVisible(),
  };
  console.log(JSON.stringify(result, null, 2));
  if (failures.length || consoleErrors.length || failedRequests.length || !result.realtimeConnected || firstContentfulPaint === null || firstContentfulPaint >= 3000) {
    throw new Error("Browser compatibility gate failed");
  }
} finally {
  await browser.close();
}