import { StrictMode, Suspense, lazy } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./index.css";
import { AuthProvider } from "./context/AuthContext";
import { Layout } from "./components/Layout";
import { GuestOnly, ProtectedRoute, SetupNotice } from "./components/Guards";
import { FullPageLoader, ToastProvider } from "./components/ui";
import Home from "./pages/Home";

const About = lazy(() => import("./pages/About"));
const Brothers = lazy(() => import("./pages/Brothers"));
const Memories = lazy(() => import("./pages/Memories"));
const Assistant = lazy(() => import("./pages/Assistant"));
const Login = lazy(() => import("./pages/auth/Login"));
const Register = lazy(() => import("./pages/auth/Register"));
const ForgotPassword = lazy(() => import("./pages/auth/ForgotPassword"));
const ResetPassword = lazy(() => import("./pages/auth/ResetPassword"));
const Messenger = lazy(() => import("./pages/Messenger"));
const Profile = lazy(() => import("./pages/Profile"));
const Admin = lazy(() => import("./pages/Admin"));
const NotFound = lazy(() => import("./pages/NotFound"));

function App() {
  return (
    <Suspense fallback={<FullPageLoader />}>
      <Routes>
        {/* Messenger is a full-screen app shell without the site chrome */}
        <Route path="/messenger" element={<ProtectedRoute><Messenger /></ProtectedRoute>} />
        <Route element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/brothers" element={<Brothers />} />
          <Route path="/memories" element={<Memories />} />
          <Route path="/assistant" element={<Assistant />} />
          <Route path="/login" element={<GuestOnly><Login /></GuestOnly>} />
          <Route path="/register" element={<GuestOnly><Register /></GuestOnly>} />
          <Route path="/forgot-password" element={<ForgotPassword />} />
          <Route path="/reset-password" element={<ResetPassword mode="reset" />} />
          <Route path="/accept-invite" element={<ResetPassword mode="invite" />} />
          <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
          <Route path="/admin" element={<ProtectedRoute admin><Admin /></ProtectedRoute>} />
          <Route path="/setup" element={<SetupNotice />} />
          <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
    </Suspense>
  );
}

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <BrowserRouter>
      <AuthProvider>
        <ToastProvider>
          <App />
        </ToastProvider>
      </AuthProvider>
    </BrowserRouter>
  </StrictMode>,
);