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();
  page.on('console', (m) => {
    const t = m.text();
    if (t.includes('anchor') || t.includes('Capability') || t.includes('section')) {
      console.log('[browser]', t);
    }
  });
  // 1) 打开首页
  await page.goto(`${BASE}/view/mhzc/home`, { waitUntil: 'networkidle', timeout: 30000 });
  // 等到 capability 区域可见
  await page.waitForSelector('.capability-section', { timeout: 20000 });
  console.log('home loaded');

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

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

  // 取各 capability 卡的文本
  const cards = await page.$$eval('.capability-card .capability-name', (els) => els.map((e) => e.textContent.trim()));
  console.log('capability cards:', cards);

  // 点击 "碳核算平台"
  const cardIndex = cards.indexOf('碳核算平台');
  console.log('clicking index', cardIndex);
  await page.locator('.capability-card').nth(cardIndex).click();
  await page.waitForTimeout(2500);
  console.log('after click url:', page.url());

  // 等 section 出现
  const hasContent1 = await page.locator('#content-1').count();
  console.log('content-1 exists:', hasContent1);
  if (hasContent1) {
    const inView = await page.locator('#content-1').evaluate((el) => {
      const r = el.getBoundingClientRect();
      return { top: r.top, bottom: r.bottom, vh: window.innerHeight };
    });
    console.log('content-1 rect after click:', inView);
  }

  await page.screenshot({ path: 'tmp-gxnlpt-content-1.png', fullPage: false });

  // 回到首页
  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);

  // 点击 "碳认证机构" -> content-2
  const idx2 = cards.indexOf('碳认证机构');
  await page.locator('.capability-card').nth(idx2).click();
  await page.waitForTimeout(2500);
  console.log('after click content-2 url:', page.url());
  const r2 = await page.locator('#content-2').evaluate((el) => {
    const r = el.getBoundingClientRect();
    return { top: r.top, bottom: r.bottom };
  });
  console.log('content-2 rect after click:', r2);

  // 点击 "更多能力"
  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);
  const moreIdx = cards.indexOf('更多能力');
  await page.locator('.capability-card').nth(moreIdx).click();
  await page.waitForTimeout(2000);
  console.log('after click 更多能力 url:', page.url());
  await page.screenshot({ path: 'tmp-gxnlpt-more.png', fullPage: false });

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