import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider, Outlet } from 'react-router-dom'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { RequireAuth } from './lib/auth.tsx'
import { ConsentGate } from './shared/components/ConsentGate'
import { PermissionGuard } from './shared/components/PermissionGuard'
import { ToastProvider } from './shared/components/Toast'
import { AppShell } from './shared/components/AppShell'
import { AnonLayout } from './shared/components/AnonLayout'
import { AuthPage } from './pages/auth'
import { HomePage } from './pages/home'
import { NotFoundPage, UnauthorizedPage, ForbiddenPage } from './pages/errors'
import { errorRouteHandles } from './pages/errors/errors.route'
import './shared/styles/tokens.css'
import './shared/styles/base.css'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: (failureCount, error) => {
        if ((error as Error & { status?: number })?.status === 401) return false
        return failureCount < 2
      },
    },
  },
})

const router = createBrowserRouter(
  [
    // ── Anonymous routes (no auth required) ──────────────────────────
    {
      path: '/login',
      element: <AuthPage />,
    },
    {
      element: (
        <AnonLayout>
          <Outlet />
        </AnonLayout>
      ),
      children: [
        {
          path: '/401',
          element: <UnauthorizedPage />,
          handle: { title: errorRouteHandles.unauthorized.title },
        },
        {
          path: '/403',
          element: <ForbiddenPage />,
          handle: { title: errorRouteHandles.forbidden.title },
        },
      ],
    },

    // ── Authenticated routes ──────────────────────────────────────────
    {
      path: '/',
      element: (
        <RequireAuth>
          <PermissionGuard>
            <ConsentGate>
              <AppShell>
                <Outlet />
              </AppShell>
            </ConsentGate>
          </PermissionGuard>
        </RequireAuth>
      ),
      children: [
        {
          index: true,
          element: <HomePage />,
          handle: {
            title: 'Home | Genesis Pharmacy Portal',
            breadcrumb: 'Home',
          },
        },
        {
          path: '*',
          element: <NotFoundPage />,
          handle: { title: errorRouteHandles.notFound.title },
        },
      ],
    },
  ],
  {
    future: {
      v7_startTransition: true,
      v7_relativeSplatPath: true,
    },
  }
)

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <ToastProvider>
        <RouterProvider router={router} future={{ v7_startTransition: true }} />
      </ToastProvider>
    </QueryClientProvider>
  </React.StrictMode>
)