const path = require("path");
const fs = require("fs");

const playwrightRoot = process.env.PLAYWRIGHT_REQUIRE_FROM;
if (!playwrightRoot) throw new Error("PLAYWRIGHT_REQUIRE_FROM is required");
const { chromium } = require(path.join(playwrightRoot, "playwright"));

const chromePath = process.env.CHROME_PATH || "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe";
const outputDir = path.resolve(process.env.UI_SCREENSHOT_DIR || "test/e2e/screenshots/media");
fs.mkdirSync(outputDir, { recursive: true });

(async () => {
  const browser = await chromium.launch({ executablePath: chromePath, headless: true });
  const page = await browser.newPage({ viewport: { width: 1440, height: 1000 }, deviceScaleFactor: 1 });
  const failures = [];
  page.on("pageerror", (error) => failures.push(`pageerror: ${error.message}`));
  page.on("console", (message) => {
    if (message.type() === "error") failures.push(`console: ${message.text()}`);
  });

  await page.goto("http://localhost:3100", { waitUntil: "networkidle" });
  const login = page.getByRole("button", { name: "登录研发环境" });
  if (await login.isVisible()) {
    await login.click();
    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 });
  await page.getByRole("button", { name: "通话记录" }).click();
  await page.locator(".conversation-row").first().click();
  await page.locator(".recording-block").waitFor({ state: "visible" });
  await page.getByRole("button", { name: "确认授权" }).click();
  await page.getByText("播放已授权", { exact: true }).waitFor({ timeout: 10000 });

  const checkOverflow = async (label) => {
    const overflow = await page.evaluate(() => {
      const selectors = ["html", "body", ".conversation-detail", ".recording-block", ".recording-grant-form"];
      return selectors.flatMap((selector) => Array.from(document.querySelectorAll(selector)).map((element) => ({
        selector,
        clientWidth: element.clientWidth,
        scrollWidth: element.scrollWidth
      }))).filter((item) => item.scrollWidth > item.clientWidth + 1);
    });
    if (overflow.length) failures.push(`${label} overflow: ${JSON.stringify(overflow)}`);
  };

  await page.locator(".recording-block").scrollIntoViewIfNeeded();
  await checkOverflow("1440px");
  await page.screenshot({ path: path.join(outputDir, "media-recording-1440.png"), fullPage: false });

  await page.setViewportSize({ width: 1024, height: 900 });
  await page.locator(".recording-block").scrollIntoViewIfNeeded();
  await checkOverflow("1024px");
  await page.screenshot({ path: path.join(outputDir, "media-recording-1024.png"), fullPage: false });

  await browser.close();
  if (failures.length) throw new Error(failures.join("\n"));
  process.stdout.write(`Media UI visual smoke passed. Screenshots: ${outputDir}\n`);
})().catch((error) => {
  process.stderr.write(`${error.stack || error}\n`);
  process.exitCode = 1;
});