<template>
  <div class="course-edit-view">
    <div class="sticky-header">
      <a-page-header :title="isEdit ? '编辑课程包' : '创建课程包'" @back="() => router.back()">
        <template #extra>
          <a-space>
            <a-button @click="handleSaveDraft" :loading="saving">保存草稿</a-button>
            <a-button v-if="currentStep > 0" @click="prevStep">上一步</a-button>
            <a-button v-if="currentStep < 6" type="primary" @click="nextStep">下一步</a-button>
            <a-button v-if="currentStep === 6" type="primary" :loading="saving" @click="() => handleSave(false)">
              {{ isEdit ? '保存' : '创建' }}
            </a-button>
            <a-button v-else-if="isEdit" type="primary" @click="handleSaveAndSubmit" :loading="saving">
              保存
            </a-button>
          </a-space>
        </template>
      </a-page-header>
    </div>

    <!-- 编辑态：数据未就绪时单独展示加载，避免 a-spin 包裹整表在 spinning 切换时与大量子组件补丁竞态导致 __vnode 报错 -->
    <div v-if="!pageContentReady" class="course-edit-page-loading">
      <a-spin size="large" tip="正在加载课程数据..." />
    </div>
    <a-card v-else :bordered="false" style="margin-top: 16px;">
      <!-- 步骤导航 -->
      <a-steps :current="currentStep" size="small" @change="onStepChange">
        <a-step title="基本信息" />
        <a-step title="课程介绍" />
        <a-step title="排课参考" />
        <a-step title="导入课" />
        <a-step title="集体课" />
        <a-step title="领域课" />
        <a-step title="环创建设" />
      </a-steps>

      <!-- 步骤内容 -->
      <div class="step-content">
        <!-- 步骤1：基本信息 -->
        <Step1BasicInfo v-show="currentStep === 0" ref="step1Ref" v-model="formData.basic" @change="handleDataChange" />

        <!-- 步骤2：课程介绍 -->
        <Step2CourseIntro v-show="currentStep === 1" ref="step2Ref" v-model="formData.intro"
          @change="handleDataChange" />

        <!-- 步骤3：排课参考 -->
        <Step3ScheduleRef v-show="currentStep === 2" ref="step3Ref" v-model="formData.scheduleRefData"
          @change="handleDataChange" />

        <!-- 步骤4：导入课 -->
        <Step4IntroLesson v-show="currentStep === 3" ref="step4Ref" :course-id="courseId" @change="handleDataChange" />

        <!-- 步骤5：集体课 -->
        <Step5CollectiveLesson v-show="currentStep === 4" ref="step5Ref" :course-id="courseId"
          :course-name="formData.basic.name" @change="handleDataChange" />

        <!-- 步骤6：领域课 -->
        <Step6DomainLessons v-show="currentStep === 5" ref="step6Ref" :course-id="courseId"
          :course-name="formData.basic.name" @change="handleDataChange" />

        <!-- 步骤7：环创建设 -->
        <Step7Environment v-show="currentStep === 6" ref="step7Ref" v-model="formData.environmentConstruction"
          @change="handleDataChange" />
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, provide, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
import Step1BasicInfo from '@/components/course-edit/Step1BasicInfo.vue';
import Step2CourseIntro from '@/components/course-edit/Step2CourseIntro.vue';
import Step3ScheduleRef from '@/components/course-edit/Step3ScheduleRef.vue';
import Step4IntroLesson from '@/components/course-edit/Step4IntroLesson.vue';
import Step5CollectiveLesson from '@/components/course-edit/Step5CollectiveLesson.vue';
import Step6DomainLessons from '@/components/course-edit/Step6DomainLessons.vue';
import Step7Environment from '@/components/course-edit/Step7Environment.vue';
import { getCourse, createCourse, updateCourse } from '@/api/course';
import {
  getLessonList,
  createLesson,
  updateLesson,
  deleteLesson,
  createStep,
  updateStep,
  deleteStep,
} from '@/api/lesson';

const router = useRouter();
const route = useRoute();

const isEdit = computed(() => !!route.params.id);
const courseId = computed(() => route.params.id as string | undefined);

/** 编辑页：详情拉取完成后再挂载步骤表单，避免与 Spin 嵌套更新冲突 */
const pageContentReady = ref(!isEdit.value);
const saving = ref(false);
const currentStep = ref(0);

// 步骤组件引用
const step1Ref = ref();
const step2Ref = ref();
const step3Ref = ref();
const step4Ref = ref();
const step5Ref = ref();
const step6Ref = ref();
const step7Ref = ref();

// 表单数据
const formData = reactive({
  basic: {
    name: '',
    themeId: undefined as number | undefined,
    grades: [] as string[],
    pictureBookName: '',
    coreContent: '',
    duration: 25,
    domainTags: [] as string[],
    coverImagePath: '',
  },
  intro: {
    introSummary: '',
    introHighlights: '',
    introGoals: '',
    introSchedule: '',
    introKeyPoints: '',
    introMethods: '',
    introEvaluation: '',
    introNotes: '',
  },
  scheduleRefData: '',
  environmentConstruction: '',
});

// 获取课程详情
const fetchCourseDetail = async () => {
  if (!isEdit.value) return;

  pageContentReady.value = false;
  try {
    const res = await getCourse(courseId.value) as any;
    const course = res.data || res;

    // 已发布的课程包不允许编辑
    if (course?.status === 'PUBLISHED') {
      message.warning('已发布的课程包不允许编辑，请使用「迭代版本」创建新版本');
      router.push(`/admin/packages/${courseId.value}`);
      return;
    }
    // 审核中（待审核）的课程包不允许编辑
    if (course?.status === 'PENDING') {
      message.warning('审核中的课程包不允许编辑，请等待审核完成或先撤销审核');
      router.push(`/admin/packages/${courseId.value}`);
      return;
    }

    // 基本信息
    formData.basic.name = course.name;
    formData.basic.themeId = course.themeId;
    formData.basic.grades = Array.isArray(course.gradeTags) ? course.gradeTags : (course.gradeTags ? JSON.parse(course.gradeTags) : []);
    formData.basic.pictureBookName = course.pictureBookName || '';
    formData.basic.coreContent = course.coreContent || '';
    formData.basic.duration = course.durationMinutes ?? course.duration ?? 25;
    formData.basic.domainTags = Array.isArray(course.domainTags) ? course.domainTags : (course.domainTags ? JSON.parse(course.domainTags || '[]') : []);
    formData.basic.coverImagePath = course.coverImagePath || '';

    // 课程介绍
    formData.intro.introSummary = course.introSummary || '';
    formData.intro.introHighlights = course.introHighlights || '';
    formData.intro.introGoals = course.introGoals || '';
    formData.intro.introSchedule = course.introSchedule || '';
    formData.intro.introKeyPoints = course.introKeyPoints || '';
    formData.intro.introMethods = course.introMethods || '';
    formData.intro.introEvaluation = course.introEvaluation || '';
    formData.intro.introNotes = course.introNotes || '';

    // 排课参考
    formData.scheduleRefData = course.scheduleRefData || '';

    // 环创建设
    formData.environmentConstruction = course.environmentConstruction || '';

    await nextTick();
    pageContentReady.value = true;
  } catch (error) {
    message.error('获取课程详情失败');
    pageContentReady.value = true;
  }
};

// 步骤导航
const onStepChange = async (step: number) => {
  if (step > currentStep.value) {
    const ok = await validateCurrentStep();
    if (!ok) return;
  }
  currentStep.value = step;
};

const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--;
  }
};

const nextStep = async () => {
  const ok = await validateCurrentStep();
  if (!ok) return;
  if (currentStep.value < 6) {
    currentStep.value++;
  }
};

// 校验：导入课、集体课、领域课各必填一条
const validateAllThreeLessons = (): boolean => {
  const hasIntro = !!step4Ref.value?.lessonData;
  const hasCollective = !!step5Ref.value?.lessonData;
  const domainData = step6Ref.value?.getSaveData?.() || [];
  const hasDomain = Array.isArray(domainData) && domainData.length > 0;

  if (!hasIntro) {
    message.warning('请配置导入课（至少一节）');
    return false;
  }
  if (!hasCollective) {
    message.warning('请配置集体课（至少一节）');
    return false;
  }
  if (!hasDomain) {
    message.warning('请配置领域课（至少一节）');
    return false;
  }
  return true;
};

// 验证当前步骤（覆盖全部 7 步）
const validateCurrentStep = async (): Promise<boolean> => {
  const step = currentStep.value;
  const stepRefs = [
    step1Ref,
    step2Ref,
    step3Ref,
    step4Ref,
    step5Ref,
    step6Ref,
    step7Ref,
  ];
  const ref = stepRefs[step]?.value;
  if (!ref?.validate) {
    // 步骤 5（领域课）、步骤 6（环创建设）需额外校验「导入课、集体课、领域课各必填一条」
    if (step === 5 || step === 6) {
      return validateAllThreeLessons();
    }
    return true;
  }

  const result = await ref.validate();
  if (!result?.valid) {
    message.warning(result?.errors?.[0] || '请完成当前步骤');
    return false;
  }

  // 步骤 5（领域课）、步骤 6（环创建设）需额外校验「导入课、集体课、领域课各必填一条」
  if (step === 5 || step === 6) {
    return validateAllThreeLessons();
  }
  return true;
};

// 处理数据变化
const handleDataChange = () => {
  // 数据变化时可以自动保存草稿
};

// 保存草稿
const handleSaveDraft = async () => {
  await handleSave(true);
};

// 保存
const handleSave = async (isDraft = false) => {
  // 校验逻辑：
  // - 保存草稿：仅校验「基本信息」（Step1），其余环节不校验（按原来逻辑允许未完成）
  // - 正式保存：仍按原逻辑校验当前步骤
  if (isDraft) {
    const step1 = step1Ref.value;
    if (step1?.validate) {
      const result = await step1.validate();
      if (!result?.valid) {
        message.warning(result?.errors?.[0] || '请完成基本信息');
        return;
      }
    }
  } else {
    const ok = await validateCurrentStep();
    if (!ok) return;
  }

  // 防止重复提交
  if (saving.value) return;

  saving.value = true;
  let savedCourseId = courseId.value;

  try {
    console.log('🔍 开始保存课程数据，课程 ID:', savedCourseId);
    // 1. 保存课程包基本信息
    const courseData = {
      name: formData.basic.name,
      themeId: formData.basic.themeId,
      gradeTags: JSON.stringify(formData.basic.grades),
      pictureBookName: formData.basic.pictureBookName,
      coreContent: formData.basic.coreContent,
      durationMinutes: formData.basic.duration,
      domainTags: JSON.stringify(formData.basic.domainTags),
      coverImagePath: formData.basic.coverImagePath,
      // 课程介绍
      introSummary: formData.intro.introSummary,
      introHighlights: formData.intro.introHighlights,
      introGoals: formData.intro.introGoals,
      introSchedule: formData.intro.introSchedule,
      introKeyPoints: formData.intro.introKeyPoints,
      introMethods: formData.intro.introMethods,
      introEvaluation: formData.intro.introEvaluation,
      introNotes: formData.intro.introNotes,
      // 排课参考
      scheduleRefData: formData.scheduleRefData,
      // 环创建设
      environmentConstruction: formData.environmentConstruction,
    } as Record<string, unknown>;

    if (isDraft) {
      courseData.status = 'DRAFT';
    } else if (currentStep.value === 6) {
      // 最后一步「保存/创建」：表单完整且本步校验通过 → 未提交（可提交审核/发布）
      courseData.status = 'UNSUBMITTED';
    }
    // 编辑态在中间步骤点「保存」：不传 status，避免把未提交误改回草稿

    console.log('Saving course data...', { isDraft, isEdit: isEdit.value });

    let savedCourse: any = null;
    if (isEdit.value) {
      const res = await updateCourse(courseId.value, courseData) as any;
      savedCourse = res?.data ?? res ?? null;
      console.log('Course updated successfully');
    } else {
      const res = await createCourse(courseData) as any;
      savedCourse = res?.data ?? res ?? null;
      savedCourseId = savedCourse?.id ?? res?.id ?? res?.data?.id; // 兼容多种返回形态
    }

    if (!savedCourseId) {
      throw new Error('无法获取课程ID');
    }

    // 草稿保存：接口若返回实体与 ID，则填充到当前编辑，并切换到编辑路由
    // 这样后续环节（导入课/集体课/领域课等）能拿到 courseId 进行关联保存
    if (isDraft && !isEdit.value) {
      // 回填（尽量不破坏当前填写内容；这里只补齐后端回写字段）
      if (savedCourse && typeof savedCourse === 'object') {
        formData.basic.name = savedCourse.name ?? formData.basic.name;
        formData.basic.themeId = savedCourse.themeId ?? formData.basic.themeId;
        formData.basic.pictureBookName = savedCourse.pictureBookName ?? formData.basic.pictureBookName;
        formData.basic.coreContent = savedCourse.coreContent ?? formData.basic.coreContent;
        formData.basic.duration = (savedCourse.durationMinutes ?? savedCourse.duration) ?? formData.basic.duration;
        formData.basic.coverImagePath = savedCourse.coverImagePath ?? formData.basic.coverImagePath;

        const gradeTags = savedCourse.gradeTags;
        if (gradeTags !== undefined && gradeTags !== null) {
          formData.basic.grades = Array.isArray(gradeTags) ? gradeTags : (gradeTags ? JSON.parse(gradeTags) : []);
        }
        const domainTags = savedCourse.domainTags;
        if (domainTags !== undefined && domainTags !== null) {
          formData.basic.domainTags = Array.isArray(domainTags) ? domainTags : (domainTags ? JSON.parse(domainTags || '[]') : []);
        }

        formData.intro.introSummary = savedCourse.introSummary ?? formData.intro.introSummary;
        formData.intro.introHighlights = savedCourse.introHighlights ?? formData.intro.introHighlights;
        formData.intro.introGoals = savedCourse.introGoals ?? formData.intro.introGoals;
        formData.intro.introSchedule = savedCourse.introSchedule ?? formData.intro.introSchedule;
        formData.intro.introKeyPoints = savedCourse.introKeyPoints ?? formData.intro.introKeyPoints;
        formData.intro.introMethods = savedCourse.introMethods ?? formData.intro.introMethods;
        formData.intro.introEvaluation = savedCourse.introEvaluation ?? formData.intro.introEvaluation;
        formData.intro.introNotes = savedCourse.introNotes ?? formData.intro.introNotes;
        formData.scheduleRefData = savedCourse.scheduleRefData ?? formData.scheduleRefData;
        formData.environmentConstruction = savedCourse.environmentConstruction ?? formData.environmentConstruction;
      }

      await router.replace(`/admin/packages/${savedCourseId}/edit`);
    }

    // 2. 保存导入课
    try {
      const introLessonData = step4Ref.value?.getSaveData();
      if (introLessonData) {
        console.log('Saving intro lesson...');
        await saveLesson(savedCourseId, introLessonData, 'INTRO');
      }
    } catch (error: any) {
      console.error('Failed to save intro lesson:', error);
      // 继续保存其他内容，不中断
    }

    // 3. 保存集体课
    try {
      const collectiveLessonData = step5Ref.value?.getSaveData();
      if (collectiveLessonData) {
        console.log('Saving collective lesson...');
        await saveLesson(savedCourseId, collectiveLessonData, 'COLLECTIVE');
      }
    } catch (error: any) {
      console.error('Failed to save collective lesson:', error);
      // 继续保存其他内容，不中断
    }

    // 4. 保存领域课
    try {
      const domainLessonsData = step6Ref.value?.getSaveData() || [];
      for (const lessonData of domainLessonsData) {
        console.log('Saving domain lesson:', lessonData.lessonType);
        await saveLesson(savedCourseId, lessonData, lessonData.lessonType);
      }
    } catch (error: any) {
      console.error('Failed to save domain lessons:', error);
      // 继续保存其他内容，不中断
    }

    message.success(isDraft ? '草稿保存成功' : (isEdit.value ? '保存成功' : '创建成功'));

    if (!isDraft) {
      await router.replace('/admin/packages');
    }
  } catch (error: any) {
    console.error('Save failed:', error);
    const errorMsg = error.response?.data?.message || error.message || '未知错误';
    const errorDetails = error.response?.data?.errors?.join(', ') || '';
    message.error(`保存失败: ${errorMsg}${errorDetails ? ' - ' + errorDetails : ''}`);
  } finally {
    saving.value = false;
  }
};

// 保存单个课程
const saveLesson = async (courseId: number | string, lessonData: any, lessonType: string) => {
  const cid = Number(courseId);
  if (!lessonData) {
    console.log('No lesson data to save for type:', lessonType);
    return;
  }

  const lessonPayload = {
    lessonType: lessonData.lessonType || lessonType,
    name: lessonData.name || `${lessonType === 'INTRO' ? '导入课' : lessonType === 'COLLECTIVE' ? '集体课' : lessonType}`,
    description: lessonData.description || '',
    duration: lessonData.duration || 25,
    videoPath: lessonData.videoPath || '',
    videoName: lessonData.videoName || '',
    pptPath: lessonData.pptPath || '',
    pptName: lessonData.pptName || '',
    pdfPath: lessonData.pdfPath || '',
    pdfName: lessonData.pdfName || '',
    objectives: lessonData.objectives || '',
    preparation: lessonData.preparation || '',
    extension: lessonData.extension || '',
    reflection: lessonData.reflection || '',
    assessmentData: lessonData.assessmentData || '',
    useTemplate: lessonData.useTemplate || false,
  };

  let lessonId = lessonData.id;

  try {
    if (lessonData.isNew || !lessonData.id) {
      const res = await createLesson(cid, lessonPayload) as any;
      lessonId = res.data?.id || res.id;
    } else {
      await updateLesson(cid, lessonData.id, lessonPayload);
    }

    // 保存教学环节
    if (lessonData.steps && lessonData.steps.length > 0 && lessonId) {
      for (const step of lessonData.steps) {
        const stepPayload = {
          name: step.name || '教学环节',
          content: step.content || '',
          duration: step.duration || 5,
          objective: step.objective || '',
        };

        try {
          if (step.isNew || !step.id) {
            await createStep(cid, lessonId, stepPayload);
          } else {
            await updateStep(cid, step.id, stepPayload);
          }
        } catch (stepError: any) {
          console.error('Failed to save step:', stepError);
        }
      }
    }
  } catch (error: any) {
    console.error('Failed to save lesson:', error);
    throw error;
  }
};

// 保存并提交
const handleSaveAndSubmit = async () => {
  await handleSave(false);
};

onMounted(() => {
  fetchCourseDetail();
});

// 提供courseId给子组件
provide('courseId', courseId);
</script>

<style scoped lang="scss">
.course-edit-view {
  padding: 24px;
}

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  margin: -24px -24px 0 -24px;
  padding: 0 24px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.step-content {
  min-height: 400px;
  margin-top: 24px;
}

.course-edit-page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  margin-top: 16px;
}
</style>
