import React from 'react';
import ReactDOM from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Toaster } from 'sonner';
import { SessionProvider, CompanyProvider, useSession } from '@/lib/session';
import { App } from './App';
import './index.css';

const qc = new QueryClient({ defaultOptions: { queries: { staleTime: 15_000, refetchOnWindowFocus: true, retry: 1 } } });

function Providers() {
  const { session } = useSession();
  // Company context only exists once signed in; keyed by user so switching accounts resets it.
  return session ? <CompanyProvider key={session.user.id}><App /></CompanyProvider> : <App />;
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <QueryClientProvider client={qc}>
      <SessionProvider>
        <Providers />
        <Toaster position="top-center" richColors closeButton />
      </SessionProvider>
    </QueryClientProvider>
  </React.StrictMode>,
);

if ('serviceWorker' in navigator && import.meta.env.PROD) {
  window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js').catch(() => {}));
}