<template>
  <div class="page-contain">
    <div class="templateName">
      <el-form ref="formRef" :model="formData" :rules="rules">
        <!-- 模板名称 -->
        <el-form-item label-suffix="*" prop="templateName" label="模板名称">
          <el-input v-model="formData.templateName" placeholder="请输入模板名称" />
        </el-form-item>
        <!-- 封面图 -->
        <el-form-item label-suffix="*" prop="templateCover" label="封面图">
          <UploadImg v-model="formData.templateCover" :directory="'course'" />
        </el-form-item>
        <!-- 训练场景 -->
        <el-form-item label-suffix="*" prop="scene" label="训练场景">
          <el-select v-model="formData.scene" placeholder="请选择训练场景" class="w-full">
            <el-option v-for="opt in SCENE_OPTIONS" :key="opt.value" :label="opt.label" :value="opt.value" />
          </el-select>
        </el-form-item>

        <!-- 模板简介 -->
        <el-form-item label-suffix="*" prop="templateIntroduction" label="模板简介">
          <el-input v-model="formData.templateIntroduction" placeholder="请输入" type="textarea" :rows="3" />
        </el-form-item>

        <!-- 动作组容器：循环渲染所有动作组 -->
        <div v-for="(unit, unitIndex) in formData.units" :key="unitIndex" class="unit-card">
          <!-- 单元操作工具栏 -->
          <div class="unit-toolbar">
            <el-button @click="delUnit(unitIndex)" :disabled="formData.units.length <= 1">
              <template #icon>
                <Minus />
              </template>
              删除单元
            </el-button>
            <el-button type="primary" @click="addUnit()">
              <template #icon>
                <Plus />
              </template>
              新增单元
            </el-button>
          </div>

          <!-- 单元类型（动作组/超级组） -->
          <el-form-item label-suffix="*" :label="`单元${unitIndex + 1}类型`" :prop="`units[${unitIndex}].unitType`">
            <el-select
              v-model="unit.unitType"
              placeholder="请选择单元类型"
              class="w-full"
              @change="onUnitTypeChange(unitIndex)"
            >
              <el-option label="动作组" :value="UNIT_TYPE.GROUP" />
              <el-option label="超级组" :value="UNIT_TYPE.SUPERSET" />
            </el-select>
          </el-form-item>

          <!-- 选择超级组或者动作组名称 -->
          <el-form-item label-suffix="*" :label="unit.unitType === UNIT_TYPE.GROUP ? '动作组名称' : '超级组名称'">
            <el-select
              v-model="unit.id"
              :placeholder="unit.unitType === UNIT_TYPE.GROUP ? '请选择动作' : '请选择超级组'"
              class="w-full"
              @change="(val) => onSelectItem(unitIndex, val)"
            >
              <template v-if="unit.unitType === UNIT_TYPE.GROUP">
                <el-option v-for="item in exercisesList" :key="item.id" :label="item.name" :value="item.id" />
              </template>
              <template v-else>
                <el-option v-for="item in superGroupList" :key="item.id" :label="item.name" :value="item.id" />
              </template>
            </el-select>
          </el-form-item>

          <!-- 排序 -->
          <el-form-item label="排序" :prop="`units[${unitIndex}].sortOrder`">
            <el-input v-model="unit.sortOrder" min="1" max="99" />
          </el-form-item>

          <!-- 循环：动作组 1 个、超级组 N 个，都会渲染 -->
          <template v-for="(item, idx) in unit.exercises" :key="idx">
            <div class="exercise-item">
              <div class="action-name">动作名称：{{ getExerciseName(item.exerciseId) }}</div>
              <ExerciseSetTable :type="item.exerciseType" :sets="item.sets" @update:sets="val => (item.sets = val)" />
            </div>
          </template>
        </div>

        <!-- 取消/保存按钮 -->
        <el-form-item>
          <div class="btn-center-wrapper">
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" :loading="loading" @click="handleSubmit">保存</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, nextTick, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Minus, Plus } from '@element-plus/icons-vue'
import { TrainingTemplatesApi } from '@/api/store/training/templates'
import { ExercisesApi } from '@/api/store/training/pose'
import ExerciseSetTable from '../templates/ExerciseSetTable.vue'
import { SupersetsApi } from '@/api/store/training/Supersets'

// ==================== 常量定义 ====================
const UNIT_TYPE = { GROUP: 1, SUPERSET: 2 }

const EXERCISE_TYPE_MAP = {
  '无氧运动': 0,
  '有氧运动': 1,
  '记次训练': 2,
  '计时训练': 3,
  '自重加重': 4,
  '自重减重': 5,
  '间歇训练': 6
}

const SCENE_OPTIONS = [
  { label: '不限', value: 1 },
  { label: '仅哑铃', value: 2 },
  { label: '仅哑铃+杠铃', value: 3 },
  { label: '健身房', value: 4 }
]

// ==================== 数据工厂函数 ====================
const createDefaultSet = () => ({
  weight: 0, reps: 0, distance: 0, duration: 0, restTime: 0, setIndex: 1
})

const createDefaultExercise = () => ({
  exerciseId: 0, exerciseType: 1, innerOrder: 1, sets: [createDefaultSet()]
})

const createDefaultUnit = (sortOrder) => ({
  id: null, name: '', unitType: UNIT_TYPE.GROUP, sortOrder, exercises: [createDefaultExercise()]
})

// ==================== 响应式状态 ====================
const formRef = ref(null)
const loading = ref(false)
const router = useRouter()
const route = useRoute()
const exercisesList = ref([])
const superGroupList = ref([])

const formData = reactive({
  id: 0,
  groupId: null,
  templateName: '',
  scene: null,
  templateCover: '',
  templateIntroduction: '',
  units: [createDefaultUnit(1)]
})

const rules = reactive({
  templateName: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
  templateCover: [{ required: true, message: '请上传封面图', trigger: 'change' }],
  scene: [{ required: true, message: '请选择训练场景', trigger: 'change' }],
  templateIntroduction: [{ required: true, message: '请输入模板简介', trigger: 'blur' }]
})

// ==================== 数据加载 ====================
const loadSuperGroupList = async () => {
  try {
    const res = await SupersetsApi.getSupersetList(false)
    superGroupList.value = res || []
  } catch (err) {
    console.error('加载超级组列表失败：', err)
    ElMessage.error('加载超级组列表失败')
  }
}

const loadExercisesList = async () => {
  try {
    const res = await ExercisesApi.getExercisesList(false)
    exercisesList.value = res || []
  } catch (err) {
    console.error('加载动作列表失败：', err)
    ElMessage.error('加载动作列表失败')
  }
}

const loadTemplateDetail = async (id) => {
  try {
    loading.value = true
    const res = await TrainingTemplatesApi.getTrainingTemplates(id)
    const detail = res.data || res

    formData.id = detail.id || 0
    formData.groupId = detail.groupId || null
    formData.templateName = detail.templateName || ''
    formData.scene = detail.scene || null
    formData.templateCover = detail.urlCover || detail.templateCover || ''
    formData.templateIntroduction = detail.introduction || ''

    if (detail.units && detail.units.length) {
      formData.units = detail.units.map((unit) => ({
        id: unit.unitId || null,
        name: unit.unitName || '',
        unitType: unit.unitType || UNIT_TYPE.GROUP,
        sortOrder: unit.sortOrder || 1,
        exercises: unit.exercises?.map((item) => ({
          exerciseId: item.exerciseId || 0,
          exerciseType: item.exerciseType || 1,
          innerOrder: item.innerOrder || 1,
          sets: item.sets || [createDefaultSet()]
        })) || [createDefaultExercise()]
      }))
    }

    nextTick(() => {
      updateDynamicRules()
      formRef.value?.clearValidate()
    })
  } catch (err) {
    console.error('获取模板详情失败：', err)
    ElMessage.error('获取模板详情失败')
  } finally {
    loading.value = false
  }
}

// ==================== 动态表单校验 ====================
const updateDynamicRules = () => {
  Object.keys(rules).forEach((key) => {
    if (key.startsWith('units[')) {
      delete rules[key]
    }
  })
  formData.units.forEach((unit, index) => {
    rules[`units[${index}].unitType`] = [
      { required: true, message: '请选择单元类型', trigger: 'change' }
    ]
    rules[`units[${index}].name`] = [
      { required: true, message: '请选择动作', trigger: 'change' }
    ]
    rules[`units[${index}].sortOrder`] = [
      { required: true, message: '请输入排序', trigger: 'blur' }
    ]
  })
  nextTick(() => {
    if (formRef.value) formRef.value.clearValidate()
  })
}

// ==================== 交互方法 ====================
const getExerciseName = (id) => {
  if (!id) return '未选择动作'
  const item = exercisesList.value.find((i) => i.id === id)
  return item ? item.name : '未知动作'
}

const addUnit = () => {
  formData.units.push(createDefaultUnit(formData.units.length + 1))
  updateDynamicRules()
  ElMessage.success('新增单元成功（可切换为超级组）')
}

const delUnit = (unitIndex) => {
  if (formData.units.length <= 1) {
    ElMessage.warning('至少保留一个单元')
    return
  }
  ElMessageBox.confirm('确定要删除这个单元吗？', '提示', { type: 'warning' }).then(() => {
    formData.units.splice(unitIndex, 1)
    formData.units.forEach((unit, index) => {
      unit.sortOrder = index + 1
    })
    updateDynamicRules()
    ElMessage.success('单元删除成功')
  })
}

const onUnitTypeChange = (unitIndex) => {
  const unit = formData.units[unitIndex]
  // 单元类型切换后，原选中的动作组/超级组 id、名称及动作明细都不再适用，需重置
  unit.id = null
  unit.name = ''
  unit.exercises = [createDefaultExercise()]
}

const onSelectItem = async (unitIndex, selectId) => {
  const unit = formData.units[unitIndex]
  unit.exercises = []

  if (unit.unitType === UNIT_TYPE.GROUP) {
    // 动作组：查询单个动作详情
    const res = await ExercisesApi.getExercises(selectId)
    const detail = res
    unit.name = detail.name || ''
    unit.exercises.push({
      exerciseId: detail.id,
      exerciseType: EXERCISE_TYPE_MAP[detail.exerciseType] ?? 0,
      innerOrder: 1,
      sets: [createDefaultSet()]
    })
  } else {
    // 超级组：查询超级组详情（含多个动作）
    const res = await SupersetsApi.getSupersets(selectId)
    const detail = res
    unit.name = detail.name || ''
    unit.exercises = detail.exercises.map((item) => ({
      exerciseId: item.id,
      exerciseType: Number(item.exerciseType) || 0,
      innerOrder: item.innerOrder,
      sets: item.sets || [{ weight: 0, reps: 0, restTime: 0, setIndex: 1 }]
    }))
  }
}

// ==================== 表单提交 ====================
const handleCancel = () => {
  ElMessage.info('取消保存表单内容')
  formRef.value?.resetFields()
  Object.assign(formData, {
    id: 0,
    groupId: null,
    templateName: '',
    scene: null,
    templateCover: '',
    templateIntroduction: '',
    units: [createDefaultUnit(1)]
  })
  updateDynamicRules()
  router.push('/training/templates/templatesForm')
}

const handleSubmit = async () => {
  if (!formRef.value) return
  try {
    await formRef.value.validate()
  } catch {
    ElMessage.error('请按照要求填写')
    return
  }

  const hasEmptyExercise = formData.units.some((unit) => !unit.exercises[0].exerciseId)
  if (hasEmptyExercise) {
    ElMessage.warning('请为所有动作组选择动作名称')
    return
  }

  loading.value = true
  try {
    const submitData = {
      templateId: formData.id,
      groupId: formData.groupId,
      templateName: formData.templateName,
      scene: formData.scene,
      templateCover: formData.templateCover,
      templateIntroduction: formData.templateIntroduction,
      units: formData.units.map((unit) => ({
        id: unit.id ?? 0,
        name: unit.name,
        unitType: unit.unitType,
        sortOrder: unit.sortOrder,
        exercises: unit.exercises.map((exercise) => ({
          exerciseId: exercise.exerciseId,
          exerciseType: exercise.exerciseType,
          innerOrder: exercise.innerOrder,
          sets: exercise.sets.map((set) => ({
            weight: set.weight,
            reps: set.reps,
            distance: set.distance,
            duration: set.duration,
            restTime: set.restTime,
            setIndex: set.setIndex
          }))
        }))
      }))
    }

    if (route.query.id) {
      await TrainingTemplatesApi.updateTrainingTemplates(submitData)
    } else {
      await TrainingTemplatesApi.createTrainingTemplates(submitData)
    }
    ElMessage.success('模板保存成功！')
    router.back()
  } catch (err) {
    console.error('保存失败：', err?.message || err)
    ElMessage.error(`保存失败：${err?.message || '网络/服务异常'}`)
  } finally {
    loading.value = false
  }
}

// ==================== 生命周期 ====================
onMounted(async () => {
  loadExercisesList()
  loadSuperGroupList()
  if (route.query.id) {
    loadTemplateDetail(Number(route.query.id))
  }
})

watch(
  () => route.query.id,
  (newId) => {
    if (newId) {
      loadTemplateDetail(Number(newId))
    }
  },
  { immediate: true }
)
</script>

<style scoped>
/* ==================== 表单项全局样式 ==================== */
::deep(.el-form-item__label) {
  float: none !important;
  width: 88px !important;
  padding: 0 !important;
  margin-right: 16px !important;
  line-height: 32px;
  text-align: right;
  white-space: nowrap;
}

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

/* ==================== 页面布局 ==================== */
.page-contain {
  height: 100vh;
  overflow-y: auto;
  background-color: #f5f7fa;
  box-sizing: border-box;
}

.templateName {
 
  padding: 30px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 5%);
}

/* ==================== 单元卡片 ==================== */
.unit-card {
  margin: 20px 0;
  padding: 16px 20px 20px;
  background: #fafbfc;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  transition: border-color 0.2s;
}

.unit-card:hover {
  border-color: #c0c4cc;
}

.unit-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 4px;
}

.exercise-item {
  margin: 16px 0;
}

.action-name {
  margin-bottom: 8px;
  font-size: 13px;
  color: #606266;
}

/* ==================== 按钮区域 ==================== */
.btn-center-wrapper {
  display: flex;
  width: 100%;
  padding-top: 20px;
  margin-top: 30px;
  border-top: 1px solid #eee;
  justify-content: center;
  gap: 12px;
}
</style>