import { useEffect } from "react";
import { BrowserRouter, Navigate, Outlet, Route, Routes } from "react-router-dom";
import { AppShell } from "@/components/layout/AppShell";
import { Login } from "@/pages/Login";
import { Dashboard } from "@/pages/Dashboard";
import { Stacks } from "@/pages/Stacks";
import { StackDetail } from "@/pages/StackDetail";
import { StackEditor } from "@/pages/StackEditor";
import { Images } from "@/pages/Images";
import { Files } from "@/pages/Files";
import { Volumes } from "@/pages/Volumes";
import { Templates } from "@/pages/Templates";
import { Settings } from "@/pages/Settings";
import { Audit } from "@/pages/Audit";
import { Networks } from "@/pages/Networks";
import { useAuthStore } from "@/store/auth";
import { useThemeStore } from "@/store/theme";

function RequireAuth() {
  const token = useAuthStore((s) => s.accessToken);
  const ready = useAuthStore((s) => s.ready);
  // The access token lives in memory, so on a reload we have nothing until the
  // cookie-based restore has run. Bouncing to /login before that would sign
  // people out on every refresh.
  if (!ready) return <BootSplash />;
  return token ? <Outlet /> : <Navigate to="/login" replace />;
}

function BootSplash() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-bg dark:bg-bg-dark">
      <span className="sr-only">Restoring your session…</span>
      <div
        aria-hidden="true"
        className="h-8 w-8 animate-spin rounded-full border-2 border-slate-300 border-t-accent dark:border-slate-600 dark:border-t-accent-dark"
      />
    </div>
  );
}

export default function App() {
  const applyTheme = useThemeStore((s) => s.apply);
  const restore = useAuthStore((s) => s.restore);

  useEffect(() => {
    applyTheme();
  }, [applyTheme]);

  // Trade the httpOnly refresh cookie for an access token once on boot.
  useEffect(() => {
    restore();
  }, [restore]);

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route element={<RequireAuth />}>
          <Route element={<AppShell />}>
            <Route path="/" element={<Dashboard />} />
            <Route path="/stacks" element={<Stacks />} />
            <Route path="/stacks/new" element={<StackEditor />} />
            <Route path="/stacks/:id" element={<StackDetail />} />
            <Route path="/stacks/:id/edit" element={<StackEditor />} />
            <Route path="/networks" element={<Networks />} />
            <Route path="/images" element={<Images />} />
            <Route path="/volumes" element={<Volumes />} />
            <Route path="/files" element={<Files />} />
            <Route path="/templates" element={<Templates />} />
            <Route path="/audit" element={<Audit />} />
            <Route path="/settings" element={<Settings />} />
          </Route>
        </Route>
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </BrowserRouter>
  );
}