<template>
  <div class="prepare-preview">
    <a-spin :spinning="loading">
      <!-- 课程包概览内容 -->
      <template v-if="selectedType === 'overview'">
        <div class="preview-header">
          <h2 class="preview-title">{{ getOverviewTitle() }}</h2>
        </div>

        <!-- 基本信息 -->
        <div v-if="selectedItem === 'basic'" class="preview-content">
          <CourseBasicInfo :course="course" />
        </div>

        <!-- 课程介绍 -->
        <div v-else-if="selectedItem === 'intro'" class="preview-content">
          <CourseIntroContent :course="course" />
        </div>

        <!-- 排课计划参考 -->
        <div v-else-if="selectedItem === 'schedule'" class="preview-content">
          <CourseScheduleContent :course="course" />
        </div>

        <!-- 环创建设 -->
        <div v-else-if="selectedItem === 'environment'" class="preview-content">
          <CourseEnvironmentContent :course="course" />
        </div>
      </template>

      <!-- 课程内容 -->
      <template v-else-if="selectedType === 'lesson' && selectedLesson">
        <div class="preview-header">
          <h2 class="preview-title">{{ getLessonTitle() }}</h2>
          <a-tag :color="getLessonTypeColor(selectedLesson.lessonType)" class="lesson-type-tag">
            {{ getLessonTypeName(selectedLesson.lessonType) }}
          </a-tag>
        </div>

        <!-- 核心资源（集体课和领域课） -->
        <div v-if="selectedItem === 'resources' && hasResources" class="preview-content">
          <LessonResourcesContent
            :lesson="selectedLesson"
            @preview-resource="(type, resource) => emit('preview-resource', type, resource)"
          />
        </div>

        <!-- 教学目标 -->
        <div v-else-if="selectedItem === 'objectives'" class="preview-content">
          <LessonObjectivesContent :lesson="selectedLesson" />
        </div>

        <!-- 教学准备 -->
        <div v-else-if="selectedItem === 'preparation'" class="preview-content">
          <LessonPreparationContent :lesson="selectedLesson" />
        </div>

        <!-- 教学过程 -->
        <div v-else-if="selectedItem === 'steps'" class="preview-content">
          <LessonStepsContent
            :lesson="selectedLesson"
            :selected-step="selectedStep"
            @select-step="handleSelectStep"
          />
        </div>

        <!-- 教学延伸 -->
        <div v-else-if="selectedItem === 'extension'" class="preview-content">
          <LessonExtensionContent :lesson="selectedLesson" />
        </div>

        <!-- 教学反思 -->
        <div v-else-if="selectedItem === 'reflection'" class="preview-content">
          <LessonReflectionContent :lesson="selectedLesson" />
        </div>
      </template>

      <!-- 空状态 -->
      <a-empty v-else description="请选择要查看的内容" />
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import CourseBasicInfo from './content/CourseBasicInfo.vue';
import CourseIntroContent from './content/CourseIntroContent.vue';
import CourseScheduleContent from './content/CourseScheduleContent.vue';
import CourseEnvironmentContent from './content/CourseEnvironmentContent.vue';
import LessonResourcesContent from './content/LessonResourcesContent.vue';
import LessonObjectivesContent from './content/LessonObjectivesContent.vue';
import LessonPreparationContent from './content/LessonPreparationContent.vue';
import LessonStepsContent from './content/LessonStepsContent.vue';
import LessonExtensionContent from './content/LessonExtensionContent.vue';
import LessonReflectionContent from './content/LessonReflectionContent.vue';

const props = defineProps<{
  course: any;
  selectedType: 'overview' | 'lesson';
  selectedLesson: any;
  selectedItem: string;
  selectedStep: any;
}>();

const emit = defineEmits<{
  'select-step': [step: any];
  'preview-resource': [type: string, resource: any];
}>();

const loading = ref(false);

// 是否有核心资源 - 导入课、集体课、领域课都有资源
const hasResources = computed(() => {
  if (!props.selectedLesson) return false;
  const type = props.selectedLesson.lessonType;
  return type === 'INTRO' || type === 'COLLECTIVE' ||
    type.startsWith('DOMAIN_') || ['LANGUAGE', 'HEALTH', 'SCIENCE', 'SOCIAL', 'ART'].includes(type);
});

// 获取概览标题
const getOverviewTitle = (): string => {
  const titles: Record<string, string> = {
    'basic': '基本信息',
    'intro': '课程介绍',
    'schedule': '排课计划参考',
    'environment': '环创建设',
  };
  return titles[props.selectedItem] || '课程包概览';
};

// 获取课程标题
const getLessonTitle = (): string => {
  const titles: Record<string, string> = {
    'resources': '核心资源',
    'objectives': '教学目标',
    'preparation': '教学准备',
    'steps': '教学过程',
    'extension': '教学延伸',
    'reflection': '教学反思',
  };
  return titles[props.selectedItem] || '课程内容';
};

// 获取课程类型名称
const getLessonTypeName = (type: string): string => {
  const typeMap: Record<string, string> = {
    'INTRODUCTION': '导入课',
    'COLLECTIVE': '集体课',
    'LANGUAGE': '语言领域课',
    'HEALTH': '健康领域课',
    'SCIENCE': '科学领域课',
    'SOCIAL': '社会领域课',
    'ART': '艺术领域课',
  };
  return typeMap[type] || type;
};

// 获取课程类型颜色
const getLessonTypeColor = (type: string): string => {
  const colorMap: Record<string, string> = {
    'INTRODUCTION': 'orange',
    'COLLECTIVE': 'green',
    'LANGUAGE': 'blue',
    'HEALTH': 'red',
    'SCIENCE': 'purple',
    'SOCIAL': 'cyan',
    'ART': 'pink',
  };
  return colorMap[type] || 'default';
};

const handleSelectStep = (step: any) => {
  emit('select-step', step);
};
</script>

<style scoped>
.prepare-preview {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  min-height: 600px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(90deg, #FFF5EB 0%, #FFF 100%);
}

.preview-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.lesson-type-tag {
  font-size: 13px;
}

.preview-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.preview-content::-webkit-scrollbar {
  width: 6px;
}

.preview-content::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}

.preview-content::-webkit-scrollbar-thumb:hover {
  background: #bfbfbf;
}
</style>
