/**
 * 截图：打开预览页并保存桌面 / 移动端截图，同时把配色、字体与布局尺寸打印出来。
 */
const fs = require('fs');
const puppeteer = require('puppeteer-core');

const CANDIDATES = [
  process.env.JIO_BROWSER,
  'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
  'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
  'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
  'C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe',
].filter(Boolean);
const BROWSER = CANDIDATES.find((p) => fs.existsSync(p));

const URL = process.argv[2] || 'https://localhost/jio-preview.html';
const PREFIX = process.argv[3] || 'C:/Users/Xing/Desktop/WP-Date/data/wordpress/shot';

(async () => {
  if (!BROWSER) {
    console.error('no browser');
    process.exit(1);
  }
  const browser = await puppeteer.launch({
    executablePath: BROWSER,
    headless: 'new',
    ignoreHTTPSErrors: true,
    args: ['--disable-gpu', '--no-sandbox'],
  });

  for (const [name, viewport] of [
    ['desktop', { width: 1440, height: 1000 }],
    ['mobile', { width: 390, height: 844, isMobile: true, hasTouch: true }],
  ]) {
    const page = await browser.newPage();
    await page.setViewport(viewport);
    await page.goto(URL, { waitUntil: 'networkidle2', timeout: 60000 });
    await new Promise((r) => setTimeout(r, 2000));
    await page.screenshot({ path: `${PREFIX}-${name}.png` });

    const metrics = await page.evaluate(() => {
      const pick = (sel) => {
        const el = document.querySelector(sel);
        if (!el) return null;
        const cs = getComputedStyle(el);
        const r = el.getBoundingClientRect();
        return {
          text: (el.textContent || '').trim().slice(0, 40),
          font: `${cs.fontSize}/${cs.lineHeight} ${cs.fontFamily.split(',')[0]}`,
          weight: cs.fontWeight,
          color: cs.color,
          bg: cs.backgroundColor,
          pad: cs.padding,
          box: `${Math.round(r.width)}x${Math.round(r.height)}`,
        };
      };
      return {
        bar: pick('.jio-creator__bar'),
        title: pick('.jio-creator__title textarea'),
        excerpt: pick('.jio-creator__excerpt textarea'),
        canvas: pick('.jio-creator__canvas'),
        para: pick('.block-editor-block-list__block'),
        appender: pick('.block-editor-default-block-appender'),
        primaryBtn: pick('.jio-creator__primary'),
        ghostBtn: pick('.jio-creator__ghost'),
        pageBg: getComputedStyle(document.body).backgroundColor,
      };
    });
    console.log(`=== ${name} ===`);
    console.log(JSON.stringify(metrics, null, 2));
    await page.close();
  }

  await browser.close();
})();