import { useState, useEffect } from "react";
import { View, Text, ScrollView, Image } from "@tarojs/components";
import { Avatar } from "@nutui/nutui-react-taro";
import GuideBar from "@/components/GuideBar";
import { withAuth } from "@/components";
import noticeService from "@/services/noticeService";
import Taro, { useRouter } from "@tarojs/taro";
import "./index.scss";

// 消息类型定义
interface MessageItem {
  id: string;
  type: "system" | "user" | "like" | "comment" | "follow";
  title: string;
  content: string;
  time: string;
  avatar?: string;
  isRead: boolean;
  hasAction?: boolean;
  actionText?: string;
}

const Message = () => {
  const [activeTab] = useState<"all" | "like" | "comment" | "follow">("all");
  const [messageList, setMessageList] = useState<MessageItem[]>([]);

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

  // 过滤消息
  const filteredMessages = messageList.filter((message) => {
    if (activeTab === "all") return true;
    return message.type === activeTab;
  });

  // 渲染消息项
  const renderMessageItem = (message: MessageItem) => {
    if (message.type === "system") {
      return (
        <View className="message-item system-message" key={message.id}>
          <View className="message-header">
            <Text className="message-title">{message.title}</Text>
            <Text className="message-time">{message.time}</Text>
          </View>
          <View className="message-content">
            <Text className="message-text">{message.content}</Text>
          </View>
          {message.hasAction && (
            <View className="message-action">
              <View className="action-divider"></View>
              <View className="action-button">
                <Text className="action-text">{message.actionText}</Text>
                <Image
                  className="action-arrow"
                  src={require("../../static/message/icon-message-arrow.svg")}
                />
              </View>
            </View>
          )}
        </View>
      );
    }

    return (
      <View className="message-item user-message" key={message.id}>
        <View className="message-avatar">
          <Avatar src={message.avatar} size="48px" />
        </View>
        <View className="message-info">
          <View className="message-header">
            <Text className="message-title">{message.title}</Text>
            <Text className="message-time">{message.time}</Text>
          </View>
          <View className="message-content">
            <Text className="message-text">{message.content}</Text>
            {!message.isRead && <View className="unread-indicator"></View>}
          </View>
        </View>
      </View>
    );
  };

  return (
    <View className="message-container">
      {/* 导航栏 */}
      <View className="navbar">
        <View className="navbar-content">
          <View className="navbar-left">
            <Avatar
              className="navbar-avatar"
              src="https://img.yzcdn.cn/vant/cat.jpeg"
            />
            <Text className="navbar-title">消息</Text>
          </View>
        </View>
      </View>

      {/* 消息列表 */}
      <ScrollView scrollY className="message-list"   scrollWithAnimation enhanced showScrollbar={false} >
        {filteredMessages.length > 0 ? (
          <View className="message-list-content">
            {filteredMessages.map(renderMessageItem)}
          </View>
        ) : (
          <View className="empty-state">
            <View className="empty-icon">
              <View className="empty-message-icon"></View>
            </View>
            <Text className="empty-text">暂无消息</Text>
          </View>
        )}
      </ScrollView>

      {/* 底部导航 */}
      <GuideBar currentPage="message" />
    </View>
  );
};

export default withAuth(Message);