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

(async () => {
  const browser = await chromium.launch({ headless: false }); // 显示浏览器窗口
  const context = await browser.newContext();
  const page = await context.newPage();
  
  console.log('=== 视频生成功能完整测试 ===\n');
  
  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: 'step1-list-page.png', fullPage: true });
    console.log('   ✅ 页面加载成功，已保存截图: step1-list-page.png');
    
    // 检查控制台错误
    const errors = [];
    page.on('console', msg => {
      if (msg.type() === 'error') {
        errors.push(msg.text());
      }
    });
    
    // 2. 点击创建新视频按钮
    console.log('\n2. 点击创建新视频按钮...');
    const createBtn = await page.locator('text=创建新视频').first();
    if (await createBtn.isVisible()) {
      await createBtn.click();
      await page.waitForTimeout(2000);
      await page.screenshot({ path: 'step2-create-page.png', fullPage: true });
      console.log('   ✅ 进入创建页面，已保存截图: step2-create-page.png');
    } else {
      console.log('   ⚠️ 未找到创建按钮');
    }
    
    // 3. 输入标题
    console.log('\n3. 输入视频标题...');
    const titleInput = await page.locator('input[placeholder="给视频起个标题"]').first();
    if (await titleInput.isVisible()) {
      await titleInput.fill('自动化测试视频');
      console.log('   ✅ 标题输入成功');
    } else {
      console.log('   ⚠️ 未找到标题输入框');
    }
    
    // 4. 检查页面结构
    console.log('\n4. 检查页面结构...');
    const stepNav = await page.locator('.step-nav').isVisible();
    const addImageBtn = await page.locator('text=添加图片').isVisible();
    const addAudioBtn = await page.locator('text=添加音频').isVisible();
    const nextBtn = await page.locator('text=下一步').isVisible();
    
    console.log('   - 步骤导航:', stepNav ? '✅' : '❌');
    console.log('   - 添加图片按钮:', addImageBtn ? '✅' : '❌');
    console.log('   - 添加音频按钮:', addAudioBtn ? '✅' : '❌');
    console.log('   - 下一步按钮:', nextBtn ? '✅' : '❌');
    
    // 5. 点击下一步到第二步
    console.log('\n5. 跳转到第二步...');
    if (nextBtn) {
      await page.locator('text=下一步').click();
      await page.waitForTimeout(1000);
      await page.screenshot({ path: 'step3-step2.png', fullPage: true });
      console.log('   ✅ 已进入第二步，已保存截图: step3-step2.png');
    }
    
    // 6. 点击下一步到第三步
    console.log('\n6. 跳转到第三步（生成页面）...');
    const nextBtn2 = await page.locator('text=下一步').isVisible();
    if (nextBtn2) {
      await page.locator('text=下一步').click();
      await page.waitForTimeout(1000);
      await page.screenshot({ path: 'step4-step3.png', fullPage: true });
      console.log('   ✅ 已进入第三步，已保存截图: step4-step3.png');
    }
    
    // 7. 检查生成按钮
    console.log('\n7. 检查生成按钮...');
    const generateBtn = await page.locator('text=开始生成视频').isVisible();
    console.log('   - 生成按钮:', generateBtn ? '✅' : '❌');
    
    // 8. 检查控制台错误
    console.log('\n8. 检查控制台错误...');
    if (errors.length > 0) {
      console.log('   ⚠️ 发现控制台错误:');
      errors.forEach((err, i) => {
        console.log(`   ${i + 1}. ${err}`);
      });
    } else {
      console.log('   ✅ 无控制台错误');
    }
    
    // 9. 测试API连接
    console.log('\n9. 测试后端API...');
    const apiTest = await page.evaluate(async () => {
      try {
        const res = await fetch('http://localhost:3000/api/video/projects');
        const data = await res.json();
        return { status: res.status, success: data.success, data: data.data };
      } catch (e) {
        return { error: e.message };
      }
    });
    
    if (apiTest.error) {
      console.log('   ❌ API连接失败:', apiTest.error);
    } else {
      console.log('   ✅ API连接成功');
      console.log('   - 状态码:', apiTest.status);
      console.log('   - 响应格式正确:', apiTest.success ? '✅' : '❌');
      console.log('   - 项目数量:', apiTest.data?.items?.length || 0);
    }
    
    // 10. 总结
    console.log('\n' + '='.repeat(50));
    console.log('测试完成！');
    console.log('='.repeat(50));
    console.log('\n截图已保存:');
    console.log('- step1-list-page.png - 列表页面');
    console.log('- step2-create-page.png - 创建页面');
    console.log('- step3-step2.png - 第二步（效果配置）');
    console.log('- step4-step3.png - 第三步（生成）');
    
  } catch (error) {
    console.error('\n❌ 测试失败:', error.message);
    await page.screenshot({ path: 'error-screenshot.png', fullPage: true });
    console.log('错误截图已保存: error-screenshot.png');
  } finally {
    console.log('\n按 Enter 键关闭浏览器...');
    await new Promise(resolve => {
      process.stdin.once('data', () => {
        browser.close();
        resolve();
      });
    });
  }
})();