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 { usePointSelection } from "./stores/usePointSelection";
import { usePendingPointsFilters } from "./stores/usePendingPointsFilters";
import { useOnApprovalPointsFilters } from "./stores/useOnApprovalPointsFilters";
import { useWorkingPointsFilters } from "./stores/useWorkingPointsFilters";

const queryClient = new QueryClient();

enableMapSet();

if (import.meta.env.MODE === "development") {
  mountStoreDevtool("PendingFilters", usePendingPointsFilters);
  mountStoreDevtool("OnApprovalFilters", useOnApprovalPointsFilters);
  mountStoreDevtool("WorkingFilters", useWorkingPointsFilters);
  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;