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

test.describe('Dashboard操作日志显示验证', () => {
  let loginPage: LoginPage;
  let dashboardPage: DashboardPage;

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

    await loginPage.goto();
    await loginPage.login('admin', 'admin123');
    await expect(page).toHaveURL(/.*dashboard/);
  });

  test.afterEach(async ({ page }) => {
    await loginPage.logout();
  });

  test('Dashboard应显示操作日志统计卡片', async ({ page }) => {
    await test.step('验证操作日志统计卡片存在', async () => {
      const operationLogCard = page.locator('.stat-card.log-card');
      await expect(operationLogCard).toBeVisible();
    });

    await test.step('验证操作日志统计标题', async () => {
      const title = page.locator('.stat-card.log-card .el-statistic__head');
      await expect(title).toContainText('操作日志');
    });

    await test.step('验证操作日志统计数值', async () => {
      const value = page.locator('.stat-card.log-card .el-statistic__number');
      await expect(value).toBeVisible();
      const countText = await value.textContent();
      expect(countText).not.toBeNull();
      const count = parseInt(countText!);
      expect(count).toBeGreaterThanOrEqual(0);
    });
  });

  test('Dashboard应显示其他统计卡片', async ({ page }) => {
    await test.step('验证用户总数卡片', async () => {
      const userCard = page.locator('.stat-card.user-card');
      await expect(userCard).toBeVisible();
      const title = userCard.locator('.el-statistic__head');
      await expect(title).toContainText('用户总数');
    });

    await test.step('验证角色总数卡片', async () => {
      const roleCard = page.locator('.stat-card.role-card');
      await expect(roleCard).toBeVisible();
      const title = roleCard.locator('.el-statistic__head');
      await expect(title).toContainText('角色总数');
    });

    await test.step('验证今日登录卡片', async () => {
      const loginCard = page.locator('.stat-card.login-card');
      await expect(loginCard).toBeVisible();
      const title = loginCard.locator('.el-statistic__head');
      await expect(title).toContainText('今日登录');
    });
  });

  test('Dashboard统计卡片应显示图标', async ({ page }) => {
    await test.step('验证操作日志图标', async () => {
      const icon = page.locator('.stat-card.log-card .stat-icon');
      await expect(icon).toBeVisible();
    });

    await test.step('验证用户图标', async () => {
      const icon = page.locator('.stat-card.user-card .stat-icon');
      await expect(icon).toBeVisible();
    });

    await test.step('验证角色图标', async () => {
      const icon = page.locator('.stat-card.role-card .stat-icon');
      await expect(icon).toBeVisible();
    });

    await test.step('验证登录图标', async () => {
      const icon = page.locator('.stat-card.login-card .stat-icon');
      await expect(icon).toBeVisible();
    });
  });

  test('Dashboard统计卡片应有悬停效果', async ({ page }) => {
    await test.step('验证操作日志卡片悬停效果', async () => {
      const card = page.locator('.stat-card.log-card');
      await card.hover();
      await page.waitForTimeout(500);
      await expect(card).toBeVisible();
    });
  });

  test('Dashboard应显示最近登录记录', async ({ page }) => {
    await test.step('验证最近登录卡片存在', async () => {
      const recentLoginCard = page.locator('.recent-login-card');
      await expect(recentLoginCard).toBeVisible();
    });

    await test.step('验证最近登录标题', async () => {
      const title = page.locator('.recent-login-card .card-title');
      await expect(title).toContainText('最近登录');
    });
  });

  test('Dashboard应显示系统信息', async ({ page }) => {
    await test.step('验证系统信息卡片存在', async () => {
      const systemInfoCard = page.locator('.system-info-card');
      await expect(systemInfoCard).toBeVisible();
    });

    await test.step('验证系统信息标题', async () => {
      const title = page.locator('.system-info-card .card-title');
      await expect(title).toContainText('系统信息');
    });

    await test.step('验证系统版本显示', async () => {
      const versionItem = page.locator('.system-info-card').getByText('系统版本');
      await expect(versionItem).toBeVisible();
    });

    await test.step('验证Java版本显示', async () => {
      const javaItem = page.locator('.system-info-card').getByText('Java版本');
      await expect(javaItem).toBeVisible();
    });

    await test.step('验证前端框架显示', async () => {
      const frontendItem = page.locator('.system-info-card').getByText('前端框架');
      await expect(frontendItem).toBeVisible();
    });

    await test.step('验证数据库显示', async () => {
      const dbItem = page.locator('.system-info-card').getByText('数据库');
      await expect(dbItem).toBeVisible();
    });
  });

  test('Dashboard操作日志统计应正确反映实际数据', async ({ page }) => {
    await test.step('获取Dashboard显示的操作日志数量', async () => {
      const value = page.locator('.stat-card.log-card .el-statistic__number');
      await expect(value).toBeVisible();
      const countText = await value.textContent();
      expect(countText).not.toBeNull();
      const dashboardCount = parseInt(countText!);
      expect(dashboardCount).toBeGreaterThanOrEqual(0);
    });
  });

  test('Dashboard页面加载性能', async ({ page }) => {
    await test.step('验证页面加载时间', async () => {
      const startTime = Date.now();
      await dashboardPage.goto();
      const loadTime = Date.now() - startTime;
      expect(loadTime).toBeLessThan(10000);
    });

    await test.step('验证统计卡片加载', async () => {
      const cards = page.locator('.stat-card');
      await expect(cards.first()).toBeVisible({ timeout: 5000 });
    });
  });

  test('Dashboard响应式布局验证', async ({ page }) => {
    await test.step('验证桌面端布局', async () => {
      await page.setViewportSize({ width: 1280, height: 720 });
      const cards = page.locator('.stat-card');
      expect(await cards.count()).toBe(4);
    });

    await test.step('验证平板端布局', async () => {
      await page.setViewportSize({ width: 768, height: 1024 });
      const cards = page.locator('.stat-card');
      expect(await cards.count()).toBe(4);
    });

    await test.step('验证移动端布局', async () => {
      await page.setViewportSize({ width: 375, height: 667 });
      const cards = page.locator('.stat-card');
      expect(await cards.count()).toBe(4);
    });
  });
});