<template>
  <view class="fitness-plan-page">
    <!-- 导航栏 -->
    <uni-nav-bar :title="plandetail.name" left-icon="left" @click-left="goBack" :fixed="true" :status-bar="true" />
    <!-- Banner 区域 -->
    <view class="banner-section">
      <image :src="plandetail.urlCover" class="banner-img">
        <!-- 收藏 -->
        <uni-icons :type="isPlanAdded ? 'heart-filled' : 'heart'" size="24" color="#fff" class="collect-btn"
          @click="toggleAddPlan">
        </uni-icons>
        <!-- 分享按钮 -->
        <button class="share-btn" open-type="share">
          <uni-icons type="paperplane" size="24" color="#fff"></uni-icons>
        </button>
      </image>
      <view class="hot-tag">火爆</view>
    </view>
    <!-- 计划信息卡片 -->
    <view class="info-cards">
      <view class="info-card">
        <view class="number-unit">
          <text class="number">{{ plandetail.durationWeeks }}</text>
          <text class="unit">周</text>
        </view>

        <text class="desc">计划周期</text>
      </view>
      <view class="info-card">
        <view class="number-unit">
          <text class="number">{{ plandetail.frequencyPerWeek }}</text>
          <text class="unit">练/周</text>
        </view>

        <text class="desc">计划频率</text>
      </view>
      <view class="info-card">
        <view class="number-unit">
          <text class="number">{{ difficultyText[plandetail.difficultyLevel] }}</text>
        </view>

        <text class="desc">计划难度</text>
      </view>
    </view>

    <!-- 器械标签 -->
    <view class="equipment-tags">
      <view v-for="items in plandetail.primaryMuscleNames" :key="items">
        <view class="tag-item">
          <text>器械：{{ items }}</text>
        </view>
      </view>
    </view>

    <!-- 计划课程 -->
    <view class="course-section">
      <text class="section-title">计划课程</text>
      <view class="course-card" v-for="item in plandetail.templates" :key="item.id"
        @click="goToTemplateDetail(item.id)">
        <image :src="item.urlCover" mode="aspectFill" class="course-img"></image>
        <view class="course-content">
          <text class="course-name">{{ item.name }}</text>
          <view class="course-meta">
            <view class="item">
              <!-- <text class="meta-item">模板id：{{ item.id }}</text> -->
              <text class="meta-item">{{ item.exerciseCount }} 动作</text>
              <text class="meta-item">{{ item.totalSets }} 组</text>
              <text class="meta-item">{{ item.totalWeight }}kg</text>
            </view>
            <uni-icons uni-icons type="right" size="10" color="#fff"></uni-icons>
          </view>
          <text v-for="(items, index) in item.primaryMuscleNames" :key="index">
            <text class="course-parts">{{ items }}</text>
          </text>

          <view class="course-actions">
            <button type="default" size="mini" class="btn"
              style="background-color: #333; color: white; border-radius: 20rpx"
              @click.stop="openCalendarPopup(plandetail.id, item.id)">添加到日历</button>
            <button type="primary" size="mini" class="btn"
              style="background-color: #ffd700; color: black; border-radius: 20rpx" @click.stop>
              <text>去训练</text>
              <view class="go-text">GO</view>
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 计划介绍 -->
    <view class="plan-container">
      <!-- 标题 -->
      <label class="section-title">计划介绍</label>
      <rich-text :nodes="plandetail.introduction"></rich-text>
    </view>

    <!-- 按钮区域 -->
    <view class="button-group">
      <button type="default" class="btn" size="large" style="background-color: white; flex: 1">
        单节课程训练
      </button>
      <button type="default" @click="openChooseWeekPopup" class="btn" size="large"
        style="background-color: #ffd700; flex: 1.5">
        加入计划
      </button>
    </view>

    <!-- 训练日设置弹窗（底部弹出） -->
    <view class="popup-overlay" v-if="showWeekPopup" @click="showWeekPopup = false">
      <view class="popup-bottom" @click.stop>
        <!-- 顶部拖动条 -->
        <view class="popup-indicator"></view>
        <!-- 标题 -->
        <text class="popup-title">训练日设置</text>
        <!-- 说明文字 + 选择计数 -->
        <view class="popup-header">
          <text class="tip-left">请点选训练日</text>
          <text class="tip-right">请选择 {{ selectedWeekList.length }}/{{ plandetail.frequencyPerWeek }}</text>
        </view>
        <!-- 星期列表（周一到周日，带“休”字） -->
        <view class="week-grid">
          <view v-for="item in weekOptions" :key="item.value" class="week-day"
            :class="{ selected: selectedWeekList.includes(item.value) }" @click="toggleWeek(item.value)">
            <text class="day-text">{{ item.shortName }}</text>
            <text class="rest-text">休</text>
          </view>
        </view>
        <!-- 底部提示文案 -->
        <view class="popup-desc">
          <text>此计划为 一周{{ plandetail.frequencyPerWeek }}练，设置好后计划排课将同步到课程小组件和日历中，后续也可根据实际情况进行更改。</text>
        </view>
        <!-- 确认按钮 -->
        <button class="confirm-btn" :class="{ disabled: selectedWeekList.length !== plandetail.frequencyPerWeek }"
          :disabled="selectedWeekList.length !== plandetail.frequencyPerWeek" @click="confirmAddToPlan">
          确定日期并加入
        </button>
      </view>
    </view>

    <!-- 添加到日历弹窗子组件 -->
    <AddToCalendarPopup ref="calendarPopupRef" :plan-id="plandetail.id" :template-id="currentTemplateId"
      @success="handleCalendarSuccess" />
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { getBottomSafeArea } from '@/utils/safeArea.js';
import QueryPlanApi from '@/sheep/api/plan/queryplan';
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
import AddToCalendarPopup from '../../../pages4/components/xunlian-jihua-components/tianjia-dao-rili.vue';

// 获取页面参数
const route = defineProps(['planid']); // Vue 3 + uni-app 支持
// 或者使用 getCurrentPages()（兼容性更好）
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
const planIdFromUrl = currentPage.options?.planid;
// 计划是否已添加（收藏）
const isPlanAdded = ref(false);
const plandetail = ref([]);
//传参
const id = ref();
const difficultyText = { 1: '初阶', 2: '中阶', 3: '高阶' };
// 控制选择星期弹窗显示/隐藏
const showWeekPopup = ref(false)
// 用户选择的星期：[1,3] 代表周一、周三
const selectedWeekList = ref([])
// 星期列表（用于弹窗显示）
// 星期列表（匹配例图：周一/二/三 + 下方“休”字）
const weekOptions = [
  { shortName: '一', fullName: '周一', value: 1 },
  { shortName: '二', fullName: '周二', value: 2 },
  { shortName: '三', fullName: '周三', value: 3 },
  { shortName: '四', fullName: '周四', value: 4 },
  { shortName: '五', fullName: '周五', value: 5 },
  { shortName: '六', fullName: '周六', value: 6 },
  { shortName: '日', fullName: '周日', value: 7 },
]

// 「添加到日历」弹窗实例
const calendarPopupRef = ref(null);
// 当前要添加到日历的课程模板ID
const currentTemplateId = ref(null);

// 直接声明方法，无需包裹在 methods 中，默认暴露给模板
const goBack = () => {
  const pages = getCurrentPages();
  if (pages.length > 1) {
    uni.navigateBack();
  } else {
    uni.navigateTo({
      url: '/pages/xunji/xunji',
    });
  }
};

// 1. 打开选择星期弹窗
const openChooseWeekPopup = () => {
  showWeekPopup.value = true
}

// 2. 切换选择星期（限制：最多选 frequencyPerWeek 天）
const toggleWeek = (val) => {
  const index = selectedWeekList.value.indexOf(val)
  const maxCount = plandetail.value.frequencyPerWeek // 每周最多选几天

  // 如果是取消选择
  if (index > -1) {
    selectedWeekList.value.splice(index, 1)
  } else {
    // 如果还没选满，才能添加
    if (selectedWeekList.value.length < maxCount) {
      selectedWeekList.value.push(val)
    } else {
      // 选满了，提示
      uni.showToast({
        title: `每周只能选 ${maxCount} 天`,
        icon: 'none'
      })
    }
  }
}

// 3. 确认 → 调用 arrangePlan 接口
const confirmAddToPlan = async () => {

  // 校验：必须刚好选够每周训练天数
  const required = plandetail.value.frequencyPerWeek
  if (selectedWeekList.value.length !== required) {
    uni.showToast({
      title: `请选择 ${required} 个训练日`,
      icon: 'none'
    })
    return
  }

  // 接口需要的 5 个参数
  const params = {
    id: plandetail.value.id,
    durationWeeks: plandetail.value.durationWeeks,
    frequencyPerWeek: plandetail.value.frequencyPerWeek,
    templateList: plandetail.value.templates.map(item => item.id),
    weekList: selectedWeekList.value
  }

  console.log('arrangePlan 接口参数：', params);

  try {
    const res = await QueryPlanApi.arrangePlan(params)
    uni.showToast({ title: '已成功加入日历！', icon: 'success' })
    showWeekPopup.value = false // 关闭弹窗
  } catch (err) {
    uni.showToast({ title: '加入失败', icon: 'none' })
    console.error(err)
  }
}
// 跳转到模板详情页
const goToTemplateDetail = (id) => {
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-moban-xiangqing?id=${id}`
  });
};
const handleRightClick = (index) => {
  if (index === 0) {
    // 收藏功能（保留原提示逻辑）
    uni.showToast({ title: '已收藏', icon: 'success' });
  } else if (index === 1) {
    // 分享功能（保留原 showShareMenu 配置）
    uni.showShareMenu({
      withCredentials: true,
    });
  }
};

//获取计划详情
const loadDetail = async () => {
  const response = await QueryPlanApi.getPlanDetail(id.value);
  plandetail.value = response.data;
  // 打印计划详情数据
  console.log('加载计划详情plandetail.value：', plandetail.value);
};

// ====================== 计划收藏/添加功能 ======================

// 检查当前计划是否已经添加
const checkPlanAddedStatus = async () => {
  if (!id.value) return;
  try {
    const res = await QueryPlanApi.isAddPlan(id.value);
    // 接口返回 true = 已添加
    isPlanAdded.value = res.data === true;
    console.log("计划是否已添加：", isPlanAdded.value);
  } catch (err) {
    console.error("检查计划添加状态失败：", err);
    isPlanAdded.value = false;
  }
};

// 切换添加/取消添加计划
const toggleAddPlan = async () => {
  if (!id.value) {
    uni.showToast({ title: "计划ID不存在", icon: "none" });
    return;
  }

  const originalStatus = isPlanAdded.value;
  // 乐观更新UI（点了立刻变爱心）
  isPlanAdded.value = !originalStatus;

  try {
    // 调用添加计划接口
    await QueryPlanApi.addPlan(id.value);

    if (!originalStatus) {
      uni.showToast({ title: "添加计划成功" });
    } else {
      uni.showToast({ title: "已取消添加" });
    }
  } catch (err) {
    // 失败回滚
    isPlanAdded.value = originalStatus;
    console.error("操作失败：", err);
    uni.showToast({ title: "操作失败", icon: "none" });
  }
};

// 打开「添加到日历」弹窗
const openCalendarPopup = (planId, templateId) => {
  console.log('点击了添加到日历按钮', planId, templateId); // 新增日志
  console.log('子组件实例', calendarPopupRef.value); // 新增日志
  // 把当前课程的ID存起来，传给子组件
  currentTemplateId.value = templateId;
  // 测试是否有open方法
  if (calendarPopupRef.value && typeof calendarPopupRef.value.open === 'function') {
    calendarPopupRef.value.open();
  } else {
    console.error('子组件没有open方法！', calendarPopupRef.value);
  }
};

// 日历添加成功的回调（可选，可做刷新/提示）
const handleCalendarSuccess = () => {
  console.log('课程已成功添加到日历');
  // 这里可以加：刷新课程状态、更新按钮文字等逻辑
};
// 定义分享内容
onShareAppMessage((res) => {
  // res.from 可区分触发来源：'button'（按钮触发）或 'menu'（右上角菜单触发）[reference:3]
  console.log('分享触发来源:', res.from);
  return {
    title: plandetail.value.name || '健身计划分享',          // 分享标题
    path: `/pages4/pages/xunji/xunji-xunlian-jihua?id=${id.value}`, // 分享路径
    imageUrl: plandetail.value.urlCover,       // 分享图片
  };
});
onLoad((options) => {
  id.value = options.planid;
  checkPlanAddedStatus(); // 检查计划是否已添加
  // #ifdef MP-WEIXIN
  wx.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  });
  // #endif
});
onMounted(() => {
  loadDetail();
});
</script>

<style scoped lang="scss">
$base-font: 22rpx;

.fitness-plan-page {
  width: 100%;
  min-height: 100vh;
  background-color: #121212;
  color: white;
  padding-bottom: 70rpx;
}

/* 收藏按钮 */
.collect-btn {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  display: flex;
  top: 20rpx;
  right: 90rpx;
  z-index: 11;
  align-items: center;
  justify-content: center;
}

.share-btn {
  position: absolute;
  display: flex;
  top: 20rpx;
  /* 距离顶部距离，可按需调整 */
  right: 20rpx;
  /* 距离右侧距离 */
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  z-index: 10;
  /* 确保按钮可点击区域足够 */
  width: 60rpx;
  height: 60rpx;
  align-items: center;
  justify-content: center;
}

/* Banner 区域 */
.banner-section {
  width: 100%;
  height: 400rpx;
  position: relative;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8);
}

.hot-tag {
  position: absolute;
  left: 20rpx;
  top: 20rpx;
  background-color: #ff4d4d;
  color: white;
  padding: 4rpx 10rpx;
  font-size: 20rpx;
  border-radius: 4rpx;
  z-index: 10;
}

.title {
  font-size: 40rpx;
  color: white;
  font-weight: bold;
}

/* 计划信息卡片 */
.info-cards {
  display: flex;
  justify-content: space-around;
  padding: 40rpx 20rpx;
  gap: 10rpx;
}

.info-card {
  flex: 1;
  padding: 20rpx;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12rpx;
  text-align: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.info-card .number {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.info-card .unit {
  font-size: 24rpx;
  color: #ccc;
  margin-bottom: 10rpx;
}

.info-card .icon-clock,
.info-card .icon-wave,
.info-card .icon-up {
  width: 32rpx;
  height: 32rpx;
  margin: 0 auto 10rpx;
  opacity: 0.8;
}

.info-card .desc {
  font-size: 24rpx;
  color: #999;
}

/* 器械标签 */
.equipment-tags {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  gap: 10rpx;
}

.tag-item {
  padding: 6rpx 12rpx;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4rpx;
  font-size: 24rpx;
  color: #ccc;
}

/* 计划课程 */
.course-section {
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  color: white;
  margin-bottom: 20rpx;
}

.course-card {
  margin-top: 10rpx;
  display: flex;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 16rpx;
  padding: 15rpx;
  box-sizing: border-box;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}

.course-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  object-fit: cover;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.course-content {
  flex: 1;
  padding-right: 20rpx;
}

.course-name {
  font-size: 32rpx;
  color: white;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.course-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20rpx;
  margin-bottom: 10rpx;

  .meta-item {
    font-size: 24rpx;
    color: #ccc;
    padding: 0 10rpx;
  }
}

.course-parts {
  font-size: 22rpx;
  margin-left: 10rpx;
  color: #ccc;
  margin-bottom: 20rpx;
}

.course-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10rpx;
  margin-top: 10rpx;

  .btn {

    margin: 0;
    font-size: 22rpx;

    .go-text {
      display: inline-block;
      background-color: #121212;
      color: #ffd700;
      border-radius: 50%;
      padding: 2rpx 8rpx;
      font-size: 18rpx;
      font-weight: bold;
      margin-left: 8rpx;
    }
  }
}

.arrow-right {
  width: 24rpx;
  height: 24rpx;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.course-card:hover .arrow-right {
  opacity: 1;
}

/* 按钮区域 */
.button-group {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  z-index: 99;
  justify-content: space-between;
  gap: 20rpx;
  padding: 20rpx;

  background-color: #242424;

  .btn {
    line-height: 1;
    color: #333;
    padding: 24rpx 48rpx;
    border-radius: 50rpx;
    font-size: 24rpx;
    font-weight: bold;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
    text-align: center;
  }
}

.plan-container {
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #121212; // 匹配原图深色背景
  color: #fff;
  font-size: $base-font;
  font-size: 24rpx;
  padding-bottom: 100rpx;
}

// 标题样式
.plan-title {
  width: 100%;
  text-align: start;
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
}

// 计划描述
.plan-desc {
  margin-bottom: 5vw;
  opacity: 0.9;
}

// 分块区域
.plan-section {
  margin-bottom: 5vw;

  // 分块标题
  .section-title {
    font-size: 5.333vw;
    font-weight: 600;
    margin-bottom: 2vw;
    color: #f0f0f0;
  }

  // 列表项
  .section-list {
    .list-item {
      margin-bottom: 1.5vw;
      opacity: 0.85;
    }
  }

  // 内容块
  .section-content {
    opacity: 0.85;
  }
}

/* 底部弹窗遮罩 */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  /* 关键：底部对齐 */
}

/* 底部弹窗主体 */
.popup-bottom {
  width: 100%;
  background: #1e1e1e;
  border-radius: 24rpx 24rpx 0 0;
  padding: 30rpx;
  box-sizing: border-box;
}

/* 顶部拖动条 */
.popup-indicator {
  width: 80rpx;
  height: 8rpx;
  background: #444;
  border-radius: 4rpx;
  margin: 0 auto 30rpx;
}

/* 弹窗标题 */
.popup-title {
  font-size: 34rpx;
  color: #fff;
  text-align: center;
  font-weight: bold;
  display: block;
  margin-bottom: 30rpx;
}

/* 顶部说明 + 计数 */
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;

  .tip-left {
    font-size: 28rpx;
    color: #fff;
  }

  .tip-right {
    font-size: 28rpx;
    color: #ffd700;
  }
}

/* 星期选择网格（7列） */
.week-grid {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40rpx;
}

.week-day {
  width: 80rpx;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #333;
  border-radius: 12rpx;
  color: #fff;
  font-size: 28rpx;

  .rest-text {
    font-size: 24rpx;
    color: #999;
    margin-top: 8rpx;
  }
}

/* 选中状态样式（和例图一致） */
.week-day.selected {
  background: #ffd700;
  color: #000;

  .rest-text {
    color: #000;
  }
}

/* 底部提示文案 */
.popup-desc {
  font-size: 26rpx;
  color: #999;
  line-height: 1.6;
  margin-bottom: 40rpx;
}

/* 确认按钮 */
.confirm-btn {
  width: 100%;
  height: 80rpx;
  background: #ffd700;
  color: #000;
  border-radius: 40rpx;
  font-size: 30rpx;
  font-weight: bold;
  border: none;
}

/* 按钮禁用状态（和例图一致：灰色、不可点） */
.confirm-btn.disabled {
  background: #444;
  color: #666;
  pointer-events: none;
}
</style>