<template>
  <view class="profile-page">
    <up-navbar bgColor="transparent" :z-index="999" :autoBack="true">
      <template #left>
        <view class="u-nav-slot">
          <up-icon name="arrow-left" color="#333" size="15"></up-icon>
        </view>
      </template>
    </up-navbar>

    <view class="header-section">
      <view class="header-content">
        <view class="title">我的运动资料</view>
        <view class="subtitle">匹配专属训练计划</view>
      </view>
      <view class="header-card">
        <view class="line"></view>
        <view class="line"></view>
        <view class="line"></view>
        <view class="line"></view>
      </view>
    </view>

    <view class="form-card-container">
      <view class="form-list">
        <view class="form-item" @click="openRadioPopup('gender', '性别')">
          <text class="label">性别</text>
          <view class="right">
            <text class="value" v-if="pdata.gender">{{ pdata.gender == 1 ? '男' : '女' }}</text>
            <text class="placeholder-text" v-else>请选择</text>
            <up-icon name="arrow-right" size="12" color="#cccccc"></up-icon>
          </view>
        </view>

        <view class="form-item" @click="Dateshow = true">
          <text class="label">生日</text>
          <view class="right">
            <text class="value" v-if="pdata.birthday">{{ formatDate(pdata.birthday) }}</text>
            <text class="placeholder-text" v-else>请选择</text>
            <up-icon name="arrow-right" size="12" color="#cccccc"></up-icon>
          </view>
        </view>

        <view class="form-item" @click="openInputPopup('height', '身高')">
          <text class="label">身高</text>
          <view class="right">
            <text class="value" v-if="pdata.height">{{ pdata.height }} cm</text>
            <text class="placeholder-text" v-else>未填写</text>
            <up-icon name="arrow-right" size="12" color="#cccccc"></up-icon>
          </view>
        </view>

        <view class="form-item" @click="openInputPopup('weight', '当前体重')">
          <text class="label">当前体重</text>
          <view class="right">
            <text class="value" v-if="pdata.weight">{{ pdata.weight }} kg</text>
            <text class="placeholder-text" v-else>未填写</text>
            <up-icon name="arrow-right" size="12" color="#cccccc"></up-icon>
          </view>
        </view>

        <view class="form-item" @click="openInputPopup('targetWeight', '目标体重')">
          <text class="label">目标体重</text>
          <view class="right">
            <text class="value" v-if="pdata.targetWeight">{{ pdata.targetWeight }} kg</text>
            <text class="placeholder-text" v-else>未填写</text>
            <up-icon name="arrow-right" size="12" color="#cccccc"></up-icon>
          </view>
        </view>

        <view class="form-item" @click="openRadioPopup('hasFitnessFoundation', '健身基础')">
          <text class="label">健身基础</text>
          <view class="right">
            <text class="value" v-if="pdata.hasFitnessFoundation">{{
              pdata.hasFitnessFoundation == 1 ? '有' : '无'
            }}</text>
            <text class="placeholder-text" v-else>请选择</text>
            <up-icon name="arrow-right" size="12" color="#cccccc"></up-icon>
          </view>
        </view>

        <view class="form-item" @click="openRadioPopup('acceptableTrainingFrequency', '可接受的训练频次')">
          <text class="label">可接受的训练频次</text>
          <view class="right">
            <text class="value" v-if="pdata.acceptableTrainingFrequency">
              {{ pdata.acceptableTrainingFrequency == 1 ? '1练/2练/3练' : '4练/5练/6练' }}
            </text>
            <text class="placeholder-text" v-else>请选择</text>
            <up-icon name="arrow-right" size="12" color="#cccccc"></up-icon>
          </view>
        </view>

        <view class="form-item" @click="openCheckPopup('targetMuscleParts', '想锻炼的肌肉部位')">
          <text class="label">想锻炼的肌肉部位</text>
          <view class="right">
            <text class="value" v-if="pdata.targetMuscleParts && pdata.targetMuscleParts.length">
              {{ pdata.targetMuscleParts.join('、') }}
            </text>
            <text class="placeholder-text" v-else>请选择（多选）</text>
            <up-icon name="arrow-right" size="12" color="#cccccc"></up-icon>
          </view>
        </view>

        <view class="form-item" @click="openRadioPopup('trainingGoal', '训练目标')">
          <text class="label">训练目标</text>
          <view class="right">
            <text class="value" v-if="pdata.trainingGoal">{{
              formatGoal(pdata.trainingGoal)
            }}</text>
            <text class="placeholder-text" v-else>请选择</text>
            <up-icon name="arrow-right" size="12" color="#cccccc"></up-icon>
          </view>
        </view>

        <view class="form-item" @click="openCheckPopup('painAreas', '身体疼痛部位')">
          <text class="label">身体疼痛部位</text>
          <view class="right">
            <text class="value" v-if="pdata.painAreas && pdata.painAreas.length">
              {{ pdata.painAreas.join('、') }}
            </text>
            <text class="placeholder-text" v-else>无明显疼痛</text>
            <up-icon name="arrow-right" size="12" color="#cccccc"></up-icon>
          </view>
        </view>

        <view class="form-item" @click="openRadioPopup('hasDisease', '当前是否存在疾病')">
          <text class="label">当前是否存在疾病</text>
          <view class="right">
            <text class="value" v-if="pdata.hasDisease">{{
              pdata.hasDisease == 1 ? '有' : '无'
            }}</text>
            <text class="placeholder-text" v-else>请选择</text>
            <up-icon name="arrow-right" size="12" color="#cccccc"></up-icon>
          </view>
        </view>

        <view class="form-item" @click="openRadioPopup('isTakingMedication', '当前是否在服药')">
          <text class="label">当前是否在服药</text>
          <view class="right">
            <text class="value" v-if="pdata.isTakingMedication">{{
              pdata.isTakingMedication == 1 ? '是' : '否'
            }}</text>
            <text class="placeholder-text" v-else>请选择</text>
            <up-icon name="arrow-right" size="12" color="#cccccc"></up-icon>
          </view>
        </view>

        <view class="form-item" @click="openRadioPopup('rewardMethod', '达成目标如何奖励自己')">
          <text class="label">达成目标如何奖励自己</text>
          <view class="right">
            <text class="value" v-if="pdata.rewardMethod">{{
              formatReward(pdata.rewardMethod)
            }}</text>
            <text class="placeholder-text" v-else>请选择</text>
            <up-icon name="arrow-right" size="12" color="#cccccc"></up-icon>
          </view>
        </view>

        <view class="form-item" @click="openRadioPopup('fitnessScene', '平常在哪里健身')">
          <text class="label">平常在哪里健身</text>
          <view class="right">
            <text class="value" v-if="pdata.fitnessScene">{{
              formatScene(pdata.fitnessScene)
            }}</text>
            <text class="placeholder-text" v-else>请选择</text>
            <up-icon name="arrow-right" size="12" color="#cccccc"></up-icon>
          </view>
        </view>
      </view>
    </view>

    <view class="footer-action-bar">
      <button class="confirm-btn" :loading="isSaving" @click="saveHealthInfo">
        生成专属训练计划
      </button>
    </view>

    <up-popup :show="radioPopup" @close="closeRadioPopup" round="16rpx" mode="bottom" closeable>
      <view class="popup-box">
        <view class="popup-header">{{ currentTitle }}</view>
        <scroll-view scroll-y class="popup-scroll-area">
          <view class="select-list">
            <view class="select-item" :class="{ active: item.value === bufferValue }"
              v-for="(item, index) in formOptions[currentKey]" :key="index" @click="bufferValue = item.value">
              <text class="item-text">{{ item.label }}</text>
              <up-icon v-if="item.value === bufferValue" name="checkbox-mark" color="#ffde00" size="18"></up-icon>
            </view>
          </view>
        </scroll-view>
        <view class="popup-footer">
          <button class="action-btn" @click="submitRadio">确 定</button>
        </view>
      </view>
    </up-popup>

    <up-popup :show="inputPopup" @close="closeInputPopup" round="16rpx" mode="bottom" closeable>
      <view class="popup-box">
        <view class="popup-header">{{ currentTitle }}</view>
        <view class="input-content-area">
          <up-input placeholder="请输入有效数字" border="surround" type="digit" v-model="bufferValue" clearable
            customStyle="background-color: #f9f9f9; padding: 24rpx;"></up-input>
          <text class="unit-text">{{ currentKey === 'height' ? 'cm' : 'kg' }}</text>
        </view>
        <view class="popup-footer">
          <button class="action-btn" @click="submitInput">确 定</button>
        </view>
      </view>
    </up-popup>

    <up-popup :show="checkPopup" @close="closeCheckPopup" round="16rpx" mode="bottom" closeable>
      <view class="popup-box">
        <view class="popup-header">{{ currentTitle }}</view>
        <scroll-view scroll-y class="popup-scroll-area">
          <view class="select-list grid-layout">
            <view class="select-item-chip" :class="{ active: bufferArray.includes(item.value) }"
              v-for="(item, index) in formOptions[currentKey]" :key="index" @click="toggleCheckItem(item.value)">
              {{ item.label }}
            </view>
          </view>
        </scroll-view>
        <view class="popup-footer">
          <button class="action-btn" @click="submitCheck">确 定</button>
        </view>
      </view>
    </up-popup>

    <up-datetime-picker :show="Dateshow" v-model="datePickerValue" mode="date" title="选择生日" @cancel="Dateshow = false"
      @confirm="handleSelectDate" :minDate="-1577836800000" :maxDate="Date.now()"></up-datetime-picker>
  </view>
</template>

<script setup>
import { ref, reactive, toRaw } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import UserApi from '@/sheep/api/member/user';
import dayjs from 'dayjs';

// ========================================================
// 响应式单态核心数据集
// ========================================================

const Dateshow = ref(false);
const radioPopup = ref(false);
const inputPopup = ref(false);
const checkPopup = ref(false);
const isSaving = ref(false);

// 状态机寄存指针管理
const currentKey = ref('');
const currentTitle = ref('');
const bufferValue = ref(null); // 纯量缓冲区
const bufferArray = ref([]); // 数组队列多选缓冲区
const datePickerValue = ref(Date.now());

const pdata = reactive({
  id: '',
  birthday: '',
  gender: 0,
  height: '',
  weight: '',
  targetWeight: '',
  hasFitnessFoundation: 0,
  acceptableTrainingFrequency: 0,
  targetMuscleParts: [],
  trainingGoal: 0,
  painAreas: [],
  hasDisease: 0,
  isTakingMedication: 0,
  rewardMethod: 0,
  fitnessScene: 0,
});

// 数据字典隔离配置
const formOptions = {
  gender: [
    { label: '男', value: 1 },
    { label: '女', value: 2 },
  ],
  hasFitnessFoundation: [
    { label: '有', value: 1 },
    { label: '无', value: 2 },
  ],
  acceptableTrainingFrequency: [
    { label: '1练/2练/3练', value: 1 },
    { label: '4练/5练/6练', value: 2 },
  ],
  targetMuscleParts: [
    { label: '肩颈', value: '肩颈' },
    { label: '斜方肌', value: '斜方肌' },
    { label: '手臂', value: '手臂' },
    { label: '胸部', value: '胸部' },
    { label: '背部', value: '背部' },
    { label: '腹部', value: '腹部' },
    { label: '臀部', value: '臀部' },
    { label: '腿部', value: '腿部' },
  ],
  trainingGoal: [
    { label: '减脂', value: 1 },
    { label: '增肌', value: 2 },
    { label: '塑形', value: 3 },
    { label: '拉伸/体态调整', value: 4 },
  ],
  painAreas: [
    { label: '肩颈', value: '肩颈' },
    { label: '手腕', value: '手腕' },
    { label: '腰部', value: '腰部' },
    { label: '脚踝', value: '脚踝' },
    { label: '膝盖', value: '膝盖' },
  ],
  hasDisease: [
    { label: '有', value: 1 },
    { label: '无', value: 2 },
  ],
  isTakingMedication: [
    { label: '是', value: 1 },
    { label: '否', value: 2 },
  ],
  rewardMethod: [
    { label: '买件新衣服/装备', value: 1 },
    { label: '去旅行', value: 2 },
    { label: '和朋友聚会', value: 3 },
    { label: '其他', value: 4 },
  ],
  fitnessScene: [
    { label: '健身房', value: 1 },
    { label: '家', value: 2 },
    { label: '宿舍', value: 3 },
  ],
};

// ========================================================
// 文本高阶转义映射器
// ========================================================
const formatDate = (val) => (val ? dayjs(val).format('YYYY-MM-DD') : '');
const formatGoal = (val) => ({ 1: '减脂', 2: '增肌', 3: '塑形', 4: '拉伸/体态调整' }[val] || '');
const formatReward = (val) =>
  ({ 1: '买件新衣服/装备', 2: '去旅行', 3: '和朋友聚会', 4: '其他' }[val] || '');
const formatScene = (val) => ({ 1: '健身房', 2: '家', 3: '宿舍' }[val] || '');

// ========================================================
// 核心弹窗调度器（精细化防污染管控）
// ========================================================

const openRadioPopup = (key, title) => {
  currentKey.value = key;
  currentTitle.value = title;
  bufferValue.value = pdata[key] || null; // 载入安全缓冲区
  radioPopup.value = true;
};

const closeRadioPopup = () => {
  radioPopup.value = false;
};

const submitRadio = () => {
  if (bufferValue.value !== null) {
    pdata[currentKey.value] = bufferValue.value; // 仅在此处准许回填修改
  }
  radioPopup.value = false;
};

const openInputPopup = (key, title) => {
  currentKey.value = key;
  currentTitle.value = title;
  bufferValue.value = pdata[key] !== '' ? String(pdata[key]) : '';
  inputPopup.value = true;
};

const closeInputPopup = () => {
  inputPopup.value = false;
};

const submitInput = () => {
  const num = parseFloat(bufferValue.value);
  // 安全阈值边界拦截校验
  if (isNaN(num) || num <= 0 || num > 300) {
    uni.showToast({ title: '请输入合理区间值', icon: 'none' });
    return;
  }
  pdata[currentKey.value] = num.toFixed(1);
  inputPopup.value = false;
};

const openCheckPopup = (key, title) => {
  currentKey.value = key;
  currentTitle.value = title;
  bufferArray.value = Array.isArray(pdata[key]) ? [...pdata[key]] : []; // 解耦深拷贝
  checkPopup.value = true;
};

const toggleCheckItem = (val) => {
  const idx = bufferArray.value.indexOf(val);
  if (idx > -1) {
    bufferArray.value.splice(idx, 1);
  } else {
    bufferArray.value.push(val);
  }
};

const closeCheckPopup = () => {
  checkPopup.value = false;
};

const submitCheck = () => {
  pdata[currentKey.value] = [...bufferArray.value];
  checkPopup.value = false;
};

const handleSelectDate = (e) => {
  Dateshow.value = false;
  pdata.birthday = dayjs(e.value).format('YYYY-MM-DD');
};

// ========================================================
// 网络数据交互编排
// ========================================================

const getHealthData = async () => {
  try {
    const res = await UserApi.getHealthInfo();
    const data = res?.data || {};

    Object.keys(pdata).forEach((key) => {
      if (key === 'hasDisease' || key === 'isTakingMedication') {
        pdata[key] = data[key] === true ? 1 : data[key] === false ? 2 : 0;
      } else if (key === 'targetMuscleParts' || key === 'painAreas') {
        pdata[key] = Array.isArray(data[key]) ? data[key] : [];
      } else {
        pdata[key] = data[key] !== undefined && data[key] !== null ? data[key] : '';
      }
    });

    if (pdata.birthday) {
      datePickerValue.value = dayjs(pdata.birthday).valueOf();
    }
  } catch (error) {
    console.error('拉取档案失败:', error);
  }
};

const saveHealthInfo = async () => {
  // 基础必填拦截防空检测
  if (!pdata.gender || !pdata.birthday || !pdata.height || !pdata.weight) {
    uni.showToast({ title: '请完整填写真实核心资料', icon: 'none' });
    return;
  }

  if (isSaving.value) return;
  isSaving.value = true;

  try {
    const payload = {
      ...toRaw(pdata),
      hasDisease: pdata.hasDisease === 1,
      isTakingMedication: pdata.isTakingMedication === 1,
    };

    if (pdata.id) {
      await UserApi.UpdateHealthInfo(payload);
    } else {
      await UserApi.createHealthInfo(payload);
    }

    uni.showToast({ title: '专属计划已生成', icon: 'success' });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  } catch (error) {
    console.error('提交健康资料异常:', error);
    uni.showToast({ title: '保存失败，请重试', icon: 'none' });
  } finally {
    isSaving.value = false;
  }
};

onShow(() => {
  getHealthData();
});
</script>

<style lang="scss" scoped>
.profile-page {
  background-color: #f7f8fa;
  min-height: 100vh;
  /* 解决长页面底部被悬浮动作条覆盖的问题 */
  padding-bottom: 180rpx;
  box-sizing: border-box;

  .u-nav-slot {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    padding: 12rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-section {
    width: 100%;
    height: 22vh;
    /* #ifdef MP-WEIXIN */
    height: 26vh;
    /* #endif */
    background: linear-gradient(135deg, #ffd166 0%, #ffb74d 100%);
    position: relative;
    padding-left: 44rpx;
    padding-bottom: 50rpx;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;

    .header-content {
      display: flex;
      flex-direction: column;
      z-index: 2;

      .title {
        font-size: 46rpx;
        font-weight: bold;
        color: #4a2c00;
        margin-bottom: 8rpx;
      }

      .subtitle {
        font-size: 26rpx;
        color: rgba(74, 44, 0, 0.7);
      }
    }

    .header-card {
      position: absolute;
      right: 30rpx;
      bottom: -10rpx;
      width: 150rpx;
      height: 180rpx;
      background: linear-gradient(135deg, #ff6b6b, #ff8e53);
      border-radius: 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16rpx;
      transform: rotate(12deg);
      box-shadow: 0 12rpx 24rpx rgba(255, 107, 107, 0.25);
      z-index: 1;

      .line {
        width: 55%;
        height: 8rpx;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 6rpx;
      }
    }
  }

  /* 修复：移除有隐患的全局 translateY 移动，改用规范的卡片间距布局 */
  .form-card-container {
    padding: 0 30rpx;
    margin-top: 30rpx;

    .form-list {
      background-color: #ffffff;
      border-radius: 24rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.015);
      overflow: hidden;
      /* 完美约束子项按圆角外接圆渲染 */

      .form-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 36rpx 30rpx;
        border-bottom: 1rpx solid #f2f3f5;
        transition: background-color 0.2s;

        &:active {
          background-color: #f9f9f9;
        }

        &:last-child {
          border-bottom: none;
        }

        .label {
          font-size: 28rpx;
          color: #323233;
          font-weight: 600;
        }

        .right {
          display: flex;
          align-items: center;
          gap: 12rpx;
          max-width: 65%;

          .value {
            font-size: 28rpx;
            color: #323233;
            text-align: right;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .placeholder-text {
            font-size: 28rpx;
            color: #c8c9cc;
          }
        }
      }
    }
  }

  /* 固定悬浮底部动作栏 */
  .footer-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    background-color: #ffffff;
    padding: 24rpx 40rpx calc(24rpx + env(safe-area-inset-bottom));
    box-sizing: border-box;
    box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.04);
    z-index: 99;

    .confirm-btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      background: linear-gradient(90deg, #ffe100 0%, #ffc400 100%);
      color: #323233;
      font-size: 32rpx;
      font-weight: bold;
      border-radius: 44rpx;
      border: none;

      &::after {
        border: none;
      }
    }
  }

  /* 弹出层统一样式规范 */
  .popup-box {
    background-color: #ffffff;
    border-radius: 24rpx 24rpx 0 0;
    padding: 30rpx 40rpx calc(30rpx + env(safe-area-inset-bottom));
    box-sizing: border-box;

    .popup-header {
      font-size: 32rpx;
      font-weight: bold;
      color: #323233;
      text-align: center;
      padding-bottom: 30rpx;
    }

    .popup-scroll-area {
      max-height: 40vh;
    }

    .input-content-area {
      display: flex;
      align-items: center;
      gap: 20rpx;
      padding: 20rpx 0 40rpx;

      .unit-text {
        font-size: 30rpx;
        color: #323233;
        font-weight: bold;
      }
    }

    .select-list {
      display: flex;
      flex-direction: column;
      gap: 16rpx;

      &.grid-layout {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20rpx;
      }

      .select-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f7f8fa;
        padding: 30rpx 40rpx;
        border-radius: 16rpx;
        transition: all 0.2s;

        &.active {
          background-color: #fffdf0;
          border: 2rpx solid #ffe100;
        }

        .item-text {
          font-size: 28rpx;
          color: #323233;
          font-weight: 500;
        }
      }

      /* 多选网格纸片样式 */
      .select-item-chip {
        padding: 20rpx 36rpx;
        background-color: #f7f8fa;
        border-radius: 40rpx;
        font-size: 26rpx;
        color: #646566;
        transition: all 0.2s;
        border: 2rpx solid transparent;

        &.active {
          background-color: #fffdf0;
          color: #323233;
          font-weight: bold;
          border-color: #ffe100;
        }
      }
    }

    .popup-footer {
      margin-top: 40rpx;

      .action-btn {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        background-color: #ffe100;
        color: #323233;
        font-size: 28rpx;
        font-weight: bold;
        border-radius: 40rpx;
        border: none;

        &::after {
          border: none;
        }
      }
    }
  }
}
</style>