import React, { useState, useCallback, useEffect } from 'react';
import { View, Text, Image, ScrollView } from '@tarojs/components';
import Taro, { usePullDownRefresh, useReachBottom } from '@tarojs/taro';
import { useThrottledDidShow } from '@/hooks/useThrottledDidShow';
import { listArticles, listCategories, Article, ArticleCategory } from '../../services/article';
import EmptyState from '../../components/EmptyState';
import Loading from '../../components/Loading';
import { useElderClass } from '../../hooks/useElderClass';
import './index.scss';

export default function ArticleList() {
  const modeClass = useElderClass();
  const [articles, setArticles] = useState<Article[]>([]);
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const [categories, setCategories] = useState<ArticleCategory[]>([]);
  const [activeCategory, setActiveCategory] = useState<string | null>(null);

  const fetchCategories = useCallback(async () => {
    try {
      const data = await listCategories();
      setCategories(data || []);
    } catch {
      setCategories([]);
    }
  }, []);

  const fetchData = useCallback(async (p: number, append = false, categoryId?: string | null) => {
    setLoading(true);
    try {
      const cid = categoryId !== undefined ? categoryId : activeCategory;
      const res = await listArticles({
        page: p,
        category_id: cid || undefined,
      });
      const list = res.data || [];
      setArticles(append ? (prev) => [...prev, ...list] : list);
      setTotal(res.total);
      setPage(p);
    } catch {
      Taro.showToast({ title: '加载失败', icon: 'none' });
    } finally {
      setLoading(false);
    }
  }, [activeCategory]);

  useEffect(() => {
    fetchCategories();
  }, [fetchCategories]);

  useThrottledDidShow(() => {
    fetchData(1, false, null);
  }, 10000);

  usePullDownRefresh(() => {
    fetchData(1, false, null).finally(() => {
      Taro.stopPullDownRefresh();
    });
  });

  useReachBottom(() => {
    if (!loading && articles.length < total) {
      fetchData(page + 1, true);
    }
  });

  const handleCategoryChange = (categoryId: string | null) => {
    setActiveCategory(categoryId);
    fetchData(1, false, categoryId);
  };

  const goToDetail = (id: string) => {
    Taro.navigateTo({ url: `/pages/article/detail/index?id=${id}` });
  };

  return (
    <View className={`article-page ${modeClass}`}>
      {/* 分类筛选 */}
      {categories.length > 0 && (
        <ScrollView scrollX className='article-categories'>
          <View
            className={`article-cat-tab ${!activeCategory ? 'article-cat-tab--active' : ''}`}
            onClick={() => handleCategoryChange(null)}
          >
            <Text>全部</Text>
          </View>
          {categories.map((cat) => (
            <View
              key={cat.id}
              className={`article-cat-tab ${activeCategory === cat.id ? 'article-cat-tab--active' : ''}`}
              onClick={() => handleCategoryChange(cat.id)}
            >
              <Text>{cat.name}</Text>
            </View>
          ))}
        </ScrollView>
      )}

      <View className='article-list'>
        {articles.map((a) => (
          <View
            className='article-card'
            key={a.id}
            onClick={() => goToDetail(a.id)}
          >
            <View className='article-card-body'>
              <Text className='article-card-title'>{a.title}</Text>
              {a.summary && (
                <Text className='article-card-summary'>{a.summary}</Text>
              )}
              <View className='article-card-meta'>
                {(a.category_name || a.category) && (
                  <Text className='article-card-tag'>{a.category_name || a.category}</Text>
                )}
                {a.published_at && (
                  <Text className='article-card-date'>
                    {a.published_at.slice(0, 10)}
                  </Text>
                )}
              </View>
            </View>
            {a.cover_image && (
              <View className='article-card-cover'>
                <Image className='cover-img' src={a.cover_image} mode='aspectFill' lazyLoad />
              </View>
            )}
          </View>
        ))}
      </View>

      {articles.length === 0 && !loading && (
        <EmptyState text='暂无资讯文章' />
      )}

      {loading && (
        <Loading />
      )}
    </View>
  );
}