import { QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { StrictMode, type ReactNode } from "react";
import { createRoot } from "react-dom/client";
import { Redirect, Route, Switch } from "wouter";
import { ApiError } from "./api.ts";
import { friendlyError } from "./format.ts";
import { Shell } from "./components/Shell.tsx";
import { useMe } from "./hooks.ts";
import { Changes } from "./routes/changes.tsx";
import { Library } from "./routes/library.tsx";
import { Lists } from "./routes/lists.tsx";
import { Log } from "./routes/log.tsx";
import { Login } from "./routes/login.tsx";
import { NotYet } from "./routes/not-yet.tsx";
import { Register } from "./routes/register.tsx";
import { SourceDetail, Sources } from "./routes/sources.tsx";

const queryClient: QueryClient = new QueryClient({
  queryCache: new QueryCache({
    // A 401 anywhere means the session ended: re-check who we are, which sends the user to sign in.
    onError: (e, query) => {
      if (e instanceof ApiError && e.status === 401 && query.queryKey[0] !== "me") void queryClient.invalidateQueries({ queryKey: ["me"] });
    },
  }),
  defaultOptions: {
    queries: {
      staleTime: 15_000,
      retry: (n, e) => !(e instanceof ApiError && e.status > 0 && e.status < 500) && n < 2,
    },
  },
});

function RequireAuth({ children }: { children: ReactNode }) {
  const me = useMe();
  if (me.isPending) return <div className="boot"><span className="logo">STTracker</span></div>;
  if (me.error instanceof ApiError && me.error.status === 401) return <Redirect to="/login" replace />;
  if (me.error) {
    return (
      <div className="auth">
        <div className="auth-card" role="alert">
          <span className="logo">STTracker</span>
          <h1>Can't load your library</h1>
          <p className="lede">{friendlyError(me.error)}</p>
          <button className="btn primary" onClick={() => void me.refetch()}>Try again</button>
        </div>
      </div>
    );
  }
  return <>{children}</>;
}

function App() {
  return (
    <Switch>
      <Route path="/login" component={Login} />
      <Route path="/register" component={Register} />
      <Route>
        <RequireAuth>
          <Shell>
            <Switch>
              <Route path="/">{() => <Library selectedId={null} />}</Route>
              <Route path="/entries/:id">{(p) => <Library selectedId={p.id} />}</Route>
              <Route path="/changes" component={Changes} />
              <Route path="/log" component={Log} />
              <Route path="/lists">{() => <Lists selectedId={null} />}</Route>
              <Route path="/lists/:id">{(p) => <Lists selectedId={p.id} />}</Route>
              <Route path="/sources" component={Sources} />
              <Route path="/sources/:id">{(p) => <SourceDetail key={p.id} id={p.id} />}</Route>
              <Route path="/:page/*?">{(p) => <NotYet page={p.page} />}</Route>
            </Switch>
          </Shell>
        </RequireAuth>
      </Route>
    </Switch>
  );
}

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </StrictMode>,
);