import { Agent, GlobalState, IShopifySession, IUser, OnboardingState,  } from "app/types";
import  { createContext, useContext, useState, ReactNode, useEffect } from "react";
import { useNavigate } from "react-router";


interface GlobalContextType extends GlobalState {
  setUser: (user: IUser | null) => void;
  setIsLoading: (loading: boolean) => void;
  setTheme: (theme: "light" | "dark") => void;
  setNotifications: (count: number) => void;
  updateOnboarding: (data: Partial<OnboardingState>) => void;
  completeOnboarding: () => void;
  setSession:(session:IShopifySession)=> void
  session: IShopifySession | null
  setAgent:(agent:Agent)=>void
  agent:Agent | null
}

const defaultState: GlobalState = {
  user: null,
  isLoading: false,
  theme: "light",
  notifications: 0,
  onboarding: null,
};

const AppContext = createContext<GlobalContextType | undefined>(undefined);

export function GlobalProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<IUser | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [theme, setTheme] = useState<"light" | "dark">("light");
  const [notifications, setNotifications] = useState(0);
  const [onboarding, setOnboarding] = useState<OnboardingState | null>(null);
  const [session,setSession] = useState<IShopifySession | null>(null)
  const [agent,setAgent]= useState<Agent | null>(null)

  const navigate = useNavigate()


  console.log("[AGENT DETAILS]", agent)

  // Load onboarding state on mount
  useEffect(() => {
    setIsLoading(true);
    const saved = localStorage.getItem("onboardingCompleted");
    setTimeout(() => {
      setOnboarding({
        isCompleted: saved === "true",
        currentStep: 1,
      });
      setIsLoading(false);
    }, 1000);
  }, []);

  const updateOnboarding = (data: Partial<OnboardingState>) => {
    setOnboarding((prev) => (prev ? { ...prev, ...data } : ({ ...data } as OnboardingState)));
  };

  const completeOnboarding = () => {
      navigate("/app")
  };

  const value = {
    user,
    isLoading,
    theme,
    notifications,
    onboarding,
    setUser,
    setIsLoading,
    setTheme,
    setNotifications,
    updateOnboarding,
    completeOnboarding,
    setSession,
    session,
    agent,
    setAgent
  };

  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
}

export function useGlobalContext() {
  const ctx = useContext(AppContext);
  if (!ctx) throw new Error("useGlobalContext must be used within GlobalProvider");
  return ctx;
}

export function useLoading() {
  const { isLoading, setIsLoading } = useGlobalContext();
  return { isLoading, setIsLoading };
}

export function useOnboarding() {
  const { onboarding, updateOnboarding, completeOnboarding } = useGlobalContext();
  return { onboarding, updateOnboarding, completeOnboarding };
}

// import React, { createContext, useContext, useState, ReactNode, useEffect } from "react";

// interface User {
//   id: string;
//   name: string;
//   email: string;
// }

// interface OnboardingState {
//   isCompleted: boolean;
//   currentStep: number;
//   bussinessType?: string;
//   channel?: string;
//   supportAgent?: string;
// }

// interface GlobalState {
//   user: User | null;
//   isLoading: boolean;
//   theme: "light" | "dark";
//   notifications: number;
//   onboarding: OnboardingState | null;
// }

// interface GlobalContextType extends GlobalState {
//   setUser: (user: User | null) => void;
//   setIsLoading: (loading: boolean) => void;
//   setTheme: (theme: "light" | "dark") => void;
//   setNotifications: (count: number) => void;
//   updateOnboarding: (data: Partial<OnboardingState>) => void;
//   completeOnboarding: () => void;
// }

// const defaultState: GlobalState = {
//   user: null,
//   isLoading: false,
//   theme: "light",
//   notifications: 0,
//   onboarding: null,
// };

// const AppContext = createContext<GlobalContextType | undefined>(undefined);

// interface GlobalProviderProps {
//   children: ReactNode;
// }

// export function GlobalProvider({ children }: GlobalProviderProps) {
//   const [user, setUser] = useState<User | null>(defaultState.user);
//   const [isLoading, setIsLoading] = useState(defaultState.isLoading);
//   const [theme, setTheme] = useState<"light" | "dark">(defaultState.theme);
//   const [notifications, setNotifications] = useState(defaultState.notifications);
//   const [onboarding, setOnboarding] = useState<OnboardingState | null>(defaultState.onboarding);

//   const updateOnboarding = (data: Partial<OnboardingState>) => {
//     setOnboarding((prev) => (prev ? { ...prev, ...data } : ({ ...data } as OnboardingState)));
//   };

//   const completeOnboarding = () => {
//     setOnboarding((prev) =>
//       prev ? { ...prev, isCompleted: true } : { isCompleted: true, currentStep: 1 }
//     );

//   localStorage.setItem("onboardingCompleted", "true");
//   };

//   useEffect(() => {
//     setIsLoading(true);
//     const setData = setTimeout(() => {
//       setOnboarding({ isCompleted: false, currentStep: 1 });
//       setIsLoading(false);
//     }, 1000);

//     return () => clearTimeout(setData);
//   }, []);

//   const value = {
//     // State
//     user,
//     isLoading,
//     theme,
//     notifications,
//     // Actions
//     setUser,
//     setIsLoading,
//     setTheme,
//     setNotifications,
//     onboarding,
//     updateOnboarding,
//     completeOnboarding,
//   };

//   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
// }

// export function useGlobalContext() {
//   const context = useContext(AppContext);
//   if (context === undefined) {
//     throw new Error("useGlobalContext must be used within an AppProvider");
//   }
//   return context;
// }

// // Example usage of a custom hook using the context
// export function useUser() {
//   const { user, setUser } = useGlobalContext();
//   return { user, setUser };
// }

// export function useTheme() {
//   const { theme, setTheme } = useGlobalContext();
//   return { theme, setTheme };
// }

// export function useLoading() {
//   const { isLoading, setIsLoading } = useGlobalContext();
//   return { isLoading, setIsLoading };
// }

// export function useNotifications() {
//   const { notifications, setNotifications } = useGlobalContext();
//   return { notifications, setNotifications };
// }

// export function useOnboarding() {
//   const { onboarding, updateOnboarding, completeOnboarding } = useGlobalContext();
//   return { onboarding, updateOnboarding, completeOnboarding };
// }