/**
 * 调试课程创建 - 检查 Vue 组件状态
 */
import { test, expect } from '@playwright/test';
import { loginAsAdmin } from './helpers';

test.describe('课程创建调试 - Vue 组件状态检查', () => {
  test('检查 currentStep 和 handleSave 绑定', 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: 检查 Vue 组件状态
    console.log('=== 步骤 5: 检查 Vue 组件状态 ===');

    // 使用 Vue DevTools 获取组件状态
    const componentState = await page.evaluate(() => {
      // 尝试获取 Vue 组件实例
      const app = document.querySelector('#app') as any;
      if (app && app.__vue_app__) {
        console.log('找到 Vue 应用实例');
      }

      // 查找包含 currentStep 的组件
      const courseEditView = document.querySelector('.course-edit-view') as any;
      if (courseEditView && courseEditView.__vueParentComponent) {
        const component = courseEditView.__vueParentComponent;
        return {
          currentStep: component.ctx?.currentStep,
          saving: component.ctx?.saving,
          isEdit: component.ctx?.isEdit,
          courseId: component.ctx?.courseId,
        };
      }
      return null;
    });

    console.log('组件状态:', componentState);

    // 检查按钮
    console.log('=== 步骤 6: 检查按钮 ===');
    const submitButton = page.getByRole('button', { name: '创建' });
    const isVisible = await submitButton.isVisible();
    const isDisabled = await submitButton.isDisabled();
    console.log('创建按钮可见:', isVisible);
    console.log('创建按钮禁用:', isDisabled);

    // 获取按钮的 HTML
    const buttonHTML = await submitButton.evaluate(el => el.outerHTML);
    console.log('按钮 HTML:', buttonHTML);

    // 尝试直接点击按钮元素
    console.log('=== 步骤 7: 点击创建 ===');
    await submitButton.click();
    console.log('已点击创建按钮');

    // 等待并检查日志
    await page.waitForTimeout(5000);

    // 检查是否有 API 请求
    console.log('=== 步骤 8: 检查结果 ===');
    const successMsg = await page.locator('.ant-message-success').count();
    const errorMsg = await page.locator('.ant-message-error').count();
    console.log('成功消息:', successMsg);
    console.log('错误消息:', errorMsg);

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