"use client";

import { useState, type ReactNode } from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { registerAuthQueryClient } from "@/features/auth/session";
import { ThemedToaster } from "@/components/themed-toaster";
import { createQueryClient } from "@/lib/query-client";

type AppProvidersProps = {
  children: ReactNode;
};

export function AppProviders({ children }: AppProvidersProps) {
  const [queryClient] = useState(() => {
    const client = createQueryClient();
    registerAuthQueryClient(client);
    return client;
  });

  return (
    <NextThemesProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
      storageKey="next-goal-theme"
    >
      <QueryClientProvider client={queryClient}>
        {children}
        <ThemedToaster />
        <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
      </QueryClientProvider>
    </NextThemesProvider>
  );
}