import React from 'react';
import { useQuery } from '@tanstack/react-query';
import { useEventContext } from '../../context/EventContext';
import { listGuestNotifications } from '../../api';

/**
 * Badge count for notifications bell in the mobile shell.
 * Fetches guest notifications for the active event and returns count.
 */
export function useNotificationsBadge() {
  const { activeEvent } = useEventContext();
  const slug = activeEvent?.slug;

  const { data: count = 0 } = useQuery<number>({
    queryKey: ['mobile', 'notifications', 'badge', slug],
    enabled: Boolean(slug),
    staleTime: 60_000,
    queryFn: async () => {
      if (!slug) {
        return 0;
      }
      const notifications = await listGuestNotifications(slug);
      return Array.isArray(notifications) ? notifications.length : 0;
    },
  });

  return React.useMemo(() => ({ count }), [count]);
}