kanban-app/frontend/src/App.tsx

import { Routes, Route, Navigate } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { useApp } from './context/AppContext';
import { ModalProvider } from './context/modals/useModal';
import { ModalRoot } from './context/modals/ModalRoot';
import { ToastProvider } from './context/toasts/useToast';
import { ToastRoot } from './context/toasts/ToastRoot';
import { LoaderProvider } from './context/loaders/useLoader';
import { LoaderRoot } from './context/loaders/LoaderRoot';
import { Navbar } from './components/Navbar';
import { Home } from './pages/Home';
import Login from './pages/Login';
import { Register } from './pages/Register';
import { ProtectedRoute } from './components/ProtectedRoute';
import { Boards } from './pages/Boards';
import { BoardCreate } from './pages/BoardCreate';
import { BoardEdit } from './pages/BoardEdit';
import { BoardDetail } from './pages/BoardDetail';
import { BoardEpics } from './pages/BoardEpics';
import { CardDetail } from './pages/CardDetail';

const App = () => {
  const { token } = useApp();
  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);

  useEffect(() => {
    setIsAuthenticated(!!token);
  }, [token]);

  if (isAuthenticated === null) {
    return null;
  }
  return (
    <LoaderProvider>
      <ToastProvider>
        <ModalProvider>
          <div className="min-h-screen bg-gray-900 text-gray-100">
            <Navbar />
            <main>
              <Routes>
                <Route
                  path="/"
                  element={
                    isAuthenticated ? (
                      <Navigate to="/boards" replace />
                    ) : (
                      <Navigate to="/home" replace />
                    )
                  }
                />
                <Route path="/home" element={<Home />} />
                <Route path="/login" element={<Login />} />
                <Route path="/register" element={<Register />} />

                {/* Protected Routes */}
                <Route
                  path="/boards"
                  element={
                    <ProtectedRoute>
                      <Boards />
                    </ProtectedRoute>
                  }
                />
                <Route
                  path="/boards/new"
                  element={
                    <ProtectedRoute>
                      <BoardCreate />
                    </ProtectedRoute>
                  }
                />
                <Route
                  path="/boards/:id/edit"
                  element={
                    <ProtectedRoute>
                      <BoardEdit />
                    </ProtectedRoute>
                  }
                />
                <Route
                  path="/boards/:id"
                  element={
                    <ProtectedRoute>
                      <BoardDetail />
                    </ProtectedRoute>
                  }
                />
                <Route
                  path="/boards/:id/epics"
                  element={
                    <ProtectedRoute>
                      <BoardEpics />
                    </ProtectedRoute>
                  }
                />
                <Route
                  path="/boards/:id/cards/:cardId"
                  element={
                    <ProtectedRoute>
                      <CardDetail />
                    </ProtectedRoute>
                  }
                />
              </Routes>
            </main>
            {/* Order matters for Z-Index: Loader (70) > Toast (60) > Modal (50) */}
            <LoaderRoot />
            <ToastRoot />
            <ModalRoot />
          </div>
        </ModalProvider>
      </ToastProvider>
    </LoaderProvider>
  );
};

export default App;