import { StrictMode } from 'react'
import ReactDOM from 'react-dom/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { RouterProvider, createRouter } from '@tanstack/react-router'
import { configurado, supabase } from '@/lib/supabase'
import { ThemeProvider } from './context/theme-provider'
import { routeTree } from './routeTree.gen'
import './styles/index.css'

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: 1, staleTime: 10_000 } },
})

const router = createRouter({
  routeTree,
  context: { queryClient },
  defaultPreload: 'intent',
  defaultPreloadStaleTime: 0,
})

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

// Al cerrar sesión (aquí o porque caduca): fuera los datos guardados y se vuelven a comprobar las rutas
supabase.auth.onAuthStateChange((evento) => {
  if (evento === 'SIGNED_OUT') {
    queryClient.clear()
    void router.invalidate()
  }
})

function SinConfigurar() {
  return (
    <main className='grid min-h-svh place-items-center p-6 text-center'>
      <div className='max-w-md space-y-2'>
        <h1 className='text-xl font-bold'>Falta conectar la base de datos</h1>
        <p className='text-muted-foreground'>
          Crea el archivo <code>.env.local</code> con <code>VITE_SUPABASE_URL</code> y{' '}
          <code>VITE_SUPABASE_PUBLISHABLE_KEY</code> y vuelve a arrancar.
        </p>
      </div>
    </main>
  )
}

// En desarrollo, la recarga en caliente vuelve a ejecutar este archivo: se monta una sola vez
const raiz = document.getElementById('root')!
if (!raiz.innerHTML) ReactDOM.createRoot(raiz).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <ThemeProvider>{configurado ? <RouterProvider router={router} /> : <SinConfigurar />}</ThemeProvider>
    </QueryClientProvider>
  </StrictMode>
)