/**
 * 调试课程创建 - 使用精确选择器点击创建按钮
 */
import { test, expect } from '@playwright/test';
import { loginAsAdmin } from './helpers';

test.describe('课程创建调试 - 精确按钮选择器', () => {
  test('使用精确选择器点击创建按钮', async ({ page }) => {
    test.setTimeout(180000);

    const courseName = '调试测试课程包-' + Date.now();
    console.log('=== 测试开始 ===');

    // 步骤 1: 登录
    console.log('=== 步骤 1: 登录 ===');
    await loginAsAdmin(page);
    await page.waitForTimeout(1000);

    // 步骤 2: 进入课程创建页面
    console.log('=== 步骤 2: 进入课程创建页面 ===');
    await page.goto('/admin/courses/create', { timeout: 30000, waitUntil: 'networkidle' });
    await page.waitForTimeout(3000);

    // 步骤 3: 填写基本信息
    console.log('=== 步骤 3: 填写基本信息 ===');
    await page.getByPlaceholder('请输入课程包名称').fill(courseName);
    await page.locator('.ant-select-selector').first().click();
    await page.waitForTimeout(500);
    await page.getByText('社会认知', { exact: true }).first().click();
    await page.waitForTimeout(300);
    await page.getByRole('checkbox', { name: '小班' }).check();
    await page.waitForTimeout(300);
    await page.getByPlaceholder('请输入课程包核心内容').fill('调试测试课程内容');
    await page.waitForTimeout(500);

    // 步骤 4: 点击下一步到最后
    console.log('=== 步骤 4: 点击下一步 ===');
    for (let i = 0; i < 6; i++) {
      const nextButton = page.getByRole('button', { name: '下一步' });
      if (await nextButton.isVisible().catch(() => false)) {
        await nextButton.click();
        await page.waitForTimeout(800);
      }
    }
    await page.waitForTimeout(1000);

    // 步骤 5: 检查当前步骤
    console.log('=== 步骤 5: 检查当前步骤 ===');

    // 检查 step-actions 容器内的按钮
    const stepActions = page.locator('.step-actions');
    const stepActionsVisible = await stepActions.isVisible();
    console.log('step-actions 容器可见:', stepActionsVisible);

    // 获取 step-actions 内的所有按钮
    const buttons = stepActions.locator('button');
    const buttonCount = await buttons.count();
    console.log('step-actions 内的按钮数量:', buttonCount);

    for (let i = 0; i < buttonCount; i++) {
      const button = buttons.nth(i);
      const text = await button.textContent();
      const isVisible = await button.isVisible();
      console.log(`按钮 ${i}: 文本="${text?.trim()}", 可见=${isVisible}`);
    }

    // 步骤 6: 点击创建按钮
    console.log('=== 步骤 6: 点击创建按钮 ===');

    // 使用 CSS 选择器找到 step-actions 内的最后一个按钮
    const submitButton = page.locator('.step-actions .ant-btn-primary').last();
    const submitVisible = await submitButton.isVisible();
    console.log('提交按钮可见:', submitVisible);

    if (submitVisible) {
      console.log('点击提交按钮...');

      // 在点击前设置响应监听
      const [response] = await Promise.all([
        page.waitForResponse(res =>
          res.url().includes('/api/v1/admin/courses') &&
          res.request().method() === 'POST'
        ).catch(() => null),
        submitButton.click()
      ]);

      console.log('已点击提交按钮');
      console.log('API 响应:', response ? response.status() : '未捕获');

      // 等待成功消息
      await page.waitForTimeout(5000);

      const successMsg = await page.locator('.ant-message-success').count();
      const errorMsg = await page.locator('.ant-message-error').count();
      console.log('成功消息:', successMsg);
      console.log('错误消息:', errorMsg);

      // 检查 URL
      console.log('当前 URL:', page.url());
    } else {
      console.log('提交按钮不可见');
    }

    // 截图
    await page.screenshot({ path: 'test-results/debug-exact-button.png' });
  });
});