import { test, expect } from '@playwright/test';

test.describe('登录诊断测试', () => {
  test('诊断登录流程', async ({ page }) => {
    console.log('=== 开始诊断登录流程 ===');
    
    // 导航到登录页面
    await page.goto('/login');
    console.log('1. 导航到登录页面');
    
    // 等待页面加载完成
    await page.waitForLoadState('networkidle');
    console.log('2. 页面加载完成');
    
    // 监听API响应
    const [response] = await Promise.all([
      page.waitForResponse(resp => 
        resp.url().includes('/api/auth/login') && 
        resp.request().method() === 'POST',
        { timeout: 15000 }
      ).catch(err => {
        console.log('   ❌ 等待登录API响应超时:', err.message);
        return null;
      }),
      (async () => {
        // 填写登录表单
        await page.fill('input[placeholder="请输入用户名"]', 'admin');
        console.log('3. 填写用户名: admin');
        
        await page.fill('input[placeholder="请输入密码"]', 'admin123');
        console.log('4. 填写密码: admin123');
        
        // 点击登录按钮
        await page.click('button:has-text("登录")');
        console.log('5. 点击登录按钮');
      })()
    ]);
    
    if (response) {
      console.log('   ✅ 捕获到登录API响应');
      console.log('   - 状态码:', response.status());
      console.log('   - URL:', response.url());
      
      try {
        const responseBody = await response.json();
        console.log('   - 响应体:', JSON.stringify(responseBody, null, 2));
        
        // 检查响应格式
        if (responseBody.token) {
          console.log('   ✅ 响应包含token');
        } else {
          console.log('   ❌ 响应不包含token');
        }
        
        if (responseBody.userId) {
          console.log('   ✅ 响应包含userId:', responseBody.userId);
        } else {
          console.log('   ⚠️  响应不包含userId');
        }
        
        if (responseBody.username) {
          console.log('   ✅ 响应包含username:', responseBody.username);
        } else {
          console.log('   ⚠️  响应不包含username');
        }
      } catch (err) {
        console.log('   ❌ 无法解析响应体:', err.message);
      }
    } else {
      console.log('   ❌ 没有捕获到登录API响应');
    }
    
    // 等待一段时间，观察页面变化
    await page.waitForTimeout(3000);
    
    // 检查当前URL
    const currentUrl = page.url();
    console.log('6. 当前URL:', currentUrl);
    
    // 检查localStorage中的token
    const token = await page.evaluate(() => localStorage.getItem('token'));
    console.log('7. Token in localStorage:', token ? '✅ 存在' : '❌ 不存在');
    if (token) {
      console.log('   - Token前20字符:', token.substring(0, 20));
    }
    
    // 检查localStorage中的userId
    const userId = await page.evaluate(() => localStorage.getItem('userId'));
    console.log('8. UserId in localStorage:', userId || '❌ 不存在');
    
    // 检查localStorage中的username
    const username = await page.evaluate(() => localStorage.getItem('username'));
    console.log('9. Username in localStorage:', username || '❌ 不存在');
    
    // 检查是否有错误消息
    const errorMessages = await page.locator('.el-message--error').allTextContents();
    if (errorMessages.length > 0) {
      console.log('   ⚠️  发现错误消息:', errorMessages);
    }
    
    // 检查成功消息
    const successMessages = await page.locator('.el-message--success').allTextContents();
    if (successMessages.length > 0) {
      console.log('   ✅ 发现成功消息:', successMessages);
    }
    
    // 截图
    await page.screenshot({ path: `test-results/login-diagnostic-${Date.now()}.png` });
    console.log('10. 截图已保存');
    
    console.log('=== 诊断完成 ===');
    
    // 验证登录是否成功
    expect(token).toBeTruthy();
    expect(currentUrl).not.toContain('/login');
  });
});