<template>
  <view class="train-template-page">
    <!-- ==================== 导航栏 ==================== -->
    <up-navbar :auto-back="true" bg-color="#121212" left-icon-color="#fff" placeholder>
      <template #center>
        <text class="navbar-title">{{ templateDetail.templateName }}</text>
      </template>
    </up-navbar>

    <!-- ==================== 统计信息 ==================== -->
    <view class="stats">
      <view class="stat-item">
        <up-icon name="grid" color="#ffd100" size="18" />
        <text class="stat-text">
          {{ templateDetail.exerciseCount }}个动作 · {{ templateDetail.totalSets }}组 ·
          {{ templateDetail.totalWeight }}kg
        </text>
      </view>
      <view class="stat-item">
        <up-icon name="setting" color="#ffd100" size="18" />
        <text class="stat-text">{{ equipmentDisplayText }}</text>
      </view>
    </view>

    <!-- ==================== 肌肉图 ==================== -->
    <view class="muscle-map">
      <image :src="MUSCLE_IMG" mode="aspectFill" class="muscle-img" />
    </view>

    <!-- ==================== 训练部位 ==================== -->
    <view class="primary-muscle">
      <view class="muscle-row">
        <text class="section-title">主要训练部位：</text>
        <text class="description">
          {{ (templateDetail.primaryMuscleNames || []).join('、') || '暂无数据' }}
        </text>
      </view>
      <view class="divider" />
      <view class="muscle-row">
        <text class="section-title">次要训练部位：</text>
        <text class="description">
          {{ (templateDetail.secondaryMuscleNames || []).join('、') || '暂无数据' }}
        </text>
      </view>
    </view>

    <!-- ==================== 模板介绍 ==================== -->
    <view class="section">
      <text class="section-title">模板介绍：</text>
      <text class="description">{{ templateDetail.introduction }}</text>
    </view>

    <!-- ==================== 动作列表 ==================== -->
    <view class="section">
      <view class="section-top">
        <text class="section-title">动作列表</text>
        <view v-if="date" class="right-btn" @click="templateEdit">修改训练内容</view>
      </view>

      <template v-if="templateUnits.length">
        <view v-for="(unit, unitIndex) in templateUnits" :key="unitIndex" class="exercise-item"
          @click="handleUnitClick(unit)">
          <!-- 单元头部 -->
          <view class="unit-header">
            <view class="left">
              <text class="exercise-number">{{ unitIndex + 1 }}</text>
              <view class="unitImage">
                <image :src="getUnitCover(unit)" mode="aspectFill" class="unit-icon" />
              </view>
              <view class="unit-title">
                <view class="name">{{ unit.unitName || `超级组 ${unitIndex + 1}` }}</view>
                <view class="PartTool">
                  <template v-if="unit.unitType === 1">
                    {{ unit.exercises[0]?.categoryDescription }} {{ unit.exercises[0]?.equipmentDescription }}
                  </template>
                  <template v-else>超级组</template>
                </view>
                <text class="totalSetCount">{{ getUnitSetCount(unit) }}组</text>
              </view>
            </view>
            <view class="right">
              <up-icon name="arrow-left" color="#fff" size="18" />
            </view>
          </view>

          <!-- 普通动作：unitType === 1 -->
          <view v-if="unit.unitType === 1 && unit.exercises?.length" class="normal-action-wrap">
            <view class="action-content">
              <view v-for="(detail, i) in unit.exercises[0].sets || []" :key="i" class="detail-row">
                <text class="detail-label">{{ i + 1 }}</text>
                <view class="sets-data">
                  <text class="detail-value">{{ formatSetText(unit.exercises[0].exerciseType, detail) }}</text>
                  <text v-if="detail.restTime && unit.exercises[0].exerciseType !== 6" class="rest">{{ detail.restTime
                  }}s</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 超级组：unitType === 2 -->
          <view v-else-if="unit.unitType === 2" class="super-action-wrap">
            <!-- 超级组内动作名称 -->
            <view class="super-actionName">
              <view v-for="(ex, exIdx) in unit.exercises" :key="ex.exerciseId" class="name-item">
                <text class="letter">{{ String.fromCharCode(65 + exIdx) }} </text>
                <text class="action-name">{{ ex.exerciseName || '动作名称' }}</text>
              </view>
            </view>

            <!-- 超级组按组号循环 -->
            <view class="super-set-list">
              <view v-for="idx in getSuperSetMaxGroupCount(unit.exercises)" :key="idx" class="super-set-item">
                <text class="detail-label">{{ idx }}</text>
                <view class="set-column">
                  <view v-for="(ex, exIdx) in unit.exercises" :key="ex.exerciseId" class="action-in-set">
                    <template v-if="ex.sets[idx - 1]">
                      <text class="action-letter">{{ idx }}{{ String.fromCharCode(65 + exIdx) }}</text>
                      <view class="set-content">
                        <text>{{ formatSetText(ex.exerciseType, ex.sets[idx - 1]) }}</text>
                        <text v-if="ex.sets[idx - 1].restTime && ex.exerciseType !== 6" class="rest">{{ ex.sets[idx -
                          1].restTime }}s</text>
                      </view>
                    </template>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>

      <view v-else class="empty-tip">
        <text>暂无动作数据</text>
      </view>
    </view>

    <!-- ==================== 底部操作栏 ==================== -->
    <view class="bottom-actions">
      <!-- 我的计划模式 -->
      <template v-if="isMyPlan">
        <button class="start-btn" :class="{ locked: !isUnlocked }" :disabled="!isUnlocked"
          @click="startDaiTemplateTraining">
          {{ isUnlocked ? '立即开始训练' : '训练在当日解锁' }}
        </button>
        <view class="move-to" @click="openMovePopup">移动到</view>
        <view class="icon-group" @click="showMorePopup = true">
          <up-icon name="more-dot-fill" size="22" color="#fff" />
          <text class="icon-name">更多</text>
        </view>

        <!-- 更多弹窗 -->
        <view v-if="showMorePopup" class="more-overlay" @click="showMorePopup = false">
          <view class="more-popup" @click.stop>
            <view class="more-item" @click="handleDeleteTemplate(templateDetail.dailyTemplateId)">
              <up-icon name="reload" size="18" color="#fff" />
              <text class="item-text">删除此次排课</text>
            </view>
            <view class="more-item" @click.stop="confirmDelete(templateDetail.planId)">
              <up-icon name="close" size="18" color="#fff" />
              <text class="item-text">结束整个计划</text>
            </view>
          </view>
        </view>
      </template>

      <!-- 普通模式 -->
      <template v-else>
        <button class="start-btn" @click="startTraining">开始训练</button>
        <view class="action-group" @click="openColorPopup">
          <view class="color-circle" :style="{ backgroundColor: templateDetail?.backgroundcolor || '#ffd60a' }" />
          <text class="action-text">日历颜色</text>
        </view>
        <view class="action-group" @click="openCalendarPopup">
          <up-icon name="calendar" size="22" color="#aaa" />
          <text class="action-text">加入日程</text>
        </view>
      </template>
    </view>

    <!-- ==================== 弹窗 / 子组件 ==================== -->
    <CalendarColorPicker v-model:visible="showColorPopup" :daily-template-id="templateDetail?.id" :is-template="true"
      :current-color="templateDetail?.backgroundcolor" @success="handleCalendarSuccess" />

    <AddToCalendarPopup ref="calendarPopupRef" :template-id="calendarId" :is-move="isMove"
      @success="handleCalendarSuccess" />

    <dongzuoXianqing ref="actionDetailRef" />
  </view>
</template>

<script setup>
// ==================== Vue / Uni 导入 ====================
import { ref, computed, nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// ==================== 工具库 ====================
import dayjs from 'dayjs';

// ==================== API 导入 ====================
import TemplatesApi from '@/sheep/api/Template/Templates';
import dailytemplateApi from '@/sheep/api/Template/Dailytemplate';
import QueryPlanApi from '@/sheep/api/plan/queryplan';

// ==================== Store 导入 ====================
import { useTrainingStore } from '@/sheep/store/trainingStore';

// ==================== 组件导入 ====================
import AddToCalendarPopup from '@/pages/xunji/components/tianjia-dao-rili.vue';
import CalendarColorPicker from '@/pages/xunji/components/rili-components/CalendarColorPicker.vue';
import dongzuoXianqing from '@/pages/xunji/components/dongzuo-xianqing.vue';

// ==================== 常量 ====================
const DELETE_DELAY = 800;
const NAVIGATE_DELAY = 1500;
const MUSCLE_IMG = 'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260424/muscle_back_1777018976173.png';
const SUPER_GROUP_IMG = 'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260507/超级组_1778117889451.png';
const LOST_IMAGE = 'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png';

// 动作类型 → 组次文本格式化
const SET_TEXT_FORMATTERS = {
  0: (d) => `${d.weight}kg × ${d.reps}次`,
  1: (d) => `${d.distance}km × ${formatSeconds(d.duration)}`,
  2: (d) => `${d.reps}次`,
  3: (d) => formatSeconds(d.duration),
  4: (d) => `${d.weight}kg × ${d.reps}次`,
  5: (d) => `${d.weight}kg × ${d.reps}次`,
  6: (d) => `${d.reps}组 × ${d.duration}秒 × ${d.restTime}秒/组休息`,
};

// ==================== Store ====================
const trainingStore = useTrainingStore();

// ==================== 组件引用 ====================
const actionDetailRef = ref(null);
const calendarPopupRef = ref(null);

// ==================== 响应式状态 ====================
const showMorePopup = ref(false);
const showColorPopup = ref(false);
const isOffice = ref(false);
const isMyPlan = ref(false);
const isDailytemplateId = ref(false);
const isMove = ref(false);
const date = ref('');

const templateId = ref('');
const calendarId = ref(0);
const templateDetail = ref({});
const templateUnits = ref([]);

// ==================== Computed ====================

/** 器械显示文本 */
const equipmentDisplayText = computed(() => {
  if (isOffice.value) {
    return templateDetail.value?.equipmentsUsed || '';
  }
  return (templateDetail.value?.equipmentNames || []).join('、');
});

/** 训练是否已解锁（当日或之后） */
const isUnlocked = computed(() => {
  if (!templateDetail.value?.trainingDate) return false;
  const [year, month, day] = templateDetail.value.trainingDate;
  const unlockDate = dayjs(`${year}-${month}-${day}`).startOf('day');
  return dayjs().startOf('day').isSameOrAfter(unlockDate);
});

// ==================== 工具函数 ====================

/** 秒数 → HH:mm:ss */
function formatSeconds(seconds) {
  if (!seconds || isNaN(seconds)) return '00:00:00';
  return dayjs.duration(seconds, 'seconds').format('HH:mm:ss');
}

/** 根据动作类型格式化组次文本 */
function formatSetText(exerciseType, detail) {
  const fn = SET_TEXT_FORMATTERS[exerciseType];
  return fn ? fn(detail) : '';
}

/** 获取 unit 封面图 */
function getUnitCover(unit) {
  if (unit.unitType === 1) {
    return unit.exercises?.[0]?.exerciseCover || LOST_IMAGE;
  }
  return SUPER_GROUP_IMG;
}

/** 单个 unit 内所有动作的总组数 */
function getUnitSetCount(unit) {
  if (!unit?.exercises?.length) return 0;
  let count = 0;
  unit.exercises.forEach((item) => {
    if (item.sets?.length) count += item.sets.length;
  });
  return count;
}

/** 超级组内最大组数 */
function getSuperSetMaxGroupCount(exercises) {
  if (!Array.isArray(exercises) || exercises.length === 0) return 0;
  return exercises.reduce((max, ex) => {
    const len = Array.isArray(ex.sets) ? ex.sets.length : 0;
    return Math.max(max, len);
  }, 0);
}

// ==================== 数据加载 ====================
async function loadTemplateDetail() {
  try {
    let res;
    if (isOffice.value) {
      res = await TemplatesApi.getTemplateDetail(templateId.value);
    } else if (isDailytemplateId.value) {
      res = await QueryPlanApi.getDailyTemplateDetail(templateId.value);
    } else {
      res = await TemplatesApi.getCustTemplateDetail(templateId.value);
    }
    templateDetail.value = res.data;
    templateUnits.value = res.data.units || [];
  } catch (err) {
    console.error('❌ 模板详情加载失败：', err);
  }
}

// ==================== 日历颜色 ====================
function openColorPopup() {
  if (!templateDetail.value.id) {
    uni.showToast({ title: '未找到模板ID', icon: 'none' });
    return;
  }
  showColorPopup.value = true;
}

// ==================== 添加到/移动到日历 ====================
function handleCalendarSuccess() {
  loadTemplateDetail();
}

function openCalendarPopup() {
  calendarId.value = templateDetail.value.id;
  calendarPopupRef.value?.open();
}

function openMovePopup() {
  calendarId.value = templateDetail.value.dailyTemplateId;
  isMove.value = true;
  calendarPopupRef.value?.open();
}

// ==================== 动作详情弹窗 ====================
function handleUnitClick(unit) {
  if (unit.unitType === 1) {
    const id = unit.exercises[0].exerciseId;
    nextTick(() => actionDetailRef.value?.open(id, 1));
  } else if (unit.unitType === 2) {
    const id = unit.supersetId;
    nextTick(() => actionDetailRef.value?.open(id, 2));
  }
}

// ==================== 开始训练 ====================
function startTraining() {
  if (trainingStore.isTraining) {
    uni.showToast({ title: '当前已有正在进行的训练', icon: 'none' });
    return;
  }
  trainingStore.isSystem = 1;
  trainingStore.isTraining = true;
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-dongzuo-lianxi?id=${templateDetail.value.id}&type=3&isTraining=true`,
  });
}

function startDaiTemplateTraining() {
  if (trainingStore.isTraining) {
    uni.showToast({ title: '当前已有正在进行的训练', icon: 'none' });
    return;
  }
  trainingStore.isSystem = templateDetail.value.isSystem;
  trainingStore.loadDailyTemplateForEdit(templateDetail.value);
  trainingStore.initDailyTemplateRecords();
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-dongzuo-lianxi?id=${templateDetail.value.id}&type=3&dailyTemplateId=${templateDetail.value.dailyTemplateId}&isTraining=true`,
  });
}

// ==================== 编辑模板 ====================
function templateEdit() {
  trainingStore.isSystem = templateDetail.value.isSystem;
  trainingStore.loadDailyTemplateForEdit(templateDetail.value);
  trainingStore.initDailyTemplateRecords();
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-dongzuo-lianxi?id=${templateDetail.value.id}&type=3&dailyTemplateId=${templateDetail.value.dailyTemplateId}`,
  });
}

// ==================== 删除操作 ====================
async function handleDeleteTemplate(dailyTemplateId) {
  if (!dailyTemplateId) {
    uni.showToast({ title: '未找到每日模板ID', icon: 'none' });
    return;
  }
  const { confirm } = await uni.showModal({
    title: '确认删除',
    content: '确定要删除这条训练记录吗？删除后无法恢复',
    confirmText: '删除',
    confirmColor: '#ff4444',
    cancelText: '取消',
  });
  if (!confirm) return;

  try {
    await dailytemplateApi.deleteDailyTemplate(dailyTemplateId);
    uni.showToast({ title: '删除成功', icon: 'success' });
    setTimeout(() => uni.navigateBack(), DELETE_DELAY);
  } catch (err) {
    console.error('删除失败', err);
    uni.showToast({ title: '删除失败，请重试', icon: 'none' });
  }
}

async function confirmDelete(planId) {
  try {
    const res = await QueryPlanApi.deletePlan(planId);
    if (res.code === 0 && res.data) {
      uni.showToast({ title: '计划已结束', icon: 'success' });
    } else {
      uni.showToast({ title: res.msg || '操作失败', icon: 'none' });
    }
  } catch (err) {
    console.error('删除计划失败：', err);
    uni.showToast({ title: '网络请求失败', icon: 'none' });
  } finally {
    setTimeout(() => {
      const pages = getCurrentPages();
      const backNum = pages.length - 2;
      if (backNum > 0) {
        uni.navigateBack({ delta: backNum });
      } else {
        uni.navigateTo({ url: '/pages4/pages/xunji/xunji-wode-jihua' });
      }
    }, NAVIGATE_DELAY);
  }
}

// ==================== 生命周期 ====================
onLoad((options) => {
  templateId.value = options.id;
  isOffice.value = options.isOffice === 'true';
  isMyPlan.value = options.isMyPlan === 'true';
  isDailytemplateId.value = options.isDailytemplateId === 'true';
  date.value = options.date || '';

  loadTemplateDetail();
});
</script>

<style scoped lang="scss">
// ==================== CSS 变量 ====================
$bg-primary: #121212;
$bg-secondary: #1e1e1e;
$bg-tertiary: #333;
$bg-card: #4e4e4e;
$accent: #ffd100;
$text-primary: #fff;
$text-secondary: #ccc;
$text-tertiary: #999;
$text-muted: #aaa;
$text-dim: #666;
$border-color: #333;
$border-light: #444;

$font-xs: 20rpx;
$font-sm: 24rpx;
$font-base: 28rpx;
$font-md: 30rpx;
$font-lg: 32rpx;

$radius-sm: 10rpx;
$radius-base: 16rpx;
$radius-round: 40rpx;
$radius-circle: 50%;

// ==================== 导航栏 ====================
.navbar-title {
  font-size: $font-lg;
  font-weight: bold;
  color: $text-primary;
}

// ==================== 页面容器 ====================
.train-template-page {
  background-color: $bg-primary;
  color: $text-primary;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.6;
  padding-bottom: 160rpx;
}

// ==================== 统计区域 ====================
.stats {
  padding: 20rpx 30rpx;
  border-bottom: 1px solid $border-color;

  .stat-item {
    display: flex;
    align-items: center;
    gap: 10rpx;
    margin-bottom: 10rpx;

    .stat-text {
      font-size: $font-base;
    }
  }
}

// ==================== 肌肉图 ====================
.muscle-map {
  width: 100%;
  padding: 20rpx 0;

  .muscle-img {
    width: 100%;
    object-fit: contain;
    border-radius: $radius-sm;
  }
}

// ==================== 训练部位 ====================
.primary-muscle {
  padding: 30rpx;
  border-bottom: 1px solid $border-color;
  display: flex;
  flex-direction: column;
  gap: 15rpx;

  .muscle-row {
    display: flex;
    flex-wrap: wrap;
  }

  .divider {
    width: 100%;
    height: 1rpx;
    background-color: $border-color;
    margin: 5rpx 0;
  }
}

// ==================== 通用区块 ====================
.section {
  padding: 30rpx;
 
  box-sizing: border-box;

  .section-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
  }

  .right-btn {
    font-size: $font-sm;
    /* #ifdef H5 */
    width: 99px;
    /* #endif */
    /* #ifndef H5 */
    width: 140rpx;
    /* #endif */
    height: 37rpx;
    padding: 10rpx 20rpx;
    background: rgba(90, 90, 90, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20rpx;
  }

  .empty-tip {
    text-align: center;
    padding: 40rpx 0;
    color: $text-tertiary;
    font-size: $font-base;
  }
}

.section-title {
  font-size: $font-lg;
  font-weight: bold;
}

.description {
  font-size: $font-base;
  margin-bottom: 10rpx;
}

// ==================== 动作卡片 ====================
.exercise-item {
  background-color: $bg-secondary;
  border-radius: $radius-base;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border: 1px solid $border-color;
}

.unit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 1px solid $border-color;
  gap: 20rpx;

  .left {
    display: flex;
    gap: 12rpx;
  }

  .right {
    transform: rotateY(180deg);
  }

  .unit-title {
    color: $text-primary;
    margin-left: 10rpx;

    .name {
      font-size: $font-md;
      font-weight: bold;
    }

    .PartTool,
    .totalSetCount {
      font-size: $font-xs;
    }
  }
}

.exercise-number {
  font-size: $font-base;
  font-weight: bold;
  color: $text-primary;
  width: 30rpx;
  text-align: center;
}

.unit-icon {
  width: 150rpx;
  height: 150rpx;
  border-radius: $radius-sm;
  object-fit: cover;
}

// ==================== 组次详情行 ====================
.detail-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  gap: 20rpx;
}

.detail-label {
  background: $bg-card;
  width: 30rpx;
  height: 30rpx;
  border-radius: $radius-circle;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $text-secondary;
  font-size: $font-sm;
  flex-shrink: 0;
}

.sets-data {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rest {
  font-size: $font-sm;
}

// ==================== 超级组 ====================
.super-actionName {
  .name-item {
    display: flex;
    gap: 10rpx;
    padding: 4rpx 0;

    .letter {
      font-weight: bold;
    }

    .action-name {
      color: $text-secondary;
    }
  }
}

.super-set-item {
  display: flex;
  padding: 16rpx 0;

  .detail-label {
    margin-right: 10rpx;
    margin-top: 4rpx;
  }
}

.set-column {
  flex: 1;
}

.action-in-set {
  display: flex;
  flex: 1;
  gap: 10rpx;
}

.action-letter {
  font-size: $font-sm;
  color: $text-secondary;
}

.set-content {
  display: flex;
  gap: 10rpx;
  justify-content: space-between;
  flex: 1;
  align-items: center;
}

// ==================== 底部操作栏 ====================
.bottom-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  background-color: #000;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid $border-color;
  gap: 40rpx;

  .start-btn {
    width: 300rpx;
    height: 80rpx;
    background-color: $accent;
    color: #000;
    font-size: $font-md;
    font-weight: bold;
    border-radius: $radius-round;
    border: none;
    outline: none;
    margin-right: auto;

    &.locked {
      background-color: $bg-tertiary;
      color: $text-dim;
      opacity: 0.7;
      pointer-events: none;
    }
  }

  .move-to {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200rpx;
    height: 80rpx;
    background-color: $text-primary;
    color: #000;
    font-size: $font-md;
    font-weight: bold;
    border-radius: $radius-round;
  }

  .icon-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6rpx;

    .icon-name {
      font-size: $font-sm;
      color: $text-muted;
    }
  }
}

// ==================== 更多弹窗 ====================
.more-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.more-popup {
  position: fixed;
  right: 30rpx;
  bottom: 130rpx;
  width: 300rpx;
  background-color: $bg-tertiary;
  border-radius: $radius-base;
  overflow: hidden;
  z-index: 1000;

  .more-item {
    display: flex;
    align-items: center;
    padding: 24rpx 28rpx;
    gap: 16rpx;

    .item-text {
      font-size: $font-base;
      color: $text-primary;
    }

    +.more-item {
      border-top: 1rpx solid $border-light;
    }
  }
}

// ==================== 操作按钮组（日历颜色/加入日程） ====================
.action-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;

  .color-circle {
    width: 40rpx;
    height: 40rpx;
    border-radius: $radius-circle;
    margin-bottom: 10rpx;
    border: 2rpx solid $text-primary;
  }

  .action-text {
    font-size: $font-sm;
    color: $text-muted;
  }
}
</style>