import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { LoginPage } from "./pages/Login";
import { VerifyRegistrationPage } from "./pages/VerifyRegistration";
import { RegisterPage } from "./pages/Register";
import { MapPage } from "./pages/Map";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { enableMapSet } from "immer";
import { mountStoreDevtool } from "simple-zustand-devtools";
import { useFilters } from "./stores/useFilters";
import { usePointSelection } from "./stores/usePointSelection";

const queryClient = new QueryClient();

enableMapSet();

if (import.meta.env.MODE === "development") {
  mountStoreDevtool("Filters", useFilters);
  mountStoreDevtool("PointSelection", usePointSelection);
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <BrowserRouter basename={import.meta.env.BASE_URL}>
        <Routes>
          <Route path="/" element={<MapPage />} />
          <Route path="/signin" element={<LoginPage />} />
          <Route path="/verify-user" element={<VerifyRegistrationPage />} />
          <Route path="/register" element={<RegisterPage />} />
        </Routes>
      </BrowserRouter>
    </QueryClientProvider>
  );
}

export default App;
