<template>
  <Dialog v-model="dialogVisible" :title="title" width="800px">
    <el-form ref="formRef" :model="SonFormData" label-width="120px" :rules="formRules">
      <el-form-item label="计划名称" prop="name">
        <el-input v-model="SonFormData.name" placeholder="请输入计划名称" maxlength="50" show-word-limit />
      </el-form-item>

      <el-form-item label="封面图" prop="urlCover">
        <UploadImg v-model="SonFormData.urlCover" />
      </el-form-item>

      <el-form-item label="计划分类" prop="categoryId">
        <el-select v-model="SonFormData.categoryId" placeholder="请选择计划分类">
          <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="训练场景" prop="trainingScene">
        <el-select v-model="SonFormData.trainingScene" placeholder="请选择训练场景">
          <el-option v-for="item in trainingSceneOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="计划难度" prop="difficultyLevel">
        <el-select v-model="SonFormData.difficultyLevel" placeholder="请选择难度">
          <el-option v-for="item in difficultyLevelOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="适合人群" prop="targetPeople">
        <el-select v-model="SonFormData.targetPeople" placeholder="请选择适合人群">
          <el-option v-for="item in targetPeopleOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="频率" prop="frequencyPerWeek">
        <el-select v-model="SonFormData.frequencyPerWeek" :disabled="templateCount > 1" placeholder="请选择频率">
          <el-option v-for="item in frequencyOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="计划周期（周）" prop="durationWeeks">
        <el-input-number v-model="SonFormData.durationWeeks" class="w-full" />
      </el-form-item>

      <!-- 模板选择区域 -->
      <div v-for="(tpl, tplIdx) in SonFormData.templateIds" :key="tplIdx" class="template-block">
        <div class="template-block-toolbar">
          <el-button :disabled="SonFormData.templateIds.length <= 1" @click="removeTemplate(tplIdx)">
            <Icon icon="ep:minus" class="mr-5px" />删除
          </el-button>
          <el-button type="primary" @click="addTemplate(tplIdx)">
            <Icon icon="ep:plus" class="mr-5px" />新增
          </el-button>
        </div>

        <el-form-item :prop="`templateIds[${tplIdx}].templateId`" label="模板">
          <el-select v-model="tpl.templateId" placeholder="请选择模板" class="w-full"
            @change="() => loadTemplateDetail(tplIdx, tpl.templateId)" @click="() => reloadTemplateDetail(tplIdx)">
            <el-option v-for="item in templateList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item :prop="`templateIds[${tplIdx}].sortOrder`" label="排序">
          <el-input-number v-model="tpl.sortOrder" :min="1" :max="99" placeholder="排序号" class="w-full" />
        </el-form-item>

        <!-- 模板详情 -->
        <el-form-item v-if="templateDetailMap[tplIdx]" label="模板详情" class="template-detail-container">
          <el-collapse-transition>
            <div v-loading="templateLoading[tplIdx]">
              <div v-for="unit in templateDetailMap[tplIdx].units || []" :key="unit.unitId" class="unit-container">
                <div class="unit-row" @click="unit.isExpand = !unit.isExpand">
                  <Icon icon="ep:arrow-right" class="expand-icon" :class="{ 'is-expanded': unit.isExpand }" />
                  <span class="unit-name">{{ unit.unitName }}</span>
                </div>
                <div v-if="unit.isExpand" class="exercise-container">
                  <div v-for="exercise in unit.exercises || []" :key="exercise.exerciseId" class="exercise-item">
                    <div class="set-header">
                      <span>重量</span>
                      <span>距离</span>
                      <span>次数</span>
                      <span>锻炼时长(秒)</span>
                      <span>休息(秒)</span>
                    </div>
                    <div v-for="set in exercise.sets || []" :key="set.setIndex" class="set-row">
                      <span>{{ set.weight }}</span>
                      <span>{{ set.distance }}</span>
                      <span>{{ set.reps }}</span>
                      <span>{{ set.duration }}</span>
                      <span>{{ set.restTime }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-collapse-transition>
        </el-form-item>
      </div>

      <el-form-item label="计划介绍" prop="introduction">
        <el-input v-model="SonFormData.introduction" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button type="primary" :loading="loading" @click="handleSubmit">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup>
import { ref, reactive, watch, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { TrainingTemplatesApi } from '@/api/store/training/templates'
import { trainingPlanApi } from '@/api/store/training/trainingPlan'

// ==================== Props & Emits ====================
const props = defineProps({
  visible: { type: Boolean, default: false },
  title: String,
  formData: { type: Object, default: null }
})
const emit = defineEmits(['submit', 'update:visible'])

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

// ==================== 表单默认值（仅保留渲染所必需的字段） ====================
const defaultFormData = () => ({
  templateIds: [{ templateId: undefined, sortOrder: 1 }]
})

// ==================== 状态 ====================
const SonFormData = ref(defaultFormData())
const isEdit = ref(false)
const formRef = ref()
const loading = ref(false)
const templateList = ref([])
const categoryList = ref([])
const templateDetailMap = ref({})
const templateLoading = ref({})

// ==================== 计算属性 ====================
const templateCount = computed(() => SonFormData.value.templateIds.length)

const frequencyOptions = computed(() => {
  if (templateCount.value > 1) {
    return [{ label: templateCount.value + '练/周', value: templateCount.value }]
  }
  return [1, 2, 3, 4, 5, 6].map((n) => ({ label: n + '练/周', value: n }))
})

// ==================== 静态下拉选项 ====================
const trainingSceneOptions = [
  { label: '不限', value: 1 },
  { label: '健身房', value: 2 },
  { label: '仅哑铃', value: 3 },
  { label: '仅哑铃+杠铃', value: 4 }
]

const difficultyLevelOptions = [
  { label: '初阶', value: 1 },
  { label: '中阶', value: 2 },
  { label: '高阶', value: 3 }
]

const targetPeopleOptions = [
  { label: '不限', value: 1 },
  { label: '青少年', value: 2 },
  { label: '成年人', value: 3 },
  { label: '中年人', value: 4 },
  { label: '运动损伤', value: 5 }
]

// ==================== 频率同步 ====================
const syncFrequency = () => {
  if (templateCount.value > 1) {
    SonFormData.value.frequencyPerWeek = templateCount.value
  }
}

watch(templateCount, syncFrequency)

// ==================== 表单验证规则 ====================
const formRules = reactive({
  name: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
  durationWeeks: [{ required: true, message: '请输入计划周期', trigger: 'blur' }],
  frequencyPerWeek: [{ required: true, message: '请输入训练频率', trigger: 'change' }],
  difficultyLevel: [{ required: true, message: '请选择难度', trigger: 'change' }],
  targetPeople: [{ required: true, message: '请选择人群', trigger: 'change' }],
  trainingScene: [{ required: true, message: '请选择场景', trigger: 'change' }],
  urlCover: [{ required: true, message: '请上传封面图', trigger: 'change' }],
  introduction: [{ required: true, message: '请输入计划介绍', trigger: 'blur' }],
  categoryId: [{ required: true, message: '请选择计划分类', trigger: 'change' }],
  templateIds: [{
    type: 'array',
    required: true,
    validator: (rule, value, callback) => {
      if (!value || value.length === 0) {
        return callback(new Error('至少添加一个模板'))
      }
      for (let i = 0; i < value.length; i++) {
        if (!value[i].templateId) {
          return callback(new Error('第 ' + (i + 1) + ' 个模板未选择'))
        }
        if (!value[i].sortOrder || value[i].sortOrder < 1) {
          return callback(new Error('第 ' + (i + 1) + ' 个排序号必须≥1'))
        }
      }
      callback()
    }
  }]
})

// ==================== 弹窗打开时初始化 ====================
const initAdd = () => {
  isEdit.value = false
  SonFormData.value = defaultFormData()
  formRef.value?.clearValidate()
}

const initEdit = async () => {
  isEdit.value = true
  const res = await trainingPlanApi.getTrainingPlanDetail(props.formData.id)
  if (!res || !res.id) {
    ElMessage.error('获取计划详情失败')
    return
  }
  SonFormData.value = res
  // 补全父组件传入但详情未返回的字段
  SonFormData.value.trainingScene = props.formData.trainingScene
  SonFormData.value.targetPeople = props.formData.targetPeople
  SonFormData.value.categoryId = props.formData.categoryId
  // 处理 equipmentsSummary 数组转字符串
  if (Array.isArray(res.equipmentsSummary)) {
    SonFormData.value.equipmentsSummary = res.equipmentsSummary.join(',')
  }
  // 映射模板 ID 和排序
  if (res.templates && res.templates.length) {
    SonFormData.value.templateIds = res.templates.map((item) => ({
      templateId: item.id,
      sortOrder: item.sortOrder
    }))
  }
  if (!SonFormData.value.templateIds || SonFormData.value.templateIds.length === 0) {
    SonFormData.value.templateIds = [{ templateId: undefined, sortOrder: 1 }]
  }
  // 自动加载已有模板的详情
  SonFormData.value.templateIds.forEach((item, idx) => {
    if (item.templateId) loadTemplateDetail(idx, item.templateId)
  })
  syncFrequency()
  formRef.value?.clearValidate()
}

watch(dialogVisible, async (val) => {
  if (!val) return
  templateDetailMap.value = {}
  templateLoading.value = {}
  SonFormData.value = defaultFormData()

  if (!props.formData || Object.keys(props.formData).length === 0 || props.formData.id == null) {
    initAdd()
  } else {
    await initEdit()
  }
  formRef.value?.clearValidate()
})

// ==================== 数据加载 ====================
const loadTemplateList = async () => {
  const res = await TrainingTemplatesApi.getTrainingTemplatesPage({ pageNo: 1, pageSize: 100 })
  templateList.value = res.list || []
  if (templateList.value.length === 0) {
    ElMessage.warning('暂无可用训练模板，请先创建模板')
  }
}

const loadTemplateDetail = async (index, templateId) => {
  if (!templateId) return
  templateLoading.value[index] = true
  try {
    const res = await TrainingTemplatesApi.getTrainingTemplates(templateId)
    res.units?.forEach((unit) => {
      unit.isExpand = false
      unit.exercises?.forEach((ex) => { ex.isExpand = false })
    })
    templateDetailMap.value[index] = res
  } catch (err) {
    ElMessage.error('获取模板' + (index + 1) + '详情失败')
  } finally {
    templateLoading.value[index] = false
  }
}

const loadCategoryList = async () => {
  const res = await trainingPlanApi.getPlanList()
  categoryList.value = res || []
}

const reloadTemplateDetail = (index) => {
  const id = SonFormData.value.templateIds[index]?.templateId
  if (id) loadTemplateDetail(index, id)
}

// ==================== 模板增删 ====================
const addTemplate = (index) => {
  const newIds = [...SonFormData.value.templateIds]
  newIds.splice(index + 1, 0, {
    templateId: undefined,
    sortOrder: SonFormData.value.templateIds.length + 1
  })
  SonFormData.value.templateIds = newIds
  reindexDetailMap()
  syncFrequency()
}

const removeTemplate = (index) => {
  if (SonFormData.value.templateIds.length <= 1) return
  SonFormData.value.templateIds = SonFormData.value.templateIds.filter((_, i) => i !== index)
  reindexDetailMap()
  syncFrequency()
}

const reindexDetailMap = () => {
  const oldMap = { ...templateDetailMap.value }
  templateDetailMap.value = {}
  templateLoading.value = {}
  SonFormData.value.templateIds.forEach((item, i) => {
    if (item.templateId && oldMap[i] !== undefined) {
      templateDetailMap.value[i] = oldMap[i]
    }
  })
}

// ==================== 提交 ====================
const handleSubmit = async () => {
  if (!formRef.value) return
  try {
    await formRef.value.validate()
  } catch {
    return
  }
  loading.value = true
  try {
    if (isEdit.value) {
      await trainingPlanApi.updateTrainingPlan(SonFormData.value)
    } else {
      await trainingPlanApi.createTrainingPlan(SonFormData.value)
    }
    ElMessage.success(isEdit.value ? '编辑成功' : '创建成功')
    dialogVisible.value = false
    emit('submit')
  } catch (err) {
    ElMessage.error((isEdit.value ? '编辑' : '创建') + '失败')
  } finally {
    loading.value = false
  }
}

// ==================== 初始化 ====================
onMounted(() => {
  loadTemplateList()
  loadCategoryList()
})
</script>

<style scoped>
/* ==================== 工具类 ==================== */
.w-full {
  width: 100%;
}

/* ==================== 模板卡片 ==================== */
.template-block {
  margin-bottom: 16px;
  padding: 16px 20px 4px;
  background: var(--el-fill-color-lighter);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
}

.template-block-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 8px;
}

/* ==================== 模板详情 ==================== */
.template-detail-container {
  width: 100%;
  padding: 12px;
  background: var(--el-fill-color-lighter);
  border-radius: 6px;
  box-sizing: border-box;
}

/* ==================== 训练单元 ==================== */
.unit-container {
  width: 100%;
  margin-bottom: 8px;
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
}

.unit-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.unit-row:hover {
  background: var(--el-fill-color-light);
}

.expand-icon {
  margin-right: 8px;
  color: var(--el-text-color-secondary);
  transition: transform 0.3s;
}

.expand-icon.is-expanded {
  transform: rotate(90deg);
}

.unit-name {
  font-weight: 500;
  color: var(--el-text-color-primary);
}

/* ==================== 训练组详情 ==================== */
.set-header,
.set-row {
  display: grid;
  padding: 8px 12px;
  text-align: center;
  grid-template-columns: repeat(5, 1fr);
}

.set-header {
  font-weight: 500;
  color: var(--el-text-color-regular);
  background: var(--el-fill-color-light);
}

.set-row {
  color: var(--el-text-color-primary);
  border-top: 1px solid var(--el-border-color-lighter);
}

.exercise-container {
  padding: 4px;
}
</style>