<template>
  <div class="school-course-detail-page">
    <a-card :bordered="false" :loading="loading">
      <template #title>
        <span>校本课程包详情</span>
      </template>
      <template #extra>
        <a-space>
          <a-button @click="router.back()">返回</a-button>
          <a-button @click="handlePrepare">
            <template #icon><EditOutlined /></template>
            开始备课
          </a-button>
          <a-button type="primary" @click="handleStart">
            <template #icon><PlayCircleOutlined /></template>
            开始上课
          </a-button>
          <a-button type="primary" @click="handleEdit">编辑</a-button>
        </a-space>
      </template>

      <!-- 保存位置和审核状态 -->
      <div v-if="detail" class="status-bar">
        <a-tag v-if="detail.saveLocation === 'PERSONAL'" color="blue">
          <UserOutlined /> 个人课程中心
        </a-tag>
        <a-tag v-else color="green">
          <TeamOutlined /> 校本课程中心
        </a-tag>
        <a-tag :color="getReviewStatusColor(detail.reviewStatus)">
          {{ getReviewStatusText(detail.reviewStatus) }}
        </a-tag>
      </div>

      <a-descriptions :column="2" bordered>
        <a-descriptions-item label="名称">{{ detail?.name }}</a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag :color="getCourseStatusColor(detail?.status)">
            {{ getCourseStatusText(detail?.status) }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="源课程包">{{ detail?.sourceCourse?.name }}</a-descriptions-item>
        <a-descriptions-item label="使用次数">{{ detail?.usageCount }}</a-descriptions-item>
        <a-descriptions-item label="创建时间">{{ formatDate(detail?.createdAt) }}</a-descriptions-item>
        <a-descriptions-item label="更新时间">{{ formatDate(detail?.updatedAt) }}</a-descriptions-item>
        <a-descriptions-item label="描述" :span="2">{{ detail?.description || '-' }}</a-descriptions-item>
        <a-descriptions-item label="修改说明" :span="2">{{ detail?.changesSummary || '-' }}</a-descriptions-item>
      </a-descriptions>

      <!-- 课程配置预览 -->
      <a-divider>课程配置</a-divider>

      <div v-if="detail" class="course-preview">
        <a-descriptions :column="2" size="small">
          <a-descriptions-item label="核心内容">{{ detail.coreContent || '-' }}</a-descriptions-item>
          <a-descriptions-item label="时长">{{ detail.duration || 25 }} 分钟</a-descriptions-item>
        </a-descriptions>
      </div>

      <a-divider>课程列表</a-divider>

      <a-table
        :columns="lessonColumns"
        :data-source="detail?.lessons || []"
        row-key="id"
        :pagination="false"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'lessonType'">
            <a-tag>{{ getLessonTypeName(record.lessonType) }}</a-tag>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
import {
  EditOutlined,
  PlayCircleOutlined,
  UserOutlined,
  TeamOutlined,
} from '@ant-design/icons-vue';
import { getTeacherSchoolCourseFullDetail } from '@/api/school-course';
import { translateCourseStatus } from '@/utils/tagMaps';

// 审核状态映射
const getReviewStatusText = (status: string): string => {
  if (!status) return '-';
  return translateCourseStatus(status);
};

const getReviewStatusColor = (status: string): string => {
  const colorMap: Record<string, string> = {
    'PENDING': 'orange',
    'APPROVED': 'success',
    'REJECTED': 'error',
    'DRAFT': 'default',
  };
  return colorMap[status] || 'default';
};

// 状态映射
const getCourseStatusText = (status: string): string => {
  if (!status) return '未知';
  if (status === 'ACTIVE') return '启用';
  if (status === 'INACTIVE') return '禁用';
  return status;
};

const getCourseStatusColor = (status: string): string => {
  if (status === 'ACTIVE') return 'success';
  if (status === 'INACTIVE') return 'default';
  return 'default';
};

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

const loading = ref(false);
const detail = ref<any>(null);

const lessonColumns = [
  { title: '课程类型', dataIndex: 'lessonType', key: 'lessonType', width: 120 },
  { title: '名称', dataIndex: 'name', key: 'name' },
  { title: '时长', dataIndex: 'duration', key: 'duration', width: 80 },
];

const lessonTypeNames: Record<string, string> = {
  INTRODUCTION: '导入课',
  COLLECTIVE: '集体课',
  HEALTH: '健康',
  LANGUAGE: '语言',
  SOCIAL: '社会',
  SCIENCE: '科学',
  ART: '艺术',
};

const getLessonTypeName = (type: string) => lessonTypeNames[type] || type;

const formatDate = (date?: string) => {
  if (!date) return '-';
  return new Date(date).toLocaleString();
};

const fetchData = async () => {
  loading.value = true;
  try {
    const id = Number(route.params.id);
    const res = await getTeacherSchoolCourseFullDetail(id) as any;
    detail.value = res.data || res;
  } catch (error) {
    message.error('获取详情失败');
  } finally {
    loading.value = false;
  }
};

const handleEdit = () => {
  router.push(`/teacher/school-courses/${route.params.id}/edit`);
};

const handlePrepare = () => {
  router.push({
    path: `/teacher/courses/${route.params.id}/prepare`,
    query: { type: 'school' },
  });
};

const handleStart = () => {
  // 创建授课记录并进入课堂
  message.info('请先进入备课模式，选择班级后开始上课');
  router.push({
    path: `/teacher/courses/${route.params.id}/prepare`,
    query: { type: 'school' },
  });
};

onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.school-course-detail-page {
  padding: 24px;
}

.status-bar {
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
}

.course-preview {
  margin-bottom: 16px;
}
</style>
