"use client";

import { ReactNode, useEffect, useState } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { persistQueryClient } from "@tanstack/react-query-persist-client";
import { createAsyncStoragePersister } from "@tanstack/query-async-storage-persister";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

interface Props {
	children: ReactNode;
}

export function ReactQueryProvider({ children }: Props) {
	const [queryClient] = useState(
		() =>
			new QueryClient({
				defaultOptions: {
					queries: {
						staleTime: 1000 * 60 * 5, // 5 minutes
						retry: true
					}
				}
			})
	);

	// will cause bun to SEGFAULT

	useEffect(() => {
		if (typeof window === "undefined") return;
		// Persist to localStorage (safe, runs client-side)
		const localStoragePersister = createAsyncStoragePersister({
			storage: window.localStorage
		});

		persistQueryClient({
			queryClient,
			persister: localStoragePersister,
			maxAge: 1000 * 60 * 60 // 1 hour max
		});
	}, [queryClient]);

	return (
		<QueryClientProvider client={queryClient}>
			{children}
			<ReactQueryDevtools initialIsOpen={false} client={queryClient} />
		</QueryClientProvider>
	);
}