import * as Sentry from '@sentry/react'
import { QueryClientProvider } from '@tanstack/react-query'
import { RouterProvider } from '@tanstack/react-router'
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { listenAuthChanges } from './auth/session'
import { track, initAnalytics } from './lib/analytics'
import { env } from './lib/env'
import { initMonitoring, instrumentRouter } from './lib/monitoring'
import { queryClient } from './lib/queryClient'
import { router } from './router'
import '@fontsource/atkinson-hyperlegible-next/400.css'
import '@fontsource/atkinson-hyperlegible-next/700.css'
import './index.css'

initMonitoring(env)
instrumentRouter(router)
initAnalytics(env)
listenAuthChanges(router, queryClient)
track('app_opened', { standalone: matchMedia('(display-mode: standalone)').matches })

const root = document.getElementById('root')
if (!root) throw new Error('Root element not found')

createRoot(root, {
  // Last resort for errors outside every boundary; route errors are reported via defaultOnCatch.
  onUncaughtError: Sentry.reactErrorHandler((error) => console.error(error)),
}).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  </StrictMode>,
)