mini-programs/src/main_pages/components/MessagePageContent.tsx

import { useState, useEffect } from "react";
import { View, Text, Image, ScrollView } from "@tarojs/components";
import { EmptyState } from "@/components";
import noticeService from "@/services/noticeService";
import { formatRelativeTime } from "@/utils/timeUtils";
import Taro from "@tarojs/taro";
import { useGlobalState } from "@/store/global";
import { navigateTo } from "@/utils/navigation";
import { useReddotInfo, useFetchReddotInfo } from "@/store/messageStore";
import "@/other_pages/message/index.scss";

interface MessageItem {
  id: string;
  notification_type: string;
  title: string;
  content: string;
  create_time: string;
  is_read: number;
  related_user_avatar?: string;
  related_user_nickname?: string;
  activity_image?: string;
  jump_url?: string;
}

type MessageCategory = "comment" | "follow";

const MessagePageContent = () => {
  const { statusNavbarHeightInfo } = useGlobalState() || {};
  const { totalHeight = 98 } = statusNavbarHeightInfo || {};

  const [activeTab, setActiveTab] = useState<MessageCategory | null>(null);
  const [messageList, setMessageList] = useState<MessageItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [reachedBottom, setReachedBottom] = useState(false);
  const [refreshing, setRefreshing] = useState(false);

  // 从 store 获取红点信息
  const reddotInfo = useReddotInfo();
  const fetchReddotInfo = useFetchReddotInfo();

  const getNoticeList = async () => {
    if (loading) return;
    setLoading(true);
    try {
      const res = await noticeService.getNotificationList({});
      if (res.code === 0) {
        setMessageList(res.data.list || []);
      }
    } catch (e) {
      (Taro as any).showToast({
        title: "获取列表失败，请重试",
        icon: "none",
        duration: 2000,
      });
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    getNoticeList();
    fetchReddotInfo();
  }, []);

  const filteredMessages = messageList;

  const handleTabClick = (tab: MessageCategory) => {
    if (tab === "comment") {
      navigateTo({
        url: "/other_pages/comment_reply/index",
      });
      return;
    }

    if (tab === "follow") {
      navigateTo({
        url: "/other_pages/new_follow/index",
      });
      return;
    }

    setActiveTab(activeTab === tab ? null : tab);
  };

  const handleViewDetail = (message: MessageItem) => {
    if (!message.jump_url) {
      console.log("暂无跳转链接");
      return;
    }

    navigateTo({
      url: message.jump_url,
    }).catch(() => {
      (Taro as any).showToast({
        title: "页面不存在",
        icon: "none",
        duration: 2000,
      });
    });
  };

  const handleScrollToLower = () => {
    if (!reachedBottom && filteredMessages.length > 0) {
      setReachedBottom(true);
      setTimeout(() => {
        setReachedBottom(false);
      }, 2000);
    }
  };

  const handleRefresh = async () => {
    setRefreshing(true);
    try {
      const res = await noticeService.getNotificationList({});
      if (res.code === 0) {
        setMessageList(res.data.list || []);
      }
    } catch (e) {
      (Taro as any).showToast({
        title: "刷新失败",
        icon: "none",
        duration: 2000,
      });
    } finally {
      setRefreshing(false);
    }
  };

  return (
    <View className="message-container" style={{ paddingTop: `${totalHeight}px` }}>
      <View className="category-tabs">
        <View
          className={`tab-item ${activeTab === "comment" ? "active" : ""}`}
          onClick={() => handleTabClick("comment")}
        >
          <View className="tab-icon-wrapper">
            <Image
              className="tab-icon"
              src={require('@/static/message/comment-icon.svg')}
              mode="aspectFit"
            />
            {(reddotInfo?.comment_unread_count || 0) > 0 && (
              <View className="badge">
                {(reddotInfo?.comment_unread_count || 0) > 99 ? '99+' : reddotInfo?.comment_unread_count}
              </View>
            )}
          </View>
          <Text className="tab-text">评论和回复</Text>
        </View>
        <View
          className={`tab-item ${activeTab === "follow" ? "active" : ""}`}
          onClick={() => handleTabClick("follow")}
        >
          <View className="tab-icon-wrapper">
            <Image
              className="tab-icon"
              src={require('@/static/message/follow-icon.svg')}
              mode="aspectFit"
            />
            {(reddotInfo?.follow_unread_count || 0) > 0 && (
              <View className="badge">
                {(reddotInfo?.follow_unread_count || 0) > 99 ? '99+' : reddotInfo?.follow_unread_count}
              </View>
            )}
          </View>
          <Text className="tab-text">新增关注</Text>
        </View>
      </View>

      <ScrollView
        scrollY
        className="message-scroll"
        scrollWithAnimation
        enhanced
        showScrollbar={false}
        lowerThreshold={50}
        onScrollToLower={handleScrollToLower}
        refresherEnabled={true}
        refresherTriggered={refreshing}
        onRefresherRefresh={handleRefresh}
      >
        {filteredMessages.length > 0 ? (
          <View className="message-cards">
            {filteredMessages.map((message) => (
              <View className="message-card" key={message.id} onClick={() => handleViewDetail(message)}>
                <View className="card-title-row">
                  <Text className="card-title">{message.title}</Text>
                </View>
                <View className="card-time-row">
                  <Text className="card-time">{formatRelativeTime(message.create_time)}</Text>
                </View>
                <View className="card-content-row">
                  <Text className="card-content">{message.content}</Text>
                </View>
                <View className="card-footer">
                  <View className="footer-divider"></View>
                  <View className="footer-action">
                    <Text className="action-text">查看详情</Text>
                    <View className="action-arrow">
                      <Image className="img" src={require('@/static/message/ar-right.svg')} ></Image>
                    </View>
                  </View>
                </View>
              </View>
            ))}
            {filteredMessages.length > 0 && (
              <View className="bottom-tip">
                <Text className="tip-text">到底了</Text>
              </View>
            )}
          </View>
        ) : (
          <EmptyState text="暂无消息" />
        )}
      </ScrollView>
    </View>
  );
};

export default MessagePageContent;