<template>
  <view class="page-wrap" :style="{ paddingTop: PageHeight + 'px' }">

    <!-- 左右主体布局 -->
    <view class="layout-container">
      <!-- 左侧分类 -->
      <scroll-view scroll-y class="left-nav">
        <view class="nav-item" v-for="nav in navItems" :key="nav.id" :class="{ active: activeNav === nav.id }"
          @click="switchNav(nav.id)">
          {{ nav.name }}
        </view>
      </scroll-view>

      <!-- 右侧动作列表 -->
      <scroll-view scroll-y class="right-content">
        <!-- 初始引导：未选择分类 -->
        <view class="content-tip init-guide" v-if="!activeNav">
          <text class="tip-text">请选择左侧分类查看动作</text>
          <text class="tip-subtext">选择分类后将展示该分类下的训练动作</text>
        </view>

        <!-- 加载中 -->
        <view class="content-tip loading-state" v-else-if="loading">
          <text class="tip-text">加载中...</text>
        </view>

        <!-- 加载失败 -->
        <view class="content-tip error-state" v-else-if="loadError">
          <text class="tip-text">加载失败，请重试</text>
          <view class="retry-btn" @click="retryLoad">点击重试</view>
        </view>

        <!-- 正常内容 -->
        <template v-else>
          <!-- 部位筛选标签 -->
          <scroll-view scroll-x show-scrollbar="false" class="part-filter" v-if="motionPart.length > 0">
            <view class="part-filter-inner">
              <view class="filter-item" :class="{ active: activeMotionPart === '' }" @click="handlePartClick('')">全部
              </view>
              <view class="filter-item" v-for="item in motionPart" :key="item.id"
                :class="{ active: activeMotionPart === item.id }" @click="handlePartClick(item.id)">
                {{ item.name }}
              </view>
            </view>
          </scroll-view>

          <!-- 部位筛选为空提示 -->
          <view class="content-tip part-empty-tip" v-else>
            <text class="tip-text">该分类下暂无可筛选部位</text>
          </view>

          <!-- 动作列表 -->
          <view class="equipment-list" v-if="exercises.length > 0">
            <view class="equipment-item" v-for="item in exercises" :key="item.equipmentId">
              <view class="equipment-name">{{ item.equipmentName }}</view>
              <view class="action-list">
                <view class="action-item" v-for="e in item.exercises" :key="e.id"
                  :class="{ selected: selectedIds.has(e.id) }" @click="toggleAction(e)">
                  <image :src="e.url3dAnimation" mode="aspectFill" class="action-img"></image>
                  <view class="action-name">{{ e.name }}</view>
                </view>
              </view>
            </view>
          </view>

          <!-- 无动作数据 -->
          <view class="content-tip empty-state" v-else>
            <text class="tip-text">该分类下暂无动作</text>
            <text class="tip-subtext">可尝试切换分类或部位查看其他动作</text>
          </view>
        </template>
      </scroll-view>
    </view>

    <!-- 底部已选标签栏 -->
    <scroll-view class="selected-bar" scroll-x show-scrollbar="false" v-if="selectedActions.length > 0">
      <view class="selected-bar-inner">
        <view class="selected-item" v-for="item in selectedActions" :key="item.id">
          <text class="name">{{ item.name }}</text>
          <uni-icons type="close" size="16" color="#fff" @click="removeAction(item)"></uni-icons>
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作按钮 -->
    <view class="bottom-btn-bar">
      <view class="btn cancel-btn" @click="backPage">取消</view>
      <view class="btn confirm-btn" :class="{ disabled: selectedActions.length < 2 }" @click="combineActions">
        组合
      </view>
    </view>

    <!-- 命名弹窗 -->
    <up-popup v-model:show="showNamePopup" mode="bottom" round>
      <view class="popup-content" @click.stop>
        <view class="popup-header">
          <up-icon name="close" color="#333" size="25" @click="closePopup"></up-icon>
          <text class="popup-title">命名超级组</text>
          <text class="save-btn" @click="saveCombination">保存</text>
        </view>
        <view class="input-wrapper">
          <textarea v-model="combinationName" class="name-input" placeholder="请输入超级组名称" maxlength="20" focus />
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useActionStore } from '@/sheep/store/action'
import ExercisesApi from '@/sheep/api/motion/exercises'
import SupersetsApi from '@/sheep/api/motion/supersets'
import { getMenuButtonHeight, getTopSafeArea } from '@/utils/safeArea';
const menuButtonHeight = ref(getMenuButtonHeight());
const topSafeArea = ref(getTopSafeArea());
const PageHeight = ref(topSafeArea.value);
// #ifdef MP-WEIXIN
PageHeight.value = menuButtonHeight.value + topSafeArea.value;
// #endif
const actionStore = useActionStore()

// ==================== 状态变量 ====================

// 左侧分类
const navItems = ref([])
const activeNav = ref(null)

// 部位筛选
const motionPart = ref([])
const activeMotionPart = ref('')

// 动作数据
const exercises = ref([])
const loading = ref(false)
const loadError = ref(false)

// 选中动作
const selectedActions = ref([])
const selectedIds = computed(() => new Set(selectedActions.value.map(item => item.id)))

// 命名弹窗
const showNamePopup = ref(false)
const combinationName = ref('')

// ==================== 生命周期 ====================

onLoad(async () => {
  selectedActions.value = []
  combinationName.value = ''
  await loadCategories()
})

// ==================== 数据加载 ====================

/** 加载全部分类 */
const loadCategories = async () => {
  try {
    await actionStore.getloadCategories()
    // 过滤掉虚拟分类（如「超级组」id='super'），其 id 非数字，无法用于加载动作
    navItems.value = actionStore.showCategories.filter(item => {
      const id = item.id
      return typeof id === 'number' || (typeof id === 'string' && /^\d+$/.test(id))
    })
    if (navItems.value.length > 0) {
      switchNav(navItems.value[0].id)
    }
  } catch (err) {
    console.error('加载分类失败', err)
  }
}

/** 切换左侧大分类 */
const switchNav = async (id) => {
  if (activeNav.value === id) return
  activeNav.value = id
  activeMotionPart.value = ''
  loadError.value = false
  await loadExercises(id)
}

/** 根据分类ID加载动作和部位 */
const loadExercises = async (categoriesId) => {
  loading.value = true
  loadError.value = false
  try {
    const [partRes, exerciseRes] = await Promise.all([
      ExercisesApi.getMotionPart(categoriesId),
      ExercisesApi.getexercises({ categoriesId })
    ])
    motionPart.value = partRes.data || []
    exercises.value = exerciseRes.data || []
  } catch (err) {
    console.error('加载动作失败', err)
    loadError.value = true
    motionPart.value = []
    exercises.value = []
  } finally {
    loading.value = false
  }
}

/** 按子部位筛选动作 */
const handlePartClick = async (id) => {
  activeMotionPart.value = id
  loading.value = true
  loadError.value = false
  try {
    const res = await ExercisesApi.getexercises({
      categoriesId: activeNav.value,
      subCategoriesId: id
    })
    exercises.value = res.data || []
  } catch (err) {
    console.error('筛选动作失败', err)
    uni.showToast({ title: '加载失败', icon: 'none' })
    loadError.value = true
  } finally {
    loading.value = false
  }
}

/** 重试加载 */
const retryLoad = () => {
  if (activeNav.value) {
    loadExercises(activeNav.value)
  }
}

// ==================== 操作交互 ====================

/** 选中/取消单个动作 */
const toggleAction = (action) => {
  const exist = selectedIds.value.has(action.id)
  if (exist) {
    selectedActions.value = selectedActions.value.filter(i => i.id !== action.id)
  } else {
    selectedActions.value = [...selectedActions.value, { ...action }]
  }
}

/** 移除已选动作 */
const removeAction = (action) => {
  selectedActions.value = selectedActions.value.filter(i => i.id !== action.id)
}

/** 打开命名弹窗 */
const combineActions = () => {
  if (selectedActions.value.length < 2) {
    uni.showToast({ title: '至少选择2个动作', icon: 'none' })
    return
  }
  combinationName.value = ''
  showNamePopup.value = true
}

/** 关闭弹窗 */
const closePopup = () => {
  showNamePopup.value = false
}

/** 保存超级组 */
const saveCombination = async () => {
  const name = combinationName.value.trim()
  if (!name) {
    uni.showToast({ title: '请输入名称', icon: 'none' })
    return
  }

  const exerciseIds = selectedActions.value.map(i => i.id).filter(Boolean)
  if (exerciseIds.length < 2) return

  try {
    const res = await SupersetsApi.createsupersets({ name, exerciseIds })
    if (res.code === 0) {
      uni.showToast({ title: '创建成功', icon: 'success' })
      selectedActions.value = []
      closePopup()
      setTimeout(() => uni.navigateBack(), 800)
    } else {
      uni.showToast({ title: res.msg || '创建失败', icon: 'none' })
    }
  } catch (err) {
    uni.showToast({ title: '创建失败，请重试', icon: 'none' })
  }
}

/** 返回上一页 */
const backPage = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
// ==================== SCSS 变量 ====================
$color-primary: #f8d714;
$color-bg: #f5f5f5;
$color-bg-nav: #fafafa;
$color-text-primary: #333;
$color-text-secondary: #666;
$color-text-muted: #999;
$color-white: #fff;
$color-dark-bar: #2c2c2e;
$color-dark-tag: #444;
$color-border: #eee;
$color-disabled-bg: #eee;
$color-disabled-text: #bbb;

$z-fixed: 100;

$radius-sm: 12rpx;
$radius-md: 16rpx;
$radius-lg: 24rpx;
$radius-round: 40rpx;

$spacing-xs: 8rpx;
$spacing-sm: 16rpx;
$spacing-md: 20rpx;
$spacing-lg: 30rpx;

$font-xs: 24rpx;
$font-sm: 26rpx;
$font-md: 28rpx;
$font-lg: 30rpx;
$font-xl: 32rpx;



.page-wrap {
  width: 100%;
  height: 100vh;
  // #ifdef MP-WEIXIN
  height: 88vh;
  //  #endif
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

// ==================== 主体布局 ====================
.layout-container {

  min-height: 0;
  display: flex;
  overflow: hidden;
  padding-bottom: calc(100rpx + 30rpx); // 底部按钮栏 + 间距
}

// 左侧导航
.left-nav {
  width: 180rpx;
  background: $color-bg-nav;
  border-right: 1rpx solid $color-border;

  .nav-item {
    padding: $spacing-lg $spacing-sm;
    font-size: $font-sm;
    color: $color-text-secondary;
    position: relative;
    white-space: nowrap;
    text-align: center;

    &.active {
      background: $color-white;
      color: #000;
      font-weight: 500;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 36rpx;
        background: $color-primary;
      }
    }
  }
}

// 右侧内容
.right-content {
  flex: 1;
  padding: $spacing-md;
  padding-top: $spacing-lg;

  // 通用内容提示块
  .content-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80rpx $spacing-lg;
    text-align: center;

    .tip-text {
      font-size: $font-md;
      color: $color-text-muted;
    }

    .tip-subtext {
      margin-top: $spacing-sm;
      font-size: $font-xs;
      color: #bbb;
    }
  }

  // 初始引导
  .init-guide {
    .tip-text {
      font-size: $font-lg;
      color: $color-text-secondary;
      font-weight: 500;
    }
  }

  // 错误重试按钮
  .retry-btn {
    margin-top: $spacing-md;
    padding: 12rpx 40rpx;
    font-size: $font-sm;
    color: #000;
    background: $color-primary;
    border-radius: $radius-round;
  }

  // 部位筛选标签（横向滚动）
  .part-filter {
    margin-bottom: $spacing-md;
    white-space: nowrap;

    .part-filter-inner {
      display: inline-flex;
      flex-wrap: nowrap;
      gap: 15rpx;
    }

    .filter-item {
      flex-shrink: 0;
      padding: 10rpx 24rpx;
      background: $color-white;
      border-radius: $radius-sm;
      font-size: $font-xs;
      color: $color-text-secondary;
      transition: all 0.2s;

      &.active {
        background: $color-primary;
        color: #000;
        font-weight: 500;
      }
    }
  }

  // 部位筛选为空
  .part-empty-tip {
    padding: 30rpx $spacing-lg 40rpx;
  }

  .equipment-item {
    margin-bottom: $spacing-lg;

    .equipment-name {
      font-size: $font-md;
      font-weight: 500;
      color: $color-text-secondary;
      margin-bottom: $spacing-sm;
      padding-left: $spacing-xs;
      border-left: 6rpx solid $color-primary;
    }

    .action-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: $spacing-sm;

      .action-item {
        background: $color-white;
        border-radius: $radius-md;
        padding: $spacing-sm;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: $spacing-xs;
        border: 2rpx solid transparent;
        transition: border-color 0.2s, transform 0.15s;

        &.selected {
          border-color: $color-primary;
        }

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

        .action-img {
          width: 100%;
          height: 200rpx;
          border-radius: $radius-sm;
        }

        .action-name {
          font-size: $font-xs;
          color: $color-text-primary;
        }
      }
    }
  }

  // 无动作空状态
  .empty-state {
    padding-top: 100rpx;
  }
}

// ==================== 底部已选标签栏 ====================
.selected-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(100rpx + env(safe-area-inset-bottom));
  background: $color-dark-bar;
  padding: 20rpx 20rpx 40rpx;
  white-space: nowrap;
  z-index: $z-fixed;
  
  .selected-bar-inner {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: $spacing-md;
  }

  .selected-item {
    flex-shrink: 0;
    background: $color-dark-tag;
    color: $color-white;
    padding: 10rpx $spacing-md;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    gap: 10rpx;

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

// ==================== 底部操作按钮 ====================
.bottom-btn-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: $spacing-md;
  padding: $spacing-md $spacing-lg calc(20rpx + env(safe-area-inset-bottom));
  background: $color-white;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: $z-fixed;

  .btn {
    flex: 1;
    height: 80rpx;
    border-radius: $radius-round;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $font-lg;
    font-weight: bold;
  }

  .cancel-btn {
    background: $color-bg;
    color: $color-text-primary;
  }

  .confirm-btn {
    background: $color-primary;
    color: #000;

    &.disabled {
      background: $color-disabled-bg;
      color: $color-disabled-text;
    }
  }
}

// ==================== 命名弹窗 ====================
.popup-content {
  width: 100%;
  background: $color-white;
  box-sizing: border-box;
  border-radius: $radius-lg $radius-lg 0 0;
  padding: $spacing-lg;
  max-height: 70vh;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: $spacing-md;
    margin-bottom: $spacing-lg;

    .save-btn {
      font-size: $font-md;
      background: $color-primary;
      padding: 12rpx 32rpx;
      border-radius: 32rpx;
      color: #000;
    }

    .popup-title {
      font-size: $font-xl;
      font-weight: bold;
    }
  }

  .input-wrapper {
    margin-bottom: $spacing-lg;

    .name-input {
      width: 100%;
      height: 300rpx;
      background-color: #ececec;
      border-radius: $radius-md;
      padding: 24rpx;
      font-size: $font-md;
      text-align: left;
      vertical-align: top;
    }
  }
}
</style>