<template>
  <div class="lesson-card">
    <div class="lesson-header">
      <div class="lesson-type-badge" :class="typeClass">
        <span class="badge-number">{{ index }}</span>
        <span class="badge-text">{{ lessonType }}</span>
      </div>
      <div class="lesson-title">{{ lesson.name }}</div>
      <div class="lesson-meta">
        <span class="duration">
          <ClockCircleOutlined /> {{ lesson.duration }}分钟
        </span>
      </div>
      <a-button type="link" size="small" @click="$emit('prepare', lesson)">
        <EditOutlined /> 备课
      </a-button>
    </div>

    <div class="lesson-body">
      <!-- 教学目标 -->
      <div v-if="lesson.objectives" class="lesson-section">
        <div class="section-label">
          <AimOutlined /> 教学目标
        </div>
        <div class="section-content">{{ lesson.objectives }}</div>
      </div>

      <!-- 教学环节 -->
      <div v-if="lesson.steps && lesson.steps.length > 0" class="lesson-section">
        <div class="section-label">
          <OrderedListOutlined /> 教学环节 ({{ lesson.steps.length }})
        </div>
        <div class="steps-flow">
          <div
            v-for="(step, idx) in lesson.steps"
            :key="step.id"
            class="step-item"
          >
            <div class="step-dot"></div>
            <div class="step-name">
              {{ step.name }}
              <span v-if="step.duration" class="step-duration">({{ step.duration }}分钟)</span>
            </div>
            <div v-if="idx < lesson.steps.length - 1" class="step-arrow">→</div>
          </div>
        </div>
      </div>

      <!-- 核心资源 -->
      <div v-if="hasCoreResources" class="lesson-section">
        <div class="section-label">
          <FolderOutlined /> 核心资源
        </div>
        <div class="resources-list">
          <span v-if="lesson.videoPath" class="resource-item video">
            <VideoCameraOutlined /> 动画视频
          </span>
          <span v-if="lesson.pptPath || lesson.pdfPath" class="resource-item document">
            <FilePptOutlined /> 教学课件
          </span>
        </div>
      </div>

      <!-- 教学延伸 -->
      <div v-if="lesson.extension" class="lesson-section">
        <div class="section-label">
          <BranchesOutlined /> 教学延伸
        </div>
        <div class="section-content extension">{{ lesson.extension }}</div>
      </div>
    </div>

    <div class="lesson-footer">
      <a-button type="primary" size="small" @click="$emit('start-class', lesson)">
        <PlayCircleOutlined /> 开始上课
      </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import {
  ClockCircleOutlined, EditOutlined, AimOutlined, OrderedListOutlined,
  FolderOutlined, VideoCameraOutlined, FilePptOutlined, BranchesOutlined,
  PlayCircleOutlined,
} from '@ant-design/icons-vue';

const props = defineProps<{
  lesson: any;
  courseId: number | string;
  lessonType: string;
  index: number;
}>();

defineEmits<{
  prepare: [lesson: any];
  'start-class': [lesson: any];
}>();

const typeClass = computed(() => {
  const typeMap: Record<string, string> = {
    '导入课': 'introduction',
    '集体课': 'collective',
    '语言领域课': 'language',
    '健康领域课': 'health',
    '科学领域课': 'science',
    '社会领域课': 'social',
    '艺术领域课': 'art',
  };
  return typeMap[props.lessonType] || 'default';
});

const hasCoreResources = computed(() => {
  return props.lesson.videoPath || props.lesson.pptPath || props.lesson.pdfPath;
});
</script>

<style scoped>
.lesson-card {
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s;
}

.lesson-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-color: #d9d9d9;
}

.lesson-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 100%);
  border-bottom: 1px solid #f0f0f0;
}

.lesson-type-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}

.lesson-type-badge.introduction {
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
  color: #1976D2;
}

.lesson-type-badge.collective {
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
  color: #F57C00;
}

.lesson-type-badge.language {
  background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
  color: #43A047;
}

.lesson-type-badge.health {
  background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
  color: #E53935;
}

.lesson-type-badge.science {
  background: linear-gradient(135deg, #E3F2FD 0%, #90CAF9 100%);
  color: #1976D2;
}

.lesson-type-badge.social {
  background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%);
  color: #8E24AA;
}

.lesson-type-badge.art {
  background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
  color: #FFA000;
}

.lesson-type-badge.default {
  background: linear-gradient(135deg, #F5F5F5 0%, #E0E0E0 100%);
  color: #616161;
}

.badge-number {
  background: rgba(255, 255, 255, 0.6);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.lesson-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

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

.duration {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lesson-body {
  padding: 16px;
}

.lesson-section {
  margin-bottom: 16px;
}

.lesson-section:last-child {
  margin-bottom: 0;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin-bottom: 8px;
}

.section-content {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
  padding: 10px 12px;
  background: #FAFAFA;
  border-radius: 6px;
  white-space: pre-wrap;
}

.section-content.extension {
  background: #FFF8F0;
  border-left: 3px solid #FF8C42;
}

.steps-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8C42 0%, #FF6B35 100%);
}

.step-name {
  font-size: 13px;
  color: #333;
}

.step-duration {
  font-size: 11px;
  color: #999;
  margin-left: 4px;
}

.step-arrow {
  color: #ccc;
  font-size: 14px;
}

.resources-list {
  display: flex;
  align-items: center;
  gap: 12px;
}

.resource-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
}

.resource-item.video {
  background: #FFF3E0;
  color: #F57C00;
}

.resource-item.document {
  background: #E3F2FD;
  color: #1976D2;
}

.lesson-footer {
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
}
</style>
