// Playwright 自动测试 - 真实模拟用户操作
// 用 click/fill 真实触发按钮，不用 page.evaluate

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

const out = (msg) => fs.appendFileSync('test-output.log', msg + '\n');

(async () => {
  fs.writeFileSync('test-output.log', '');
  out('🚀 真实模拟用户操作测试\n');

  const browser = await chromium.launch({
    headless: false,
    args: ['--use-fake-ui-for-media-stream', '--use-fake-device-for-media-stream'],
  });

  const context = await browser.newContext({
    permissions: ['microphone'],
  });

  const page = await context.newPage();

  page.on('console', msg => {
    const text = msg.text();
    if (!text.includes('KeyVault') && !text.includes('favicon')) {
      out(`[${msg.type()}] ${text}`);
    }
  });
  page.on('pageerror', err => out(`[PAGE ERROR] ${err.message}`));

  // 访问页面
  await page.goto('http://localhost:3000/test/', { waitUntil: 'networkidle' });
  await page.waitForTimeout(2000);
  out('📄 页面加载\n');

  // ========== 测试 1：点录音按钮 ==========
  out('\n━━━━━━━━━ 测试 1: 录音按钮 ━━━━━━━━━');
  await page.click('#br');
  await page.waitForTimeout(2000);
  await page.click('#bs');
  await page.waitForTimeout(1000);
  out('✅ 录音按钮测试完成');

  // ========== 测试 2：手动输入 ASR ==========
  out('\n━━━━━━━━━ 测试 2: 手动输入 ASR ━━━━━━━━━');
  // 直接修改 ASR 文本框内容（模拟用户填了文字）
  await page.evaluate(() => {
    const at = document.getElementById('at');
    at.textContent = '你好世界';
    at.classList.remove('e');
  });
  await page.waitForTimeout(500);
  const asrValue = await page.locator('#at').textContent();
  out(`📝 ASR 文本框: "${asrValue}"`);

  // ========== 测试 3：点完整流程按钮 ==========
  out('\n━━━━━━━━━ 测试 3: 点完整流程按钮 ━━━━━━━━━');
  // 重要：用 click 触发真实 onclick
  await page.click('#bf');
  out('🖱️ 按钮已点击');

  // 立即检查状态
  await page.waitForTimeout(500);
  const status1 = await page.locator('#ts').textContent();
  out(`状态 1: "${status1}"`);

  await page.waitForTimeout(2000);
  const status2 = await page.locator('#ts').textContent();
  out(`状态 2: "${status2}"`);

  await page.waitForTimeout(5000);
  const status3 = await page.locator('#ts').textContent();
  out(`状态 3: "${status3}"`);

  // 检查 LLM 文本框
  const llmValue = await page.locator('#lt').textContent();
  out(`🤖 LLM 文本框: "${llmValue.substring(0, 100)}${llmValue.length > 100 ? '...' : ''}"`);

  // 等待 TTS 完成
  await page.waitForTimeout(20000);

  // 最终状态
  const finalStatus = await page.locator('#ts').textContent();
  const audioSrc = await page.locator('#ta').getAttribute('src');
  const ttsUrl = await page.locator('#tu').textContent();
  out(`\n最终状态: "${finalStatus}"`);
  out(`音频 src: "${audioSrc}"`);
  out(`URL 显示: "${ttsUrl}"`);

  // 截图
  await page.screenshot({ path: 'test-result-final.png', fullPage: true });

  // 获取页面日志
  const pageLog = await page.locator('#log').textContent();
  out(`\n📋 完整页面日志:\n${pageLog}`);

  await browser.close();
  out('\n✅ 测试完成');
})().catch(err => {
  out('❌ 测试失败: ' + err.message);
  out(err.stack);
});