<template>
  <view class="container">
    <!-- 我的分类 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">我的分类</text>
        <text class="section-subtitle">点击隐藏分类</text>
      </view>
      <view class="category-grid">
        <view
          v-for="item in showCategories"
          :key="item.id"
          class="category-item"
          @click="hideCategory(item.id)"
        >
          <text class="category-text">{{ item.name }}</text>
          <up-icon name="close-circle" size="14" color="#cccccc" class="delete-icon"></up-icon>
        </view>
      </view>
    </view>

    <!-- 已隐藏分类 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">已隐藏分类</text>
        <text class="section-subtitle">点击恢复分类</text>
      </view>
      <view class="hidden-grid" v-if="hiddenCategoryObjects.length > 0">
        <view
          v-for="item in hiddenCategoryObjects"
          :key="item.id"
          class="hidden-item"
          @click="showCategory(item.id)"
        >
          <text class="hidden-text">{{ item.name }}</text>
        </view>
      </view>
      <view class="hidden-empty" v-else>
        <text class="hidden-text">暂无</text>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-btns">
      <view class="edit-btn" @click="openEditPopup">编辑名称</view>
      <!-- 优化：点击打开自定义新增弹窗 -->
      <view class="add-btn" @click="openAddPopup">+ 新增动作分类</view>
    </view>

    <!-- 自定义分类编辑底部弹窗 -->
    <up-popup
      :show="showEditPopup"
      mode="bottom"
      :mask-click="false"
      :safe-area-inset-bottom="true"
    >
      <view class="popup-wrap">
        <!-- 弹窗头部 -->
        <view class="popup-header">
          <u-icon name="close" size="24" color="#333" @click="closeEditPopup"></u-icon>
          <text class="popup-title">自定义分类名称修改</text>
          <view></view>
        </view>
        <view class="popup-tip">仅可修改自定义添加的分类名称</view>
        <!-- 分类列表区 -->
        <scroll-view class="popup-list" scroll-y>
          <view
            class="popup-item"
            v-for="item in customCategories"
            :key="item.id"
            @click="openEditModal(item)"
          >
            <text class="item-name">{{ item.name }}</text>
            <u-icon name="edit-pen" size="20" color="#333"></u-icon>
          </view>
        </scroll-view>
      </view>
    </up-popup>

    <!-- ===================== 新增：自定义新增分类弹窗 ===================== -->
    <up-popup :show="showAddPopup" mode="bottom" :mask-click="true" :safe-area-inset-bottom="true">
      <view class="add-popup-wrap">
        <!-- 头部 -->
        <view class="add-popup-header">
          <text class="add-popup-title">新增动作分类</text>
          <u-icon name="close" size="24" color="#333" @click="closeAddPopup"></u-icon>
        </view>

        <!-- 输入框 -->
        <view class="add-input-box">
          <input
            v-model="addCategoryName"
            class="add-input"
            placeholder="请输入分类名称"
            placeholder-style="color:#999"
            maxlength="10"
          />
        </view>

        <!-- 提示文字 -->
        <view class="add-tip">名称长度 1-10 个字符，支持中文/字母/数字</view>

        <!-- 确认按钮 -->
        <view class="add-btn-box">
          <button
            type="primary"
            class="add-confirm-btn"
            :disabled="!addCategoryName.trim()"
            @click="doAddCategory"
          >
            确认添加
          </button>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import ExercisesApi from '@/sheep/api/motion/exercises';
  import { useActionStore } from '@/sheep/store/action';

  // 引入 Store
  const actionStore = useActionStore();

  // 从 Store 获取状态和方法
  const showCategories = computed(() => actionStore.showCategories);
  const hiddenCategories = computed(() => actionStore.hiddenCategories);
  
  const { hideCategory, showCategory, getloadCategories } = actionStore;

  // 计算属性：获取隐藏分类的对象数组
  const hiddenCategoryObjects = computed(() => {
    return actionStore.allCategories.filter(category => 
      hiddenCategories.value.includes(category.id)
    );
  });

  // 自定义分类列表（弹窗用）
  const customCategories = ref([]);
  // 当前要编辑的分类
  const currentEditCategory = ref(null);
  // 控制自定义分类编辑弹窗
  const showEditPopup = ref(false);
  // 编辑弹窗输入值
  const editInputValue = ref('');

  // ===================== 新增：自定义新增弹窗变量 =====================
  const showAddPopup = ref(false); // 控制新增弹窗显示
  const addCategoryName = ref(''); // 新增分类名称

  // 打开新增弹窗
  const openAddPopup = () => {
    addCategoryName.value = ''; // 清空输入框
    showAddPopup.value = true;
  };
  // 关闭新增弹窗
  const closeAddPopup = () => {
    showAddPopup.value = false;
  };

  // ===================== 优化：执行新增分类（接口请求） =====================
  const doAddCategory = async () => {
    const name = addCategoryName.value.trim();
    if (!name) return;

    try {
      await ExercisesApi.createCustomCategory(name);
      uni.showToast({ title: '新增成功', icon: 'success' });
      closeAddPopup();
      getloadCategories();
    } catch (err) {
      uni.showToast({ title: '新增失败', icon: 'none' });
      console.error(err);
    }
  };

  // 打开自定义分类编辑弹窗
  const openEditPopup = async () => {
    try {
      const res = await ExercisesApi.getCustomCategories();
      customCategories.value = res.data || [];
      showEditPopup.value = true;
    } catch (err) {
      console.error('加载自定义分类失败', err);
      uni.showToast({ title: '加载失败', icon: 'none' });
    }
  };

  // 关闭弹窗
  const closeEditPopup = () => {
    showEditPopup.value = false;
  };

  // 打开编辑弹窗
  const openEditModal = (item) => {
    currentEditCategory.value = item;
    editInputValue.value = item.name;
    uni.showModal({
      title: '动作分类',
      editable: true,
      placeholderText: '请输入新名称',
      initialContent: item.name,
      success: async (res) => {
        if (res.confirm && res.content.trim()) {
          try {
            await ExercisesApi.updateCustomCategory(item.id, res.content.trim());
            uni.showToast({ title: '修改成功', icon: 'success' });
            openEditPopup();
            getloadCategories();
          } catch (err) {
            console.error('修改失败', err);
            uni.showToast({ title: '修改失败', icon: 'none' });
          }
        }
      },
    });
  };

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

<style scoped lang="scss">
  .container {
    min-height: 100vh;
    background-color: #fff;
  }

  .section {
    padding: 30rpx;
    box-sizing: border-box;
  }

  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;
  }

  .section-title {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
  }

  .section-subtitle {
    font-size: 24rpx;
    color: #999;
    margin-left: 16rpx;
  }

  .category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
  }

  .category-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx 16rpx;
    background-color: #fff;
    border: 1rpx solid #eee;
    border-radius: 10rpx;
    position: relative;
    transition: all 0.2s ease;
    padding-right: 28rpx;
  }

  .category-item:active {
    transform: scale(0.96);
    background-color: #fafafa;
  }

  .category-text {
    font-size: 24rpx;
    color: #333;
    text-align: center;
  }

  .delete-icon {
    position: absolute;
    right: 4rpx;
    top: 4rpx;
    transform: none;
    z-index: 99;
    padding: 4rpx;
    opacity: 0.7;
    transition: all 0.2s ease;
  }

  .category-item:active .delete-icon {
    opacity: 1;
    color: #ff4d4f;
  }

  .hidden-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
  }

  .hidden-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx 16rpx;
    background: #f9f9f9;
    border: 1rpx solid #eee;
    border-radius: 10rpx;
    transition: all 0.2s ease;
  }

  .hidden-item:active {
    transform: scale(0.96);
    background-color: #f2f2f2;
  }

  .hidden-empty {
    display: flex;
    justify-content: center;
    padding: 40rpx 0;
  }

  .hidden-text {
    font-size: 24rpx;
    color: #999;
  }

  /* 底部按钮 */
  .bottom-btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 10;
    padding: 20rpx 30rpx;
    box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
    padding: 20rpx;
    box-sizing: border-box;
  }

  .edit-btn {
    width: 180rpx;
    height: 72rpx;
    line-height: 72rpx;
    font-size: 26rpx;
    color: #666;
    background-color: #f5f5f5;
    border-radius: 36rpx;
    text-align: center;
    transition: all 0.2s;

    &:active {
      background-color: #e0e0e0;
      transform: scale(0.98);
    }
  }

  .add-btn {
    flex: 1;
    height: 72rpx;
    line-height: 72rpx;
    background: linear-gradient(135deg, #ffd700 0%, #ffcc00 100%) !important;
    color: #333 !important;
    font-size: 28rpx;
    font-weight: 500;
    border-radius: 36rpx;
    margin-left: 20rpx;
    border: none;
    box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3);
    text-align: center;
    transition: all 0.2s;

    &:active {
      transform: scale(0.98);
      box-shadow: 0 2rpx 8rpx rgba(255, 215, 0, 0.2);
    }
  }

  /* 编辑弹窗 */
  .popup-wrap {
    background: #f7f7f7;
    border-radius: 20rpx 20rpx 0 0;
    padding: 0 30rpx;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
  }

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

  .popup-title {
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
  }

  .popup-tip {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 30rpx;
  }

  .popup-list {
    flex: 1;
    padding-bottom: 40rpx;
  }

  .popup-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
  }

  .item-name {
    font-size: 32rpx;
    color: #333;
  }

  /* ===================== 新增：自定义新增弹窗样式 ===================== */
  .add-popup-wrap {
    background: #fff;
    border-radius: 20rpx 20rpx 0 0;
    padding: 30rpx;
    padding-bottom: calc(var(--safe-area-inset-bottom) + 30rpx);
  }

  .add-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
  }

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

  .add-input-box {
    background: #f7f7f7;
    border-radius: 12rpx;
    padding: 24rpx 20rpx;
    margin-bottom: 20rpx;
  }

  .add-input {
    font-size: 32rpx;
    color: #333;
    height: 48rpx;
    line-height: 48rpx;
  }

  .add-tip {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 40rpx;
  }

  .add-btn-box {
    width: 100%;
  }

  .add-confirm-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    border-radius: 12rpx;
    background-color: #ffd700;
    color: #000;
    border: none;

    &[disabled] {
      background-color: #e0e0e0;
      color: #999;
    }
  }
</style>