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

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

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

  test('诊断用户创建流程', async ({ page }) => {
    await loginPage.goto();
    await loginPage.login('admin', 'admin123');
    console.log('=== 开始诊断用户创建流程 ===');
    
    await page.goto('/users');
    await page.waitForLoadState('networkidle');
    await page.waitForSelector('.el-table', { timeout: 10000 });
    
    console.log('1. 导航到用户管理页面成功');
    
    await page.click('button:has-text("新增用户")');
    await page.waitForSelector('.el-dialog', { timeout: 5000 });
    
    console.log('2. 打开新增用户对话框成功');
    
    const timestamp = Date.now();
    const userData = {
      username: `testuser_${timestamp}`,
      password: 'admin123',
      email: `testuser_${timestamp}@test.com`,
      phone: '13800138000',
      nickname: `测试用户${timestamp}`
    };
    
    console.log('3. 准备创建用户:', userData);
    
    const dialog = page.locator('.el-dialog');
    
    await dialog.locator('input').first().fill(userData.username);
    console.log('   - 填写用户名:', userData.username);
    
    await dialog.locator('input[type="password"]').fill(userData.password);
    console.log('   - 填写密码:', userData.password);
    
    await dialog.locator('input').nth(2).fill(userData.nickname);
    console.log('   - 填写昵称:', userData.nickname);
    
    await dialog.locator('input').nth(3).fill(userData.email);
    console.log('   - 填写邮箱:', userData.email);
    
    await dialog.locator('input').nth(4).fill(userData.phone);
    console.log('   - 填写手机号:', userData.phone);
    
    await page.screenshot({ path: `test-results/before-submit-${timestamp}.png` });
    console.log('4. 表单填写完成，截图保存');
    
    const submitButton = dialog.getByRole('button', { name: '确定' });
    
    const [response] = await Promise.all([
      page.waitForResponse(resp => 
        resp.url().includes('/api/users') && 
        resp.request().method() === 'POST',
        { timeout: 10000 }
      ).catch(err => {
        console.log('   ❌ 等待API响应超时:', err.message);
        return null;
      }),
      submitButton.click()
    ]);
    
    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));
      } catch (err) {
        console.log('   - 无法解析响应体:', err.message);
      }
    } else {
      console.log('   ⚠️  没有捕获到API响应');
    }
    
    await page.waitForTimeout(2000);
    
    const successMessage = page.locator('.el-message--success');
    const errorMessage = page.locator('.el-message--error');
    const warningMessage = page.locator('.el-message--warning');
    
    if (await successMessage.count() > 0) {
      const text = await successMessage.first().textContent();
      console.log('   ✅ 成功消息:', text);
    } else if (await errorMessage.count() > 0) {
      const text = await errorMessage.first().textContent();
      console.log('   ❌ 错误消息:', text);
    } else if (await warningMessage.count() > 0) {
      const text = await warningMessage.first().textContent();
      console.log('   ⚠️  警告消息:', text);
    } else {
      console.log('   ℹ️  没有显示任何消息');
    }
    
    await page.screenshot({ path: `test-results/after-submit-${timestamp}.png` });
    console.log('6. 提交后截图保存');
    
    const dialogVisible = await dialog.isVisible();
    console.log('7. 对话框是否可见:', dialogVisible);
    
    if (dialogVisible) {
      console.log('   ℹ️  对话框仍然打开，可能表单验证失败或API返回错误');
      
      const formItems = await dialog.locator('.el-form-item').all();
      console.log('   - 表单项数量:', formItems.length);
      
      for (let i = 0; i < formItems.length; i++) {
        const item = formItems[i];
        const errorText = await item.locator('.el-form-item__error').textContent().catch(() => null);
        if (errorText) {
          const label = await item.locator('.el-form-item__label').textContent();
          console.log(`   - 验证错误 [${label}]: ${errorText}`);
        }
      }
    } else {
      console.log('   ✅ 对话框已关闭');
    }
    
    console.log('=== 诊断完成 ===');
  });
});