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

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

const ArticleDetail: React.FC = () => {
  const router = useRouter()
  const id = router.params.id
  const [article, setArticle] = useState<CmsArticle>()
  const [related, setRelated] = useState<CmsArticle[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    if (!id) return
    getCmsArticle(Number(id))
      .then((a) => setArticle(a))
      .catch(() => {})
      .finally(() => setLoading(false))
    // 相关推荐：取最新几条，排除当前
    pageCmsArticle({ status: 0, deleted: 0, page: 1, limit: 4 })
      .then((r) => {
        const list = (r?.list || []).filter((x) => x.articleId !== Number(id)).slice(0, 3)
        setRelated(list)
      })
      .catch(() => {})
  }, [id])

  return (
    <View className='flex flex-col h-screen bg-white'>
      <NavBar title='资讯详情' />
      <ScrollView scrollY className='flex-1'>
        <View className='p-4'>
          <Text className='text-xl font-semibold text-gray-800 block'>
            {article?.title || '加载中...'}
          </Text>
          <View className='flex items-center mt-2 mb-4'>
            <Text className='text-xs text-gray-400'>{article?.source || article?.author || ''}</Text>
            <Text className='text-xs text-gray-400 ml-3'>{article?.createTime?.slice(0, 10)}</Text>
          </View>
          {article?.content ? (
            <RichText nodes={article.content} className='official-rich' />
          ) : (
            <Text className='text-sm text-gray-400'>
              {loading ? '加载中...' : '暂无内容'}
            </Text>
          )}
        </View>

        {/* 相关推荐 */}
        {related.length > 0 && (
          <View className='px-3 pb-4'>
            <View className='flex items-center mb-2'>
              <View className='w-1 h-4 bg-brand-600 rounded mr-2' />
              <Text className='text-base font-semibold text-gray-800'>相关推荐</Text>
            </View>
            {related.map((a) => (
              <ArticleCard key={a.articleId} article={a} />
            ))}
          </View>
        )}
      </ScrollView>

      <View className='px-4 py-3 bg-white border-t border-gray-200 safe-area-bottom'>
        <View
          className='bg-brand-600 rounded-full py-3 text-center'
          onClick={() => Taro.navigateTo({ url: '/official/message' })}
        >
          <Text className='text-white text-sm font-medium'>立即咨询</Text>
        </View>
      </View>
    </View>
  )
}

export default ArticleDetail