import { chromium } from 'playwright';

const BASE = 'http://localhost:9027';

(async () => {
  const browser = await chromium.launch();
  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
  const page = await ctx.newPage();

  await page.goto(`${BASE}/view/mhzc/home`, { waitUntil: 'networkidle', timeout: 30000 });
  await page.waitForSelector('.capability-section', { timeout: 20000 });

  await page.evaluate(() => {
    const el = document.getElementById('section-capability');
    if (el) el.scrollIntoView({ behavior: 'instant', block: 'start' });
  });
  await page.waitForTimeout(800);

  // 点击
  await page.locator('.capability-card').nth(0).click();
  await page.waitForTimeout(3500);

  // 查看 DOM 状态
  const data = await page.evaluate(() => {
    const out = {};
    const wrap = document.querySelector('.content-wrap');
    out.wrapScrollTop = wrap ? wrap.scrollTop : null;
    out.wrapScrollHeight = wrap ? wrap.scrollHeight : null;
    out.wrapClientHeight = wrap ? wrap.clientHeight : null;
    out.wrapClasses = wrap ? wrap.className : null;
    out.wrapStyleHeight = wrap ? getComputedStyle(wrap).height : null;
    out.htmlClasses = document.documentElement.className;
    out.htmlData = (function() {
      const r = document.documentElement.getBoundingClientRect();
      return { width: r.width, height: r.height };
    })();
    const root = document.documentElement;
    out.homeFigmaScale = getComputedStyle(root).getPropertyValue('--home-figma-scale');
    out.portalShellMinDesignHeight = getComputedStyle(root).getPropertyValue('--portal-shell-min-design-height');
    out.portalLandingFirstScreenHeight = getComputedStyle(root).getPropertyValue('--portal-landing-first-screen-height');
    out.pageNavHeight = getComputedStyle(root).getPropertyValue('--page-nav-height');

    const outlet = document.querySelector('.portal-route-outlet');
    out.outletChildren = outlet ? outlet.children.length : null;
    const firstChild = outlet && outlet.firstElementChild;
    out.firstChildClass = firstChild ? firstChild.className : null;
    out.firstChildBoundingRect = firstChild ? (function() {
      const r = firstChild.getBoundingClientRect();
      return { top: r.top, left: r.left, width: r.width, height: r.height };
    })() : null;
    out.firstChildStyle = firstChild ? firstChild.getAttribute('style') : null;

    // 找 content-1
    const c1 = document.getElementById('content-1');
    out.content1Rect = c1 ? (function() {
      const r = c1.getBoundingClientRect();
      return { top: r.top, left: r.left, width: r.width, height: r.height };
    })() : null;
    return out;
  });
  console.log(JSON.stringify(data, null, 2));

  // 不截图
  // await page.screenshot({ path: 'tmp-debug2.png', fullPage: false });

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