import { useEffect } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import toast from 'react-hot-toast';
import { useLocale } from '@/app/providers/LocaleProvider';
import { useAuthStore } from '@/features/auth/store/authStore';
import { unreadCountQueryKey } from '@/features/notifications/hooks/useUnreadCount';
import { getEcho, isRealtimeEnabled } from '@/shared/realtime/echoClient';
import { realtimeChannels, realtimeEvents } from '@/shared/realtime/realtimeChannels';
import { isNotificationReceivedPayload } from '@/shared/realtime/realtimeTypes';

export function useNotificationRealtime(): void {
  const user = useAuthStore((state) => state.user);
  const queryClient = useQueryClient();
  const { t } = useLocale();

  useEffect(() => {
    const echo = getEcho();
    if (!isRealtimeEnabled() || !echo || !user?.id) {
      return undefined;
    }

    const channelName = realtimeChannels.user(user.id);
    const channel = echo.private(channelName);

    const handler = (payload: unknown) => {
      if (!isNotificationReceivedPayload(payload)) {
        return;
      }

      queryClient.setQueryData<number>(unreadCountQueryKey, (current) => (current ?? 0) + 1);
      void queryClient.invalidateQueries({
        queryKey: ['notifications', 'list'],
        refetchType: 'none',
      });

      toast(payload.message || payload.title, {
        icon: '📢',
        duration: 5000,
      });
    };

    channel.listen(realtimeEvents.notificationReceived, handler);

    return () => {
      channel.stopListening(realtimeEvents.notificationReceived);
      echo.leave(channelName);
    };
  }, [queryClient, t, user?.id]);
}