import { useEffect, useState } from "react";
import { MessagePayload, isSupported } from "firebase/messaging";
import { onMessageListener } from "./firebase";

const useFCM = (token: string) => {
  const [messages, setMessages] = useState<MessagePayload | null>(null);

  useEffect(() => {
    let unsubscribe: (() => void) | undefined;

    const setupListener = async () => {
      try {
        const supportedBrowser = await isSupported();
        if (supportedBrowser) {
          console.log("🔥 [useFCM] Browser supports notifications, setting up FCM message listener...");
          const unsub = onMessageListener((payload) => {
            console.log("🔥 [useFCM] onMessageListener received payload:", payload);
            setMessages(payload);
          });
          if (unsub) {
            unsubscribe = unsub;
          }
        } else {
          console.warn("🔥 [useFCM] Browser does not support notifications");
        }
      } catch (error) {
        console.error('Error setting up notification listener:', error);
      }
    };

    if (typeof window !== "undefined" && token) {
      console.log("🔥 [useFCM] Token updated:", token.substring(0, 10) + "...");
      setupListener();
    }

    return () => {
      if (unsubscribe) {
        console.log("🔥 [useFCM] Cleaning up FCM message listener...");
        unsubscribe();
      }
    };
  }, [token]);

  return { messages, setMessages };
};

export default useFCM;