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

test.describe('系统配置E2E测试', () => {
  let loginPage: LoginPage;
  let configPage: SystemConfigPage;

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

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

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

  test('系统配置页面导航', async ({ page }) => {
    await test.step('导航到系统配置页面', async () => {
      await configPage.goto();
      await expect(page).toHaveURL(/.*config/);
    });

    await test.step('验证页面元素可见', async () => {
      await expect(configPage.table).toBeVisible();
      await expect(configPage.addButton).toBeVisible();
      await expect(configPage.searchInput).toBeVisible();
    });
  });

  test('创建系统配置', async ({ page }) => {
    await test.step('导航到系统配置页面', async () => {
      await configPage.goto();
    });

    await test.step('创建新系统配置', async () => {
      const configName = `测试配置_${Date.now()}`;
      const configKey = `test.config.${Date.now()}`;
      const configValue = `test_value_${Date.now()}`;
      
      await configPage.addConfig(configName, configKey, configValue);
      
      await configPage.verifyTableContains(configName);
    });
  });

  test('编辑系统配置', async ({ page }) => {
    await test.step('导航到系统配置页面', async () => {
      await configPage.goto();
    });

    await test.step('编辑现有系统配置', async () => {
      const configKey = 'system.site.name';
      const newValue = `Novalon管理系统_${Date.now()}`;
      
      await configPage.editConfig(configKey, newValue);
      
      await configPage.verifyTableContains(newValue);
    });
  });

  test('删除系统配置', async ({ page }) => {
    await test.step('导航到系统配置页面', async () => {
      await configPage.goto();
    });

    await test.step('删除系统配置', async () => {
      const configName = `测试配置_${Date.now()}`;
      const configKey = `test.config.${Date.now()}`;
      const configValue = `test_value_${Date.now()}`;
      
      await configPage.addConfig(configName, configKey, configValue);
      await configPage.verifyTableContains(configName);
      
      await configPage.deleteConfig(configKey);
      await configPage.verifyTableNotContains(configName);
    });
  });

  test('搜索系统配置', async ({ page }) => {
    await test.step('导航到系统配置页面', async () => {
      await configPage.goto();
    });

    await test.step('搜索系统配置', async () => {
      const configName = '系统名称';
      
      await configPage.searchConfig(configName);
      await configPage.verifyTableContains(configName);
    });

    await test.step('清除搜索', async () => {
      await configPage.clearSearch();
      const rowCount = await configPage.getTableRowCount();
      expect(rowCount).toBeGreaterThan(0);
    });
  });

  test('系统配置分页功能', async ({ page }) => {
    await test.step('导航到系统配置页面', async () => {
      await configPage.goto();
    });

    await test.step('验证表格数据加载', async () => {
      const rowCount = await configPage.getTableRowCount();
      expect(rowCount).toBeGreaterThan(0);
    });
  });

  test('系统配置响应式布局', async ({ page }) => {
    await test.step('导航到系统配置页面', async () => {
      await configPage.goto();
    });

    await test.step('验证桌面端布局', async () => {
      await page.setViewportSize({ width: 1280, height: 720 });
      await expect(configPage.table).toBeVisible();
      await expect(configPage.addButton).toBeVisible();
    });

    await test.step('验证平板端布局', async () => {
      await page.setViewportSize({ width: 768, height: 1024 });
      await expect(configPage.table).toBeVisible();
      await expect(configPage.addButton).toBeVisible();
    });

    await test.step('验证移动端布局', async () => {
      await page.setViewportSize({ width: 375, height: 667 });
      await expect(configPage.table).toBeVisible();
    });
  });

  test('系统配置权限验证', async ({ page }) => {
    await test.step('导航到系统配置页面', async () => {
      await configPage.goto();
    });

    await test.step('验证添加按钮可见性', async () => {
      await expect(configPage.addButton).toBeVisible();
    });

    await test.step('验证编辑和删除按钮可见性', async () => {
      const rows = await configPage.table.locator('.el-table__row').count();
      if (rows > 0) {
        await expect(configPage.table).toBeVisible();
      }
    });
  });

  test('系统配置数据验证', async ({ page }) => {
    await test.step('导航到系统配置页面', async () => {
      await configPage.goto();
    });

    await test.step('验证配置键名唯一性', async () => {
      const configName = `测试配置_${Date.now()}`;
      const configKey = `test.config.${Date.now()}`;
      const configValue = `test_value_${Date.now()}`;
      
      await configPage.addConfig(configName, configKey, configValue);
      await configPage.verifyTableContains(configName);
    });

    await test.step('验证配置值格式正确', async () => {
      const rows = await configPage.table.locator('.el-table__row').count();
      expect(rows).toBeGreaterThan(0);
    });
  });
});