/**
 * Dashboard页面E2E测试
 * 
 * 测试仪表盘页面的所有功能和交互
 * 
 * @tags @dashboard @e2e @view
 */

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

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

  test.beforeEach(async ({ page }) => {
    logger = new TestLogger();
    // 先登录
    await page.goto('http://localhost:5174/login');
    await page.fill('input[placeholder="请输入用户名"]', 'admin');
    await page.fill('input[placeholder="请输入密码"]', 'admin123');
    await page.click('button:has-text("登录")');
    await page.waitForURL('**/dashboard');
  });

  test('应该显示仪表盘内容 @smoke', async ({ page }) => {
    // Then: 应该显示仪表盘元素
    await expect(page.locator('.dashboard')).toBeVisible();
    await expect(page.locator('.el-header')).toBeVisible();
    await expect(page.locator('.el-aside')).toBeVisible();
  });

  test('应该显示侧边栏菜单 @smoke', async ({ page }) => {
    // Then: 应该显示菜单项
    await expect(page.locator('.el-menu')).toBeVisible();
    
    // 验证主要菜单项存在
    const menuItems = ['系统管理', '用户管理', '角色管理', '菜单管理'];
    for (const item of menuItems) {
      await expect(page.locator(`.el-menu-item:has-text("${item}")`)).toBeVisible();
    }
  });

  test('应该能够导航到用户管理页面 @regression', async ({ page }) => {
    // When: 点击用户管理菜单
    await page.click('.el-menu-item:has-text("用户管理")');

    // Then: 应该导航到用户管理页面
    await page.waitForURL('**/user-management');
    await expect(page).toHaveURL(/.*user-management/);
  });

  test('应该能够导航到角色管理页面 @regression', async ({ page }) => {
    // When: 点击角色管理菜单
    await page.click('.el-menu-item:has-text("角色管理")');

    // Then: 应该导航到角色管理页面
    await page.waitForURL('**/role-management');
    await expect(page).toHaveURL(/.*role-management/);
  });

  test('应该能够导航到菜单管理页面 @regression', async ({ page }) => {
    // When: 点击菜单管理菜单
    await page.click('.el-menu-item:has-text("菜单管理")');

    // Then: 应该导航到菜单管理页面
    await page.waitForURL('**/menu-management');
    await expect(page).toHaveURL(/.*menu-management/);
  });

  test('应该显示用户信息 @regression', async ({ page }) => {
    // Then: 应该显示用户头像或用户名
    const avatarVisible = await page.locator('.el-avatar').isVisible().catch(() => false);
    const usernameVisible = await page.locator('.username').isVisible().catch(() => false);
    const headerVisible = await page.locator('.el-header').isVisible().catch(() => false);
    
    // 至少有一个元素可见
    expect(avatarVisible || usernameVisible || headerVisible).toBe(true);
  });

  test('应该能够展开/收起侧边栏 @regression', async ({ page }) => {
    // Given: 侧边栏是展开的
    const aside = page.locator('.el-aside');
    const initialWidth = await aside.boundingBox().then(box => box?.width || 200);

    // When: 点击收起按钮（如果存在）
    const collapseBtn = page.locator('.collapse-btn, .hamburger');
    if (await collapseBtn.isVisible().catch(() => false)) {
      await collapseBtn.click();
      
      // Then: 侧边栏应该收起
      const collapsedWidth = await aside.boundingBox().then(box => box?.width || 64);
      expect(collapsedWidth).toBeLessThan(initialWidth);
    }
  });

  test('应该能够退出登录 @critical', async ({ page }) => {
    // When: 点击用户头像或退出按钮
    const userMenu = page.locator('.el-avatar, .user-menu').first();
    if (await userMenu.isVisible()) {
      await userMenu.click();
      
      // 点击退出登录
      const logoutBtn = page.locator('.el-dropdown-menu__item:has-text("退出"), button:has-text("退出")');
      if (await logoutBtn.isVisible().catch(() => false)) {
        await logoutBtn.click();
        
        // Then: 应该跳转到登录页面
        await page.waitForURL('**/login');
        await expect(page).toHaveURL(/.*login/);
      }
    }
  });

  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' }
    ];

    for (const viewport of viewports) {
      await page.setViewportSize({ width: viewport.width, height: viewport.height });
      await page.goto('http://localhost:5174/dashboard');
      
      // Then: 仪表盘应该可见
      await expect(page.locator('.dashboard')).toBeVisible();
      await expect(page.locator('.el-header')).toBeVisible();
    }
  });
});