<template>
  <a-modal
    v-model:open="visible"
    title="选择上课内容"
    width="680px"
    :footer="null"
  >
    <div class="select-lessons-modal">
      <div class="course-info">
        <strong>课程包：</strong>{{ course.name || '未知课程' }}
      </div>

      <a-divider style="margin: 16px 0;" />

      <!-- 推荐：整体教学 -->
      <div class="section">
        <h4 class="section-title">【推荐：整体教学】</h4>
        <a-radio-group v-model:value="selectionMode" class="radio-group">
          <a-radio value="all" class="radio-option">
            <div class="option-card">
              <div class="option-header">
                <span class="option-title">按课程包完整教学</span>
                <a-tag color="green" class="option-tag">推荐</a-tag>
              </div>
              <div class="option-desc">
                按顺序完成：导入课 → 集体课 → 五大领域课
              </div>
              <div class="option-meta">
                <ClockCircleOutlined /> 预计总时长：约 {{ totalDuration }} 分钟（可分多次完成）
              </div>
              <div class="option-hint">适合：首次教学、完整学习</div>
            </div>
          </a-radio>
        </a-radio-group>
      </div>

      <!-- 灵活：选择课程 -->
      <div class="section">
        <h4 class="section-title">【灵活：选择课程】</h4>
        <a-radio-group v-model:value="selectionMode" class="radio-group">
          <a-radio value="custom" class="radio-option">
            <div class="option-card">
              <div class="option-title">选择单次课程</div>
            </div>
          </a-radio>
        </a-radio-group>

        <div v-if="selectionMode === 'custom'" class="lesson-checkboxes">
          <a-checkbox-group v-model:value="selectedLessonIds" class="checkbox-group">
            <!-- 导入课 -->
            <div v-if="introductionLesson" class="lesson-checkbox-item">
              <a-checkbox :value="introductionLesson.id" class="lesson-checkbox">
                <div class="checkbox-content">
                  <span class="lesson-number">1.</span>
                  <span class="lesson-type-text">导入课</span>
                  <span class="lesson-name-text">{{ introductionLesson.name }}</span>
                  <span class="lesson-duration-text">({{ introductionLesson.duration }}分钟)</span>
                </div>
              </a-checkbox>
            </div>

            <!-- 集体课 -->
            <div v-if="collectiveLesson" class="lesson-checkbox-item">
              <a-checkbox :value="collectiveLesson.id" class="lesson-checkbox">
                <div class="checkbox-content">
                  <span class="lesson-number">2.</span>
                  <span class="lesson-type-text">集体课</span>
                  <span class="lesson-name-text">{{ collectiveLesson.name }}</span>
                  <span class="lesson-duration-text">({{ collectiveLesson.duration }}分钟)</span>
                </div>
              </a-checkbox>
            </div>

            <!-- 五大领域课 -->
            <div v-for="(lesson, idx) in domainLessons" :key="lesson.id" class="lesson-checkbox-item">
              <a-checkbox :value="lesson.id" class="lesson-checkbox">
                <div class="checkbox-content">
                  <span class="lesson-number">{{ 3 + idx }}.</span>
                  <span class="lesson-type-text">{{ getLessonTypeName(lesson.lessonType) }}</span>
                  <span class="lesson-name-text">{{ lesson.name }}</span>
                  <span class="lesson-duration-text">({{ lesson.duration }}分钟)</span>
                </div>
              </a-checkbox>
            </div>
          </a-checkbox-group>

          <div class="selection-summary">
            <a-alert
              :message="`已选择 ${selectedLessonIds.length} 节课，预计时长：${selectedDuration} 分钟`"
              :type="selectedLessonIds.length > 0 ? 'success' : 'info'"
              show-icon
            />
          </div>
        </div>
      </div>

      <a-divider style="margin: 20px 0;" />

      <div class="modal-footer">
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" :disabled="!canStart" @click="handleConfirm">
          开始上课
        </a-button>
      </div>
    </div>
  </a-modal>
</template>

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

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

const emit = defineEmits<{
  'update:open': [value: boolean];
  'confirm': [lessonIds: (number | string)[], mode: string];
}>();

const visible = computed({
  get: () => props.open,
  set: (val) => emit('update:open', val),
});

const selectionMode = ref<'all' | 'custom'>('all');
const selectedLessonIds = ref<(number | string)[]>([]);

// 按类型分组课程
const introductionLesson = computed(() =>
  props.course.courseLessons?.find((l: any) => l.lessonType === 'INTRODUCTION')
);

const collectiveLesson = computed(() =>
  props.course.courseLessons?.find((l: any) => l.lessonType === 'COLLECTIVE')
);

const domainLessons = computed(() =>
  props.course.courseLessons?.filter((l: any) =>
    ['LANGUAGE', 'HEALTH', 'SCIENCE', 'SOCIAL', 'ART'].includes(l.lessonType)
  ) || []
);

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

const selectedDuration = computed(() => {
  return props.course.courseLessons
    ?.filter((l: any) => selectedLessonIds.value.includes(l.id))
    .reduce((sum: number, l: any) => sum + (l.duration || 0), 0) || 0;
});

const canStart = computed(() => {
  if (selectionMode.value === 'all') return true;
  return selectedLessonIds.value.length > 0;
});

const getLessonTypeName = (type: string): string => {
  const typeMap: Record<string, string> = {
    'INTRODUCTION': '导入课',
    'COLLECTIVE': '集体课',
    'LANGUAGE': '语言领域课',
    'HEALTH': '健康领域课',
    'SCIENCE': '科学领域课',
    'SOCIAL': '社会领域课',
    'ART': '艺术领域课',
  };
  return typeMap[type] || type;
};

const handleCancel = () => {
  visible.value = false;
};

const handleConfirm = () => {
  if (selectionMode.value === 'all') {
    const allIds = props.course.courseLessons?.map((l: any) => l.id) || [];
    emit('confirm', allIds, 'all');
  } else {
    emit('confirm', selectedLessonIds.value, 'custom');
  }
  visible.value = false;
};

// 重置状态
watch(() => props.open, (newVal) => {
  if (newVal) {
    selectionMode.value = 'all';
    selectedLessonIds.value = [];
  }
});
</script>

<style scoped>
.select-lessons-modal {
  padding: 8px 0;
}

.course-info {
  font-size: 14px;
  color: #333;
}

.section {
  margin-bottom: 20px;
}

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

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}

.radio-group {
  width: 100%;
}

.radio-option {
  width: 100%;
  display: block;
}

.option-card {
  padding: 12px 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.option-card:hover {
  border-color: #d9d9d9;
  background: #fafafa;
}

.option-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.option-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.option-tag {
  font-size: 12px;
}

.option-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

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

.option-hint {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
  font-style: italic;
}

.lesson-checkboxes {
  margin-top: 12px;
  padding: 16px;
  background: #FAFAFA;
  border-radius: 8px;
}

.checkbox-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lesson-checkbox-item {
  background: white;
  border-radius: 6px;
  padding: 10px 12px;
  border: 1px solid #f0f0f0;
  transition: all 0.2s;
}

.lesson-checkbox-item:hover {
  border-color: #d9d9d9;
}

.lesson-checkbox {
  width: 100%;
}

.checkbox-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.lesson-number {
  font-weight: 600;
  color: #999;
  min-width: 24px;
}

.lesson-type-text {
  color: #666;
  min-width: 80px;
}

.lesson-name-text {
  flex: 1;
  color: #333;
}

.lesson-duration-text {
  color: #999;
  font-size: 12px;
}

.selection-summary {
  margin-top: 12px;
}

.selection-summary :deep(.ant-alert) {
  padding: 8px 12px;
}

.selection-summary :deep(.ant-alert-message) {
  font-size: 13px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
