<!--
 * @Date: 2026-01-31
 * @Description: 产品中心 - API 接口集成版本（含搜索功能）
-->
<template>
  <view class="bg-[#F9FAFB]">
    <!-- 固定在顶部的导航和搜索 -->
    <view class="bg-[#F9FAFB] sticky top-0 z-10">
      <NavHeader title="产品中心" />

      <!-- Search Bar -->
      <view class="px-[24rpx] py-[16rpx] bg-white">
        <SearchBar
          v-model="searchValue"
          placeholder="搜索产品名称..."
          variant="rounded"
          :show-clear="true"
          @search="onSearch"
          @input="onSearchInput"
          @clear="onClear"
        />
      </view>

      <!-- Tabs Container -->
      <view class="bg-white mt-[2rpx]">
        <nut-tabs v-model="activeTabId">
          <!-- 自定义标签栏 -->
          <template #titles>
            <view class="filter-tabs-wrapper">
              <view
                v-for="item in tabsData"
                :key="item.id"
                :class="[
                  'filter-tab-item',
                  activeTabId === item.id ? 'filter-tab-active' : 'filter-tab-inactive'
                ]"
                @tap="onTabClick(item.id)"
              >
                <text class="filter-tab-text">{{ item.name }}</text>
              </view>
            </view>
          </template>
        </nut-tabs>
      </view>
    </view>

    <!-- 列表容器 - 页面级滚动 -->
    <view class="pb-[calc(160rpx+env(safe-area-inset-bottom))]">
      <!-- 加载状态 -->
      <view v-if="loading && products.length === 0" class="flex justify-center items-center py-[100rpx]">
        <text class="text-gray-400 text-[28rpx]">加载中...</text>
      </view>

      <!-- Product Grid -->
      <view v-else class="flex flex-wrap justify-between px-[40rpx]">
        <!-- Card Item -->
        <view v-for="(item, index) in products" :key="item.id"
          class="w-[48%] bg-white rounded-[24rpx] overflow-hidden mb-[24rpx] shadow-sm flex flex-col active:scale-[0.98] transition-transform duration-200"
          :style="{ animationDelay: `${index * 50}ms` }"
          @tap="handleProductClick(item)">
          <!-- Image Container -->
          <view class="relative w-full h-[200rpx] product-card-item">
            <image :src="item.cover_image" class="w-full h-full object-cover bg-gray-100" mode="aspectFill" />
            <!-- Tag -->
            <view v-if="item.recommend === 'hot'"
              class="absolute top-[12rpx] right-[12rpx] bg-red-500 text-white text-[20rpx] px-[12rpx] py-[4rpx] rounded-full">
              热卖
            </view>
          </view>

          <!-- Content -->
          <view class="p-[20rpx] flex flex-col flex-1">
            <!-- Title -->
            <view class="text-[#1F2937] text-[28rpx] font-medium leading-[1.4] line-clamp-2 mb-[16rpx]">
              {{ item.product_name }}
            </view>

            <!-- 动态标签 -->
            <view v-if="item.tags && item.tags.length > 0" class="flex flex-wrap gap-[8rpx] mb-[16rpx]">
              <view
                v-for="tag in item.tags.slice(0, 2)"
                :key="tag.id"
                class="text-[20rpx] px-[12rpx] py-[4rpx] rounded-full"
                :style="{
                  backgroundColor: tag.bg_color,
                  color: tag.text_color
                }"
              >
                {{ tag.name }}
              </view>
            </view>

            <!-- 按钮组 -->
            <view class="flex gap-[12rpx] mt-auto">
              <nut-button
                plain
                color="#2563EB"
                size="small"
                class="flex-1 !h-[56rpx] !rounded-[12rpx] !text-[22rpx] !m-0 !border-blue-600"
                @tap.stop="handleProductClick(item)"
              >
                详情
              </nut-button>
              <nut-button
                color="#2563EB"
                size="small"
                class="flex-1 !h-[56rpx] !rounded-[12rpx] !text-[22rpx] !m-0"
                @tap.stop="openPlanPopup(item)"
              >
                计划书
              </nut-button>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多状态 -->
      <view v-if="loading && products.length > 0" class="flex justify-center items-center py-[40rpx]">
        <text class="text-gray-400 text-[28rpx]">加载中...</text>
      </view>

      <!-- 没有更多数据 -->
      <view v-if="!hasMore && products.length > 0" class="flex justify-center items-center py-[40rpx]">
        <text class="text-gray-400 text-[24rpx]">没有更多了</text>
      </view>

      <!-- 空状态 -->
      <view v-if="!loading && products.length === 0">
        <nut-empty description="暂无相关产品" image="empty" />
      </view>
    </view>

    <!-- 计划书表单容器 -->
    <!-- 测试数据：后端接口和字段还没有准备好，使用 PlanFormContainer 进行的前端测试 -->
    <!-- 使用 v-if 条件渲染，避免 selectedProduct 为 null 时的 prop 类型检查错误 -->
    <view v-if="showPlanPopup && selectedProduct">
      <PlanFormContainer
        v-model:visible="showPlanPopup"
        :product="selectedProduct"
        @close="showPlanPopup = false"
        @submit="handlePlanSubmit"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import Taro, { useLoad, useReachBottom } from '@tarojs/taro'
import NavHeader from '@/components/NavHeader.vue'
import SearchBar from '@/components/SearchBar.vue'
import PlanFormContainer from '@/components/PlanFormContainer.vue'
import { useListItemClick, ListType } from '@/composables/useListItemClick'
import { listAPI } from '@/api/get_product'

const activeTabId = ref('')

// 搜索状态
const searchValue = ref('')
// 搜索防抖定时器
let searchTimer = null

// 分页状态
const page = ref(0)
const limit = ref(10)
const loading = ref(false)
const hasMore = ref(true)

// 数据状态
const categories = ref([]) // 从接口获取的分类列表
const products = ref([]) // 当前产品列表
const total = ref(0) // 产品总数

// 计划书弹窗状态
const showPlanPopup = ref(false)
const selectedProduct = ref(null)

/**
 * 标签栏数据（根据接口返回的 categories 生成）
 * @description 包含"全部"选项和接口返回的分类
 */
const tabsData = computed(() => {
  const allTab = { id: '', name: '全部' }
  const categoryTabs = categories.value.map(cat => ({
    id: String(cat.id),
    name: cat.name
  }))
  return [allTab, ...categoryTabs]
})

/**
 * 获取产品列表
 * @description 根据 activeTabId 和 searchValue 获取对应分类的产品列表
 */
const fetchProducts = async (isLoadMore = false) => {
  if (loading.value) return

  loading.value = true

  try {
    const params = {
      page: String(page.value),
      limit: String(limit.value)
    }

    // 如果不是"全部"标签，添加分类 ID 参数
    if (activeTabId.value !== '') {
      params.cid = activeTabId.value
    }

    // 添加搜索关键词参数
    if (searchValue.value) {
      params.keyword = searchValue.value
    }

    const res = await listAPI(params)

    if (res.code === 1 && res.data) {
      // 更新分类列表（首次加载时）
      if (!isLoadMore && res.data.categories) {
        categories.value = res.data.categories
      }

      // 处理产品列表
      if (isLoadMore) {
        // 加载更多：追加数据
        products.value = [...products.value, ...res.data.list]
      } else {
        // 首次加载或切换分类：替换数据
        products.value = res.data.list || []
      }

      // 更新总数和分页状态
      total.value = res.data.total || 0
      hasMore.value = products.value.length < total.value
    } else {
      Taro.showToast({
        title: res.msg || '获取产品列表失败',
        icon: 'none'
      })
    }
  } catch (err) {
    console.error('获取产品列表失败:', err)
    Taro.showToast({
      title: '网络错误，请重试',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

/**
 * Tab 点击处理
 * @description 切换分类，重置分页并重新加载数据
 */
const onTabClick = (id) => {
  if (activeTabId.value === id) return

  activeTabId.value = id

  // 重置分页状态
  page.value = 0
  products.value = []
  hasMore.value = true

  // 重新加载数据（保持搜索状态）
  fetchProducts(false)
}

/**
 * 搜索输入处理（带防抖）
 * @description 用户输入时实时搜索，使用防抖优化性能
 * @param {string} value - 搜索关键词
 */
const onSearchInput = (value) => {
  console.log('搜索输入:', value)

  // 清除之前的定时器
  if (searchTimer) {
    clearTimeout(searchTimer)
  }

  // 设置新的定时器（500ms 后执行搜索）
  searchTimer = setTimeout(() => {
    // 重置分页状态
    page.value = 0
    products.value = []
    hasMore.value = true

    // 重新加载数据
    fetchProducts(false)
  }, 500)
}

/**
 * 搜索处理（回车键）
 * @description 用户按下回车或点击搜索按钮时触发
 * @param {string} value - 搜索关键词
 */
const onSearch = (value) => {
  console.log('搜索产品:', value)

  // 清除防抖定时器
  if (searchTimer) {
    clearTimeout(searchTimer)
    searchTimer = null
  }

  // 重置分页状态
  page.value = 0
  products.value = []
  hasMore.value = true

  // 重新加载数据
  fetchProducts(false)
}

/**
 * 清空搜索
 * @description 用户点击清除按钮时触发
 */
const onClear = () => {
  console.log('清空搜索')

  // 清除防抖定时器
  if (searchTimer) {
    clearTimeout(searchTimer)
    searchTimer = null
  }

  // 重置分页状态
  page.value = 0
  products.value = []
  hasMore.value = true

  // 重新加载数据
  fetchProducts(false)
}

/**
 * 使用产品列表点击处理器
 * @description 配置为产品类型列表，点击时跳转到产品详情页
 */
const { handleClick: handleProductClick } = useListItemClick({
  listType: ListType.PRODUCT,
  onAfterClick: (item) => {
    console.log('用户查看了产品:', item.product_name)
  }
})

/**
 * 打开计划书弹窗
 * @description 根据产品对象打开计划书表单
 * @param {Object} product - 产品对象
 */
const openPlanPopup = (product) => {
  selectedProduct.value = product
  showPlanPopup.value = true
}

/**
 * 处理计划书提交
 * @description 测试环境：前端不调用后端API，直接跳转到结果页
 *              生产环境：需要调用 submitPlanAPI 提交表单数据
 * @param {Object} formData - 表单数据
 */
const handlePlanSubmit = (formData) => {
  console.log('计划书提交:', {
    product_id: selectedProduct.value.id,
    product_name: selectedProduct.value.product_name,
    form_sn: selectedProduct.value.form_sn,
    form_data: formData
  })

  // 关闭弹窗
  showPlanPopup.value = false

  // TODO: 后端接口还没有准备好，暂时不调用API
  // 测试完成后需要对接 submitPlanAPI
  // const res = await submitPlanAPI({
  //   product_id: selectedProduct.value.id,
  //   template: selectedProduct.value.form_sn,
  //   form_data: formData
  // })

  // 模拟提交成功，跳转到结果页面
  Taro.navigateTo({
    url: '/pages/plan-submit-result/index?success=true'
  })
}

/**
 * 页面加载时获取数据
 */
useLoad(() => {
  fetchProducts(false)
})

/**
 * 触底加载更多
 * @description 使用 Taro 的 useReachBottom hook 监听页面滚动到底部
 */
useReachBottom(() => {
  console.log('滚动到底部，加载更多')

  if (!hasMore.value || loading.value) {
    console.log('没有更多数据或正在加载中，跳过')
    return
  }

  page.value += 1
  fetchProducts(true)
})
</script>

<style lang="less">
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-card-item {
  animation: slideIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

// FilterTabs 风格的标签栏
.filter-tabs-wrapper {
  display: flex;
  overflow-x: auto;
  padding: 24rpx 40rpx;
  gap: 24rpx;
  transition: all 0.3s ease;
  background-color: #F9FAFB;
  width: 100%;

  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  -ms-overflow-style: none;
  scrollbar-width: none;
}

.filter-tab-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32rpx;
  border-radius: 9999rpx;
  white-space: nowrap;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.filter-tab-active {
  background-color: #2563EB; // 蓝色背景
  color: #fff;
}

.filter-tab-inactive {
  background-color: #F3F4F6; // 灰色背景
  color: #6B7280;
}

.filter-tab-text {
  font-size: 28rpx;
  font-weight: 500;
}

// 覆盖 NutUI Tabs 默认样式，隐藏原有的头部和内容（因为我们使用自定义头部和外部列表）
:deep(.nut-tabs__titles) {
  display: none;
}

:deep(.nut-tabs__content) {
  display: none;
}

/* 多行文本省略 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
}
</style>