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

test.describe('调试创建角色功能', () => {
  test('调试创建角色流程', async ({ page }) => {
    const timestamp = Date.now();
    const roleName = `测试角色_${timestamp}`;
    const roleKey = `test_role_${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 expect(page).toHaveURL(/.*roles/, { timeout: 10000 });
    });

    await test.step('点击创建角色按钮', async () => {
      await page.locator('button:has-text("新增角色")').click();
      await page.waitForSelector('.el-dialog', { state: 'visible', timeout: 5000 });
      await page.screenshot({ path: 'test-results/debug-1-dialog-opened.png' });
    });

    await test.step('填写角色信息', async () => {
      const dialog = page.locator('.el-dialog');

      const roleNameInput = dialog.locator('input').first();
      await roleNameInput.fill(roleName);
      await roleNameInput.blur();
      await page.waitForTimeout(300);
      await page.screenshot({ path: 'test-results/debug-2-filled-roleName.png' });

      const roleKeyInput = dialog.locator('input').nth(1);
      await roleKeyInput.fill(roleKey);
      await roleKeyInput.blur();
      await page.waitForTimeout(300);
      await page.screenshot({ path: 'test-results/debug-3-filled-roleKey.png' });

      const roleSortInput = dialog.locator('.el-input-number .el-input__inner');
      await roleSortInput.fill('99');
      await roleSortInput.blur();
      await page.waitForTimeout(300);
      await page.screenshot({ path: 'test-results/debug-4-filled-roleSort.png' });

      console.log('Filled form with:', { roleName, roleKey, roleSort: 99 });

      const formItems = await dialog.locator('.el-form-item').all();
      console.log('Number of form items:', formItems.length);

      for (let i = 0; i < formItems.length; i++) {
        const label = await formItems[i].locator('.el-form-item__label').textContent();
        const hasError = await formItems[i].locator('.el-form-item__error').isVisible().catch(() => false);
        if (hasError) {
          const errorText = await formItems[i].locator('.el-form-item__error').textContent();
          console.log(`Form item "${label}" has error: ${errorText}`);
        }
      }
    });

    await test.step('提交表单', async () => {
      await page.screenshot({ path: 'test-results/debug-5-before-submit.png' });

      await page.locator('.el-dialog button:has-text("确定")').click();

      await page.waitForTimeout(1000);
      await page.screenshot({ path: 'test-results/debug-6-after-submit-1s.png' });

      await page.waitForTimeout(2000);
      await page.screenshot({ path: 'test-results/debug-7-after-submit-3s.png' });

      const dialogVisible = await page.locator('.el-dialog').isVisible();
      console.log('Dialog visible after submit:', dialogVisible);

      const successMessage = await page.locator('.el-message--success').isVisible().catch(() => false);
      console.log('Success message visible:', successMessage);

      const errorMessage = await page.locator('.el-message--error').isVisible().catch(() => false);
      console.log('Error message visible:', errorMessage);

      if (errorMessage) {
        const errorText = await page.locator('.el-message--error').textContent();
        console.log('Error message text:', errorText);
      }
    });
  });
});