smoothschedule/frontend/src/hooks/useSandbox.ts

/**
 * React Query hooks for sandbox mode management
 */

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { getSandboxStatus, toggleSandboxMode, resetSandboxData, SandboxStatus } from '../api/sandbox';

/**
 * Hook to fetch current sandbox status
 */
export const useSandboxStatus = () => {
  return useQuery<SandboxStatus, Error>({
    queryKey: ['sandboxStatus'],
    queryFn: getSandboxStatus,
    staleTime: 30 * 1000, // 30 seconds
    refetchOnWindowFocus: true,
  });
};

/**
 * Hook to toggle sandbox mode
 */
export const useToggleSandbox = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: toggleSandboxMode,
    onSuccess: (data) => {
      // Update the sandbox status in cache
      queryClient.setQueryData(['sandboxStatus'], (old: SandboxStatus | undefined) => ({
        ...old,
        sandbox_mode: data.sandbox_mode,
      }));

      // Reload the page to ensure all components properly reflect the new mode
      // This is necessary because:
      // 1. Backend switches database schemas between live/sandbox
      // 2. Some UI elements need to reflect the new mode (e.g., warnings, disabled features)
      // 3. Prevents stale data from old mode appearing briefly
      window.location.reload();
    },
  });
};

/**
 * Hook to reset sandbox data
 */
export const useResetSandbox = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: resetSandboxData,
    onSuccess: () => {
      // Invalidate all data queries after reset
      queryClient.invalidateQueries({ queryKey: ['resources'] });
      queryClient.invalidateQueries({ queryKey: ['events'] });
      queryClient.invalidateQueries({ queryKey: ['services'] });
      queryClient.invalidateQueries({ queryKey: ['customers'] });
      queryClient.invalidateQueries({ queryKey: ['payments'] });
    },
  });
};