import React, { useState, useEffect } from "react";
import { useSocket } from "../../../hooks/useSocket";
import "./styles/NotificationsTab.css";

const NotificationsTab = () => {
  const { socket } = useSocket();
  const [notifications, setNotifications] = useState([]);

  useEffect(() => {
    if (!socket) return;

    socket.emit("notifications:get_all");

    const handleNewNotify = (notify) => {
      console.log(notify);
      setNotifications((prev) => [notify, ...prev]);
    };

    const handleInitialNotify = (data) => {
      setNotifications(data);
    };

    socket.on("notification:new", handleNewNotify);
    socket.on("notifications:list", handleInitialNotify);

    return () => {
      socket.off("notification:new", handleNewNotify);
      socket.off("notifications:list", handleInitialNotify);
    };
  }, [socket]);

  const handleAction = (id, action, data) => {
    if (action === "accept_friend") {
      socket.emit("friend:add", { friendId: data.fromId });
    }
    socket.emit("notification:read", { id });
    setNotifications((prev) => prev.filter((n) => n.id !== id));
  };

  const getIcon = (type) => {
    switch (type) {
      case "friend_request":
        return "fas fa-user-plus";
      case "crafting":
        return "fas fa-hammer";
      case "system":
        return "fas fa-robot";
      default:
        return "fas fa-bell";
    }
  };

  return (
    <div className="notifications-container">
      <div className="notifications-header">
        <div className="card-tag">SYSTEM_ALERTS</div>
        <h2>NOTIFICATIONS</h2>
      </div>

      <div className="notifications-list">
        {notifications.length === 0 && (
          <div className="no-notifications">
            <i className="fas fa-satellite-dish"></i>
            <span>NO_ACTIVE_ALERTS_FOUND</span>
          </div>
        )}

        {notifications.map((n) => (
          <div key={n.id} className={`notify-card ${n.type}`}>
            <div className="notify-icon">
              <i className={getIcon(n.type)}></i>
            </div>
            <div className="notify-content">
              <div className="notify-title-row">
                <h4>{n.title}</h4>
                <span className="notify-time">
                  {new Date(n.createdAt).toLocaleTimeString([], {
                    hour: "2-digit",
                    minute: "2-digit",
                  })}
                </span>
              </div>
              <p>{n.message}</p>
            </div>
            <div className="notify-actions">
              {n.type === "friend_request" && (
                <button
                  className="action-btn accept"
                  onClick={() => handleAction(n.id, "accept_friend", n.data)}
                >
                  ACCEPT
                </button>
              )}
              <button
                className="action-btn dismiss"
                onClick={() => handleAction(n.id, "dismiss")}
              >
                <i className="fas fa-times"></i>
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default NotificationsTab;