<!-- 
超级组动作新增页面（dongzuo-xinzengchaojizu.vue），
核心用于健身类应用中 “超级组”（多个动作组合训练）的创建，
支持动作分类筛选、搜索、选择、组合命名及保存 
-->
<!-- 整体流程：加载分类 → 选择分类加载动作 → 搜索/选择动作 → 底部展示已选动作 → 点击组合 → 弹窗命名 → 保存超级组 -->
<!-- 该页面是 训记的横向导航栏‘动作’的右侧加号里面的“新增超级组”（点击去就是）的具体页面 -->
<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input v-model="searchValue" class="search-input" type="text" placeholder="搜索动作名称" @input="handleSearchInput" />
    </view>

    <!-- 主内容区 -->
    <view class="main-content">
      <!-- 左侧分类菜单 -->
      <scroll-view scroll-y class="left-menu">
        <view v-for="(item, index) in leftexercise" :key="index" class="menu-item"
          :class="{ active: selectedCategoryId === item.id }" @click="selectCategory(item)">
          <text class="menu-text">{{ item.name }}</text>
        </view>
      </scroll-view>

      <!-- 右侧动作列表 -->
      <scroll-view scroll-y class="right-content">
        <view class="category-section" v-for="(group, groupIndex) in displayGroups" :key="groupIndex">
          <text class="category-title">{{ group.title }}</text>
          <view class="action-grid">
            <view v-for="(action, actionIndex) in group.actions" :key="action.id || actionIndex" class="action-card"
              @click="toggleSelect(action)">
              <image
                src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"
                class="action-img">
              </image>
              <text class="action-name">{{ action.name }}</text>
              <view class="select-icon">
                <text v-if="action.selected" class="icon-checked">✓</text>
                <text v-else class="icon-unchecked">○</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 空状态 -->
        <view v-if="displayGroups.length === 0 && !loading" class="empty-state">
          <text class="empty-text">暂无动作</text>
        </view>
      </scroll-view>
    </view>

    <!-- 已选择动作区域 -->
    <view class="selected-actions" v-if="selectedActions.length > 0">
      <text class="selected-title">已选择 ({{ selectedActions.length }})</text>
      <scroll-view scroll-x class="selected-scroll">
        <view v-for="action in selectedActions" :key="action.id || action.name" class="selected-item">
          <image src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"
            class="selected-img"></image>
          <text class="selected-name">{{ action.name }}</text>
          <text class="selected-close" @click.stop="removeSelected(action)">×</text>
        </view>
      </scroll-view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="bottom-btns">
      <button class="btn cancel-btn" @click="back">取消</button>
      <button class="btn primary-btn" @click="combineActions">组合</button>
    </view>

    <!-- ========== 原生弹窗（点击组合后出现） ========== -->
    <view v-if="showNamePopup" class="popup-mask" @click="closePopup">
      <view class="popup-content" @click.stop>
        <!-- 头部 -->
        <view class="popup-header">
          <text class="header-btn" @click="closePopup">取消</text>
          <text class="popup-title">命名组合</text>
          <text class="header-btn primary" @click="saveCombination">保存</text>
        </view>

        <!-- 输入框 -->
        <view class="input-wrapper">
          <input v-model="combinationName" class="name-input" type="text" placeholder="请输入组合名称" maxlength="20" focus />
          <text class="hint">建议名称如：胸肩超级组、爆发力训练等</text>
        </view>

        <!-- 动作预览 -->
        <view class="preview-section">
          <text class="preview-title">包含动作（{{ selectedActions.length }}个）</text>
          <scroll-view scroll-x class="preview-scroll">
            <view class="preview-tag" v-for="action in selectedActions" :key="action.id || action.name">
              {{ action.name }}
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

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

// 状态
const searchValue = ref('');
const leftexercise = ref([]);
const allActions = ref([]); // 当前分类的动作（仅用于展示）
const selectedCategoryId = ref(null);
const loading = ref(false);

// 弹窗控制
const showNamePopup = ref(false);
const combinationName = ref('');

// 👇 关键修复：独立存储已选动作的完整对象（不依赖 allActions）
const globalSelectedActions = ref([]); // 存完整的动作对象
const globalSelectedIds = computed(() => new Set(globalSelectedActions.value.map((a) => a.id)));

// 已选动作直接使用 globalSelectedActions（不再从 allActions 过滤！）
const selectedActions = computed(() => globalSelectedActions.value);

// 显示分组（搜索用，只影响当前分类展示）
const displayGroups = computed(() => {
  const keyword = searchValue.value.trim().toLowerCase();
  let actionsToDisplay = [...allActions.value];
  if (keyword) {
    actionsToDisplay = actionsToDisplay.filter((action) =>
      action.name.toLowerCase().includes(keyword),
    );
    return [{ title: '搜索结果', actions: actionsToDisplay }];
  }
  return [{ title: '动作列表', actions: actionsToDisplay }];
});

// 初始化
onLoad(async () => {
  await loadLeftCategories();
});

// 加载左侧分类
const loadLeftCategories = async () => {
  try {
    const res = await LeftmotionApi.getAllCategories();
    if (res.code === 0 && Array.isArray(res.data)) {
      leftexercise.value = res.data;
      if (res.data.length > 0) {
        selectCategory(res.data[0]);
      }
    }
  } catch (error) {
    uni.showToast({ title: '加载分类失败', icon: 'none' });
  }
};

// 选择分类
const selectCategory = async (item) => {
  if (selectedCategoryId.value === item.id) return;
  selectedCategoryId.value = item.id;
  searchValue.value = '';
  await loadActionsByCategory(item.id);
};

// 加载动作（仅更新展示列表，不影响 globalSelectedActions）
const loadActionsByCategory = async (categoryId) => {
  loading.value = true;
  try {
    const res = await ExercisesApi.getexercises(categoryId);
    if (res.code === 0 && Array.isArray(res.data)) {
      // 为 UI 高亮：标记是否已被选中
      allActions.value = res.data.map((action) => ({
        ...action,
        selected: globalSelectedIds.value.has(action.id),
      }));
    } else {
      allActions.value = [];
    }
  } catch (error) {
    allActions.value = [];
    uni.showToast({ title: '加载动作失败', icon: 'none' });
  } finally {
    loading.value = false;
  }
};

// 切换选择
const toggleSelect = (action) => {
  const id = action.id;
  if (!id) return;

  const isSelected = globalSelectedIds.value.has(id);

  if (isSelected) {
    // 取消选择
    globalSelectedActions.value = globalSelectedActions.value.filter((a) => a.id !== id);
  } else {
    // 选择：避免重复添加
    if (!globalSelectedIds.value.has(id)) {
      globalSelectedActions.value.push({ ...action }); // 深拷贝
    }
  }

  // 同步更新 allActions 中的 selected（用于高亮）
  const found = allActions.value.find((a) => a.id === id);
  if (found) {
    found.selected = !isSelected;
  }
};

// 从底部移除
const removeSelected = (action) => {
  const id = action.id;
  if (!id) return;
  globalSelectedActions.value = globalSelectedActions.value.filter((a) => a.id !== id);

  // 同步高亮状态
  const found = allActions.value.find((a) => a.id === id);
  if (found) {
    found.selected = false;
  }
};

// 清空
const resetForm = () => {
  combinationName.value = '';
  globalSelectedActions.value = [];
};

// 组合操作
const combineActions = () => {
  if (globalSelectedActions.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 = globalSelectedActions.value.map((a) => a.id).filter(Boolean);
  if (exerciseIds.length < 2) {
    uni.showToast({ title: '动作数据异常', icon: 'none' });
    return;
  }

  try {
    const res = await SupersetsApi.createsupersets({ name, exerciseIds });
    if (res.code === 0) {
      uni.showToast({ title: '超级组创建成功！', icon: 'success' });
      resetForm();
    } else {
      uni.showToast({ title: res.msg || '创建失败', icon: 'none' });
    }
  } catch (error) {
    console.error('保存失败:', error);
    uni.showToast({ title: '创建失败，请重试', icon: 'none' });
  }
};

const handleSearchInput = () => { };
const back = () => uni.navigateBack();
</script>

<style scoped>
/* 全局重置 */
page {
  background-color: #f5f7fa;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f7fa;
  position: relative;
}

/* 搜索栏 */
.search-bar {
  padding: 24rpx 30rpx 16rpx;
  background: white;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}

.search-input {
  width: 100%;
  height: 72rpx;
  padding: 0 30rpx;
  background: #f8fafd;
  border-radius: 50rpx;
  font-size: 28rpx;
  border: 1rpx solid #e1e5e9;
  box-sizing: border-box;
}

/* 主内容区 */
.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  padding-bottom: 140rpx;
}

.left-menu {
  width: 180rpx;
  background: white;
  border-right: 1rpx solid #eef2f7;
  flex-shrink: 0;
}

.menu-item {
  padding: 32rpx 16rpx;
  text-align: center;
  font-size: 28rpx;
  color: #666;
}

.menu-item.active {
  color: #ffd100;
  background: #f0f9ff;
  font-weight: bold;
}

.right-content {
  flex: 1;
  overflow-y: auto;
  padding: 24rpx 20rpx;
}

.category-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin: 20rpx 0 24rpx;
  padding-left: 10rpx;
  border-left: 4rpx solid #ffd100;
}

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

.action-card {
  background: white;
  border-radius: 20rpx;
  padding: 28rpx 20rpx;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  position: relative;
  min-height: 220rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.action-img {
  width: 100rpx;
  height: 100rpx;
  border-radius: 16rpx;
  background: #f0f4f9;
  margin-bottom: 16rpx;
}

.action-name {
  font-size: 26rpx;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select-icon {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  font-size: 32rpx;
  color: #ccc;
}

.icon-checked {
  color: #1890ff;
  font-weight: bold;
}

/* 空状态 */
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300rpx;
  color: #999;
  font-size: 28rpx;
}

/* 已选动作 */
.selected-actions {
  position: fixed;
  bottom: 120rpx;
  left: 0;
  right: 0;
  background: white;
  padding: 20rpx 24rpx;
  border-top: 1rpx solid #eee;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
  border-radius: 24rpx 24rpx 0 0;
  z-index: 99;
}

.selected-title {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 12rpx;
}

.selected-scroll {
  display: flex;
  gap: 16rpx;
  overflow-x: auto;
  padding: 8rpx 0;
}

.selected-item {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #1890ff, #40a9ff);
  color: white;
  padding: 12rpx 20rpx;
  border-radius: 50rpx;
  font-size: 24rpx;
  white-space: nowrap;
  min-width: fit-content;
}

.selected-img {
  width: 30rpx;
  height: 30rpx;
  border-radius: 6rpx;
  margin-right: 10rpx;
  background: rgba(255, 255, 255, 0.2);
}

.selected-name {
  margin-right: 10rpx;
  max-width: 180rpx;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selected-close {
  font-size: 32rpx;
  line-height: 1;
  margin-left: 6rpx;
}

/* 底部按钮 */
.bottom-btns {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 24rpx;
  padding: 24rpx 30rpx calc(24rpx + env(safe-area-inset-bottom));
  background: white;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
  z-index: 100;
}

.btn {
  flex: 1;
  height: 90rpx;
  border-radius: 45rpx;
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
}

.cancel-btn {
  background: #f5f7fa;
  color: #666;
}

.primary-btn {
  background: linear-gradient(135deg, #ffd100, #ffcc00);
  color: white;
  box-shadow: 0 6rpx 20rpx rgba(24, 144, 255, 0.4);
}

/* ========== 原生弹窗 ========== */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  z-index: 2000;
  padding-bottom: env(safe-area-inset-bottom);
}

.popup-content {
  width: 100%;
  height: 50vh;
  background: white;
  border-radius: 24rpx 24rpx 0 0;
  padding: 0 30rpx 30rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 0 24rpx;
  position: relative;
}

.popup-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1rpx;
  background: #eee;
}

.popup-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}

.header-btn {
  font-size: 28rpx;
  color: #999;
  padding: 10rpx 16rpx;
}

.header-btn.primary {
  color: #ffd100;
  font-weight: bold;
}

.input-wrapper {
  margin: 30rpx 0;
}

.name-input {
  width: 100%;
  height: 80rpx;
  padding: 0 24rpx;
  border: 1rpx solid #e5e9f0;
  border-radius: 16rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.hint {
  font-size: 24rpx;
  color: #999;
  margin-top: 12rpx;
  display: block;
}

.preview-section {
  margin-top: auto;
}

.preview-title {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.preview-scroll {
  display: flex;
  gap: 16rpx;
  overflow-x: auto;
  padding: 8rpx 0;
}

.preview-tag {
  background: #f0f9ff;
  color: #ffd100;
  padding: 8rpx 20rpx;
  border-radius: 50rpx;
  font-size: 24rpx;
  white-space: nowrap;
  min-width: fit-content;
}
</style>