import { Toaster } from 'react-hot-toast'
import { useMemo } from 'react'
import AppRoutes from './routes/AppRoutes.jsx'
import { AuthProvider } from './context/AuthProvider.jsx'

import { useGlobalStore } from './context/useGlobalStore.js'

export default function App() {
  const globalLoading = useGlobalStore((s) => s.globalLoading)

  // Route tree is mounted inside AuthProvider to allow protected routing.
  const routes = useMemo(() => <AppRoutes />, [])

  return (
    <AuthProvider>
      <Toaster position="top-right" toastOptions={{ duration: 4000 }} />
      {globalLoading ? (
        <div className="pointer-events-none fixed inset-0 z-50 flex items-center justify-center bg-black/20">
          <div className="flex items-center gap-3 rounded-xl bg-white px-5 py-4 shadow-lg">
            <div className="h-5 w-5 animate-spin rounded-full border-2 border-slate-300 border-t-slate-900" />
            <p className="text-sm font-medium text-slate-800">Loading…</p>
          </div>
        </div>
      ) : null}
      {routes}
    </AuthProvider>
  )
}

