<template>
  <view class="container">
    <!-- 加载中占位 -->
    <view class="loading-wrap" v-if="!isDataReady">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 我的分类 -->
    <view class="section" v-if="isDataReady">
      <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" v-if="isDataReady">
      <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 { onShow } from '@dcloudio/uni-app';
  import ExercisesApi from '@/sheep/api/motion/exercises';
  import { useActionStore } from '@/sheep/store/action';

  const actionStore = useActionStore();

  const showCategories = computed(() => actionStore.showCategories);
  const hiddenCategories = computed(() => actionStore.hiddenCategories);
  const { hideCategory, showCategory, getloadCategories, reloadCategories } = actionStore;

  // 页面数据就绪标记（避免 allCategories 为空时渲染空白）
  const isDataReady = ref(false);

  // 隐藏分类的对象数组（含名称）
  const hiddenCategoryObjects = computed(() => {
    if (!isDataReady.value) return [];
    return actionStore.allCategories.filter(category =>
      hiddenCategories.value.includes(category.id)
    );
  });

  // Toast 提示常量
  const TOAST = {
    ADD_SUCCESS: '新增成功',
    ADD_FAIL: '新增失败',
    EDIT_SUCCESS: '修改成功',
    EDIT_FAIL: '修改失败',
    LOAD_FAIL: '加载失败',
  };

  // 自定义分类列表（编辑弹窗用）
  const customCategories = ref([]);
  const currentEditCategory = ref(null);
  const showEditPopup = ref(false);

  // 新增分类弹窗变量
  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: TOAST.ADD_SUCCESS, icon: 'success' });
      closeAddPopup();
      reloadCategories();
    } catch (err) {
      uni.showToast({ title: TOAST.ADD_FAIL, icon: 'none' });
      console.error(err);
    }
  };

  // 获取自定义分类列表
  const fetchCustomCategories = async () => {
    const res = await ExercisesApi.getCustomCategories();
    customCategories.value = res.data || [];
  };

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

  const closeEditPopup = () => {
    showEditPopup.value = false;
  };

  const openEditModal = (item) => {
    currentEditCategory.value = item;
    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: TOAST.EDIT_SUCCESS, icon: 'success' });
            await fetchCustomCategories();
            reloadCategories();
          } catch (err) {
            console.error('修改失败', err);
            uni.showToast({ title: TOAST.EDIT_FAIL, icon: 'none' });
          }
        }
      },
    });
  };

  onShow(async () => {
    await getloadCategories();
    isDataReady.value = true;
  });
</script>

<style scoped lang="scss">
  // ========== 设计变量 ==========
  $radius-sm: 10rpx;
  $radius-md: 12rpx;
  $radius-lg: 20rpx;
  $radius-round: 36rpx;
  $gap: 20rpx;
  $color-primary: #ffd700;
  $color-text: #333;
  $color-text-secondary: #666;
  $color-text-light: #999;
  $color-border: #eee;
  $color-bg: #f7f7f7;
  $color-bg-light: #f9f9f9;
  $transition-base: 0.2s ease;

  .container {
    min-height: 100vh;
    background-color: #fff;
    // 为底部固定栏留出空间
    padding-bottom: 120rpx;
    box-sizing: border-box;
  }

  // 加载中占位
  .loading-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
  }

  .loading-text {
    font-size: 28rpx;
    color: $color-text-light;
  }

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

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

  .section-title {
    font-size: 28rpx;
    color: $color-text;
    font-weight: bold;
  }

  .section-subtitle {
    font-size: 24rpx;
    color: $color-text-light;
    margin-left: 16rpx;
  }

  // 分类网格（展示 + 隐藏共用）
  .category-grid,
  .hidden-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: $gap;
  }

  .category-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx 16rpx;
    padding-right: 28rpx;
    background-color: #fff;
    border: 1rpx solid $color-border;
    border-radius: $radius-sm;
    position: relative;
    transition: all $transition-base;

    &:active {
      transform: scale(0.96);
      background-color: #fafafa;
    }
  }

  .category-text {
    font-size: 24rpx;
    color: $color-text;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .delete-icon {
    position: absolute;
    right: 4rpx;
    top: 4rpx;
    z-index: 1;
    padding: 4rpx;
    opacity: 0.7;
    transition: all $transition-base;
  }

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

  .hidden-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx 16rpx;
    background: $color-bg-light;
    border: 1rpx solid $color-border;
    border-radius: $radius-sm;
    transition: all $transition-base;

    &:active {
      transform: scale(0.96);
      background-color: #e8e8e8;
      border-color: #ddd;
    }
  }

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

  .hidden-text {
    font-size: 24rpx;
    color: $color-text-light;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  // 底部按钮栏
  .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 20rpx calc(20rpx + env(safe-area-inset-bottom));
    box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
  }

  .edit-btn {
    width: 180rpx;
    height: 72rpx;
    line-height: 72rpx;
    font-size: 26rpx;
    color: $color-text-secondary;
    background-color: #f5f5f5;
    border-radius: $radius-round;
    text-align: center;
    transition: all $transition-base;

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

  .add-btn {
    flex: 1;
    height: 72rpx;
    line-height: 72rpx;
    background: linear-gradient(135deg, $color-primary 0%, #ffcc00 100%);
    color: $color-text;
    font-size: 28rpx;
    font-weight: 500;
    border-radius: $radius-round;
    margin-left: $gap;
    border: none;
    box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3);
    text-align: center;
    transition: all $transition-base;

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

  // 编辑分类弹窗
  .popup-wrap {
    background: $color-bg;
    border-radius: $radius-lg $radius-lg 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: $color-text;
  }

  .popup-tip {
    font-size: 28rpx;
    color: $color-text-secondary;
    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: $radius-md;
    padding: 30rpx;
    margin-bottom: $gap;
    transition: all $transition-base;

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

  .item-name {
    font-size: 32rpx;
    color: $color-text;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 16rpx;
  }

  // 新增分类弹窗
  .add-popup-wrap {
    background: #fff;
    border-radius: $radius-lg $radius-lg 0 0;
    padding: 30rpx;
    padding-bottom: calc(env(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: $color-text;
  }

  .add-input-box {
    background: $color-bg;
    border-radius: $radius-md;
    padding: 24rpx 20rpx;
    margin-bottom: $gap;
  }

  .add-input {
    font-size: 32rpx;
    color: $color-text;
    height: 48rpx;
    line-height: 48rpx;
    width: 100%;
  }

  .add-tip {
    font-size: 24rpx;
    color: $color-text-light;
    margin-bottom: 40rpx;
  }

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

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

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