import { test, expect } from '@playwright/test';
import { LoginPage } from './pages/LoginPage';
import { UserManagementPage } from './pages/UserManagementPage';

test.describe('用户创建诊断测试', () => {
  let loginPage: LoginPage;
  let userManagementPage: UserManagementPage;

  test.beforeEach(async ({ page }) => {
    loginPage = new LoginPage(page);
    userManagementPage = new UserManagementPage(page);
  });

  test('诊断用户创建流程', async ({ page }) => {
    console.log('=== 开始诊断用户创建流程 ===');
    
    // 登录
    await loginPage.goto();
    await loginPage.login('admin', 'admin123');
    console.log('1. 登录成功');
    
    // 导航到用户管理页面
    await userManagementPage.goto();
    await userManagementPage.waitForTableReady();
    console.log('2. 导航到用户管理页面成功');
    
    // 点击新增用户按钮
    await userManagementPage.clickCreateUser();
    console.log('3. 点击新增用户按钮成功');
    
    // 生成唯一用户名
    const uuid = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
    const username = `diag_${uuid}`;
    const userData = {
      username: username,
      password: 'admin123',
      email: `${username}@test.com`,
      phone: '13800138000',
      nickname: `诊断用户${Date.now()}`
    };
    
    console.log('4. 准备创建用户:', userData);
    
    // 填写表单
    await userManagementPage.fillUserForm(userData);
    console.log('5. 填写表单成功');
    
    // 监听API响应
    const [response] = await Promise.all([
      page.waitForResponse(resp => 
        resp.url().includes('/api/users') && 
        resp.request().method() === 'POST',
        { timeout: 15000 }
      ).catch(err => {
        console.log('   ❌ 等待API响应超时:', err.message);
        return null;
      }),
      userManagementPage.submitForm()
    ]);
    
    console.log('6. 提交表单');
    
    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));
      } catch (err) {
        console.log('   - 无法解析响应体:', err.message);
      }
    } else {
      console.log('   ⚠️  没有捕获到API响应');
    }
    
    // 等待成功消息
    const success = await userManagementPage.waitForSuccessMessage(15000);
    console.log('7. 等待成功消息:', success ? '✅ 成功' : '❌ 失败');
    
    // 检查页面状态
    await page.screenshot({ path: `test-results/diagnostic-after-submit-${Date.now()}.png` });
    console.log('8. 截图已保存');
    
    // 检查是否有错误消息
    const errorMessages = await page.locator('.el-message--error').allTextContents();
    if (errorMessages.length > 0) {
      console.log('   ⚠️  发现错误消息:', errorMessages);
    }
    
    // 检查对话框是否关闭
    const dialogVisible = await page.locator('.el-dialog').isVisible();
    console.log('9. 对话框状态:', dialogVisible ? '仍然打开' : '已关闭');
    
    // 搜索新创建的用户
    await userManagementPage.search(username);
    await page.waitForTimeout(2000);
    
    const found = await userManagementPage.containsText(username);
    console.log('10. 搜索新用户:', found ? '✅ 找到' : '❌ 未找到');
    
    console.log('=== 诊断完成 ===');
    
    expect(success).toBeTruthy();
    expect(found).toBeTruthy();
  });
});