import { StrictMode, useEffect } from "react"
import ReactDOM from "react-dom/client"
import { BrowserRouter, Routes, Route, useLocation } from "react-router"
import { HomePage } from "@/pages/home"
import { AboutPage } from "@/pages/about"
import BlogTemplate from "./templates/BlogTemplate"
import "./index.css"
import { PostsPage } from "./pages/posts"
import TagTemplate from "./templates/TagTemplate"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 15 * 60 * 1000, // 15 minutes
      retry: 3,
      refetchOnWindowFocus: false,
    },
  },
})

export default function ScrollToTop() {
  const { pathname } = useLocation()

  useEffect(() => {
    window.scrollTo(1, 1)
  }, [pathname])

  return null
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <BrowserRouter>
      <ScrollToTop />
      <QueryClientProvider client={queryClient}>
        <Routes>
          <Route index element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
          <Route path="/posts" element={<PostsPage />} />
          <Route path="/posts/:slug" element={<BlogTemplate />} />
          <Route path="/tags/:tag" element={<TagTemplate />} />
        </Routes>

        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </BrowserRouter>
  </StrictMode>
)