<!--
 * @Date: 2026-02-08
 * @Description: 产品中心 - 使用 LoadMoreList 组件重构版本
-->
<template>
  <view class="bg-[#F9FAFB]">
    <!-- 计划书弹窗 -->
    <view v-if="showPlanPopup && selectedProduct">
      <PlanFormContainer
        v-model:visible="showPlanPopup"
        :product="selectedProduct"
        @close="showPlanPopup = false"
        @submit="handlePlanSubmit"
      />
    </view>

    <LoadMoreList
      :list="currentList"
      :page="currentPage"
      :page-size="pageSize"
      :has-more="hasMore"
      :loading="loading"
      :loading-more="loadingMore"
      key-field="id"
      @load-more="handleLoadMore"
    >
      <!-- 头部：导航 + 搜索 + Tabs -->
      <template #header>
        <view class="sticky top-0 z-10 bg-[#F9FAFB]">
          <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>
      </template>

      <!-- 列表项：产品卡片 -->
      <template #item="{ item }">
        <view
          class="bg-white rounded-[24rpx] overflow-hidden shadow-sm active:scale-[0.98] transition-transform duration-200 product-card"
          @tap="handleProductClick(item)"
        >
          <!-- Product Content (Horizontal Layout) -->
          <view class="flex gap-[24rpx]">
            <!-- Image Container -->
            <view class="relative w-[220rpx] h-[220rpx] flex-shrink-0">
              <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="flex-1 flex flex-col py-[20rpx] pr-[20rpx]">
              <!-- Title -->
              <view class="text-[#1F2937] text-[32rpx] font-medium leading-[1.4] line-clamp-2 mb-[12rpx]">
                {{ item.product_name }}
              </view>

              <!-- 动态标签 -->
              <view v-if="item.tags && item.tags.length > 0" class="flex flex-wrap gap-[8rpx] mt-[8rpx] mb-[8rpx]">
                <view
                  v-for="tag in item.tags"
                  :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-[16rpx] ml-auto items-center mt-auto" @tap.stop>
                <!-- 详情按钮 -->
                <view
                  class="text-[24rpx] text-[#2563EB] bg-blue-50 px-[24rpx] py-[8rpx] rounded-full active:bg-blue-100 transition-colors duration-200"
                  @tap.stop="handleProductClick(item)"
                >
                  详情
                </view>

                <!-- 计划书按钮 -->
                <view
                  class="text-[24rpx] text-white bg-blue-500 px-[24rpx] py-[8rpx] rounded-full active:bg-blue-600 transition-colors duration-200"
                  @tap.stop="openPlanPopup(item)"
                >
                  计划书
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>

      <!-- 空状态 -->
      <template #empty>
        <nut-empty description="暂无相关产品" image="empty" />
      </template>
    </LoadMoreList>
  </view>
</template>

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

// ⚠️ MOCK 数据开关 - 开发环境使用 mock 数据，生产环境使用真实 API
const USE_MOCK_DATA = process.env.NODE_ENV === 'development'

const go = useGo()

/**
 * 当前列表数据
 * @type {Ref<Array<any>>}
 */
const currentList = ref([])

/**
 * 当前页码（从0开始）
 * @type {Ref<number>}
 */
const currentPage = ref(0)

/**
 * 每页数量
 * @type {number}
 */
const pageSize = 10

/**
 * 是否还有更多数据
 * @type {Ref<boolean>}
 */
const hasMore = ref(true)

/**
 * 首次加载状态
 * @type {Ref<boolean>}
 */
const loading = ref(false)

/**
 * 加载更多状态
 * @type {Ref<boolean>}
 */
const loadingMore = ref(false)

// 搜索和 Tabs 相关状态
const activeTabId = ref('')
const searchValue = ref('')
const categories = ref([]) // 从接口获取的分类列表
let searchTimer = null // 搜索防抖定时器

// 计划书弹窗状态
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]
})

/**
 * 获取产品列表
 *
 * @param {Object} params - 请求参数
 * @param {number} params.page - 页码（从0开始）
 * @param {number} params.limit - 每页数量
 * @param {boolean} isLoadMore - 是否为加载更多
 * @returns {Promise<void>}
 */
const fetchProducts = async (params = {}, isLoadMore = false) => {
  try {
    // 如果是加载更多，使用 loadingMore 状态，否则使用 loading 状态
    if (isLoadMore) {
      loadingMore.value = true
    } else {
      loading.value = true
    }

    console.log('[Product Center] 请求参数:', params)
    console.log('[Product Center] 使用 Mock 数据:', USE_MOCK_DATA)

    // 根据开关选择使用真实 API 或 Mock 数据
    const res = USE_MOCK_DATA
      ? await mockProductListAPI(params)
      : await listAPI(params)

    if (res.code === 1 && res.data) {
      console.log('[Product Center] 数据:', res.data)

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

      // 处理产品列表
      if (res.data.list?.length) {
        const listData = res.data.list

        if (isLoadMore) {
          // 加载更多：追加数据
          currentList.value = [...currentList.value, ...listData]
        } else {
          // 首次加载或切换分类：替换数据
          currentList.value = listData
        }

        // 判断是否还有更多数据
        // 如果返回的数据量少于请求的量，说明没有更多了
        hasMore.value = listData.length >= params.limit
      } else {
        // 没有数据了
        if (isLoadMore) {
          hasMore.value = false
        } else {
          currentList.value = []
        }
      }
    } else {
      console.error('[Product Center] API 返回错误:', res.msg)
    }
  } catch (error) {
    console.error('[Product Center] 获取产品列表失败:', error)
  } finally {
    if (isLoadMore) {
      loadingMore.value = false
    } else {
      loading.value = false
    }
  }
}

/**
 * 页面加载时获取数据
 */
useLoad(async (options) => {
  console.log('[Product Center] 页面参数:', options)

  // 重置分页状态
  currentPage.value = 0
  hasMore.value = true

  // 获取产品列表
  await fetchProducts({ page: 0, limit: pageSize })
})

/**
 * 处理加载更多事件
 *
 * @param {number} page - 下一页页码
 * @returns {Promise<void>}
 */
const handleLoadMore = async (page) => {
  console.log('[Product Center] 加载更多，页码:', page)

  // 更新页码
  currentPage.value = page

  // 构建请求参数
  const params = {
    page: page,
    limit: pageSize
  }

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

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

  // 加载下一页数据
  await fetchProducts(params, true)
}

/**
 * Tab 点击处理
 *
 * @param {string} id - 分类 ID
 */
const onTabClick = (id) => {
  if (activeTabId.value === id) return

  console.log('[Product Center] 切换分类:', id)

  activeTabId.value = id

  // 重置分页状态
  currentPage.value = 0
  hasMore.value = true

  // 构建请求参数
  const params = {
    page: 0,
    limit: pageSize
  }

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

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

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

/**
 * 搜索输入处理（带防抖）
 *
 * @param {string} value - 搜索关键词
 */
const onSearchInput = (value) => {
  console.log('[Product Center] 搜索输入:', value)

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

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

    // 构建请求参数
    const params = {
      page: 0,
      limit: pageSize
    }

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

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

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

/**
 * 搜索处理（回车键）
 *
 * @param {string} value - 搜索关键词
 */
const onSearch = (value) => {
  console.log('[Product Center] 搜索产品:', value)

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

  // 重置分页状态
  currentPage.value = 0
  hasMore.value = true

  // 构建请求参数
  const params = {
    page: 0,
    limit: pageSize
  }

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

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

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

/**
 * 清空搜索
 */
const onClear = () => {
  console.log('[Product Center] 清空搜索')

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

  // 重置分页状态
  currentPage.value = 0
  hasMore.value = true

  // 构建请求参数
  const params = {
    page: 0,
    limit: pageSize
  }

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

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

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

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

/**
 * 处理计划书提交
 *
 * @param {Object} formData - 表单数据
 */
const handlePlanSubmit = (formData) => {
  console.log('[Product Center] 计划书提交:', {
    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

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

<style lang="less">
// 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>