import { Center, Loader } from '@mantine/core'
import { createRouter, RouterProvider } from '@tanstack/react-router'
import { PostHogProvider } from 'posthog-js/react'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { GlobalErrorBoundary } from './components/error-boundary/GlobalErrorBoundary'
import { routeTree } from './routeTree.gen'

const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  defaultPendingComponent: () => (
    <Center h="80vh">
      <Loader size="lg" />
    </Center>
  ),
  defaultErrorComponent: GlobalErrorBoundary,
})

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

const rootElement = document.getElementById('app')!
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement)
  root.render(
    <React.StrictMode>
      <PostHogProvider
        apiKey={import.meta.env.VITE_PUBLIC_POSTHOG_KEY!}
        options={{
          api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST!,
          defaults: '2025-05-24',
          capture_exceptions: true,
          debug: import.meta.env.MODE === 'development',
          session_recording: {},
        }}>
        <RouterProvider router={router} />
      </PostHogProvider>
    </React.StrictMode>
  )
}