import { useState } from "react";
import { Navigate, Route, Routes, useParams } from "react-router-dom";
import { Layout } from "./components/Layout";
import { LeaderboardPage } from "./pages/LeaderboardPage";
import { PlayerPage } from "./pages/PlayerPage";
import { MapsPage } from "./pages/MapsPage";
import { MapPage } from "./pages/MapPage";
import { SearchPage } from "./pages/SearchPage";
import { PointsPage } from "./pages/PointsPage";
import { NotFound } from "./components/States";

/** Old links looked like #/map/<name>/<stage>. */
function OldMapLink() {
  const { mapname, stage } = useParams();
  return <Navigate replace to={`/map/${encodeURIComponent(mapname ?? "")}?stage=${stage ?? 1}`} />;
}

export function App({ loginError }: { loginError: string | null }) {
  const [notice, setNotice] = useState(loginError);
  return (
    <Layout notice={notice} onDismissNotice={() => setNotice(null)}>
      <Routes>
        <Route path="/" element={<Navigate replace to="/leaderboard" />} />
        <Route path="/leaderboard" element={<LeaderboardPage />} />
        <Route path="/player/:steamid" element={<PlayerPage />} />
        <Route path="/maps" element={<MapsPage />} />
        <Route path="/mapboard" element={<Navigate replace to="/maps" />} />
        <Route path="/map/:mapname" element={<MapPage />} />
        <Route path="/map/:mapname/:stage" element={<OldMapLink />} />
        <Route path="/search" element={<SearchPage />} />
        <Route path="/points" element={<PointsPage />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Layout>
  );
}