import { test, expect } from '@playwright/test';

test.describe('系统配置管理完整工作流', () => {
  test.describe.configure({ mode: 'serial' });

  const timestamp = Date.now();
  const configKey = `test_config_${timestamp}`;
  const configName = `测试配置_${timestamp}`;
  const configValue = `test_value_${timestamp}`;

  test('创建系统配置', async ({ page }) => {
    await test.step('导航到系统配置管理', async () => {
      await page.goto('/dashboard');
      await page.waitForLoadState('networkidle');
      await page.locator('text=系统管理').click();
      await page.waitForTimeout(500);
      await page.locator('text=系统配置').click();
      await page.waitForLoadState('networkidle');
      await expect(page).toHaveURL(/.*configs/, { timeout: 10000 });
    });

    await test.step('点击新增配置按钮', async () => {
      await page.locator('button:has-text("新增配置")').click();
      await page.waitForSelector('.el-dialog', { state: 'visible', timeout: 5000 });
    });

    await test.step('填写配置信息', async () => {
      const dialog = page.locator('.el-dialog');
      await dialog.locator('input').first().fill(configName);
      await dialog.locator('input').nth(1).fill(configKey);
      await dialog.locator('input').nth(2).fill(configValue);
      await dialog.locator('textarea').fill(`这是测试配置的备注信息，用于验证配置管理功能。时间戳：${timestamp}`);
    });

    await test.step('提交配置表单', async () => {
      await page.locator('.el-dialog button:has-text("确定")').click();
      await page.waitForSelector('.el-dialog', { state: 'hidden', timeout: 10000 });
      await expect(page.locator('.el-message--success')).toBeVisible({ timeout: 5000 });
    });

    await test.step('验证配置已创建', async () => {
      await page.locator('input[placeholder="请输入配置名称"]').fill(configName);
      await page.locator('button:has-text("查询")').click();
      await page.waitForLoadState('networkidle');
      
      const configRow = page.locator(`tr:has-text("${configName}")`);
      await expect(configRow).toBeVisible({ timeout: 10000 });
      await expect(configRow.locator('td').nth(1)).toHaveText(configKey);
      await expect(configRow.locator('td').nth(2)).toHaveText(configValue);
    });
  });

  test('编辑系统配置', async ({ page }) => {
    const updatedValue = `updated_value_${timestamp}`;

    await test.step('导航到系统配置管理', async () => {
      await page.goto('/dashboard');
      await page.waitForLoadState('networkidle');
      await page.locator('text=系统管理').click();
      await page.waitForTimeout(500);
      await page.locator('text=系统配置').click();
      await page.waitForLoadState('networkidle');
    });

    await test.step('搜索并编辑配置', async () => {
      await page.locator('input[placeholder="请输入配置名称"]').fill(configName);
      await page.locator('button:has-text("查询")').click();
      await page.waitForLoadState('networkidle');
      
      const configRow = page.locator(`tr:has-text("${configName}")`);
      await configRow.locator('button:has-text("编辑")').click();
      await page.waitForSelector('.el-dialog', { state: 'visible', timeout: 5000 });
    });

    await test.step('修改配置值', async () => {
      const dialog = page.locator('.el-dialog');
      await dialog.locator('input').nth(2).fill(updatedValue);
      await dialog.locator('textarea').fill(`这是更新后的配置备注，时间戳：${timestamp}`);
    });

    await test.step('提交更新', async () => {
      await page.locator('.el-dialog button:has-text("确定")').click();
      await page.waitForSelector('.el-dialog', { state: 'hidden', timeout: 10000 });
      await expect(page.locator('.el-message--success')).toBeVisible({ timeout: 5000 });
    });

    await test.step('验证配置已更新', async () => {
      await page.locator('input[placeholder="请输入配置名称"]').fill(configName);
      await page.locator('button:has-text("查询")').click();
      await page.waitForLoadState('networkidle');
      
      const configRow = page.locator(`tr:has-text("${configName}")`);
      await expect(configRow.locator('td').nth(2)).toHaveText(updatedValue);
    });
  });

  test('删除系统配置', async ({ page }) => {
    await test.step('导航到系统配置管理', async () => {
      await page.goto('/dashboard');
      await page.waitForLoadState('networkidle');
      await page.locator('text=系统管理').click();
      await page.waitForTimeout(500);
      await page.locator('text=系统配置').click();
      await page.waitForLoadState('networkidle');
    });

    await test.step('搜索并删除配置', async () => {
      await page.locator('input[placeholder="请输入配置名称"]').fill(configName);
      await page.locator('button:has-text("查询")').click();
      await page.waitForLoadState('networkidle');
      
      const configRow = page.locator(`tr:has-text("${configName}")`);
      await configRow.locator('button:has-text("删除")').click();
      await page.waitForSelector('.el-message-box', { state: 'visible', timeout: 5000 });
    });

    await test.step('确认删除', async () => {
      await page.locator('.el-message-box button:has-text("确定")').click();
      await page.waitForSelector('.el-message-box', { state: 'hidden', timeout: 10000 });
      await expect(page.locator('.el-message--success')).toBeVisible({ timeout: 5000 });
    });

    await test.step('验证配置已删除', async () => {
      await page.locator('input[placeholder="请输入配置名称"]').fill(configName);
      await page.locator('button:has-text("查询")').click();
      await page.waitForLoadState('networkidle');
      
      const emptyText = page.locator('text=暂无数据');
      await expect(emptyText).toBeVisible({ timeout: 10000 });
    });
  });

  test('配置管理权限验证', async ({ page }) => {
    await test.step('验证配置管理页面访问权限', async () => {
      await page.goto('/configs');
      await page.waitForLoadState('networkidle');
      
      // 验证页面标题
      await expect(page.locator('h1:has-text("系统配置管理")')).toBeVisible({ timeout: 5000 });
      
      // 验证功能按钮可见性
      await expect(page.locator('button:has-text("新增配置")')).toBeVisible();
      await expect(page.locator('button:has-text("查询")')).toBeVisible();
      
      // 验证表格列头
      await expect(page.locator('th:has-text("配置名称")')).toBeVisible();
      await expect(page.locator('th:has-text("配置键")')).toBeVisible();
      await expect(page.locator('th:has-text("配置值")')).toBeVisible();
      await expect(page.locator('th:has-text("操作")')).toBeVisible();
    });

    await test.step('验证配置搜索功能', async () => {
      const searchInput = page.locator('input[placeholder="请输入配置名称"]');
      await expect(searchInput).toBeVisible();
      
      const searchButton = page.locator('button:has-text("查询")');
      await expect(searchButton).toBeVisible();
      
      // 测试搜索功能
      await searchInput.fill('test');
      await searchButton.click();
      await page.waitForLoadState('networkidle');
      
      // 验证搜索结果
      const table = page.locator('.el-table');
      await expect(table).toBeVisible();
    });
  });
});