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

test.describe('角色权限管理 E2E 测试', () => {
  let loginPage: LoginPage;
  let dashboardPage: DashboardPage;
  let roleManagementPage: RoleManagementPage;

  test.beforeEach(async ({ page }) => {
    loginPage = new LoginPage(page);
    dashboardPage = new DashboardPage(page);
    roleManagementPage = new RoleManagementPage(page);
    
    await loginPage.goto();
    await loginPage.login('admin', 'admin123');
  });

  test('查看角色列表', async ({ page }) => {
    await page.goto('/roles');
    await page.waitForLoadState('networkidle');
    
    const table = page.locator('.el-table').first();
    await expect(table).toBeVisible();
    
    const roleCount = await page.locator('.el-table__body tr').count();
    expect(roleCount).toBeGreaterThan(0);
  });

  test('角色管理页面导航', async ({ page }) => {
    await test.step('1. 导航到角色管理页面', async () => {
      await page.goto('/roles');
      await page.waitForLoadState('networkidle');
      
      const table = page.locator('.el-table').first();
      await expect(table).toBeVisible();
    });

    await test.step('2. 验证页面标题', async () => {
      const pageTitle = await page.title();
      expect(pageTitle).toContain('Novalon 管理系统');
    });

    await test.step('3. 验证表格结构', async () => {
      const table = page.locator('.el-table').first();
      await expect(table).toBeVisible();
      
      const headers = await page.locator('.el-table__header th').count();
      expect(headers).toBeGreaterThan(0);
    });
  });

  test('角色搜索功能', async ({ page }) => {
    await page.goto('/roles');
    await page.waitForLoadState('networkidle');
    
    const table = page.locator('.el-table').first();
    await expect(table).toBeVisible();
    
    const searchInput = page.locator('input[placeholder*="搜索"]').or(page.locator('.search-input'));
    if (await searchInput.count() > 0) {
      await searchInput.fill('admin');
      await page.waitForTimeout(1000);
      
      const table = page.locator('.el-table').first();
      await expect(table).toBeVisible();
    }
  });

  test('角色详情查看', async ({ page }) => {
    await page.goto('/roles');
    await page.waitForLoadState('networkidle');
    
    const table = page.locator('.el-table').first();
    await expect(table).toBeVisible();
    
    const firstRow = page.locator('.el-table__body tr').first();
    await firstRow.click();
    await page.waitForTimeout(1000);
    
    const currentUrl = page.url();
    expect(currentUrl).toContain('/roles');
  });

  test('角色管理页面刷新', async ({ page }) => {
    await page.goto('/roles');
    await page.waitForLoadState('networkidle');
    
    const table = page.locator('.el-table').first();
    await expect(table).toBeVisible();
    
    await page.reload();
    await page.waitForLoadState('networkidle');
    
    const tableAfterReload = page.locator('.el-table').first();
    await expect(tableAfterReload).toBeVisible();
  });

  test('角色权限验证', async ({ page }) => {
    await test.step('1. 确认管理员已登录', async () => {
      const isLoggedIn = await loginPage.isLoggedIn();
      expect(isLoggedIn).toBe(true);
    });

    await test.step('2. 访问角色管理页面', async () => {
      await page.goto('/roles');
      await page.waitForLoadState('networkidle');
      
      const table = page.locator('.el-table').first();
      await expect(table).toBeVisible();
    });

    await test.step('3. 验证可以查看角色数据', async () => {
      const roleCount = await page.locator('.el-table__body tr').count();
      expect(roleCount).toBeGreaterThan(0);
    });

    await test.step('4. 验证可以访问其他管理页面', async () => {
      await page.goto('/users');
      await page.waitForLoadState('networkidle');
      
      const userTable = page.locator('.el-table').first();
      await expect(userTable).toBeVisible();
    });
  });

  test('角色管理响应式布局', async ({ page }) => {
    await page.goto('/roles');
    await page.waitForLoadState('networkidle');
    
    const table = page.locator('.el-table').first();
    await expect(table).toBeVisible();
    
    await page.setViewportSize({ width: 768, height: 1024 });
    await page.waitForTimeout(1000);
    
    const mobileTable = page.locator('.el-table').first();
    await expect(mobileTable).toBeVisible();
    
    await page.setViewportSize({ width: 1920, height: 1080 });
    await page.waitForTimeout(1000);
    
    const desktopTable = page.locator('.el-table').first();
    await expect(desktopTable).toBeVisible();
  });
});