<template>
  <view class="exercise-page">
    <!-- 顶部操作栏：搜索 + 快捷新增 -->
    <view class="top-bar">
      <view class="search-wrapper">
        <up-search v-model="searchKeyword" placeholder="搜索动作名称" :showAction="false" shape="round" bgColor="#f3f4f6"
          placeholderColor="#9ca3af" searchIconColor="#6b7280" @clear="searchKeyword = ''" />
      </view>

      <view class="add-btn-wrapper">
        <view class="add-icon-btn" @click.stop="addShow = !addShow">
          <up-icon name="plus" size="20" color="#111827" bold />
        </view>

        <!-- 下拉浮动菜单 -->
        <view class="floating-menu" v-if="addShow" @click.stop>
          <view class="menu-item" @click="addnewmotion">
            <up-icon name="plus-circle" size="18" color="#10b981" />
            <text class="menu-text">新增动作</text>
          </view>
          <view class="menu-item" @click="addnewsupersets">
            <up-icon name="attach" size="18" color="#3b82f6" />
            <text class="menu-text">新增超级组</text>
          </view>
          <view class="menu-item" @click="actionmanagement">
            <up-icon name="list-dot" size="18" color="#f59e0b" />
            <text class="menu-text">动作目录管理</text>
          </view>
        </view>

        <view class="menu-mask" v-if="addShow" @click="addShow = false" />
      </view>
    </view>

    <!-- 主体左右双栏布局 -->
    <view class="layout-container">
      <!-- 左侧一级分类导航 -->
      <scroll-view scroll-y class="left-nav" :show-scrollbar="false">
        <view class="nav-item" :class="{ active: activeNav === 'collect' }" @click="handleCollectClick">
          <up-icon name="star-fill" size="14" :color="activeNav === 'collect' ? '#10b981' : '#9ca3af'"></up-icon>
          <text class="nav-text">收藏</text>
        </view>

        <view v-for="nav in navItems" :key="nav.id" class="nav-item" :class="{ active: activeNav === nav.id }"
          @click="switchNav(nav.id)">
          <text class="nav-text">{{ nav.name }}</text>
        </view>
      </scroll-view>

      <!-- 右侧二级筛选与动作网格内容 -->
      <scroll-view scroll-y class="right-content" :show-scrollbar="false">
        <!-- 二级子部位 Chips 筛选条 -->
        <scroll-view scroll-x class="sub-part-scroll" v-if="motionPart.length > 0">
          <view class="sub-part-wrapper">
            <view class="part-chip" :class="{ active: activeMotionPart === '' }" @click="handlePartClick('')">
              全部
            </view>
            <view v-for="item in motionPart" :key="item.id" class="part-chip"
              :class="{ active: activeMotionPart === item.id }" @click="handlePartClick(item.id)">
              {{ item.name }}
            </view>
          </view>
        </scroll-view>

        <!-- 动作与超级组网格卡片区 -->
        <view class="exercise-grid">
          <template v-if="displayExercises.length > 0 || superGroupInfo.length > 0">
            <!-- 器械分组列表 -->
            <view class="equipment-group" v-for="item in displayExercises" :key="item.equipmentId">
              <view class="equipment-title">
                <view class="title-bar"></view>
                <text>{{ item.equipmentName || '通用器械' }}</text>
              </view>

              <view class="action-grid">
                <view class="action-card" v-for="e in item.exercises" :key="e.id" @click="goToDetail(e.id, 1)">
                  <view class="image-wrapper">
                    <image :src="e.url3dAnimation" mode="aspectFil" lazy-load class="action-img"></image>
                    <view class="reps-badge" v-if="e.trainingReps">
                      {{ e.trainingReps }}次
                    </view>
                  </view>
                  <view class="action-info">
                    <text class="action-name">{{ e.name }}</text>
                  </view>
                </view>
              </view>
            </view>

            <!-- 超级组展示模块 -->
            <view class="supers-group" v-if="superGroupInfo.length > 0">
              <view class="equipment-title">
                <view class="title-bar blue"></view>
                <text>超级组</text>
              </view>

              <view class="super-card" v-for="item in superGroupInfo" :key="item.id" @click="goToDetail(item.id, 2)">
                <image src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260507/超级组_1778117889451.png"
                  mode="aspectFill" lazy-load class="super-img"></image>
                <view class="super-info">
                  <text class="super-name">{{ item.name }}</text>
                  <text class="super-muscles" v-if="item.primaryMuscles">
                    {{ Array.isArray(item.primaryMuscles) ? item.primaryMuscles.join(' · ') : item.primaryMuscles }}
                  </text>
                </view>
                <up-icon name="arrow-right" size="14" color="#9ca3af"></up-icon>
              </view>
            </view>
          </template>

          <!-- 优雅的空状态 -->
          <view class="empty-wrapper" v-else>
            <up-empty mode="data" text="暂无相关动作数据"></up-empty>
          </view>
        </view>


      </scroll-view>
    </view>

    <!-- 动作详情弹窗组件 -->
    <dongzuoXianqing ref="actionDetailRef" />
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import ExercisesApi from '@/sheep/api/motion/exercises';
import SupersetsApi from '@/sheep/api/motion/supersets';
import dongzuoXianqing from '@/pages/xunji/components/dongzuo-xianqing.vue';
import { useActionStore } from '@/sheep/store/action';

const actionStore = useActionStore();

const activeNav = ref('');
const navItems = ref([]);
const exercises = ref([]);
const superGroupInfo = ref([]);
const motionPart = ref([]);
const activeMotionPart = ref('');
const searchKeyword = ref('');
const addShow = ref(false);
const actionDetailRef = ref(null);

const displayExercises = computed(() => {
  if (!searchKeyword.value.trim()) {
    return exercises.value;
  }
  const kw = searchKeyword.value.toLowerCase().trim();

  return exercises.value
    .map((group) => {
      const filtered = (group.exercises || []).filter((ex) =>
        ex.name && ex.name.toLowerCase().includes(kw)
      );
      return {
        ...group,
        exercises: filtered,
      };
    })
    .filter((group) => group.exercises && group.exercises.length > 0);
});

const handlePartClick = async (id) => {
  try {
    activeMotionPart.value = id;
    const exerciseRes = await ExercisesApi.getexercises({
      categoriesId: activeNav.value,
      subCategoriesId: id,
    });
    exercises.value = exerciseRes.data || [];
  } catch (e) {
    console.error('加载子部位动作失败:', e);
  }
};

const handleCollectClick = () => {
  activeNav.value = 'collect';
  activeMotionPart.value = '';
  motionPart.value = [];
  loadCollectList();
  loadSuperFavoriteList();
};

// 加载动作收藏列表
const loadCollectList = async () => {
  try {
    const res = await ExercisesApi.getFavoriteExercises();
    exercises.value = res.data || [];
  } catch (err) {
    console.error('加载动作收藏失败:', err);
  }
};

// 加载超级组收藏列表
const loadSuperFavoriteList = async () => {
  try {
    const res = await SupersetsApi.getFavoriteSuperset();
    superGroupInfo.value = res.data || [];
  } catch (err) {
    superGroupInfo.value = [];
    console.error('加载超级组收藏失败:', err);
  }
};

// 加载大类
const loadCategories = async () => {
  try {
    await actionStore.getloadCategories();
    navItems.value = actionStore.showCategories;

    if (navItems.value.length > 0) {
      switchNav(navItems.value[0].id);
    }
  } catch (error) {
    console.error('获取分类失败:', error);
  }
};

// 加载动作列表
const loadExercises = async (categoriesId) => {
  try {
    const partRes = await ExercisesApi.getMotionPart(categoriesId);
    motionPart.value = partRes.data || [];

    const exerciseRes = await ExercisesApi.getexercises({ categoriesId });
    exercises.value = exerciseRes.data || [];
  } catch (error) {
    console.error('加载动作失败:', error);
  }
};

// 切换一级导航
const switchNav = (id) => {
  if (activeNav.value === id) return;
  activeNav.value = id;
  activeMotionPart.value = '';
  searchKeyword.value = '';

  if (id === 'super') {
    exercises.value = [];
    motionPart.value = [];
    loadsupersetsinfo();
  } else {
    superGroupInfo.value = [];
    loadExercises(id);
  }
};

// 加载超级组列表
const loadsupersetsinfo = async () => {
  try {
    const response = await SupersetsApi.getsupersets();
    superGroupInfo.value = response.data || [];
  } catch (error) {
    console.error('获取超级组失败:', error);
  }
};

const goToDetail = (id, type) => {
  actionDetailRef.value?.open(id, type);
};

const addnewmotion = () => {
  addShow.value = false;
  uni.navigateTo({ url: '/pages4/pages/xunji/xunji-dongzuo-xinzeng' });
};

const addnewsupersets = () => {
  addShow.value = false;
  uni.navigateTo({ url: `/pages4/pages/xunji/dongzuo-xinzengchaojizu?navItems=${encodeURIComponent(JSON.stringify(navItems.value))}` });
};

const actionmanagement = () => {
  addShow.value = false;
  uni.navigateTo({ url: '/pages4/pages/xunji/dongzuo-muluguanli' });
};

onMounted(() => {
  loadCategories();
});
</script>

<style lang="scss" scoped>
.exercise-page {
  height: 86vh;
  // #ifdef H5
  height: calc(100vh - 44px);
  // #endif

  background-color: #ffffff;
  overflow: hidden;

  /* 顶部搜索操作栏 */
  .top-bar {
    display: flex;
    align-items: center;
    padding: 16rpx 24rpx;
    background-color: #ffffff;
    border-bottom: 1rpx solid #f3f4f6;
    z-index: 50;

    .search-wrapper {
      flex: 1;
      margin-right: 20rpx;
    }

    .add-btn-wrapper {
      position: relative;

      .add-icon-btn {
        width: 72rpx;
        height: 72rpx;
        border-radius: 50%;
        background-color: #f3f4f6;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.2s;

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

      .floating-menu {
        position: absolute;
        top: 84rpx;
        right: 0;
        width: 320rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.12);
        padding: 12rpx 0;
        z-index: 100;
        border: 1rpx solid #f3f4f6;

        .menu-item {
          display: flex;
          align-items: center;
          gap: 16rpx;
          padding: 24rpx 28rpx;
          transition: background-color 0.15s;

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

          .menu-text {
            font-size: 28rpx;
            color: #1f2937;
            font-weight: 500;
          }
        }
      }

      .menu-mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        background-color: transparent;
      }
    }
  }

  .layout-container {
    height: 100%;
    display: flex;
    overflow: hidden;

    .left-nav {
      width: 180rpx;
      height: 88%;
      
      background-color: #f9fafb;
      border-right: 1rpx solid #f3f4f6;

      .nav-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8rpx;
        padding: 32rpx 16rpx;
        position: relative;
        transition: all 0.2s;

        .nav-text {
          font-size: 26rpx;
          color: #4b5563;
          font-weight: 400;
          text-align: center;
          line-height: 1.3;
        }

        &.active {
          background-color: #ffffff;

          .nav-text {
            color: #10b981;
            font-weight: 600;
          }

          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 24rpx;
            bottom: 24rpx;
            width: 6rpx;
            background-color: #10b981;
            border-radius: 0 4rpx 4rpx 0;
          }
        }
      }
    }

    /* 右侧内容滚动区 */
    .right-content {
      width: calc(100% - 180rpx);
      height: 100%;
      background-color: #efefef;
      padding: 20rpx 24rpx 200rpx;
      box-sizing: border-box;

      /* 二级子部位芯片滚动条 */
      .sub-part-scroll {
        width: 100%;
        white-space: nowrap;
        margin-bottom: 24rpx;

        .sub-part-wrapper {
          display: inline-flex;
          gap: 16rpx;
          padding-bottom: 4rpx;

          .part-chip {
            display: inline-block;
            padding: 10rpx 24rpx;
            font-size: 24rpx;
            color: #4b5563;
            background-color: #f3f4f6;
            border-radius: 30rpx;
            transition: all 0.2s;

            &.active {
              background-color: #ecfdf5;
              color: #10b981;
              font-weight: 600;
            }
          }
        }
      }

      /* 动作网格区 */
      .exercise-grid {
        display: flex;
        flex-direction: column;
        gap: 32rpx;

        .equipment-group {
          .equipment-title {
            display: flex;
            align-items: center;
            gap: 12rpx;
            font-size: 28rpx;
            font-weight: 600;
            color: #111827;
            margin-bottom: 20rpx;

            .title-bar {
              width: 8rpx;
              height: 28rpx;
              background-color: #10b981;
              border-radius: 4rpx;

              &.blue {
                background-color: #3b82f6;
              }
            }
          }

          .action-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15rpx;

            .action-card {
              background-color: #ffffff;
              border-radius: 16rpx;
              border: 1rpx solid #f3f4f6;
              box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
              overflow: hidden;
              display: flex;
              flex-direction: column;
              transition: transform 0.15s;

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

              .image-wrapper {
                position: relative;
                width: 100%;
                height: 200rpx;
                background-color: #f9fafb;

                .action-img {
                  width: 100%;
                  height: 200rpx;
                }

                .reps-badge {
                  position: absolute;
                  top: 12rpx;
                  right: 12rpx;
                  background: rgba(0, 0, 0, 0.6);
                  backdrop-filter: blur(8px);
                  color: #ffffff;
                  font-size: 20rpx;
                  padding: 4rpx 12rpx;
                  border-radius: 20rpx;
                  font-weight: 500;
                }
              }

              .action-info {
                padding: 16rpx 12rpx;
                display: flex;
                align-items: center;
                justify-content: center;

                .action-name {
                  font-size: 24rpx;
                  font-weight: 500;
                  color: #1f2937;
                  text-align: center;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  width: 100%;
                }
              }
            }
          }
        }

        /* 超级组卡片样式 */
        .supers-group {
          .super-card {
            display: flex;
            align-items: center;
            background-color: #ffffff;
            border-radius: 16rpx;
            border: 1rpx solid #f3f4f6;
            padding: 20rpx;
            margin-bottom: 16rpx;
            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
            gap: 20rpx;

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

            .super-img {
              width: 100rpx;
              height: 100rpx;
              border-radius: 12rpx;
              background-color: #f3f4f6;
              flex-shrink: 0;
            }

            .super-info {
              flex: 1;
              display: flex;
              flex-direction: column;
              gap: 8rpx;

              .super-name {
                font-size: 28rpx;
                font-weight: 600;
                color: #111827;
              }

              .super-muscles {
                font-size: 22rpx;
                color: #6b7280;
              }
            }
          }
        }

        .empty-wrapper {
          padding: 80rpx 0;
        }
      }


    }
  }
}
</style>