const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();
  
  console.log('=== 详细检查输入框问题 ===\n');
  
  await page.goto('http://localhost:5173/#/pages/video-generator/create', {
    waitUntil: 'networkidle',
    timeout: 30000
  });
  
  // 等待更长时间
  await page.waitForTimeout(5000);
  
  // 检查 step-panel 的显示状态
  console.log('1. 检查步骤面板:');
  const panels = await page.locator('.step-panel').all();
  console.log(`   找到 ${panels.length} 个步骤面板`);
  
  for (let i = 0; i < panels.length; i++) {
    const panel = panels[i];
    const isVisible = await panel.isVisible();
    const display = await panel.evaluate(e => getComputedStyle(e).display);
    const opacity = await panel.evaluate(e => getComputedStyle(e).opacity);
    const visibility = await panel.evaluate(e => getComputedStyle(e).visibility);
    
    console.log(`   面板 ${i + 1}:`);
    console.log(`     - isVisible(): ${isVisible ? '✅' : '❌'}`);
    console.log(`     - display: ${display}`);
    console.log(`     - opacity: ${opacity}`);
    console.log(`     - visibility: ${visibility}`);
  }
  
  // 检查表单元素
  console.log('\n2. 检查表单元素:');
  const formSections = await page.locator('.form-section').all();
  console.log(`   找到 ${formSections.length} 个表单区域`);
  
  // 检查第一个表单区域
  if (formSections.length > 0) {
    const firstSection = formSections[0];
    const sectionTitle = await firstSection.locator('.section-title').textContent();
    console.log(`   第一个区域标题: "${sectionTitle}"`);
    
    // 检查输入框
    const input = await firstSection.locator('input').first();
    const inputExists = await input.count() > 0;
    console.log(`   输入框存在: ${inputExists ? '✅' : '❌'}`);
    
    if (inputExists) {
      const inputVisible = await input.isVisible();
      const inputDisplay = await input.evaluate(e => getComputedStyle(e).display);
      const inputOpacity = await input.evaluate(e => getComputedStyle(e).opacity);
      
      console.log(`   输入框可见: ${inputVisible ? '✅' : '❌'}`);
      console.log(`   输入框 display: ${inputDisplay}`);
      console.log(`   输入框 opacity: ${inputOpacity}`);
      
      // 尝试截图
      await input.screenshot({ path: 'input-screenshot.png' });
      console.log('   已保存输入框截图: input-screenshot.png');
    }
  }
  
  // 保存完整页面截图
  await page.screenshot({ path: 'full-page-debug.png', fullPage: true });
  console.log('\n3. 已保存完整页面截图: full-page-debug.png');
  
  await browser.close();
})();