<template>
  <view class="page">
    <!-- ==================== 肌肉部位图 ==================== -->
    <view class="muscle-card" @click="showMusclePicker = true">
      <image class="muscle-img"
        src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260724/训练部位_1784878616826.jpg"
        mode="aspectFill" />
      <view class="muscle-tip">
        <up-icon name="edit-pen" color="#fff" size="14" />
        <text>点击选择训练部位</text>
      </view>
    </view>

    <!-- ==================== 表单卡片 ==================== -->
    <view class="form-card">
      <!-- 动作名称 + 封面 -->
      <view class="form-row name-row">
        <view class="name-input-area">
          <text class="form-label">动作名称</text>
          <input v-model="exerciseName" class="name-input" placeholder="点击此处填写动作名称" placeholder-class="ph" />
        </view>
        <view class="cover-upload" @click="openCoverSelector">
          <image :src="coverImagePath" class="cover-preview" mode="aspectFill" />
          <text class="cover-label">更换封面</text>
        </view>
      </view>

      <!-- 训练部位 -->
      <view class="form-row select-row" @click="showMusclePicker = true">
        <text class="form-label">训练部位</text>
        <view class="select-value">
          <text class="sel-text">{{ selectedMusclesDisplay }}</text>
          <up-icon name="arrow-right" color="#999" size="14" />
        </view>
      </view>

      <!-- 动作类型 -->
      <view class="form-row select-row" @click="openActionTypePicker">
        <text class="form-label">动作类型</text>
        <view class="select-value">
          <text class="sel-text">{{ actionType || '请选择' }}</text>
          <up-icon v-if="!isEdit" name="arrow-right" color="#999" size="14" />
        </view>
      </view>

      <!-- 目录管理 -->
      <view class="form-row select-row" @click="showDirectoryPicker = true">
        <text class="form-label">目录管理</text>
        <view class="select-value">
          <text class="sel-text">{{ directoryName || '请选择' }}</text>
          <up-icon name="arrow-right" color="#999" size="14" />
        </view>
      </view>

      <!-- 动作视频 -->
      <view class="form-row media-row">
        <text class="form-label">动作视频 <text class="optional">(非必填)</text></text>
        <view class="media-upload" @click="openVideoSelector">
          <template v-if="videoFilePath">
            <video v-if="isVideoFile" :src="videoFilePath" class="media-preview" :controls="false"
              :show-fullscreen-btn="false" :enable-progress-gesture="false" />
            <image v-else :src="videoFilePath" class="media-preview" mode="aspectFill" />
            <view class="media-replace-btn">重新选择</view>
          </template>
          <template v-else>
            <up-icon name="camera" color="#999" size="28" />
            <text class="media-placeholder">图片 / 视频</text>
          </template>
        </view>
      </view>

      <!-- 视频详解 -->
      <view class="form-row media-row">
        <text class="form-label">视频详解 <text class="optional">(非必填)</text></text>
        <view class="media-upload" @click="chooseTutorialVideo">
          <template v-if="urlTutorial">
            <video :src="urlTutorial" class="media-preview" :controls="false" :show-fullscreen-btn="false"
              :enable-progress-gesture="false" />
            <view class="media-replace-btn">重新选择</view>
          </template>
          <template v-else>
            <up-icon name="play-right" color="#999" size="28" />
            <text class="media-placeholder">添加详解视频</text>
          </template>
        </view>
      </view>

      <!-- 删除动作（编辑模式） -->
      <view v-if="isEdit" class="form-row delete-row" @click="deleteAction">
        <up-icon name="trash" color="#e74c3c" size="18" />
        <text class="delete-text">删除动作</text>
      </view>
    </view>

    <!-- 保存按钮（卡片外、贴近底部） -->
    <view class="save-bar">
      <view class="btn-save" :class="{ disabled: !exerciseName.trim() }" @click="saveExercise">
        保存
      </view>
    </view>

    <!-- ==================== 弹窗：肌肉部位选择 ==================== -->
    <up-popup :show="showMusclePicker" mode="bottom" round="16rpx" @close="showMusclePicker = false"
      :safe-area-inset-bottom="true">
      <view class="popup-body">
        <view class="popup-head">
          <text class="popup-title">选择训练部位</text>
          <view class="popup-close" @click="showMusclePicker = false">
            <up-icon name="close" color="#666" size="18" />
          </view>
        </view>
        <view class="muscle-list">
          <view v-for="group in muscleGroups" :key="group.id" class="muscle-item">
            <text class="muscle-name">{{ group.name }}</text>
            <view class="muscle-actions">
              <view class="tag primary" :class="{ on: primaryMuscles.includes(group.id) }"
                @click.stop="togglePrimary(group.id)">
                <text>主要</text>
              </view>
              <view class="tag secondary" :class="{ on: secondaryMuscles.includes(group.id) }"
                @click.stop="toggleSecondary(group.id)">
                <text>次要</text>
              </view>
            </view>
          </view>
        </view>
        <view class="popup-foot">
          <view class="popup-done" @click="confirmMuscleSelection">完成</view>
        </view>
      </view>
    </up-popup>

    <!-- ==================== 弹窗：动作类型选择 ==================== -->
    <up-picker
      :show="showActionTypePicker"
      :columns="actionTypeColumns"
      :default-index="[actionTypeIndex]"
      title="选择动作类型"
      @confirm="onActionTypeConfirm"
      @cancel="showActionTypePicker = false"
      close-on-click-overlay
    />

    <!-- ==================== 弹窗：目录管理 ==================== -->
    <up-picker
      :show="showDirectoryPicker"
      :columns="directoryColumns"
      :default-index="[bodyPartIndex, equipmentIndex]"
      title="目录管理"
      @confirm="onDirectoryConfirm"
      @cancel="showDirectoryPicker = false"
      close-on-click-overlay
    />
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import ExercisesApi from '@/sheep/api/motion/exercises';
import LeftmotionApi from '@/sheep/api/motion/equipments';
import EquipmentListApi from '@/sheep/api/motion/motionequipments';
import FileApi from '@/sheep/api/infra/file';

// ==================== 基础状态 ====================
const isEdit = ref(false);
const editActionId = ref(null);
const actionDetail = ref({});

// ==================== 表单数据 ====================
const exerciseName = ref('');
const actionType = ref('');
const directoryName = ref('');
const selectedMusclesDisplay = ref('未选择');

// ==================== picker 索引 ====================
const actionTypeIndex = ref(0);
const bodyPartIndex = ref(0);
const equipmentIndex = ref(0);

// ==================== 动作类型选项（后端固定） ====================
const actionTypeOptions = ref([
  { id: 0, name: '无氧运动' },
  { id: 1, name: '有氧运动' },
  { id: 2, name: '记次训练' },
  { id: 3, name: '计时训练' },
  { id: 4, name: '自重加重' },
  { id: 5, name: '自重减重' },
  { id: 6, name: '间歇训练' },
]);

// up-picker 需要的 columns 格式：[['无氧运动', '有氧运动', ...]]
const actionTypeColumns = computed(() => [actionTypeOptions.value.map((item) => item.name)]);

// ==================== 肌肉部位 ====================
const muscleGroups = ref([]);
const primaryMuscles = ref([]);
const secondaryMuscles = ref([]);

const loadMuscleGroups = async () => {
  try {
    const res = await ExercisesApi.getMotionPartPage();
    muscleGroups.value = res.data;
  } catch (err) {
    console.error('加载肌肉部位失败', err);
  }
};

// ==================== 目录选项 ====================
const bodyPartOptions = ref([]);
const loadbodyPartOptions = async () => {
  const res = await LeftmotionApi.getAllCategories();
  bodyPartOptions.value = res.data;
};

const equipmentOptions = ref([]);
const loadequipmentOptions = async () => {
  const res = await EquipmentListApi.Getallequipments();
  equipmentOptions.value = res.data;
};

// up-picker 双列格式：[['大腿', '大臂', ...], ['器械', '杠铃', ...]]
const directoryColumns = computed(() => [
  bodyPartOptions.value.map((item) => item.name),
  equipmentOptions.value.map((item) => item.name),
]);

// ==================== 弹窗状态 ====================
const showMusclePicker = ref(false);
const showActionTypePicker = ref(false);
const showDirectoryPicker = ref(false);

// ==================== 上传状态 ====================
const DEFAULT_COVER = 'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260724/动作_1784878189633.jpg';
const coverImagePath = ref(DEFAULT_COVER);
const coverUploaded = ref(false);
const videoFilePath = ref('');
const videoUploaded = ref(false);
const isVideoFile = ref(false);
const urlTutorial = ref('');
const videoDetailName = ref('');

// ==================== 表单重置 ====================
const resetForm = () => {
  exerciseName.value = '';
  actionType.value = '';
  actionTypeIndex.value = 0;
  directoryName.value = '';
  bodyPartIndex.value = 0;
  equipmentIndex.value = 0;
  selectedMusclesDisplay.value = '未选择';
  primaryMuscles.value = [];
  secondaryMuscles.value = [];
  coverImagePath.value = DEFAULT_COVER;
  coverUploaded.value = false;
  videoFilePath.value = '';
  videoUploaded.value = false;
  isVideoFile.value = false;
  urlTutorial.value = '';
  videoDetailName.value = '';
  showMusclePicker.value = false;
  showActionTypePicker.value = false;
  showDirectoryPicker.value = false;
};

// ==================== 页面加载 ====================
onLoad(async (options) => {
  isEdit.value = options.isEdit === 'true';
  const editId = Number(options.id);
  editActionId.value = editId;

  resetForm();

  await Promise.all([
    loadbodyPartOptions(),
    loadequipmentOptions(),
    loadMuscleGroups(),
  ]);

  if (isEdit.value) {
    loadexercisedetail(editId);
  }
});

// ==================== 编辑回显 ====================
const loadexercisedetail = async (id) => {
  if (!id || !Number(id)) return;
  try {
    const response = await ExercisesApi.getExerciseById(id);
    actionDetail.value = response.data;
    const detail = actionDetail.value;

    exerciseName.value = detail.name || '';

    const targetType = actionTypeOptions.value.find((item) => item.id === detail.exerciseType);
    if (targetType) {
      actionTypeIndex.value = actionTypeOptions.value.findIndex((item) => item.id === detail.exerciseType);
      actionType.value = targetType.name;
    }

    const bodyIdx = bodyPartOptions.value.findIndex((item) => item.id === detail.categoryId);
    if (bodyIdx > -1) bodyPartIndex.value = bodyIdx;
    const equipIdx = equipmentOptions.value.findIndex((item) => item.id === detail.equipmentId);
    if (equipIdx > -1) equipmentIndex.value = equipIdx;
    const selBody = bodyPartOptions.value[bodyIdx];
    const selEquip = equipmentOptions.value[equipIdx];
    if (selBody && selEquip) {
      directoryName.value = `${selBody.name} (${selEquip.name})`;
    }

    primaryMuscles.value = detail.primaryMuscles ? JSON.parse(detail.primaryMuscles) : [];
    secondaryMuscles.value = detail.secondaryMuscles ? JSON.parse(detail.secondaryMuscles) : [];
    const primaryStr = detail.primaryMuscleNames?.length ? detail.primaryMuscleNames.join('、') + '(主)' : '';
    const secondaryStr = detail.secondaryMuscleNames?.length ? detail.secondaryMuscleNames.join('、') + '(次)' : '';
    let display = '';
    if (primaryStr) display += primaryStr;
    if (secondaryStr) {
      if (display) display += ', ';
      display += secondaryStr;
    }
    selectedMusclesDisplay.value = display || '未选择';

    if (detail.url3dAnimation) {
      coverImagePath.value = detail.url3dAnimation;
      coverUploaded.value = true;
    }
    if (detail.urlRealPerson) {
      videoFilePath.value = detail.urlRealPerson;
      videoUploaded.value = true;
      isVideoFile.value = detail.urlRealPerson.includes('.mp4');
    }
    if (detail.urlTutorial) {
      urlTutorial.value = detail.urlTutorial;
      videoDetailName.value = '已选择详解视频';
    }
  } catch (err) {
    console.error('加载动作详情失败：', err);
    actionDetail.value = {};
  }
};

// ==================== 动作类型 picker ====================
const openActionTypePicker = () => {
  if (isEdit.value) return;
  showActionTypePicker.value = true;
};

const onActionTypeConfirm = (res) => {
  const idx = res.indexs[0];
  actionType.value = actionTypeOptions.value[idx].name;
  actionTypeIndex.value = idx;
  showActionTypePicker.value = false;
};

// ==================== 目录 picker ====================
const onDirectoryConfirm = (res) => {
  const [bodyIdx, equipIdx] = res.indexs;
  bodyPartIndex.value = bodyIdx;
  equipmentIndex.value = equipIdx;
  const selBody = bodyPartOptions.value[bodyIdx];
  const selEquip = equipmentOptions.value[equipIdx];
  directoryName.value = `${selBody.name} (${selEquip.name})`;
  showDirectoryPicker.value = false;
};

// ==================== 肌肉部位选择 ====================
const togglePrimary = (id) => {
  if (primaryMuscles.value.includes(id)) {
    primaryMuscles.value = primaryMuscles.value.filter((i) => i !== id);
  } else {
    primaryMuscles.value.push(id);
    secondaryMuscles.value = secondaryMuscles.value.filter((i) => i !== id);
  }
};

const toggleSecondary = (id) => {
  if (secondaryMuscles.value.includes(id)) {
    secondaryMuscles.value = secondaryMuscles.value.filter((i) => i !== id);
  } else {
    secondaryMuscles.value.push(id);
    primaryMuscles.value = primaryMuscles.value.filter((i) => i !== id);
  }
};

const confirmMuscleSelection = () => {
  const primaryNames = primaryMuscles.value
    .map((id) => muscleGroups.value.find((g) => g.id === id)?.name || '')
    .filter(Boolean);
  const secondaryNames = secondaryMuscles.value
    .map((id) => muscleGroups.value.find((g) => g.id === id)?.name || '')
    .filter(Boolean);

  let displayText = '';
  if (primaryNames.length) displayText += primaryNames.join('、') + '(主)';
  if (secondaryNames.length) {
    if (displayText) displayText += ', ';
    displayText += secondaryNames.join('、') + '(次)';
  }
  selectedMusclesDisplay.value = displayText || '未选择';
  showMusclePicker.value = false;
};

// ==================== 文件上传 ====================
const openCoverSelector = () => {
  uni.chooseImage({
    count: 1,
    success: async (res) => {
      const path = res.tempFilePaths[0];
      uni.showLoading({ title: '上传中...' });
      try {
        const result = await FileApi.uploadFile(path);
        coverImagePath.value = result.data;
        coverUploaded.value = true;
        uni.showToast({ title: '封面上传成功', icon: 'success' });
      } catch (err) {
        uni.showToast({ title: '上传失败', icon: 'none' });
      } finally {
        uni.hideLoading();
      }
    },
    fail: () => {
      coverUploaded.value = false;
      uni.showToast({ title: '封面选择失败', icon: 'none' });
    },
  });
};

const openVideoSelector = () => {
  uni.chooseMedia({
    count: 1,
    mediaType: ['image', 'video'],
    success: async (res) => {
      const file = res.tempFiles[0];
      isVideoFile.value = file.fileType === 'video';
      const result = await FileApi.uploadFile(file.tempFilePath);
      videoFilePath.value = result.data;
      videoUploaded.value = true;
      uni.showToast({
        title: file.fileType === 'video' ? '视频选择成功' : '图片选择成功',
        icon: 'success',
      });
    },
    fail: () => {
      videoUploaded.value = false;
      uni.showToast({ title: '选择失败', icon: 'none' });
    },
  });
};

const chooseTutorialVideo = () => {
  uni.chooseMedia({
    count: 1,
    mediaType: ['video'],
    success: async (res) => {
      const file = res.tempFiles[0];
      const result = await FileApi.uploadFile(file.tempFilePath);
      urlTutorial.value = result.data;
      videoDetailName.value = '已选择详解视频';
      uni.showToast({ title: '选择成功', icon: 'success' });
    },
    fail: () => {
      uni.showToast({ title: '选择失败', icon: 'none' });
    },
  });
};

// ==================== 保存 & 删除 ====================
const saveExercise = async () => {
  if (!exerciseName.value.trim()) {
    uni.showToast({ title: '请输入动作名称', icon: 'none' });
    return;
  }

  const selectedBodyPart = bodyPartOptions.value[bodyPartIndex.value];
  const selectedEquipment = equipmentOptions.value[equipmentIndex.value];
  if (!selectedBodyPart || !selectedEquipment) {
    uni.showToast({ title: '请选择目录分类', icon: 'none' });
    return;
  }

  const selectedActionType = actionTypeOptions.value[actionTypeIndex.value];
  if (!selectedActionType) {
    uni.showToast({ title: '请选择动作类型', icon: 'none' });
    return;
  }

  if (!coverUploaded.value) {
    uni.showToast({ title: '请选择封面', icon: 'none' });
    return;
  }

  if (videoFilePath.value && !videoUploaded.value) {
    uni.showToast({ title: '视频未选择成功', icon: 'none' });
    return;
  }

  const payload = {
    name: exerciseName.value.trim(),
    categoryId: selectedBodyPart.id,
    equipmentId: selectedEquipment.id,
    exerciseType: selectedActionType.id,
    primaryMuscles: JSON.stringify(primaryMuscles.value),
    secondaryMuscles: JSON.stringify(secondaryMuscles.value),
    url3dAnimation: coverImagePath.value,
    urlRealPerson: videoFilePath.value,
    urlTutorial: urlTutorial.value,
  };

  if (isEdit.value) {
    payload.id = editActionId.value;
  }

  try {
    const res = isEdit.value
      ? await ExercisesApi.updateexercises(payload)
      : await ExercisesApi.createExercise(payload);

    if (res.code === 0) {
      uni.showToast({ title: isEdit.value ? '编辑成功' : '保存成功', icon: 'success' });
      setTimeout(() => uni.navigateBack(), 1000);
    } else {
      uni.showToast({ title: res.msg || '保存失败', icon: 'none' });
    }
  } catch (error) {
    console.error('保存动作失败:', error);
    uni.showToast({ title: '网络错误，请重试', icon: 'none' });
  }
};

const deleteAction = () => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该动作吗？删除后无法恢复',
    success: async (res) => {
      if (res.confirm) {
        try {
          const delRes = await ExercisesApi.deleteexercises(editActionId.value);
          if (delRes.code === 0) {
            uni.showToast({ title: '删除成功', icon: 'success' });
            setTimeout(() => uni.navigateBack(), 1000);
          } else {
            uni.showToast({ title: delRes.msg || '删除失败', icon: 'none' });
          }
        } catch (err) {
          uni.showToast({ title: '删除请求失败', icon: 'none' });
        }
      }
    },
  });
};
</script>

<style lang="scss" scoped>
// ==================== 变量 ====================
$bg-dark: #1c1c1e;
$card-bg: #fff;
$card-radius: 24rpx;
$primary: #ff9500;
$primary-dark: #e68600;
$text-main: #1a1a1a;
$text-sub: #666;
$text-hint: #999;
$divider: #f0f0f0;

// ==================== 页面 ====================
.page {
  min-height: 100vh;
  background: $bg-dark;
  padding: 24rpx 24rpx 0;
  color: #fff;
}

// ==================== 肌肉部位卡片 ====================
.muscle-card {
  position: relative;
  margin-bottom: 24rpx;
  border-radius: $card-radius;
  height: 440rpx;
  overflow: hidden;

  .muscle-img {
    width: 100%;
    height: 100%;
  }

  .muscle-tip {
    position: absolute;
    bottom: 20rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 12rpx 28rpx;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 40rpx;
    backdrop-filter: blur(10rpx);
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.9);
  }
}

// ==================== 表单卡片 ====================
.form-card {
  background: $card-bg;
  border-radius: $card-radius;
  overflow: hidden;
}

// ---- 通用行 ----
.form-row {
  padding: 28rpx 32rpx;
  border-bottom: 1rpx solid $divider;
  transition: background 0.15s;

  &:last-of-type {
    border-bottom: none;
  }

  .form-label {
    font-size: 30rpx;
    font-weight: 600;
    color: $text-main;
    display: block;

    .optional {
      font-size: 24rpx;
      font-weight: 400;
      color: $text-hint;
    }
  }
}

// ---- 动作名称行（横排） ----
.name-row {
  display: flex;
  align-items: flex-start;
  gap: 24rpx;

  .name-input-area {
    flex: 1;
    min-width: 0;

    .form-label {
      margin-bottom: 12rpx;
    }

    .name-input {
      height: 72rpx;
      font-size: 28rpx;
      color: $text-main;
      background: #f5f5f5;
      border-radius: 12rpx;
      padding: 0 20rpx;
    }
  }

  .cover-upload {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8rpx;

    .cover-preview {
      width: 140rpx;
      height: 140rpx;
      border-radius: 14rpx;
      background: #f5f5f5;
    }

    .cover-label {
      font-size: 22rpx;
      color: $text-hint;
    }
  }
}

// ---- 选择行（训练部位/动作类型/目录管理） ----
.select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  &:active {
    background: #fafafa;
  }

  .select-value {
    display: flex;
    align-items: center;
    gap: 8rpx;
    max-width: 60%;
    overflow: hidden;

    .sel-text {
      font-size: 26rpx;
      color: #28c76f;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

// ---- 媒体上传行（动作视频/视频详解） ----
.media-row {
  .media-upload {
    margin-top: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200rpx;
    background: #f8f8f8;
    border-radius: 16rpx;
    border: 2rpx dashed #ddd;
    gap: 12rpx;
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s, background 0.2s;

    &:active {
      background: #f0f0f0;
      border-color: #bbb;
    }

    .media-placeholder {
      font-size: 24rpx;
      color: $text-hint;
    }

    .media-preview {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .media-replace-btn {
      position: absolute;
      bottom: 16rpx;
      right: 16rpx;
      padding: 6rpx 18rpx;
      background: rgba(0, 0, 0, 0.55);
      border-radius: 20rpx;
      font-size: 22rpx;
      color: #fff;
      backdrop-filter: blur(8rpx);
    }
  }
}

// ---- 删除行 ----
.delete-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  padding: 32rpx;

  .delete-text {
    font-size: 30rpx;
    color: #e74c3c;
    font-weight: 500;
  }

  &:active {
    background: #fef2f2;
  }
}

// ==================== 保存按钮栏 ====================
.save-bar {
  padding: 24rpx 0;
  // 预留底部安全区
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));

  .btn-save {
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background: linear-gradient(135deg, $primary, $primary-dark);
    color: #fff;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: 700;
    letter-spacing: 2rpx;
    transition: opacity 0.2s, transform 0.15s;

    &:active {
      transform: scale(0.98);
    }

    &.disabled {
      opacity: 0.4;
      pointer-events: none;
    }
  }
}

// ==================== 弹窗通用 ====================
.popup-body {
  background: #fff;
  border-radius: 16rpx 16rpx 0 0;
  max-height: 65vh;
  display: flex;
  flex-direction: column;
}

.popup-head {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28rpx 32rpx;
  border-bottom: 1rpx solid $divider;
  position: relative;

  .popup-title {
    font-size: 32rpx;
    font-weight: 700;
    color: $text-main;
  }

  .popup-close {
    position: absolute;
    right: 32rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 48rpx;
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.popup-foot {
  padding: 20rpx 32rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  border-top: 1rpx solid $divider;

  .popup-done {
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background: linear-gradient(135deg, $primary, $primary-dark);
    color: #fff;
    border-radius: 40rpx;
    font-size: 30rpx;
    font-weight: 600;
    transition: transform 0.15s;

    &:active {
      transform: scale(0.97);
    }
  }
}

// ==================== 肌肉选择列表 ====================
.muscle-list {
  overflow-y: auto;
  padding: 8rpx 0;
  flex: 1;

  .muscle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22rpx 32rpx;
    border-bottom: 1rpx solid $divider;

    .muscle-name {
      font-size: 30rpx;
      font-weight: 500;
      color: $text-main;
      flex: 1;
    }

    .muscle-actions {
      display: flex;
      gap: 16rpx;
    }
  }
}

// ==================== 主要/次要 tag ====================
.tag {
  padding: 10rpx 24rpx;
  border-radius: 40rpx;
  font-size: 24rpx;
  font-weight: 500;
  transition: all 0.2s;
  background: #f5f5f5;
  color: #999;
  border: 2rpx solid transparent;

  &.primary {
    &.on {
      background: #fff6ec;
      color: $primary;
      border-color: $primary;
    }
  }

  &.secondary {
    &.on {
      background: #ecf6ff;
      color: #3b9cff;
      border-color: #3b9cff;
    }
  }
}
</style>