/**
 * 调试课程创建 API - 带控制台日志和网络请求监控
 */
import { test, expect } from '@playwright/test';
import { loginAsAdmin } from './helpers';

test.describe('API 调试测试 - 课程创建（增强版）', () => {
  test('调试课程创建 API 并捕获控制台日志', async ({ page }) => {
    test.setTimeout(180000);

    const courseName = '调试测试课程包-' + Date.now();
    console.log('测试课程名称:', courseName);

    // 捕获浏览器控制台日志
    const consoleLogs: string[] = [];
    page.on('console', msg => {
      const log = `[${msg.type()}] ${msg.text()}`;
      consoleLogs.push(log);
      console.log(`Browser Console: ${log}`);
    });

    // 捕获网络请求
    const networkLogs: string[] = [];
    page.on('request', request => {
      const log = `>> ${request.method()} ${request.url()}`;
      networkLogs.push(log);
      console.log(`Network Request: ${log}`);
    });

    page.on('response', response => {
      const log = `<< ${response.status()} ${response.url()}`;
      networkLogs.push(log);
      console.log(`Network Response: ${log}`);
    });

    // 步骤 1: 登录
    console.log('步骤 1: 开始登录...');
    await loginAsAdmin(page);
    await page.waitForTimeout(2000);

    // 步骤 2: 进入课程列表页面
    console.log('步骤 2: 导航到课程列表页面...');
    await page.goto('/admin/courses', { timeout: 30000, waitUntil: 'networkidle' });
    await page.waitForTimeout(5000);

    // 记录创建前的课程数量
    let table = page.locator('.ant-table').first();
    let rows = table.locator('tbody tr');
    const beforeCount = await rows.count();
    console.log('创建前的课程数量:', beforeCount);

    // 步骤 3: 点击新建课程包按钮
    console.log('步骤 3: 点击新建课程包按钮...');
    await page.getByRole('button', { name: '新建课程包' }).click();
    await page.waitForTimeout(2000);

    // 验证进入创建页面
    const isCreatePage = await page.getByText('创建课程包').isVisible().catch(() => false);
    console.log('是否进入创建页面:', isCreatePage);

    if (!isCreatePage) {
      console.log('未进入创建页面，测试结束');
      await page.screenshot({ path: 'test-results/debug-create-error.png' });
      return;
    }

    // 步骤 4: 填写基本信息（只填必填项）
    console.log('步骤 4: 填写基本信息...');
    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: '小班' }).click();
    await page.waitForTimeout(300);

    // 填写核心内容
    await page.getByPlaceholder('请输入课程包核心内容').fill('调试测试课程内容');

    // 步骤 5: 直接点击创建按钮（跳过其他可选步骤）
    console.log('步骤 5: 跳过可选步骤，直接提交...');
    for (let i = 0; i < 6; i++) {
      const nextButton = page.getByRole('button', { name: '下一步' });
      if (await nextButton.isVisible().catch(() => false)) {
        console.log(`  - 点击第 ${i + 1} 次"下一步"`);
        await nextButton.click();
        await page.waitForTimeout(1000);
      }
    }

    // 步骤 6: 点击创建按钮
    console.log('步骤 6: 点击创建按钮...');
    const submitButton = page.getByRole('button', { name: '创建' });
    await submitButton.click();
    console.log('  - "创建"按钮已点击');

    // 步骤 7: 等待创建结果
    console.log('步骤 7: 等待创建结果...');

    // 等待成功提示
    const hasSuccessMessage = await page.waitForSelector('.ant-message-success', { timeout: 10000 }).catch(() => null);
    console.log('是否有成功提示:', hasSuccessMessage !== null);

    // 等待页面跳转
    const hasUrlChange = await page.waitForURL('**/admin/courses**', { timeout: 15000 }).catch(() => false);
    console.log('是否发生页面跳转:', hasUrlChange);

    // 步骤 8: 验证课程列表
    console.log('步骤 8: 验证课程列表...');
    table = page.locator('.ant-table').first();
    rows = table.locator('tbody tr');
    const afterCount = await rows.count();
    console.log('创建后的课程数量:', afterCount);

    // 查找新课程
    const newCourseRow = table.getByText(courseName);
    const isCourseExists = await newCourseRow.isVisible().catch(() => false);
    console.log('新课程是否在列表中:', isCourseExists);

    // 截图
    await page.screenshot({ path: 'test-results/debug-create-result-2.png' });
    console.log('截图已保存');

    // 输出结论
    console.log('=== 测试总结 ===');
    if (isCourseExists) {
      console.log('✅ 课程创建成功！');
    } else {
      console.log('❌ 课程创建失败或列表未更新');
      console.log('创建前课程数量:', beforeCount);
      console.log('创建后课程数量:', afterCount);
    }

    // 输出控制台日志
    console.log('=== 浏览器控制台日志 ===');
    consoleLogs.forEach(log => console.log(log));

    // 输出网络日志
    console.log('=== 网络请求日志 ===');
    networkLogs.forEach(log => console.log(log));
  });
});