import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

import { App } from '@/App';
import { initI18n } from '@/i18n';
import { env } from '@/config/env';
import { initSentry, Sentry } from '@/lib/sentry';

import '@/styles/index.css';

initSentry();

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 30_000,
      retry: (failureCount, error) => {
        if (error && typeof error === 'object' && 'status' in error) {
          const status = (error as { status?: number | null }).status ?? 0;
          if (status === 401 || status === 403 || status === 404 || status === 422) return false;
        }
        return failureCount < 2;
      },
      refetchOnWindowFocus: false,
    },
  },
});

async function bootstrap(): Promise<void> {
  await initI18n();

  const container = document.getElementById('root');
  if (!container) throw new Error('Missing #root container');

  createRoot(container).render(
    <StrictMode>
      <Sentry.ErrorBoundary
        fallback={
          <div className="flex min-h-dvh items-center justify-center p-8 text-center text-gray-500">
            Something went wrong. Reload the page.
          </div>
        }
      >
        <BrowserRouter>
          <QueryClientProvider client={queryClient}>
            <App />
            {env().features.queryDevtools ? <ReactQueryDevtools initialIsOpen={false} /> : null}
          </QueryClientProvider>
        </BrowserRouter>
      </Sentry.ErrorBoundary>
    </StrictMode>,
  );
}

void bootstrap();