import { chromium } from 'playwright';

async function manualApiTest() {
  const browser = await chromium.launch({
    headless: false,
    slowMo: 500,
  });

  const context = await browser.newContext();
  const page = await context.newPage();

  // 监听所有网络请求
  page.on('request', (request) => {
    console.log(`📤 请求: ${request.method()} ${request.url()}`);
    if (request.url().includes('localhost:3000')) {
      console.log(`   ⭐ 后端API调用: ${JSON.stringify(request.headers())}`);
    }
  });

  page.on('response', (response) => {
    console.log(`📥 响应: ${response.status()} ${response.url()}`);
    if (response.url().includes('localhost:3000')) {
      console.log(`   ⭐ 后端API响应: ${response.status()}`);
    }
  });

  try {
    console.log('🚀 访问登录页面...');
    await page.goto('http://localhost:5173/auth/login');
    await page.waitForTimeout(3000);

    console.log('🔧 手动触发API调用...');

    // 直接在浏览器控制台中发起API请求
    const result = await page.evaluate(async () => {
      try {
        // 方法1：使用fetch直接调用
        console.log('测试1: 直接fetch调用');
        const response1 = await fetch('http://localhost:3000/auth/login', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            username: 'admin',
            password: '111111',
          }),
        });

        const data1 = await response1.text();
        console.log('直接fetch结果:', response1.status, data1);

        return {
          method1: {
            status: response1.status,
            data: data1,
          },
        };
      } catch (error) {
        console.error('API调用失败:', error);
        return {
          error: error.message,
        };
      }
    });

    console.log('📊 API测试结果:', result);

    // 等待更多请求
    await page.waitForTimeout(5000);

    console.log('✅ 测试完成');
  } catch (error) {
    console.error('❌ 测试失败:', error);
  }

  await page.waitForTimeout(10000);
  await browser.close();
}

manualApiTest().catch(console.error);