'use client';

import { useEffect, useState } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';

import { useSocket } from '@/providers/socket-provider';
import { apiFetch } from '@/lib/api/client';

export function useNotifications() {
  const socket = useSocket();
  const queryClient = useQueryClient();
  const [unreadCount, setUnreadCount] = useState(0);

  // Initial unread count
  const { data } = useQuery<{ count: number }>({
    queryKey: ['notifications', 'unread-count'],
    queryFn: () => apiFetch('/api/v1/notifications/unread-count'),
    staleTime: 30_000,
  });

  useEffect(() => {
    if (data) setUnreadCount(data.count);
  }, [data]);

  // Socket listeners
  useEffect(() => {
    if (!socket) return;

    const handleNew = () => {
      queryClient.invalidateQueries({ queryKey: ['notifications'] });
    };

    const handleCount = (payload: { count: number }) => {
      setUnreadCount(payload.count);
    };

    socket.on('notification:new' as any, handleNew);
    socket.on('notification:unreadCount' as any, handleCount);

    return () => {
      socket.off('notification:new' as any, handleNew);
      socket.off('notification:unreadCount' as any, handleCount);
    };
  }, [socket, queryClient]);

  return { unreadCount };
}