<!--
 * @Date: 2026-02-08
 * @Description: 资料/文档列表页 - 使用 LoadMoreList 组件重构版本
-->
<template>
  <view class="h-screen overflow-hidden bg-[#F9FAFB]">
    <LoadMoreList
      :list="currentList"
      :page="currentPage"
      :page-size="pageSize"
      :has-more="hasMore"
      :loading="loading"
      :loading-more="loadingMore"
      key-field="meta_id"
      :has-footer="false"
      @load-more="handleLoadMore"
    >
      <!-- 头部：导航 + 搜索 + Tabs -->
      <template #header>
        <view class="sticky top-0 z-10 bg-[#F9FAFB]">
          <NavHeader :title="pageTitle" />

          <view class="px-[32rpx] mt-[32rpx] mb-[24rpx]">
            <SearchBar
              v-model="searchValue"
              placeholder="搜索资料..."
              @search="onSearch"
              @clear="onClear"
              variant="rounded"
              :show-border="true"
              :show-clear="true"
            />
          </view>

          <!-- 动态显示 Tabs（仅在有分类时显示） -->
          <nut-tabs v-if="hasCategories" 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>
      </template>

      <!-- 列表项：资料卡片 -->
      <template #item="{ item }">
        <view
          class="material-item bg-white rounded-[24rpx] p-[24rpx] shadow-sm transition-all duration-200 border border-gray-50 flex flex-row"
        >
          <view
            class="w-[88rpx] h-[88rpx] mr-[24rpx] flex-shrink-0 flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100 rounded-[20rpx] shadow-inner self-start">
            <image
              :src="getDocumentIcon(item.extension ? `file.${item.extension}` : item.fileName)"
              class="w-[48rpx] h-[48rpx]"
              mode="aspectFit"
            />
          </view>

          <view class="flex-1 min-w-0">
            <h3 class="text-[#1F2937] text-[30rpx] font-bold leading-[1.4] line-clamp-2 mb-[8rpx]">
              {{ item.title }}
            </h3>
            <p class="text-[#6B7280] text-[24rpx] leading-[1.4] line-clamp-1 mb-[16rpx]">
              {{ item.desc }}
            </p>

            <view class="flex items-center gap-[12rpx] mb-[16rpx]">
              <view
                class="inline-flex items-center justify-center px-[12rpx] py-[4rpx] bg-gray-100 text-gray-500 text-[20rpx] font-medium rounded-[8rpx]">
                {{ getDocumentLabel(item.extension ? `file.${item.extension}` : item.fileName) }}
              </view>
              <view class="text-[#9CA3AF] text-[22rpx]">
                {{ item.size }}
              </view>
            </view>

            <view class="h-[1rpx] bg-gray-100 my-[20rpx]"></view>

            <ListItemActions
              :viewable="true"
              :collectable="true"
              :collected="item.collected"
              :item-id="String(item.meta_id || item.id)"
              @view="onView(item)"
              @collect="toggleCollect(item)"
              @delete="onDelete(item)"
            />
          </view>
        </view>
      </template>

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

<script setup>
import { ref, computed, watch } from 'vue'
import { useLoad } from '@tarojs/taro'
import NavHeader from '@/components/navigation/NavHeader.vue'
import SearchBar from '@/components/forms/SearchBar.vue'
import ListItemActions from '@/components/list/ListItemActions/index.vue'
import LoadMoreList from '@/components/list/LoadMoreList'
import { useListItemClick, ListType } from '@/composables/useListItemClick'
import { getDocumentIcon, getDocumentLabel } from '@/utils/documentIcons'
import { debounce } from '@/utils/debounce'
import { fileListAPI } from '@/api/file'
import { mockFileListAPI } from '@/utils/mockData'
import { useCollectOperation } from '@/composables/useCollectOperation'
import Taro from '@tarojs/taro'

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

const searchValue = ref('')
const activeTabId = ref('all') // 默认选中"全部"

/**
 * 防抖搜索函数
 * @description 使用防抖优化搜索性能，避免频繁请求接口
 */
const debouncedSearch = debounce(async () => {
  console.log('[Material List] 防抖搜索触发')
  await onSearch()
}, 500)

/**
 * 加载状态
 */
const loading = ref(false)

/**
 * 加载更多状态
 * @description 区分首次加载和加载更多
 */
const loadingMore = ref(false)

/**
 * 每页数量
 */
const pageSize = 10

/**
 * 当前页码（从0开始）
 */
const currentPage = ref(0)

/**
 * 是否有更多数据
 */
const hasMore = ref(true)

/**
 * 各分类的分页状态缓存
 * @description Map<categoryId, { currentPage, hasMore }>
 */
const categoryPageCache = ref(new Map())

/**
 * API 返回的原始数据
 */
const data = ref(null)

/**
 * 初始分类ID（从页面参数获取）
 */
const initialCategoryId = ref(null)

/**
 * 是否有分类标签
 * @description 根据后端返回的 children 判断
 */
const hasCategories = computed(() => {
  return data.value?.children?.length > 0
})

/**
 * 页面标题
 */
const pageTitle = ref('资料列表')

/**
 * 资料数据源（从 API 获取）
 */
const allList = ref([])

/**
 * 各个分类的缓存列表数据
 * @description key: 分类ID，value: 该分类的列表数据
 */
const categoryListCache = ref(new Map()) // 使用 Map 缓存各分类的列表数据

/**
 * 当前显示的列表数据
 * @description 根据当前选中的 tab 和搜索关键词动态计算
 */
const currentList = ref([])

/**
 * 资料分类数据
 * @description 根据 API 返回的 children 构建 tabs，始终包含"全部"选项
 */
const tabsData = computed(() => {
  // 始终包含"全部" tab
  const tabs = [
    { id: 'all', name: '全部' }
  ]

  // 如果有子分类，添加到 tabs
  const children = data.value?.children || []
  if (children.length > 0) {
    children.forEach(child => {
      tabs.push({
        id: String(child.id),
        name: child.category_name
      })
    })
  }

  return tabs
})

/**
 * 转换文档数据格式
 * @description 将 API 返回的文档数据转换为组件需要的格式
 * @param {Object} doc - API 返回的文档对象
 * @returns {Object} 转换后的文档对象
 */
const transformDocItem = (doc) => {
  // 处理文件名为空的情况
  const fileName = doc.name || '未命名文件'
  // 如果没有扩展名，从文件名中提取（如果有）
  const extension = doc.extension || fileName.split('.').pop()?.toLowerCase() || ''

  return {
    id: doc.id || doc.meta_id,  // 兼容 id 和 meta_id
    meta_id: doc.meta_id || doc.id,  // 保存 meta_id 用于收藏 API
    title: fileName,
    desc: doc.post_date || '',
    size: doc.size || '',
    fileName: fileName,
    downloadUrl: doc.value,
    extension: extension,
    collected: doc.is_favorite === '1' || doc.is_favorite === 1  // 从 API 返回的收藏状态
  }
}

/**
 * 获取文档分类列表
 *
 * @param {Object} params - 请求参数
 * @param {string} params.cid - 分类ID（可选）
 * @param {string} params.child_id - 子分类ID（可选）
 * @param {string} params.keyword - 搜索关键词（可选）
 * @param {number} params.page - 页码（从0开始）
 * @param {number} params.limit - 每页数量
 * @param {boolean} isLoadMore - 是否为加载更多
 * @returns {Promise<void>}
 */
const fetchMaterialList = async (params = {}, isLoadMore = false) => {
  try {
    // 如果是加载更多，使用 loadingMore 状态，否则使用 loading 状态
    if (isLoadMore) {
      loadingMore.value = true
    } else {
      loading.value = true
    }

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

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

    if (res.code === 1 && res.data) {
      // 如果是初始请求（没有 child_id），保存完整的分类信息
      if (!params.child_id && !params.keyword) {
        data.value = res.data

        // 处理并缓存"全部"列表
        if (res.data.list?.length) {
          const allListData = res.data.list.map(transformDocItem)

          if (isLoadMore) {
            // 加载更多：追加数据
            allList.value = [...allList.value, ...allListData]
            categoryListCache.value.set('all', allList.value)
            // ✅ 同步更新 currentList（如果当前显示的是"全部"）
            if (activeTabId.value === 'all') {
              currentList.value = allList.value
            }
          } else {
            // 首次加载：替换数据
            allList.value = allListData
            categoryListCache.value.set('all', allListData)
            // ✅ 同步更新 currentList（如果当前显示的是"全部"）
            if (activeTabId.value === 'all') {
              currentList.value = allListData
            }
          }

          // 判断是否还有更多数据
          hasMore.value = allListData.length >= params.limit
        } else {
          if (isLoadMore) {
            hasMore.value = false
          } else {
            allList.value = []
          }
        }
      } else {
        // 是子分类请求或搜索请求
        const cacheKey = params.child_id || params.keyword || 'search'

        if (res.data.list?.length) {
          const listData = res.data.list.map(transformDocItem)

          if (isLoadMore) {
            // 加载更多：追加数据
            const existingData = categoryListCache.value.get(cacheKey) || []
            const newData = [...existingData, ...listData]
            categoryListCache.value.set(cacheKey, newData)
            // ✅ 同步更新 currentList（如果当前显示的是该缓存）
            const currentCacheKey = params.child_id || params.keyword || 'all'
            if (activeTabId.value === currentCacheKey) {
              currentList.value = newData
            }
          } else {
            // 首次加载：替换数据
            categoryListCache.value.set(cacheKey, listData)
            currentList.value = listData
          }

          // 判断是否还有更多数据
          hasMore.value = listData.length >= params.limit
        } else {
          if (isLoadMore) {
            hasMore.value = false
          } else {
            currentList.value = []
          }
        }
      }
    } else {
      Taro.showToast({
        title: res.msg || '获取资料列表失败',
        icon: 'none',
        duration: 2000
      })
    }
  } catch (error) {
    console.error('[Material List] 获取资料列表失败:', error)
    Taro.showToast({
      title: '加载失败',
      icon: 'error',
      duration: 2000
    })
  } finally {
    if (isLoadMore) {
      loadingMore.value = false
    } else {
      loading.value = false
    }
  }
}

/**
 * 页面加载时接收参数
 */
useLoad(async (options) => {
  console.log('[Material List] 页面参数:', options)

  // 保存初始分类ID
  if (options.id) {
    initialCategoryId.value = options.id
  }

  // 设置页面标题
  if (options.title) {
    pageTitle.value = options.title
  }

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

  // 获取资料列表（初始请求）
  await fetchMaterialList({
    cid: options.id,
    page: 0,
    limit: pageSize
  })

  // 初始化当前列表为"全部"列表（等待请求完成后）
  currentList.value = allList.value
})

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

  // 更新页码
  currentPage.value = page

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

  // 判断当前状态：搜索、子分类、或全部
  const isSearching = searchValue.value.trim() !== ''

  if (isSearching) {
    // 搜索模式
    params.keyword = searchValue.value.trim()
    if (activeTabId.value !== 'all') {
      params.child_id = activeTabId.value
    }
  } else {
    // 非搜索模式：如果当前选中的是子分类，添加 child_id 参数
    if (activeTabId.value !== 'all') {
      params.child_id = activeTabId.value
    }
  }

  // 加载下一页数据
  await fetchMaterialList(params, true)  // true 表示加载更多

  // 保存更新后的分页状态
  let cacheKey
  if (isSearching) {
    cacheKey = params.keyword
  } else {
    cacheKey = activeTabId.value !== 'all' ? activeTabId.value : 'all'
  }
  categoryPageCache.value.set(cacheKey, {
    currentPage: currentPage.value,
    hasMore: hasMore.value
  })
}

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

  console.log('[Material List] 切换分类:', id)

  activeTabId.value = id

  // 恢复或初始化该分类的分页状态
  const pageState = categoryPageCache.value.get(id)
  if (pageState) {
    currentPage.value = pageState.currentPage
    hasMore.value = pageState.hasMore
  } else {
    currentPage.value = 0
    hasMore.value = true
  }

  // 判断是否是"全部" tab
  if (id === 'all') {
    // 显示"全部"列表（从缓存或 allList）
    const cachedList = categoryListCache.value.get('all')
    currentList.value = cachedList || allList.value || []
  } else {
    // 检查缓存中是否有该分类的数据
    if (categoryListCache.value.has(id)) {
      // 从缓存中获取
      currentList.value = categoryListCache.value.get(id)
    } else {
      // 调用接口获取该分类的列表（第一页）
      await fetchMaterialList({
        cid: initialCategoryId.value,
        child_id: id,
        page: 0,
        limit: pageSize
      })

      // 保存分页状态
      categoryPageCache.value.set(id, {
        currentPage: 0,
        hasMore: hasMore.value
      })
    }
  }
}

/**
 * 搜索处理函数
 * @description 根据 child_id 和 keyword 调用接口查询列表
 */
const onSearch = async () => {
  console.log('[Material List] 搜索产品:', searchValue.value)
  console.log('[Material List] 当前分类:', activeTabId.value)

  // 如果没有搜索关键词，清空搜索并恢复当前分类的列表
  if (!searchValue.value.trim()) {
    // 恢复当前分类的列表
    if (activeTabId.value === 'all') {
      const cachedList = categoryListCache.value.get('all')
      currentList.value = cachedList || allList.value || []
    } else {
      const cachedList = categoryListCache.value.get(activeTabId.value)
      if (cachedList) {
        currentList.value = cachedList
      } else {
        // 如果缓存中没有，调用接口获取
        await fetchMaterialList({
          cid: initialCategoryId.value,
          child_id: activeTabId.value,
          page: 0,
          limit: pageSize
        })
      }
    }

    // 恢复分页状态
    const pageState = categoryPageCache.value.get(activeTabId.value)
    if (pageState) {
      currentPage.value = pageState.currentPage
      hasMore.value = pageState.hasMore
    }
    return
  }

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

  // 如果当前选中的是子分类，添加 child_id 参数
  if (activeTabId.value !== 'all') {
    params.child_id = activeTabId.value
  }

  // 添加搜索关键词
  params.keyword = searchValue.value.trim()

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

  // 调用接口搜索
  try {
    loading.value = true
    console.log('[Material List] 搜索使用 Mock 数据:', USE_MOCK_DATA)

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

    if (res.code === 1 && res.data) {
      if (res.data.list?.length) {
        const listData = res.data.list.map(transformDocItem)
        currentList.value = listData

        // 缓存搜索结果
        categoryListCache.value.set(params.keyword, listData)

        // 判断是否还有更多数据
        hasMore.value = listData.length >= pageSize
      } else {
        currentList.value = []
        hasMore.value = false
      }
    } else {
      Taro.showToast({
        title: res.msg || '搜索失败',
        icon: 'none',
        duration: 2000
      })
    }
  } catch (error) {
    console.error('[Material List] 搜索失败:', error)
    Taro.showToast({
      title: '搜索失败',
      icon: 'error',
      duration: 2000
    })
  } finally {
    loading.value = false
  }
}

/**
 * 监听搜索关键字变化
 * @description 实现实时搜索：用户输入时自动触发搜索（带防抖）
 */
watch(searchValue, (newValue, oldValue) => {
  console.log('[Material List] searchValue 变化:', oldValue, '->', newValue)

  // 如果搜索关键字为空，立即清除搜索（不需要防抖）
  if (!newValue?.trim()) {
    console.log('[Material List] 搜索关键字为空，立即清除')
    onClear()
    return
  }

  // 有搜索关键字，使用防抖搜索
  console.log('[Material List] 触发防抖搜索')
  debouncedSearch()
})

/**
 * 清空搜索
 */
const onClear = async () => {
  console.log('[Material List] 清空搜索')
  console.log('[Material List] 当前分类:', activeTabId.value)

  // 构建请求参数（不带 keyword）
  const params = {
    cid: initialCategoryId.value,
    page: 0,
    limit: pageSize
  }

  // 如果当前选中的是子分类，添加 child_id 参数
  if (activeTabId.value !== 'all') {
    params.child_id = activeTabId.value
  }

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

  // 重新请求接口（不带 keyword，获取最新数据）
  await fetchMaterialList(params, false)

  // 更新当前显示的列表
  if (activeTabId.value === 'all') {
    // 全部列表：使用 allList
    currentList.value = allList.value
  } else {
    // 子分类列表：已经在 fetchMaterialList 中更新了 currentList
  }
}

/**
 * 使用文件列表点击处理器
 *
 * @description 直接使用 useFileOperation 的自动文件类型判断
 * - 图片文件：自动使用 Taro.previewImage 预览
 * - 视频文件：自动跳转到视频播放页面
 * - 其他文件：自动下载并使用 Taro.openDocument 打开
 */
const { handleClick: onView } = useListItemClick({
  listType: ListType.FILE,
  onAfterClick: (item) => {
    console.log('[Material List] 用户打开了资料:', item.title)
  }
})

/**
 * 切换收藏状态
 * @description 使用 useCollectOperation composable 处理收藏操作
 */
const { toggleCollect } = useCollectOperation()

/**
 * 删除资料
 */
const onDelete = (item) => {
  Taro.showModal({
    title: '提示',
    content: '确定要删除该资料吗？',
    success: (res) => {
      if (res.confirm) {
        // 从 allList 中删除
        const index = allList.value.findIndex(i => i.id === item.id)
        if (index !== -1) {
          allList.value.splice(index, 1)
          Taro.showToast({ title: '已删除', icon: 'success' })
        }
      }
    }
  })
}
</script>

<style lang="less">
// FilterTabs 风格的标签栏
.filter-tabs-wrapper {
  display: flex;
  overflow-x: auto;
  padding: 24rpx 32rpx;
  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-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  word-break: break-all;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
}
</style>