<template>
  <div class="package-card" @click="handleClick">
    <!-- 封面区域 -->
    <div class="cover-wrapper">
      <div v-if="pkg.coverImagePath" class="cover-image-wrapper">
        <a-spin :spinning="coverLoading" :indicator="null">
          <img
            :src="getImageUrl(pkg.coverImagePath)"
            class="cover-image"
            alt="课程包封面"
            :style="{ opacity: coverLoaded ? 1 : 0, transition: 'opacity 0.3s' }"
            @load="coverLoading = false; coverLoaded = true"
            @error="coverLoading = false; coverError = true"
          />
        </a-spin>
        <!-- 加载失败占位图 -->
        <div v-if="coverError" class="error-placeholder">
          <BookFilled class="placeholder-icon" />
          <span class="placeholder-text">封面加载失败</span>
        </div>
      </div>
      <div v-else class="cover-placeholder">
        <BookFilled class="placeholder-icon" />
        <span class="placeholder-text">精彩绘本</span>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-wrapper">
      <h3 class="package-name" :title="pkg.name">{{ pkg.name }}</h3>
      <p v-if="pkg.pictureBookName" class="book-name">
        <BookOutlined /> {{ pkg.pictureBookName }}
      </p>

      <!-- 年级 + 课程主题（与教师端一致，主题色来自主题字典） -->
      <div v-if="gradeText || themeDisplayName" class="tag-row grade-row">
        <span v-if="gradeText" class="grade-tag">
          {{ gradeText }}
        </span>
        <a-tag v-if="themeDisplayName" :style="themeTagStyle" class="theme-tag">
          {{ themeDisplayName }}
        </a-tag>
      </div>


      <!-- 统计信息 -->
      <div class="meta-row">
        <span class="meta-item">
          <ClockCircleOutlined />
          {{ pkg.durationMinutes || 30 }}分钟
        </span>
        <span class="meta-item">
          <TeamOutlined />
          {{ pkg.usageCount || 0 }}次
        </span>
      </div>

      <!-- 操作按钮（学校端只查看详情） -->
      <button class="action-btn" @click.stop="handleView">
        <EyeOutlined />
        <span>查看详情</span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import {
  BookOutlined,
  BookFilled,
  ClockCircleOutlined,
  TeamOutlined,
  EyeOutlined,
} from '@ant-design/icons-vue';
import type { CoursePackage } from '@/api/course-center';
import { getThemeTagStyle } from '@/utils/tagMaps';

const props = defineProps<{
  pkg: CoursePackage;
}>();

// 封面图加载状态
const coverLoading = ref(true);
const coverLoaded = ref(false);
const coverError = ref(false);

// 监听 coverImagePath 变化，重置加载状态
watch(() => props.pkg.coverImagePath, () => {
  coverLoading.value = true;
  coverLoaded.value = false;
  coverError.value = false;
}, { immediate: true });

const emit = defineEmits<{
  (e: 'click', pkg: CoursePackage): void;
  (e: 'view', pkg: CoursePackage): void;
}>();

// 年级文本（多年级用圆点分隔）
const gradeText = computed(() => {
  const grades = props.pkg.gradeTags || [];
  return grades.join(' · ');
});

/** 与教师端一致：兼容 normalizeCoursePackage 及旧字段 */
const themeDisplayName = computed(() => {
  const p = props.pkg as CoursePackage & {
    theme_name?: string;
    theme?: { name?: string; color?: string };
  };
  return (p.themeName || p.theme_name || p.theme?.name || '').trim();
});
const themeTagStyle = computed(() => {
  const p = props.pkg as CoursePackage & {
    theme_color?: string;
    theme?: { name?: string; color?: string };
  };
  return getThemeTagStyle(p.themeColor || p.theme_color || p.theme?.color);
});

// 获取图片完整 URL
const getImageUrl = (path: string) => {
  if (!path) return '';
  if (path.startsWith('http')) return path;
  return `${import.meta.env.VITE_SERVER_BASE_URL || 'http://localhost:3000'}${path}`;
};

const handleClick = () => {
  emit('click', props.pkg);
};

const handleView = () => {
  emit('view', props.pkg);
};
</script>

<style scoped lang="scss">
// 学校端主题配色 - 橙色主题
$primary-color: #FF8C42;
$primary-light: #FFF4EC;
$primary-dark: #E67635;

.package-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 2px solid transparent;
}

.package-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(255, 140, 66, 0.15);
  border-color: $primary-color;
}

/* 封面区域 */
.cover-wrapper {
  position: relative;
  height: 160px;
  overflow: hidden;
}

.cover-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  .cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .error-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, $primary-light 0%, #f0f5ff 100%);

    .placeholder-icon {
      font-size: 48px;
      color: $primary-color;
      margin-bottom: 8px;
    }

    .placeholder-text {
      font-size: 14px;
      color: $primary-color;
      font-weight: 500;
    }
  }
}

.package-card:hover .cover-image {
  transform: scale(1.05);
}

.cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, $primary-light 0%, #f0f5ff 100%);
}

.placeholder-icon {
  font-size: 48px;
  color: $primary-color;
  margin-bottom: 8px;
}

.placeholder-text {
  font-size: 14px;
  color: $primary-color;
  font-weight: 500;
}

/* 内容区域 */
.content-wrapper {
  padding: 12px;
}

.package-name {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.book-name {
  font-size: 13px;
  color: #888;
  margin: 0 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 标签行 */
.tag-row {
  margin-bottom: 6px;
}

.grade-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.grade-tag {
  display: inline-block;
  padding: 2px 10px;
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
  color: #1890ff;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid #91d5ff;
}

.theme-tag {
  margin: 0 !important;
  font-size: 12px;
  line-height: 1.4;
  padding: 0 8px;
  border-radius: 4px;
}

.config-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.config-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 4px;
}

/* 统计信息 */
.meta-row {
  display: flex;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px dashed #EEE;
  margin-bottom: 10px;
}

.meta-item {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 操作按钮 */
.action-btn {
  width: 100%;
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: linear-gradient(135deg, #096dd9 0%, #1890ff 100%);
  transform: scale(1.02);
}
</style>
