Web-Frontend/client/src/App.jsx

import 'leaflet/dist/leaflet.css';
import { useEffect } from 'react';
import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
import { useRecipe, Grid, GridItem, useDialog, Flex, Heading } from "@chakra-ui/react";

// --- NEW AUTH IMPORTS ---
import useAuthStore from './store/authStore';
import ProtectedRoute from './components/layout/ProtectedRoute.jsx';

// Pages & Components
import Login from "@/pages/auth/Login.jsx";
import Sidebar from "./components/layout/Sidebar.jsx";
import DialogPopup from "@/components/dashboard/DialogPopup.jsx";
import Header from "@/components/layout/Header.jsx";
import Home from "./pages/home/Home.jsx";
import RegionalMap from "./pages/maps/RegionalMap.jsx";
import Volcano from "@/pages/volcano/Volcano.jsx";
import GlobalMap from "./pages/maps/GlobalMap.jsx";
import Admin from "./pages/admin/Admin.jsx";
import MyDashboard from "./pages/home/tabs/MyDashboard.jsx";
import Settings from "./pages/auth/Settings.jsx";

function AppFoundation() {
  const recipe = useRecipe({ key: "dashboard" });
  const styles = recipe();
  const dialog = useDialog();

  return (
    <>
      <DialogPopup dialog={dialog} />
      <Grid css={styles}
        templateRows="1fr 11fr"
        templateColumns="auto 1fr"
        height="100vh"
        width="100vw"
      >
        <GridItem rowSpan={1} colSpan={2}>
          <Header />
        </GridItem>
        <GridItem colSpan={1}>
          <Sidebar />
        </GridItem>
        <GridItem colSpan={1} width="100%" overflow="auto">
          <Outlet />
        </GridItem>
      </Grid>
    </>
  )
}

const Placeholder = ({ name }) => (
    <Flex width="100%" height="100%" align="center" justify="center">
        <Heading color="gray.500" _dark={{ color: "gray.200" }} size="lg">{name} Dashboard - Coming Soon</Heading>
    </Flex>
);

function App() {
    // 1. Pull the initialization function from Zustand
    const checkAuth = useAuthStore((state) => state.checkAuth);

    // 2. Ping Django to verify the HttpOnly cookie the moment the app boots
    useEffect(() => {
        checkAuth();
    }, [checkAuth]);

    return (
        <Routes>
            {/* --- Public Routes --- */}
            <Route path="/login" element={<Login />} />

            {/* --- SECURE ROUTES --- */}
            <Route element={<ProtectedRoute />}>

                {/* --- Non-Public Routes (Now completely locked down) --- */}
                <Route element={<AppFoundation />}>

                    <Route path="/home" element={<Home />}>
                        <Route index element={<MyDashboard />} />
                        <Route path="gas" element={<Placeholder name="Gas" />} />
                        <Route path="seismic" element={<Placeholder name="Seismic" />} />
                        <Route path="remote" element={<Placeholder name="Remote Sensing" />} />
                        <Route path="daily" element={<Placeholder name="Daily Activity" />} />
                    </Route>

                    <Route path="/settings" element={<Settings />} />

                    <Route path="/global-map" element={<GlobalMap />} />
                    <Route path="/regional-map" element={<RegionalMap />} />
                    <Route path="/volcano" element={<Volcano />} />
                    <Route path="/admin" element={<Admin />} />
                </Route>

            </Route>

            {/* --- Redirect Routes --- */}
            <Route path="/" element={<Navigate to="/home" replace />} />
        </Routes>
    );
}

export default App;