import React, { useEffect, useRef } from 'react';
import { useAuthStore } from '@/features/auth/store/authStore';
import { connectEcho, disconnectEcho, isRealtimeEnabled } from '@/shared/realtime/echoClient';
import { useNotificationRealtime } from '@/features/notifications/hooks/useNotificationRealtime';
import { useDashboardRealtime } from '@/features/dashboard/hooks/useDashboardRealtime';
import { useOnlineStatus } from '@/shared/hooks/useOnlineStatus';

interface RealtimeProviderProps {
  children: React.ReactNode;
}

const RECONNECT_DEBOUNCE_MS = 5_000;

export const RealtimeProvider: React.FC<RealtimeProviderProps> = ({ children }) => {
  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
  const online = useOnlineStatus();
  const reconnectTimerRef = useRef<number | null>(null);

  useEffect(() => {
    if (!isAuthenticated || !online || !isRealtimeEnabled()) {
      disconnectEcho();
      return undefined;
    }

    if (reconnectTimerRef.current !== null) {
      window.clearTimeout(reconnectTimerRef.current);
    }

    reconnectTimerRef.current = window.setTimeout(() => {
      disconnectEcho();
      connectEcho();
    }, RECONNECT_DEBOUNCE_MS);

    return () => {
      if (reconnectTimerRef.current !== null) {
        window.clearTimeout(reconnectTimerRef.current);
        reconnectTimerRef.current = null;
      }
      disconnectEcho();
    };
  }, [isAuthenticated, online]);

  useNotificationRealtime();
  useDashboardRealtime();

  return <>{children}</>;
};