<template>
  <div class="lesson-steps-content">
    <!-- 教学过程列表 -->
    <div v-if="steps.length > 0" class="steps-wrapper">
      <a-alert
        message="教学过程"
        :description="`共 ${steps.length} 个教学环节`"
        type="info"
        show-icon
        closable
        class="steps-alert"
      />

      <!-- 环节列表 -->
      <div class="steps-list">
        <div
          v-for="(step, index) in steps"
          :key="step.id"
          class="step-item"
          :class="{ active: selectedStep?.id === step.id }"
          @click="handleSelectStep(step)"
        >
          <div class="step-header">
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-info">
              <div class="step-name">{{ step.name }}</div>
              <div class="step-meta">
                <span class="step-duration">
                  <ClockCircleOutlined /> {{ step.duration }}分钟
                </span>
                <span v-if="step.stepType" class="step-type">
                  <TagOutlined /> {{ getStepTypeName(step.stepType) }}
                </span>
              </div>
            </div>
          </div>

          <!-- 选中状态下显示详细内容 -->
          <div v-if="selectedStep?.id === step.id" class="step-detail">
            <a-divider class="step-divider" />

            <!-- 教学目标 -->
            <div v-if="step.objective" class="step-objective">
              <div class="detail-title">
                <AimOutlined /> 教学目标
              </div>
              <div class="detail-content rich-content">{{ step.objective }}</div>
            </div>

            <!-- 环节说明/内容 -->
            <div v-if="step.description || step.content" class="step-description">
              <div class="detail-title">
                <FileTextOutlined /> 环节内容
              </div>
              <div class="detail-content rich-content" v-html="step.description || step.content"></div>
            </div>

            <!-- 环节资源 -->
            <div v-if="hasStepResources(step)" class="step-resources">
              <div class="detail-title">
                <FolderOutlined /> 环节资源
              </div>
              <div class="resources-grid">
                <div v-if="step.resources && step.resources.length > 0" class="resource-group">
                  <div v-for="(res, idx) in step.resources" :key="idx" class="resource-item">
                    <a-tag :color="getResourceColor(res.resourceType)">
                      {{ res.resourceName || res.resourceType }}
                    </a-tag>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <a-empty v-else description="暂无教学过程" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import {
  ClockCircleOutlined, TagOutlined, FileTextOutlined, AimOutlined,
  FolderOutlined,
} from '@ant-design/icons-vue';

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

const emit = defineEmits<{
  'select-step': [step: any];
}>();

const steps = computed(() => props.lesson?.steps || []);

const hasStepResources = (step: any): boolean => {
  return !!(step.resources && step.resources.length > 0);
};

const getStepTypeName = (type: string): string => {
  const typeMap: Record<string, string> = {
    'WARMUP': '热身导入',
    'INTRODUCTION': '导入环节',
    'DEVELOPMENT': '发展环节',
    'PRACTICE': '练习环节',
    'EXTENSION': '延伸环节',
    'CONCLUSION': '总结环节',
    'ASSESSMENT': '评估环节',
  };
  return typeMap[type] || type;
};

const handleSelectStep = (step: any) => {
  // 如果已选中，则取消选中；否则选中当前环节
  if (props.selectedStep?.id === step.id) {
    emit('select-step', null);
  } else {
    emit('select-step', step);
  }
};

const getResourceColor = (type: string): string => {
  const colorMap: Record<string, string> = {
    'IMAGE': 'blue',
    'VIDEO': 'green',
    'AUDIO': 'orange',
    'PPT': 'red',
    'PDF': 'purple',
    'DOCUMENT': 'cyan',
  };
  return colorMap[type] || 'default';
};
</script>

<style scoped>
.lesson-steps-content {
  min-height: 400px;
}

.steps-alert {
  margin-bottom: 20px;
}

.steps-wrapper {
  background: white;
}

.steps-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step-item {
  background: #FAFAFA;
  border: 2px solid #f0f0f0;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.step-item:hover {
  border-color: #d9d9d9;
  background: #FFF;
}

.step-item.active {
  border-color: #FF8C42;
  background: linear-gradient(90deg, #FFF9F5 0%, #FFF 100%);
  box-shadow: 0 4px 12px rgba(255, 140, 66, 0.15);
}

.step-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8C42 0%, #FF6B35 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  flex-shrink: 0;
}

.step-info {
  flex: 1;
}

.step-name {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}

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

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

.step-detail {
  margin-top: 16px;
  padding-top: 16px;
}

.step-divider {
  margin: 12px 0 16px 0;
}

.step-objective,
.step-description {
  margin-bottom: 16px;
}

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

.detail-content {
  padding: 16px;
  background: #F9F9F9;
  border-radius: 8px;
  line-height: 1.8;
  color: #666;
  font-size: 14px;
  margin-bottom: 16px;
}

.detail-content:last-child {
  margin-bottom: 0;
}

.script-content {
  background: linear-gradient(135deg, #FFF9E6 0%, #FFF 100%);
  border-left: 3px solid #faad14;
}

.rich-content :deep(p) {
  margin-bottom: 12px;
}

.rich-content :deep(p:last-child) {
  margin-bottom: 0;
}

.rich-content :deep(ul),
.rich-content :deep(ol) {
  padding-left: 24px;
  margin-bottom: 12px;
}

.step-resources {
  padding: 16px;
  background: #F0F7FF;
  border-radius: 8px;
}

.resources-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resource-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.resource-item {
  display: inline-block;
}
</style>
