"use client";

import { useEffect } from "react";

import { useQueryClient } from "@tanstack/react-query";

import { toast } from "sonner";

import { openDropStream } from "@/lib/sse";

import { useUiStore } from "@/stores/ui";

import { queryKeys } from "@/lib/query";

export function useDropsStream() {

  const pushDrop = useUiStore((s) => s.pushDrop);

  const setStreamStatus = useUiStore((s) => s.setStreamStatus);

  const qc = useQueryClient();

  useEffect(() => {

    if (typeof window !== "undefined" && "Notification" in window && Notification.permission === "default") {

      void Notification.requestPermission().catch(() => undefined);

    }

    const close = openDropStream({

      onStatus: (status) => setStreamStatus(status),

      onDrop: (drop, name) => {

        pushDrop(drop);

        qc.invalidateQueries({ queryKey: queryKeys.stats });

        if (name === "drop.new" || name === "drop.status") {

          const title = drop.event.title;

          toast(name === "drop.status" ? "On sale now" : "New drop", {

            description: title,

          });

          if (typeof window !== "undefined" && "Notification" in window && Notification.permission === "granted") {

            try {

              new Notification("DropHawk - " + (name === "drop.status" ? "On sale" : "New drop"), {

                body: title,

                tag: `drop-${drop.id}`,

              });

            } catch {

            }

          }

        }

      },

    });

    return close;

  }, [pushDrop, setStreamStatus, qc]);

}