import { chromium } from '@playwright/test';

(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
  
  console.log('正在访问首页...');
  await page.goto('http://localhost:3000');
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(2000);
  
  // 检查 Hero 区域的层级结构
  console.log('\n=== Hero 区域层级分析 ===');
  const heroLayers = await page.evaluate(() => {
    const heroSection = document.querySelector('section');
    if (!heroSection) return [];
    
    const layers = [];
    const children = heroSection.querySelectorAll(':scope > *');
    children.forEach((child, i) => {
      const style = window.getComputedStyle(child);
      layers.push({
        index: i,
        tag: child.tagName,
        className: child.className.substring(0, 100),
        zIndex: style.zIndex,
        position: style.position,
        opacity: style.opacity,
      });
    });
    return layers;
  });
  
  console.log(JSON.stringify(heroLayers, null, 2));
  
  // 检查 Stats 区域
  console.log('\n=== Stats 区域层级分析 ===');
  const statsLayers = await page.evaluate(() => {
    const sections = document.querySelectorAll('section');
    let statsSection = null;
    for (const s of sections) {
      if (s.textContent?.includes('用数据说话')) {
        statsSection = s;
        break;
      }
    }
    if (!statsSection) return [];
    
    const layers = [];
    const children = statsSection.querySelectorAll(':scope > *');
    children.forEach((child, i) => {
      const style = window.getComputedStyle(child);
      layers.push({
        index: i,
        tag: child.tagName,
        className: child.className.substring(0, 100),
        zIndex: style.zIndex,
        position: style.position,
        opacity: style.opacity,
      });
    });
    return layers;
  });
  
  console.log(JSON.stringify(statsLayers, null, 2));
  
  // 检查所有带 radial-gradient 的元素
  console.log('\n=== 所有径向渐变光晕元素 ===');
  const glowElements = await page.evaluate(() => {
    const all = document.querySelectorAll('*');
    const results = [];
    all.forEach(el => {
      const style = window.getComputedStyle(el);
      const bg = style.backgroundImage || '';
      if (bg.includes('radial-gradient') && style.position !== 'static') {
        results.push({
          tag: el.tagName,
          className: el.className.substring(0, 80),
          zIndex: style.zIndex,
          position: style.position,
          background: bg.substring(0, 100),
          opacity: style.opacity,
          parentTag: el.parentElement?.tagName,
          parentClass: el.parentElement?.className?.substring(0, 60) || '',
        });
      }
    });
    return results.slice(0, 20);
  });
  
  console.log(JSON.stringify(glowElements, null, 2));
  
  await browser.close();
  console.log('\n分析完成！');
})();