/**
 * useElementEffects Hook
 *
 * Manages element interactive effects (hover, focus, active) at runtime.
 * Since CSS pseudo-classes don't work with inline styles, this hook
 * handles state-based style application via JavaScript events.
 */

import { useCallback, useState } from 'react';
import type { CSSProperties } from 'react';
import {
  buildHoverStyle,
  buildFocusStyle,
  buildActiveStyle,
  buildTransitionStyle,
  hasHoverEffects,
  hasFocusEffects,
  hasActiveEffects,
  type ElementEffectProperties,
} from '../lib/elementEffects';

interface ElementEffectState {
  isHovered: boolean;
  isFocused: boolean;
  isActive: boolean;
}

interface UseElementEffectsResult {
  /** Current effect style to merge with base element style */
  effectStyle: CSSProperties;
  /** Event handlers to attach to the element */
  eventHandlers: {
    onMouseEnter: () => void;
    onMouseLeave: () => void;
    onFocus: () => void;
    onBlur: () => void;
    onMouseDown: () => void;
    onMouseUp: () => void;
  };
}

/**
 * Hook for managing element interactive effects.
 *
 * @param effects - Element effect properties
 * @returns Object with effectStyle and eventHandlers
 *
 * @example
 * const { effectStyle, eventHandlers } = useElementEffects(element);
 * return (
 *   <div style={{ ...baseStyle, ...effectStyle }} {...eventHandlers}>
 *     {content}
 *   </div>
 * );
 */
export function useElementEffects(
  effects: Partial<ElementEffectProperties>,
): UseElementEffectsResult {
  const [state, setState] = useState<ElementEffectState>({
    isHovered: false,
    isFocused: false,
    isActive: false,
  });

  const onMouseEnter = useCallback(() => {
    setState((prev) => ({ ...prev, isHovered: true }));
  }, []);

  const onMouseLeave = useCallback(() => {
    setState((prev) => ({ ...prev, isHovered: false, isActive: false }));
  }, []);

  const onFocus = useCallback(() => {
    setState((prev) => ({ ...prev, isFocused: true }));
  }, []);

  const onBlur = useCallback(() => {
    setState((prev) => ({ ...prev, isFocused: false }));
  }, []);

  const onMouseDown = useCallback(() => {
    setState((prev) => ({ ...prev, isActive: true }));
  }, []);

  const onMouseUp = useCallback(() => {
    setState((prev) => ({ ...prev, isActive: false }));
  }, []);

  // Build effective style based on current state
  // Priority: active > focus > hover > base
  let effectStyle: CSSProperties = {};

  // Add transition for smooth effect changes
  if (
    hasHoverEffects(effects) ||
    hasFocusEffects(effects) ||
    hasActiveEffects(effects)
  ) {
    effectStyle = { ...effectStyle, ...buildTransitionStyle(effects) };
  }

  // Apply hover effects when hovered (but not active)
  if (state.isHovered && !state.isActive && hasHoverEffects(effects)) {
    effectStyle = { ...effectStyle, ...buildHoverStyle(effects) };
  }

  // Apply focus effects when focused
  if (state.isFocused && hasFocusEffects(effects)) {
    effectStyle = { ...effectStyle, ...buildFocusStyle(effects) };
  }

  // Apply active effects when pressed (highest priority)
  if (state.isActive && hasActiveEffects(effects)) {
    effectStyle = { ...effectStyle, ...buildActiveStyle(effects) };
  }

  return {
    effectStyle,
    eventHandlers: {
      onMouseEnter,
      onMouseLeave,
      onFocus,
      onBlur,
      onMouseDown,
      onMouseUp,
    },
  };
}
