import React from "react";
import ReactDOM from "react-dom/client";
import { Toaster } from "sonner";
import App from "./App";
import "./index.css";
import { ThemeProvider } from "@/context/ThemeContext";

import {
  QueryClient,
  QueryClientProvider
} from "@tanstack/react-query";

// 🔥 Create Query Client with smart defaults
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5 mins (no refetch when going back)
      cacheTime: 1000 * 60 * 30, // keep cache for 30 mins
      refetchOnWindowFocus: false, // ❌ no reload on tab switch
      refetchOnMount: false, // ❌ no reload when component remounts
      refetchOnReconnect: false // ❌ no reload on network reconnect
    }
  }
});

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <ThemeProvider>
        <App />
        <Toaster richColors position="top-right" />
      </ThemeProvider>
    </QueryClientProvider>
  </React.StrictMode>
);