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

(async () => {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext();
  const page = await context.newPage();
  
  console.log('=== 视频生成功能测试 ===\n');
  
  const errors = [];
  page.on('console', msg => {
    if (msg.type() === 'error') {
      errors.push(msg.text());
    }
  });
  
  try {
    // 1. 测试列表页面
    console.log('1. 测试列表页面...');
    await page.goto('http://localhost:5173/#/pages/video-generator/index', {
      waitUntil: 'networkidle',
      timeout: 30000
    });
    await page.waitForTimeout(3000);
    await page.screenshot({ path: 'test1-list.png', fullPage: true });
    
    const hasListContent = await page.locator('text=视频生成').first().isVisible();
    const hasCreateBtn = await page.locator('text=创建新视频').first().isVisible();
    console.log('   - 页面标题:', hasListContent ? '✅' : '❌');
    console.log('   - 创建按钮:', hasCreateBtn ? '✅' : '❌');
    
    // 2. 进入创建页面
    console.log('\n2. 测试创建页面...');
    await page.goto('http://localhost:5173/#/pages/video-generator/create', {
      waitUntil: 'networkidle',
      timeout: 30000
    });
    await page.waitForTimeout(2000);
    await page.screenshot({ path: 'test2-create.png', fullPage: true });
    
    const hasTitleInput = await page.locator('input[placeholder="给视频起个标题"]').first().isVisible();
    const hasImageBtn = await page.locator('text=添加图片').first().isVisible();
    const hasAudioBtn = await page.locator('text=添加音频').first().isVisible();
    const hasNextBtn = await page.locator('text=下一步').first().isVisible();
    
    console.log('   - 标题输入框:', hasTitleInput ? '✅' : '❌');
    console.log('   - 添加图片按钮:', hasImageBtn ? '✅' : '❌');
    console.log('   - 添加音频按钮:', hasAudioBtn ? '✅' : '❌');
    console.log('   - 下一步按钮:', hasNextBtn ? '✅' : '❌');
    
    // 3. 测试API
    console.log('\n3. 测试后端API...');
    const apiRes = await page.evaluate(async () => {
      try {
        const res = await fetch('http://localhost:3000/api/video/projects');
        const data = await res.json();
        return { ok: res.ok, status: res.status, data };
      } catch (e) {
        return { error: e.message };
      }
    });
    
    if (apiRes.error) {
      console.log('   ❌ API错误:', apiRes.error);
    } else {
      console.log('   ✅ API正常');
      console.log('   - 状态:', apiRes.status);
      console.log('   - 项目数:', apiRes.data?.data?.items?.length || 0);
    }
    
    // 4. 检查错误
    console.log('\n4. 检查JavaScript错误...');
    if (errors.length > 0) {
      console.log('   ⚠️ 发现', errors.length, '个错误:');
      errors.slice(0, 5).forEach((err, i) => {
        console.log(`   ${i + 1}. ${err.substring(0, 100)}`);
      });
    } else {
      console.log('   ✅ 无JavaScript错误');
    }
    
    console.log('\n✅ 测试完成！');
    console.log('截图已保存: test1-list.png, test2-create.png');
    
  } catch (error) {
    console.error('\n❌ 测试失败:', error.message);
    await page.screenshot({ path: 'test-error.png', fullPage: true });
  }
  
  await browser.close();
  process.exit(0);
})();