import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';
import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
import App from './App.tsx';
import './index.css';

// How often every page silently re-syncs with the backend. Orders/deliveries
// statuses change out-of-band (riders accept/pick/deliver, customers place
// orders), so the whole console auto-refreshes on this cadence.
const AUTO_REFRESH_MS = 30_000;

// Single shared query client. Auto-refresh is wired here once so EVERY page
// (current and future) inherits it — no per-component polling needed:
//  • refetchInterval — poll the backend every AUTO_REFRESH_MS so status/order
//    changes appear without a manual reload.
//  • refetchIntervalInBackground:false — pause polling while the tab is hidden
//    (saves API calls); it resumes + immediately refetches when the tab is shown.
//  • refetchOnWindowFocus / refetchOnReconnect — refresh the instant the user
//    returns to the tab or the network comes back.
// staleTime is kept below the interval so focus/mount refetches aren't skipped.
// Disabled queries (enabled:false, e.g. closed-modal detail fetches) never poll.
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 15_000,
      retry: 1,
      refetchInterval: AUTO_REFRESH_MS,
      refetchIntervalInBackground: false,
      refetchOnWindowFocus: true,
      refetchOnReconnect: true,
    },
  },
});

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </StrictMode>,
);