<template>
  <div class="lesson-config-panel">
    <!-- 基本信息 -->
    <a-card size="small" title="基本信息" class="section-card">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="课程名称">
            <a-input v-model:value="lessonData.name" placeholder="请输入课程名称" @change="handleChange" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="课程时长">
            <a-input-number
              v-model:value="lessonData.duration"
              :min="minDuration"
              :max="maxDuration"
              style="width: 100%"
              @change="handleChange"
            />
            <span class="duration-unit">分钟</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item label="课程描述">
        <a-textarea
          v-model:value="lessonData.description"
          :rows="2"
          :maxlength="500"
          show-count
          placeholder="请输入课程描述（可选）"
          @change="handleChange"
        />
      </a-form-item>
    </a-card>

    <!-- 核心资源（仅集体课/领域课显示） -->
    <a-card v-if="showResources" size="small" title="核心资源" class="section-card">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="绘本动画">
            <FileUploader
              v-model:file-path="lessonData.videoPath"
              v-model:file-name="lessonData.videoName"
              file-type="video"
              :max-size="200"
              @change="handleChange"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="教学课件">
            <FileUploader
              v-model:file-path="lessonData.pptPath"
              v-model:file-name="lessonData.pptName"
              file-type="ppt"
              :max-size="100"
              @change="handleChange"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="电子绘本">
            <FileUploader
              v-model:file-path="lessonData.pdfPath"
              v-model:file-name="lessonData.pdfName"
              file-type="pdf"
              :max-size="100"
              @change="handleChange"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-card>

    <!-- 教学目标 & 教学准备 -->
    <a-card size="small" class="section-card">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="教学目标" required>
            <a-textarea
              v-model:value="lessonData.objectives"
              :rows="4"
              :maxlength="1500"
              show-count
              placeholder="请输入教学目标，如：
1. 理解故事主要内容
2. 认识重点词汇
3. 培养阅读兴趣"
              @change="handleChange"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="教学准备" required>
            <a-textarea
              v-model:value="lessonData.preparation"
              :rows="4"
              :maxlength="1500"
              show-count
              placeholder="请输入教学准备，如：
- 绘本PPT
- 相关图片/视频
- 教具材料"
              @change="handleChange"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-card>

    <!-- 教学环节 -->
    <a-card size="small" title="教学环节" class="section-card">
      <LessonStepsEditor
        v-model="lessonData.steps"
        :show-template="showTemplate"
        @change="handleChange"
      />
    </a-card>

    <!-- 教学延伸 & 教学反思（仅集体课/领域课显示） -->
    <a-card v-if="showExtension" size="small" class="section-card">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="教学延伸">
            <a-textarea
              v-model:value="lessonData.extension"
              :rows="3"
              :maxlength="1500"
              show-count
              placeholder="请输入教学延伸活动建议（可选）"
              @change="handleChange"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="教学反思">
            <a-textarea
              v-model:value="lessonData.reflection"
              :rows="3"
              :maxlength="1500"
              show-count
              placeholder="请输入教学反思提示（可选）"
              @change="handleChange"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-card>

    <!-- 测评工具 -->
    <a-card size="small" title="测评工具" class="section-card">
      <a-form-item label="测评内容">
        <a-textarea
          v-model:value="lessonData.assessmentData"
          :rows="3"
          :maxlength="1500"
          show-count
          placeholder="请输入测评要点或测评标准（可选）"
          @change="handleChange"
        />
      </a-form-item>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, computed } from 'vue';
import FileUploader from './FileUploader.vue';
import LessonStepsEditor from './LessonStepsEditor.vue';
import type { StepData } from './LessonStepsEditor.vue';

export interface LessonData {
  id?: number;
  tempId?: string;
  lessonType: string;
  name: string;
  description: string;
  duration: number;
  videoPath: string;
  videoName: string;
  pptPath: string;
  pptName: string;
  pdfPath: string;
  pdfName: string;
  objectives: string;
  preparation: string;
  extension: string;
  reflection: string;
  assessmentData: string;
  useTemplate: boolean;
  steps: StepData[];
  isNew?: boolean;
}

interface Props {
  modelValue: Partial<LessonData>;
  lessonType: string;
  minDuration?: number;
  maxDuration?: number;
  showResources?: boolean;
  showExtension?: boolean;
  showTemplate?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => ({}),
  lessonType: 'INTRO',
  minDuration: 5,
  maxDuration: 60,
  showResources: false,
  showExtension: false,
  showTemplate: false,
});

const emit = defineEmits<{
  (e: 'update:modelValue', value: LessonData): void;
  (e: 'change'): void;
}>();

// 默认课程数据
const defaultLessonData: LessonData = {
  lessonType: props.lessonType,
  name: '',
  description: '',
  duration: 25,
  videoPath: '',
  videoName: '',
  pptPath: '',
  pptName: '',
  pdfPath: '',
  pdfName: '',
  objectives: '',
  preparation: '',
  extension: '',
  reflection: '',
  assessmentData: '',
  useTemplate: false,
  steps: [],
};

const lessonData = reactive<LessonData>({
  ...defaultLessonData,
  ...props.modelValue,
});

// 监听外部值变化
watch(
  () => props.modelValue,
  (newVal) => {
    Object.assign(lessonData, defaultLessonData, newVal);
  },
  { deep: true }
);

// 处理变化
const handleChange = () => {
  emit('update:modelValue', { ...lessonData });
  emit('change');
};

// 暴露方法
defineExpose({
  lessonData,
  validate: () => {
    const errors: string[] = [];
    if (!lessonData.name) {
      errors.push('请输入课程名称');
    }
    if (!lessonData.objectives) {
      errors.push('请输入教学目标');
    }
    if (!lessonData.preparation) {
      errors.push('请输入教学准备');
    }
    return { valid: errors.length === 0, errors };
  },
});
</script>

<style scoped lang="scss">
.lesson-config-panel {
  .section-card {
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }

    :deep(.ant-card-head) {
      min-height: 40px;
      padding: 0 12px;

      .ant-card-head-title {
        padding: 8px 0;
        font-size: 14px;
      }
    }

    :deep(.ant-card-body) {
      padding: 16px;
    }
  }

  .duration-unit {
    margin-left: 8px;
    color: #666;
  }

  :deep(.ant-form-item) {
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
