/**
 * @ai-summary React hook for data synchronization management
 */

import { useEffect, useRef } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { useAuth0 } from '@auth0/auth0-react';
import { DataSyncManager } from '../sync/data-sync';
import { useNavigationStore } from '../store/navigation';

export const useDataSync = () => {
  const queryClient = useQueryClient();
  const { isAuthenticated } = useAuth0();
  const syncManagerRef = useRef<DataSyncManager | null>(null);
  const navigationStore = useNavigationStore();

  useEffect(() => {
    // Initialize data sync manager with authentication guard
    syncManagerRef.current = new DataSyncManager(queryClient, {
      enableCrossTabs: true,
      enableOptimisticUpdates: true,
      enableBackgroundSync: true,
      syncInterval: 30000,
      isAuthenticated: () => isAuthenticated,
    });

    return () => {
      syncManagerRef.current?.cleanup();
    };
  }, [queryClient, isAuthenticated]);

  // Listen for navigation changes and trigger prefetching
  useEffect(() => {
    if (syncManagerRef.current) {
      syncManagerRef.current.prefetchForNavigation(navigationStore.activeScreen);
    }
  }, [navigationStore.activeScreen]);

  return {
    optimisticVehicleUpdate: (vehicleId: string, updates: any) => {
      syncManagerRef.current?.optimisticVehicleUpdate(vehicleId, updates);
    },
    prefetchForNavigation: (screen: string) => {
      syncManagerRef.current?.prefetchForNavigation(screen);
    },
  };
};