"use client";

import {
  QueryCache,
  QueryClient,
  QueryClientProvider,
  MutationCache,
} from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { AuthProvider, useAuthContext } from "@/context/auth-context";
import { Toaster } from "@/components/ui/sonner";
import { ApiRequestError } from "@/lib/api";

function QueryProvider({ children }: { children: React.ReactNode }) {
  const { setToken } = useAuthContext();
  const router = useRouter();

  const [queryClient] = useState(() => {
    const on401 = (error: unknown) => {
      if (error instanceof ApiRequestError && error.status === 401) {
        setToken(null);
        router.push("/login");
      }
    };
    return new QueryClient({
      queryCache: new QueryCache({ onError: on401 }),
      mutationCache: new MutationCache({ onError: on401 }),
      defaultOptions: { queries: { staleTime: 60 * 1000 } },
    });
  });

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <Toaster position="bottom-right" richColors />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <AuthProvider>
      <QueryProvider>{children}</QueryProvider>
    </AuthProvider>
  );
}