const path = require("path");
const { pathToFileURL } = require("url");
const { chromium } = require("F:/software/Hermes/hermes-agent/node_modules/playwright");

(async () => {
  const root = __dirname;
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage({
    viewport: { width: 1920, height: 1200 },
    deviceScaleFactor: 1,
  });

  await page.goto(pathToFileURL(path.join(root, "visual-assets.html")).href, {
    waitUntil: "load",
  });
  await page.evaluate(() => document.fonts.ready);

  const targets = [
    ["#workflow-card", "工作流卡片.png"],
    ["#flowchart", "流程图.png"],
  ];

  for (const [selector, filename] of targets) {
    const target = page.locator(selector);
    await target.screenshot({ path: path.join(root, filename), animations: "disabled" });
  }

  const report = await page.evaluate(() => {
    const sheets = [...document.querySelectorAll(".sheet")].map((sheet) => ({
      id: sheet.id,
      width: sheet.getBoundingClientRect().width,
      height: sheet.getBoundingClientRect().height,
      overflowX: sheet.scrollWidth > sheet.clientWidth,
      overflowY: sheet.scrollHeight > sheet.clientHeight,
    }));
    const overflowingText = [...document.querySelectorAll(".sheet *")]
      .filter((el) => el.children.length === 0 && el.textContent.trim())
      .filter((el) => el.scrollWidth > el.clientWidth + 1 || el.scrollHeight > el.clientHeight + 1)
      .map((el) => el.textContent.trim().slice(0, 60));
    return { sheets, overflowingText };
  });

  console.log(JSON.stringify(report, null, 2));
  await browser.close();
})().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});