"use client";

import { createContext, useContext, type ReactNode } from "react";
import { useReducedMotion } from "@/app/hooks/useReducedMotion";
import { animationConfig } from "@/app/lib/animations/config";

/**
 * Animation Configuration Context
 * Provides global animation settings including reduced motion detection
 */
interface AnimationConfig {
  reducedMotion: boolean;
  easings: typeof animationConfig.easings;
  durations: typeof animationConfig.durations;
}

const AnimationContext = createContext<AnimationConfig | undefined>(undefined);

interface AnimationProviderProps {
  children: ReactNode;
}

/**
 * AnimationProvider
 *
 * Provider component that supplies global animation configuration through React context.
 * Automatically detects user's reduced motion preference and provides centralized
 * animation settings (easings, durations) to all child components.
 *
 * @example
 * ```tsx
 * // In app/layout.tsx
 * <AnimationProvider>
 *   <YourApp />
 * </AnimationProvider>
 * ```
 *
 * @see useAnimationConfig - Hook to consume this context
 */
export function AnimationProvider({ children }: AnimationProviderProps) {
  const reducedMotion = useReducedMotion();

  const config: AnimationConfig = {
    reducedMotion,
    easings: animationConfig.easings,
    durations: animationConfig.durations,
  };

  return (
    <AnimationContext.Provider value={config}>
      {children}
    </AnimationContext.Provider>
  );
}

/**
 * useAnimationConfig
 *
 * Hook to access global animation configuration from AnimationProvider context.
 * Provides reduced motion state, easing curves, and duration presets.
 *
 * @returns {AnimationConfig} Animation configuration object
 * @throws {Error} If used outside of AnimationProvider
 *
 * @example
 * ```tsx
 * function MyComponent() {
 *   const { reducedMotion, easings, durations } = useAnimationConfig();
 *
 *   return (
 *     <motion.div
 *       animate={{
 *         opacity: 1,
 *         y: reducedMotion ? 0 : 20
 *       }}
 *       transition={{
 *         duration: durations.normal,
 *         ease: easings.easeOut
 *       }}
 *     />
 *   );
 * }
 * ```
 */
export function useAnimationConfig(): AnimationConfig {
  const context = useContext(AnimationContext);

  if (context === undefined) {
    throw new Error("useAnimationConfig must be used within AnimationProvider");
  }

  return context;
}