import puppeteer from "puppeteer-core";
import path from "node:path";
import url from "node:url";

const here = path.dirname(url.fileURLToPath(import.meta.url));
const CHROME = "C:/Program Files/Google/Chrome/Application/chrome.exe";

const browser = await puppeteer.launch({ executablePath: CHROME, headless: "new", args: ["--force-device-scale-factor=1"] });
const page = await browser.newPage();
await page.setCacheEnabled(false);

// 라이브 배포 URL — 사용자가 보는 그대로
for (const w of [360, 390, 412]) {
  await page.setViewport({ width: w, height: 844, isMobile: true, hasTouch: true });
  await page.goto("https://designpaca.chanpaca.net/work/dure-enrollment/", { waitUntil: "networkidle0" });
  await page.evaluate(() => document.fonts.ready);
  await new Promise((r) => setTimeout(r, 250));
  const m = await page.evaluate(() => {
    const layout = document.querySelector(".layout");
    const h2 = document.querySelector("#cat-h");
    const card = document.querySelector(".course-row");
    const appbar = document.querySelector(".appbar-inner");
    const rl = (el) => (el ? Math.round(el.getBoundingClientRect().left) : null);
    return {
      cssV: (document.querySelector('link[rel="stylesheet"]')?.getAttribute("href") || "").match(/v=\d+/)?.[0],
      layoutPad: getComputedStyle(layout).padding,
      h2Left: rl(h2),
      cardLeft: rl(card),
      appbarPadLeft: getComputedStyle(appbar).paddingLeft,
      over: document.documentElement.scrollWidth - document.documentElement.clientWidth,
    };
  });
  console.log(`[${w}] css=${m.cssV} layoutPad="${m.layoutPad}" h2Left=${m.h2Left} cardLeft=${m.cardLeft} appbarPadL=${m.appbarPadLeft} over=+${m.over}`);
  if (w === 390) await page.screenshot({ path: path.join(here, "__shots__", "diag3-dure-live-390.png") });
}
await browser.close();