<template>
  <view class="min-h-screen bg-gray-50 pb-[200rpx]">
    <!-- Header -->
    <NavHeader title="我的收藏" />

    <!-- Tabs Section -->
    <view class="bg-white mt-[2rpx] px-[24rpx] py-[20rpx]">
      <div class="flex overflow-x-auto no-scrollbar space-x-[24rpx]">
        <div v-for="(tab, index) in tabs" :key="index"
          class="px-[32rpx] py-[16rpx] rounded-full text-[28rpx] whitespace-nowrap transition-colors"
          :class="activeTab === tab.key ? 'bg-[#2563EB] text-white' : 'bg-[#F3F4F6] text-[#6B7280]'"
          @click="activeTab = tab.key">
          {{ tab.title }}
        </div>
      </div>
    </view>

    <!-- List Section -->
    <view class="px-[24rpx] py-[24rpx]">
      <view v-for="(item, index) in filteredList" :key="index"
        class="bg-white rounded-[24rpx] p-[24rpx] mb-[24rpx] shadow-sm">

        <!-- Header with Icon -->
        <view class="flex gap-[24rpx] mb-[12rpx]">
          <!-- Document Icon -->
          <view class="w-[64rpx] h-[64rpx] flex-shrink-0 flex items-center justify-center">
            <image :src="getDocumentIcon(item.title)" class="w-[56rpx] h-[56rpx]" mode="aspectFit" />
          </view>

          <!-- Title -->
          <view class="flex-1 min-w-0">
            <view class="text-[30rpx] font-bold text-gray-900 leading-normal mb-1">{{ item.title }}</view>
            <view class="bg-blue-50 text-blue-600 text-[22rpx] px-[12rpx] py-[4rpx] rounded-[8rpx] inline-block">{{ item.category }}</view>
          </view>
        </view>

        <!-- Date -->
        <view class="text-gray-500 text-[24rpx] mb-[20rpx] text-right">
          <text>{{ item.date }}</text>
        </view>

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

        <!-- Actions -->
        <ListItemActions
          :viewable="true"
          :deletable="true"
          @view="viewFile({...item, fileName: item.title})"
          @delete="onDelete(item)"
        />
      </view>

      <!-- Empty State -->
      <view v-if="filteredList.length === 0"
        class="flex flex-col items-center justify-center py-[100rpx] text-gray-400">
        <IconFont name="star" size="48" class="mb-[24rpx] opacity-50" />
        <text class="text-[28rpx]">暂无收藏内容</text>
      </view>
    </view>

    <!-- TabBar -->
    <!-- <TabBar current="me" /> -->
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import Taro from '@tarojs/taro'
import { useGo } from '@/hooks/useGo'
import { useFileOperation } from '@/composables/useFileOperation'
import { getDocumentIcon } from '@/utils/documentIcons'
import IconFont from '@/components/IconFont.vue'
import TabBar from '@/components/TabBar.vue'
import NavHeader from '@/components/NavHeader.vue'
import ListItemActions from '@/components/ListItemActions/index.vue'

const go = useGo()
const { viewFile } = useFileOperation()
const activeTab = ref('all')

const tabs = [
  { title: '全部', key: 'all' },
  { title: '入职培训', key: 'onboarding' },
  { title: '签单相关', key: 'signing' },
  { title: '产品知识', key: 'product' }
]

/**
 * Mock 数据：收藏列表
 *
 * @description 包含不同类型的文档文件
 */
const list = ref([
  {
    id: 1,
    title: '新员工入职培训手册.pdf',
    category: '入职培训',
    date: '2024-01-15',
    type: 'onboarding',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E%E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
  },
  {
    id: 2,
    title: '保险产品销售话术.docx',
    category: '签单相关',
    date: '2024-01-14',
    type: 'signing',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/%E8%80%81%E6%9D%A5%E8%B5%9B%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96.docx'
  },
  {
    id: 3,
    title: '重疾险产品知识详解.pptx',
    category: '产品知识',
    date: '2024-01-13',
    type: 'product',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/%E8%82%A1%E5%88%A4%E5%90%88%E5%8F%8B%E7%94%A8%E7%9F%A5%E8%AF%86%E8%AF%B4%E6%98%8E20240112110417414.pptx'
  },
  {
    id: 4,
    title: '2024年最新保险政策解读.txt',
    category: '政策解读',
    date: '2024-01-12',
    type: 'other',
    downloadUrl: ''
  }
])

const filteredList = computed(() => {
  if (activeTab.value === 'all') return list.value
  return list.value.filter(item => item.type === activeTab.value)
})

/**
 * 删除收藏
 */
const onDelete = (item) => {
  Taro.showModal({
    title: '提示',
    content: '确定要删除该收藏吗？',
    success: (res) => {
      if (res.confirm) {
        list.value = list.value.filter(i => i.id !== item.id)
        Taro.showToast({ title: '已删除', icon: 'success' })
      }
    }
  })
}
</script>

<style lang="less">
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
</style>