import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import "./brand.css";

import Shell from "./components/Shell";
import Home from "./routes/Home";
import About from "./routes/About";
import Federations from "./routes/Federations";
import FederationDetail from "./routes/FederationDetail";
import Heroes from "./routes/Heroes";
import HeroDetail from "./routes/HeroDetail";
import Awards from "./routes/Awards";
import Events from "./routes/Events";
import EventDetail from "./routes/EventDetail";
import News from "./routes/News";
import ArticleDetail from "./routes/ArticleDetail";
import Blog from "./routes/Blog";
import BlogPost from "./routes/BlogPost";
import Login from "./routes/Login";
import Reset from "./routes/Reset";
import Admin from "./routes/Admin";
import Placeholder from "./routes/Placeholder";
import { AuthProvider } from "./lib/auth";

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

const router = createBrowserRouter([
  {
    path: "/",
    element: <Shell />,
    children: [
      { index: true, element: <Home /> },
      { path: "about", element: <About /> },
      { path: "federations", element: <Federations /> },
      { path: "federations/:id", element: <FederationDetail /> },
      { path: "heroes", element: <Heroes /> },
      { path: "heroes/:id", element: <HeroDetail /> },
      { path: "awards", element: <Awards /> },
      { path: "events", element: <Events /> },
      { path: "events/:id", element: <EventDetail /> },
      { path: "news", element: <News /> },
      { path: "news/:id", element: <ArticleDetail /> },
      { path: "blog", element: <Blog /> },
      { path: "blog/:id", element: <BlogPost /> },
      { path: "login", element: <Login /> },
      { path: "reset", element: <Reset /> },
      { path: "admin", element: <Admin /> },
      { path: "*", element: <Placeholder title="Page not found" /> },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <AuthProvider>
        <RouterProvider router={router} />
      </AuthProvider>
    </QueryClientProvider>
  </React.StrictMode>
);