const { chromium } = require("playwright");

(async () => {
  // CHROME_PATH lets environments without pinned Playwright browsers
  // (see `npx playwright install`) point at a system/other Chromium.
  const launchOptions = process.env.CHROME_PATH ? { executablePath: process.env.CHROME_PATH } : {};
  const browser = await chromium.launch(launchOptions);
  const page = await browser.newPage();

  await page.goto("http://localhost:3000/index.html");
  await page.waitForSelector(".docs-section");
  const vanilla = await page.evaluate(() =>
    Array.from(document.querySelectorAll(".docs-section")).map(s => ({
      id: s.id,
      height: s.getBoundingClientRect().height
    }))
  );

  await page.goto("http://localhost:3000/vue.html");
  await page.waitForSelector(".docs-section");
  const vue = await page.evaluate(() =>
    Array.from(document.querySelectorAll(".docs-section")).map(s => ({
      id: s.id,
      height: s.getBoundingClientRect().height
    }))
  );

  await browser.close();

  let diffs = 0;
  const max = Math.max(vanilla.length, vue.length);
  for (let i = 0; i < max; i++) {
    const v = vanilla[i];
    const u = vue[i];
    if (!v || !u || v.id !== u.id || Math.abs(v.height - u.height) > 0.5) {
      diffs++;
      console.log({
        index: i,
        vanillaId: v?.id,
        vueId: u?.id,
        vanillaHeight: v?.height,
        vueHeight: u?.height,
        heightDiff: v && u ? Math.abs(v.height - u.height) : null
      });
    }
  }

  console.log(`Sections compared: ${vanilla.length} vanilla, ${vue.length} vue`);
  console.log(`Differences: ${diffs}`);
  process.exit(diffs > 0 ? 1 : 0);
})();