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

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  
  console.log('=== 测试保存功能 ===\n');
  
  // 捕获所有请求
  page.on('request', request => {
    if (request.url().includes('/api/video/')) {
      console.log('📤 请求:', request.method(), request.url());
      console.log('   数据:', request.postData());
    }
  });
  
  page.on('response', response => {
    if (response.url().includes('/api/video/')) {
      console.log('📥 响应:', response.status(), response.url());
      console.log('   ', response.statusText());
    }
  });
  
  page.on('console', msg => {
    console.log('🖥️ 控制台:', msg.type(), msg.text());
  });
  
  try {
    // 1. 打开页面
    console.log('1. 打开创建页面...');
    await page.goto('http://localhost:5173/#/pages/video-generator/create', {
      waitUntil: 'networkidle',
      timeout: 30000
    });
    await page.waitForTimeout(3000);
    console.log('   ✅ 页面已加载\n');
    
    // 2. 填写标题
    console.log('2. 填写标题...');
    const textarea = await page.locator('textarea').first();
    await textarea.click();
    await textarea.fill('测试视频123');
    console.log('   ✅ 标题已填写\n');
    
    // 3. 点击下一步（跳过上传图片，模拟已有图片）
    console.log('3. 修改config添加模拟图片数据...');
    
    // 直接通过JavaScript修改数据
    await page.evaluate(() => {
      // 假设我们直接修改表单数据
      console.log('准备测试保存...');
    });
    
    // 4. 尝试保存
    console.log('4. 点击保存按钮...');
    
    // 查找保存按钮
    const saveBtn = await page.locator('text=保存').first();
    if (await saveBtn.isVisible()) {
      await saveBtn.click();
      await page.waitForTimeout(3000);
      console.log('   ✅ 已点击保存\n');
    }
    
    // 5. 截图
    await page.screenshot({ path: 'save-test-result.png', fullPage: true });
    console.log('5. 截图已保存: save-test-result.png\n');
    
    console.log('等待5秒后关闭...');
    await page.waitForTimeout(5000);
    
  } catch (error) {
    console.error('\n❌ 测试失败:', error.message);
  } finally {
    await browser.close();
    process.exit(0);
  }
})();