import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
import "./index.css";
import { isLoggedIn } from "./api/client";
import { AppShell } from "./components/AppShell";
import { LoginPage } from "./pages/LoginPage";
import { HomePage } from "./pages/HomePage";
import { BandPage } from "./pages/BandPage";
import { BandSettingsPage } from "./pages/BandSettingsPage";
import { SessionPage } from "./pages/SessionPage";
import { SongPage } from "./pages/SongPage";
import { SettingsPage } from "./pages/SettingsPage";
import { InvitePage } from "./pages/InvitePage";

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: 1, staleTime: 30_000 } },
});

function PrivateRoute({ children }: { children: React.ReactNode }) {
  return isLoggedIn() ? <>{children}</> : <Navigate to="/login" replace />;
}

function ShellRoute({ children }: { children: React.ReactNode }) {
  return (
    <PrivateRoute>
      <AppShell>{children}</AppShell>
    </PrivateRoute>
  );
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>
        <Routes>
          <Route path="/login" element={<LoginPage />} />
          <Route path="/invite/:token" element={<InvitePage />} />
          <Route
            path="/"
            element={
              <ShellRoute>
                <HomePage />
              </ShellRoute>
            }
          />
          <Route
            path="/bands/:bandId"
            element={
              <ShellRoute>
                <BandPage />
              </ShellRoute>
            }
          />
          <Route
            path="/bands/:bandId/settings"
            element={<Navigate to="members" replace />}
          />
          <Route
            path="/bands/:bandId/settings/:panel"
            element={
              <ShellRoute>
                <BandSettingsPage />
              </ShellRoute>
            }
          />
          <Route
            path="/bands/:bandId/sessions/:sessionId"
            element={
              <ShellRoute>
                <SessionPage />
              </ShellRoute>
            }
          />
          <Route
            path="/bands/:bandId/songs/:songId"
            element={
              <ShellRoute>
                <SongPage />
              </ShellRoute>
            }
          />
          <Route
            path="/settings"
            element={
              <ShellRoute>
                <SettingsPage />
              </ShellRoute>
            }
          />
        </Routes>
      </BrowserRouter>
    </QueryClientProvider>
  );
}