import { View, Text } from '@tarojs/components'
import {Image, Loading, Space, Tag} from '@antmjs/vantui'
import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { getCategoryLinks } from '@/api/home'
import type { CategoryLinkItem } from '@/api/home'
import { navigateToLink } from '@/utils/navigate'
import './index.less'

export default function Category() {
  const router = Taro.useRouter()
  const categoryId = router.params.category_id || ''
  const [links, setLinks] = useState<CategoryLinkItem[]>([])
  const [loading, setLoading] = useState(true)

  // 收到分类 ID 后请求该分类下的所有链接
  useEffect(() => {
    async function fetchCategoryLinks() {
      try {
        const res = await getCategoryLinks(Number(categoryId))
        if (res.success && res.data) {
          setLinks(
            res.data
              .filter((item) => item.status === 0)
              .sort((a, b) => a.sort - b.sort)
          )
        }
      } catch (err) {
        console.warn('获取分类链接失败', err)
      } finally {
        setLoading(false)
      }
    }

    if (categoryId) {
      fetchCategoryLinks()
    } else {
      setLoading(false)
    }
  }, [categoryId])

  return (
    <View className='category'>
      {/* 加载中 */}
      {loading ? (
        <View className='category-state'>
          <Loading type='spinner'>加载中...</Loading>
        </View>
      ) : links.length > 0 ? (
        // 宫格链接（与首页宫格导航样式一致）
        <View className='grid-wrapper'>
          {links.map((item) => (
            <View
              className='grid-item'
              key={item.id}
              onClick={() => navigateToLink(item.link)}
            >
              <Image className='grid-item-image' src={item.image.preview_url}></Image>
              <Text className='grid-item-title'>
                <View>{item.title}</View>
                <Space>
                  { item.tag && item.tag.length > 0 && item.tag.map((tag, index) => (
                    <Tag type='danger' key={index}>{tag}</Tag>
                  ))}
                </Space>
              </Text>
            </View>
          ))}
        </View>
      ) : (
        // 空状态
        <View className='category-state'>
          <Text className='state-text'>暂无链接</Text>
        </View>
      )}
    </View>
  )
}