import React from 'react';
import { useUploadQueue } from '../queue/hooks';
import type { QueueItem } from '../queue/queue';

type NotificationCenterValue = {
  queueItems: QueueItem[];
  queueCount: number;
  inviteCount: number;
  totalCount: number;
  loading: boolean;
  refreshQueue: () => Promise<void>;
  eventToken: string;
};

const NotificationCenterContext = React.createContext<NotificationCenterValue | null>(null);

export function NotificationCenterProvider({
  eventToken,
  children,
}: {
  eventToken: string;
  children: React.ReactNode;
}) {
  const { items, loading, refresh } = useUploadQueue();

  const queueCount = React.useMemo(
    () => items.filter((item) => item.status !== 'done').length,
    [items],
  );

  const value = React.useMemo<NotificationCenterValue>(
    () => ({
      queueItems: items,
      queueCount,
      inviteCount: 0,
      totalCount: queueCount,
      loading,
      refreshQueue: refresh,
      eventToken,
    }),
    [items, queueCount, loading, refresh, eventToken],
  );

  return (
    <NotificationCenterContext.Provider value={value}>{children}</NotificationCenterContext.Provider>
  );
}

export function useNotificationCenter() {
  const ctx = React.useContext(NotificationCenterContext);
  if (!ctx) {
    throw new Error('useNotificationCenter must be used within NotificationCenterProvider');
  }
  return ctx;
}

export function useOptionalNotificationCenter() {
  return React.useContext(NotificationCenterContext);
}