/**
 * Login页面E2E测试
 * 
 * 测试登录页面的所有功能和交互
 * 
 * @tags @login @auth @e2e @view
 */

import { test, expect } from '@playwright/test';
import { TestLogger } from '../core/test-logger.js';

test.describe('E2E: Login页面', () => {
  let logger: TestLogger;

  test.beforeEach(async ({ page }) => {
    logger = new TestLogger();
    await page.goto('http://localhost:5174/login');
    await page.waitForLoadState('networkidle');
  });

  test('应该显示登录表单 @smoke', async ({ page }) => {
    // Then: 应该显示登录表单元素
    await expect(page.locator('input[placeholder="请输入用户名"]')).toBeVisible();
    await expect(page.locator('input[placeholder="请输入密码"]')).toBeVisible();
    await expect(page.locator('button:has-text("登录")')).toBeVisible();
  });

  test('应该能够成功登录 @critical', async ({ page }) => {
    // Given: 输入有效的登录凭据
    await page.fill('input[placeholder="请输入用户名"]', 'admin');
    await page.fill('input[placeholder="请输入密码"]', 'admin123');

    // When: 点击登录按钮
    await page.click('button:has-text("登录")');

    // Then: 应该跳转到仪表盘
    await page.waitForURL('**/dashboard');
    await expect(page).toHaveURL(/.*dashboard/);
  });

  test('应该显示错误消息当凭据无效 @regression', async ({ page }) => {
    // Given: 输入无效的登录凭据
    await page.fill('input[placeholder="请输入用户名"]', 'invalid');
    await page.fill('input[placeholder="请输入密码"]', 'wrongpassword');

    // When: 点击登录按钮
    await page.click('button:has-text("登录")');

    // Then: 应该显示错误消息
    await expect(page.locator('.el-message--error')).toBeVisible();
  });

  test('应该验证必填字段 @regression', async ({ page }) => {
    // When: 直接点击登录按钮（不输入任何内容）
    await page.click('button:has-text("登录")');

    // Then: 应该显示验证错误
    await expect(page.locator('.el-form-item__error')).toBeVisible();
  });

  test('应该记住用户名当勾选记住我 @regression', async ({ page, context }) => {
    // Given: 输入凭据并勾选记住我
    await page.fill('input[placeholder="请输入用户名"]', 'admin');
    await page.fill('input[placeholder="请输入密码"]', 'admin123');
    
    // 勾选记住我（如果存在）
    const rememberMe = page.locator('input[type="checkbox"]').first();
    if (await rememberMe.isVisible().catch(() => false)) {
      await rememberMe.check();
    }

    // When: 登录
    await page.click('button:has-text("登录")');
    await page.waitForURL('**/dashboard');

    // Then: 重新打开登录页面应该记住用户名
    await page.goto('http://localhost:5174/login');
    const usernameInput = page.locator('input[placeholder="请输入用户名"]');
    await expect(usernameInput).toHaveValue('admin');
  });

  test('应该在不同视口下正常显示 @responsive', async ({ page }) => {
    // Given: 不同视口尺寸
    const viewports = [
      { width: 1920, height: 1080, name: 'desktop' },
      { width: 1366, height: 768, name: 'laptop' },
      { width: 768, height: 1024, name: 'tablet' },
      { width: 375, height: 667, name: 'mobile' }
    ];

    for (const viewport of viewports) {
      await page.setViewportSize({ width: viewport.width, height: viewport.height });
      await page.goto('http://localhost:5174/login');
      
      // Then: 登录表单应该可见
      await expect(page.locator('input[placeholder="请输入用户名"]')).toBeVisible();
      await expect(page.locator('input[placeholder="请输入密码"]')).toBeVisible();
    }
  });
});