// src/providers.tsx
"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { useAuthStore } from "@/stores/auth";
import { useEffect, useState } from "react";
import { api } from "@/lib/api";
import Cookies from "js-cookie";

export function Providers({ children }: { children: React.ReactNode }) {
  // 상태 초기화 여부를 추적
  const [isInitialized, setIsInitialized] = useState(false);

  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            staleTime: 60 * 1000,
            retry: 1,
            refetchOnWindowFocus: false,
          },
        },
      })
  );

  // 앱 시작시 인증 상태 초기화
  useEffect(() => {
    try {
      const savedToken = localStorage.getItem("token");
      if (savedToken) {
        // localStorage와 쿠키의 토큰을 동기화
        useAuthStore.setState({ token: savedToken });
        Cookies.set("token", savedToken, { path: "/" });
      }
    } catch (error) {
      console.error("Failed to initialize auth state:", error);
    } finally {
      setIsInitialized(true);
    }
  }, []);

  const clearAuth = useAuthStore((state) => state.clearAuth);

  // API 인터셉터 설정
  useEffect(() => {
    if (!isInitialized) return; // 초기화가 완료된 후에만 인터셉터 설정

    // 요청 인터셉터
    const requestInterceptor = api.interceptors.request.use(
      (config) => {
        const currentToken = useAuthStore.getState().token;
        if (currentToken) {
          config.headers.Authorization = `Bearer ${currentToken}`;
        }
        return config;
      },
      (error) => {
        return Promise.reject(error);
      }
    );

    // 응답 인터셉터
    const responseInterceptor = api.interceptors.response.use(
      (response) => response,
      (error) => {
        if (error.response?.status === 401) {
          clearAuth();
          localStorage.removeItem("token");
          Cookies.remove("token", { path: "/" });

          // 필요한 경우 로그인 페이지로 리디렉션
          if (typeof window !== "undefined") {
            window.location.href = "/login";
          }
        }
        return Promise.reject(error);
      }
    );

    return () => {
      api.interceptors.request.eject(requestInterceptor);
      api.interceptors.response.eject(responseInterceptor);
    };
  }, [isInitialized, clearAuth]);

  // 초기화가 완료될 때까지 로딩 상태를 표시할 수 있습니다
  if (!isInitialized) {
    return null; // 또는 로딩 컴포넌트
  }

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      {process.env.NODE_ENV === "development" && <ReactQueryDevtools />}
    </QueryClientProvider>
  );
}
