<template>
  <div class="course-basic-info">
    <div class="info-section">
      <div class="section-title">
        <InfoCircleOutlined /> 基本信息
      </div>
      <a-descriptions bordered :column="2" class="info-descriptions">
        <a-descriptions-item label="课程名称">
          {{ course.name || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="关联绘本">
          {{ course.pictureBookName || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="课程主题">
          <a-tag v-if="themeDisplayName" :style="themeTagStyle">{{ themeDisplayName }}</a-tag>
          <span v-else>-</span>
        </a-descriptions-item>
        <a-descriptions-item label="预计时长">
          {{ totalDuration }} 分钟
        </a-descriptions-item>
        <a-descriptions-item label="适用年级" :span="2">
          <a-tag v-for="tag in translatedGradeTags" :key="tag" class="grade-tag">
            {{ tag }}
          </a-tag>
          <span v-if="!translatedGradeTags.length">-</span>
        </a-descriptions-item>
        <a-descriptions-item label="核心内容" :span="2">
          {{ course.coreContent || '-' }}
        </a-descriptions-item>
      </a-descriptions>
    </div>

    <!-- 课程封面 -->
    <div v-if="course.coverImagePath" class="cover-section">
      <div class="section-title">
        <PictureOutlined /> 课程封面
      </div>
      <div class="cover-preview">
        <img :src="getFileUrl(course.coverImagePath)" alt="课程封面" />
      </div>
    </div>

    <!-- 课程统计 -->
    <div class="stats-section">
      <div class="section-title">
        <BarChartOutlined /> 课程统计
      </div>
      <a-row :gutter="16" class="stats-grid">
        <a-col :span="6">
          <a-statistic title="课程数量" :value="lessonCount" suffix="节" />
        </a-col>
        <a-col :span="6">
          <a-statistic title="预计时长" :value="totalDuration" suffix="分钟" />
        </a-col>
        <a-col :span="6">
          <a-statistic title="教师使用" :value="course.teacherCount || 0" suffix="位" />
        </a-col>
        <a-col :span="6">
          <a-statistic title="评分" :value="course.avgRating?.toFixed(1) || '5.0'" suffix="/5" />
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import {
  InfoCircleOutlined, PictureOutlined, BarChartOutlined,
} from '@ant-design/icons-vue';
import { translateGradeTags, getThemeTagStyle } from '@/utils/tagMaps';

const props = defineProps<{
  course: any;
}>();

const translatedGradeTags = computed(() => {
  return translateGradeTags(props.course.gradeTags || []);
});

const themeDisplayName = computed(() =>
  (props.course.theme?.name || props.course.themeName || '').trim()
);
const themeTagStyle = computed(() =>
  getThemeTagStyle(props.course.theme?.color || props.course.themeColor)
);

const totalDuration = computed(() => {
  return props.course.courseLessons?.reduce((sum: number, l: any) => sum + (l.duration || 0), 0) || 0;
});

const lessonCount = computed(() => {
  return props.course.courseLessons?.length || 0;
});

const getFileUrl = (filePath: string | null | undefined): string => {
  if (!filePath) return '';
  if (filePath.startsWith('http://') || filePath.startsWith('https://')) {
    return filePath;
  }
  const SERVER_BASE = import.meta.env.VITE_SERVER_BASE_URL || 'http://localhost:3000';
  return `${SERVER_BASE}${filePath}`;
};
</script>

<style scoped>
.course-basic-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.info-section,
.cover-section,
.stats-section {
  background: white;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.info-descriptions {
  font-size: 14px;
}

.info-descriptions :deep(.ant-descriptions-item-label) {
  font-weight: 500;
  background: #fafafa;
}

.grade-tag {
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
  color: #1976D2;
  border: none;
  padding: 2px 10px;
  font-size: 12px;
  margin-right: 6px;
}

.cover-preview {
  width: 100%;
  max-width: 300px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
}

.cover-preview img {
  width: 100%;
  height: auto;
  display: block;
}

.stats-grid {
  background: #FAFAFA;
  padding: 20px;
  border-radius: 8px;
}

.stats-grid :deep(.ant-statistic-title) {
  font-size: 13px;
  color: #666;
}

.stats-grid :deep(.ant-statistic-content) {
  font-size: 24px;
  font-weight: 600;
  color: #FF8C42;
}
</style>
