const puppeteer = require("puppeteer-core");

const [, , url, prefix] = process.argv;
if (!url || !prefix) {
  console.error("usage: node scroll-shot.js <url> <outPrefix>");
  process.exit(1);
}

(async () => {
  const browser = await puppeteer.launch({
    executablePath: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
    headless: "new",
    defaultViewport: { width: 1920, height: 1080 },
    args: ["--disable-gpu", "--hide-scrollbars"],
  });
  const page = await browser.newPage();
  await page.goto(url, { waitUntil: "networkidle2", timeout: 30000 });
  await new Promise((r) => setTimeout(r, 2500));

  // Scroll to bottom to render footer
  await page.evaluate(() => window.scrollTo({ top: document.body.scrollHeight, behavior: "instant" }));
  await new Promise((r) => setTimeout(r, 1500));

  await page.screenshot({ path: `${prefix}-footer.png`, captureBeyondViewport: false });

  const info = await page.evaluate(() => {
    // Try to find the heading and tagline
    const heading = document.querySelector(".elementor-element-e6af8aa");
    const divider = document.querySelector(".elementor-element-54629ca");
    const bottomRow = document.querySelector(".elementor-element-3f1ba7a");
    const logo = document.querySelector(".elementor-element-b5c897d img");
    const socialIcons = document.querySelectorAll(".elementor-element-e4e6486 a");

    const dim = (el) => {
      if (!el) return null;
      const r = el.getBoundingClientRect();
      const cs = getComputedStyle(el);
      return {
        h: Math.round(r.height),
        w: Math.round(r.width),
        font: cs.fontFamily.split(",")[0].trim(),
        size: cs.fontSize,
        weight: cs.fontWeight,
        color: cs.color,
        bg: cs.backgroundColor,
      };
    };
    const topIcons = document.querySelectorAll(".elementor-element-a6bccba a.elementor-social-icon");
    const bottomIcons = document.querySelectorAll(".elementor-element-e4e6486 a.elementor-social-icon");
    const iconSize = (a) => {
      if (!a) return null;
      const r = a.getBoundingClientRect();
      const cs = getComputedStyle(a);
      const svg = a.querySelector("svg");
      const svgR = svg?.getBoundingClientRect();
      return {
        wrapper: { w: Math.round(r.width), h: Math.round(r.height) },
        svg: svg ? { w: Math.round(svgR.width), h: Math.round(svgR.height) } : null,
        fontSize: cs.fontSize,
        padding: cs.padding,
      };
    };
    const sep = document.querySelector(".elementor-element-54629ca .elementor-divider-separator");
    const sepCs = sep ? getComputedStyle(sep) : null;
    const sepRect = sep?.getBoundingClientRect();
    return {
      heading: dim(heading),
      divider: dim(divider),
      separator: sep ? {
        w: Math.round(sepRect.width),
        h: Math.round(sepRect.height),
        display: sepCs.display,
        borderTop: sepCs.borderTop,
        width: sepCs.width,
      } : null,
      bottomRow: dim(bottomRow),
      logoSrc: logo?.getAttribute("src"),
      logoWidth: logo?.getBoundingClientRect().width,
      socialCount: socialIcons.length,
      topSocial: topIcons[0] ? iconSize(topIcons[0]) : null,
      topSocialCount: topIcons.length,
      bottomSocial: bottomIcons[0] ? iconSize(bottomIcons[0]) : null,
      bottomSocialCount: bottomIcons.length,
    };
  });
  console.log(JSON.stringify(info, null, 2));

  await browser.close();
})().catch((e) => {
  console.error(e);
  process.exit(1);
});