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";
import WebAdmin from "./pages/auth/WebAdmin.jsx";
import DataExplorer from "@/pages/data_explorer/DataExplorer.jsx";

export default 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="/global-map" element={<GlobalMap/>}/>
          <Route path="/regional-map" element={<RegionalMap/>}/>
          <Route path="/volcano" element={<Volcano/>}/>
          <Route path="/admin" element={<Admin/>}/>
          <Route path="/data-explorer" element={<DataExplorer/>}/>
        </Route>

      </Route>

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

// The fundamental layout of the webpage
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">
        <GridItem rowSpan={2} colSpan={1}>
          <Sidebar/>
        </GridItem>
        <GridItem rowSpan={1} colSpan={1}>
          <Header/>
        </GridItem>
        <GridItem colSpan={1}>
          <Outlet/>
        </GridItem>
      </Grid>
    </>
  )
}

// A dummy page that acts as a placeholder for pages that aren't developed yet but are navigatable to
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>
);