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

(async () => {
  const browser = await chromium.launch({ headless: false }); // 显示浏览器
  const page = await browser.newPage();
  
  console.log('=== 完整UI测试 ===\n');
  
  try {
    // 1. 打开页面
    console.log('1. 打开创建视频页面...');
    await page.goto('http://localhost:5173/#/pages/video-generator/create', {
      waitUntil: 'networkidle',
      timeout: 30000
    });
    await page.waitForTimeout(3000);
    await page.screenshot({ path: 'ui-test-1-loaded.png', fullPage: true });
    console.log('   ✅ 页面已加载\n');
    
    // 2. 检查所有关键元素
    console.log('2. 检查页面元素:');
    const checks = [
      { name: '导航栏', selector: '.nav-bar' },
      { name: '页面标题', selector: '.page-title' },
      { name: '步骤导航', selector: '.step-nav' },
      { name: '基本信息区域', selector: 'text=基本信息' },
      { name: '视频标题标签', selector: 'text=视频标题' },
      { name: '添加图片按钮', selector: 'text=添加图片' },
      { name: '添加音频按钮', selector: 'text=添加音频' },
      { name: '下一步按钮', selector: 'text=下一步' },
    ];
    
    for (const check of checks) {
      const count = await page.locator(check.selector).count();
      console.log(`   ${count > 0 ? '✅' : '❌'} ${check.name}`);
    }
    
    // 3. 测试输入框
    console.log('\n3. 测试输入框:');
    
    // 尝试查找并点击输入区域
    const textareas = await page.locator('textarea').all();
    console.log(`   找到 ${textareas.length} 个 textarea`);
    
    if (textareas.length > 0) {
      // 点击输入框
      await textareas[0].click();
      await page.waitForTimeout(500);
      
      // 输入文字
      await textareas[0].fill('测试视频标题123');
      await page.waitForTimeout(500);
      
      // 检查值
      const value = await textareas[0].inputValue();
      console.log(`   ${value === '测试视频标题123' ? '✅' : '❌'} 输入框可编辑，当前值: "${value}"`);
      
      // 截图
      await page.screenshot({ path: 'ui-test-2-input.png', fullPage: true });
    } else {
      console.log('   ❌ 未找到输入框');
    }
    
    // 4. 测试按钮点击
    console.log('\n4. 测试按钮:');
    
    // 点击下一步
    const nextBtn = await page.locator('text=下一步').first();
    if (await nextBtn.isVisible()) {
      await nextBtn.click();
      await page.waitForTimeout(1000);
      console.log('   ✅ 点击下一步成功');
      await page.screenshot({ path: 'ui-test-3-step2.png', fullPage: true });
      
      // 检查第二步内容
      const step2Visible = await page.locator('text=视频尺寸').isVisible();
      console.log(`   ${step2Visible ? '✅' : '❌'} 进入第二步（视频尺寸）`);
    }
    
    // 5. 截图保存
    console.log('\n5. 截图已保存:');
    console.log('   - ui-test-1-loaded.png - 页面加载后');
    console.log('   - ui-test-2-input.png - 输入测试');
    console.log('   - ui-test-3-step2.png - 第二步');
    
    console.log('\n✅ 测试完成！');
    
    // 等待5秒让用户查看
    console.log('\n等待5秒后关闭...');
    await page.waitForTimeout(5000);
    
  } catch (error) {
    console.error('\n❌ 测试失败:', error.message);
    await page.screenshot({ path: 'ui-test-error.png', fullPage: true });
    console.log('错误截图: ui-test-error.png');
  } finally {
    await browser.close();
    process.exit(0);
  }
})();