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 区域的所有直接子元素，按 DOM 顺序
  console.log('\n=== Hero Section 直接子元素（按 DOM 顺序） ===');
  const heroChildren = await page.evaluate(() => {
    const heroSection = document.querySelector('section');
    if (!heroSection) return [];
    
    const results = [];
    let index = 0;
    for (const child of Array.from(heroSection.children)) {
      const style = window.getComputedStyle(child);
      results.push({
        index: index++,
        tag: child.tagName,
        className: (child.className || '').substring(0, 80),
        zIndex: style.zIndex,
        position: style.position,
        isText: child.textContent?.trim()?.substring(0, 30) || '',
      });
    }
    return results;
  });
  
  console.log(JSON.stringify(heroChildren, null, 2));
  
  // 检查每个 section 的背景色
  console.log('\n=== 各 Section 背景色 ===');
  const sectionsBg = await page.evaluate(() => {
    const sections = document.querySelectorAll('section');
    const results = [];
    sections.forEach((s, i) => {
      const style = window.getComputedStyle(s);
      results.push({
        index: i,
        tag: s.tagName,
        backgroundColor: style.backgroundColor,
        className: (s.className || '').substring(0, 60),
        firstText: s.textContent?.trim()?.substring(0, 25) || '',
      });
    });
    return results;
  });
  
  console.log(JSON.stringify(sectionsBg, null, 2));
  
  // 截图对比：先截一张，然后用 JS 去掉所有 blur 和 radial-gradient 元素，再截一张
  const screenshotDir = '/tmp/screenshots';
  
  // 原始截图
  await page.screenshot({ path: `${screenshotDir}/before-remove-glow.png` });
  console.log('\n✓ 原始截图已保存');
  
  // 去掉所有光晕相关元素
  await page.evaluate(() => {
    const all = document.querySelectorAll('*');
    let removedCount = 0;
    let hiddenCount = 0;
    
    all.forEach(el => {
      const style = window.getComputedStyle(el);
      const bg = style.backgroundImage || '';
      const hasRadialGradient = bg.includes('radial-gradient');
      const hasBlur = style.filter?.includes('blur') || el.className?.includes?.('blur');
      
      if (hasRadialGradient || hasBlur) {
        if (el.style) {
          el.style.visibility = 'hidden';
          hiddenCount++;
        }
      }
    });
    
    return { hiddenCount };
  });
  
  await page.screenshot({ path: `${screenshotDir}/after-remove-glow.png` });
  console.log('✓ 去掉光晕后的截图已保存');
  
  await browser.close();
  console.log('\n对比截图已保存到 /tmp/screenshots/ 目录');
  console.log('before-remove-glow.png - 原始效果');
  console.log('after-remove-glow.png - 去掉光晕后效果');
})();