import React, { useState, useEffect } from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import Taro, { useRouter } from '@tarojs/taro'
import { pageCmsArticle } from '@/api/official'
import type { CmsArticle } from '@/api/official'
import ArticleCard from '../components/ArticleCard'
import OfficialTabBar from '../components/OfficialTabBar'
import NavBar from '@/components/NavBar'

definePageConfig({
  navigationBarTitleText: '资讯',
})

const ArticleList: React.FC = () => {
  const router = useRouter()
  const categoryId = router.params.categoryId
  const [articles, setArticles] = useState<CmsArticle[]>([])
  const [page, setPage] = useState(1)
  const [finished, setFinished] = useState(false)
  const [loading, setLoading] = useState(false)

  const load = async (p: number) => {
    if (loading || finished) return
    setLoading(true)
    try {
      const res = await pageCmsArticle({
        status: 0,
        deleted: 0,
        page: p,
        limit: 10,
        categoryId: categoryId ? Number(categoryId) : undefined,
      })
      const list = res?.list || []
      setArticles((prev) => (p === 1 ? list : [...prev, ...list]))
      setPage(p)
      if (list.length < 10) setFinished(true)
    } catch (e) {
      console.error('资讯列表加载失败', e)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    load(1)
  }, [])

  return (
    <View className='flex flex-col h-screen bg-gray-50'>
      <NavBar title='资讯' />
      <ScrollView scrollY className='flex-1' onScrollToLower={() => load(page + 1)}>
        <View className='p-3'>
          {articles.length > 0 ? (
            articles.map((a) => <ArticleCard key={a.articleId} article={a} />)
          ) : (
            <View className='py-10 text-center'>
              <Text className='text-sm text-gray-400'>{loading ? '加载中...' : '暂无资讯'}</Text>
            </View>
          )}
          {loading && (
            <View className='py-3 text-center'>
              <Text className='text-xs text-gray-400'>加载中...</Text>
            </View>
          )}
        </View>
      </ScrollView>
      <OfficialTabBar active='article' />
    </View>
  )
}

export default ArticleList