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

async function runDetailedCheck() {
  console.log('========================================');
  console.log('  Detailed Glow & Text Check');
  console.log('========================================');
  
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({
    viewport: { width: 1440, height: 1080 },
  });
  const page = await context.newPage();
  
  await page.goto('http://localhost:3000', { waitUntil: 'domcontentloaded' });
  await page.waitForTimeout(2000);
  
  console.log('\n1. Checking Hero section text visibility...');
  const heroTextInfo = await page.evaluate(() => {
    const heroSection = document.querySelector('section.min-h-screen');
    if (!heroSection) return { error: 'Hero section not found' };
    
    const headings = heroSection.querySelectorAll('h1, h2, p, span');
    const textElements = [];
    
    headings.forEach((el) => {
      const style = window.getComputedStyle(el);
      const rect = el.getBoundingClientRect();
      
      if (rect.width > 50 && rect.height > 20) {
        textElements.push({
          tag: el.tagName,
          text: el.textContent?.trim().substring(0, 50) || '',
          opacity: style.opacity,
          color: style.color,
          zIndex: style.zIndex || 'auto',
          position: style.position,
          mixBlendMode: style.mixBlendMode,
          y: Math.round(rect.top),
          height: Math.round(rect.height),
        });
      }
    });
    
    return textElements.slice(0, 10);
  });
  
  console.log(`   Found ${heroTextInfo.length} text elements in Hero:`);
  heroTextInfo.forEach((el, i) => {
    console.log(`     ${i + 1}. ${el.tag}: "${el.text}"`);
    console.log(`        opacity: ${el.opacity}, color: ${el.color.substring(0, 30)}`);
    console.log(`        position: ${el.position}, zIndex: ${el.zIndex}`);
  });
  
  console.log('\n2. Checking Stats section (可衡量成果)...');
  await page.evaluate(() => {
    const statsSection = document.querySelector('section.bg-ink-light');
    if (statsSection) {
      statsSection.scrollIntoView({ behavior: 'auto' });
    }
  });
  await page.waitForTimeout(1000);
  
  const statsInfo = await page.evaluate(() => {
    const statsSection = document.querySelector('section.bg-ink-light');
    if (!statsSection) return { error: 'Stats section not found' };
    
    const glowElements = [];
    const allElements = statsSection.querySelectorAll('*');
    
    allElements.forEach((el) => {
      const style = window.getComputedStyle(el);
      const hasBlur = style.filter.includes('blur');
      const hasRadialGradient = style.backgroundImage.includes('radial-gradient');
      const opacity = parseFloat(style.opacity);
      
      if ((hasBlur || hasRadialGradient) && opacity > 0.01) {
        const rect = el.getBoundingClientRect();
        if (rect.width > 50 && rect.height > 50) {
          glowElements.push({
            tag: el.tagName,
            className: el.className.substring(0, 80),
            opacity: opacity.toFixed(3),
            hasBlur,
            hasRadialGradient,
            size: `${Math.round(rect.width)}x${Math.round(rect.height)}`,
            position: style.position,
            zIndex: style.zIndex || 'auto',
            pointerEvents: style.pointerEvents,
          });
        }
      }
    });
    
    const textElements = [];
    const texts = statsSection.querySelectorAll('h2, h3, p, span, div');
    texts.forEach((el) => {
      const style = window.getComputedStyle(el);
      const rect = el.getBoundingClientRect();
      const text = el.textContent?.trim() || '';
      
      if (text.length > 5 && rect.width > 30 && rect.height > 15) {
        textElements.push({
          text: text.substring(0, 40),
          color: style.color,
          opacity: style.opacity,
        });
      }
    });
    
    return {
      glowCount: glowElements.length,
      glowElements: glowElements.slice(0, 8),
      textSample: textElements.slice(0, 5),
    };
  });
  
  console.log(`   Glow/blur elements in Stats: ${statsInfo.glowCount}`);
  if (statsInfo.glowElements?.length > 0) {
    statsInfo.glowElements.forEach((el, i) => {
      const type = el.hasBlur && el.hasRadialGradient ? 'blur+gradient' : el.hasBlur ? 'blur' : 'gradient';
      console.log(`     ${i + 1}. ${el.tag} (${el.size}, ${type}, opacity: ${el.opacity})`);
      console.log(`        position: ${el.position}, zIndex: ${el.zIndex}, pointerEvents: ${el.pointerEvents}`);
    });
  } else {
    console.log('   ✓ No glow/blur elements found in Stats section (good!)');
  }
  
  console.log('\n3. Checking Case Studies section...');
  await page.evaluate(() => {
    const sections = document.querySelectorAll('section');
    let caseSection = null;
    sections.forEach((s) => {
      if (s.textContent?.includes('可衡量的业务成果') || s.textContent?.includes('Case Studies')) {
        caseSection = s;
      }
    });
    if (caseSection) {
      caseSection.scrollIntoView({ behavior: 'auto' });
    }
  });
  await page.waitForTimeout(1000);
  
  const caseInfo = await page.evaluate(() => {
    const sections = document.querySelectorAll('section');
    let caseSection = null;
    sections.forEach((s) => {
      if (s.textContent?.includes('可衡量的业务成果') || s.textContent?.includes('Case Studies')) {
        caseSection = s;
      }
    });
    
    if (!caseSection) return { error: 'Case section not found' };
    
    const cards = caseSection.querySelectorAll('.group, a[href]');
    const cardInfo = [];
    
    cards.forEach((card, index) => {
      const style = window.getComputedStyle(card);
      const rect = card.getBoundingClientRect();
      
      if (rect.width > 200 && rect.height > 100) {
        const glowElementsInside = [];
        const insideElements = card.querySelectorAll('*');
        insideElements.forEach((el) => {
          const elStyle = window.getComputedStyle(el);
          if (elStyle.filter.includes('blur') && elStyle.backgroundImage.includes('radial-gradient')) {
            glowElementsInside.push({
              opacity: elStyle.opacity,
              className: el.className.substring(0, 60),
            });
          }
        });
        
        cardInfo.push({
          index: index + 1,
          size: `${Math.round(rect.width)}x${Math.round(rect.height)}`,
          glowInside: glowElementsInside.length,
          glowElements: glowElementsInside.slice(0, 3),
        });
      }
    });
    
    return {
      cardCount: cardInfo.length,
      cards: cardInfo.slice(0, 4),
    };
  });
  
  console.log(`   Found ${caseInfo.cardCount} cards in Case Studies`);
  if (caseInfo.cards) {
    caseInfo.cards.forEach((card) => {
      console.log(`     Card ${card.index}: ${card.size}, glow elements: ${card.glowInside}`);
      card.glowElements?.forEach((glow, i) => {
        console.log(`       - glow-${i + 1}: opacity ${glow.opacity}`);
      });
    });
  }
  
  await browser.close();
  
  console.log('\n========================================');
  console.log('  Detailed Check Complete');
  console.log('========================================');
}

runDetailedCheck().catch(console.error);