import { useState, useRef, useEffect, useCallback } from 'react';

/**
 * Custom hook for managing ripple effects on button clicks
 *
 * @param config - Optional ripple configuration
 * @returns Object containing ripples array and createRipple handler
 *
 * @example
 * ```tsx
 * const { ripples, createRipple } = useRipple({ scale: 12, duration: 700 });
 *
 * <button onClick={createRipple}>
 *   {ripples.map((ripple) => (
 *     <RippleSpan key={ripple.id} ripple={ripple} />
 *   ))}
 * </button>
 * ```
 */
function useRipple(config = {}) {
    const { scale = 10, duration = 600, effect = 'default' } = config;
    const [ripples, setRipples] = useState([]);
    const buttonRef = useRef(null);
    const timeoutsRef = useRef([]);
    // Cleanup all pending timeouts on unmount
    useEffect(() => {
        return () => {
            timeoutsRef.current.forEach(clearTimeout);
        };
    }, []);
    const createRipple = useCallback((event) => {
        const button = buttonRef.current;
        if (!button)
            return;
        // Calculate click position relative to button
        const rect = button.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;
        const baseId = Date.now();
        let newRipples = [];
        let maxDuration = duration;
        // Create ripples based on effect type
        switch (effect) {
            case 'aurora':
                // Triple layer with staggered timing
                newRipples = [
                    { id: baseId, x, y, layer: 1 },
                    { id: baseId + 1, x, y, layer: 2 },
                    { id: baseId + 2, x, y, layer: 3 },
                ];
                maxDuration = 800; // Longest layer duration
                break;
            case 'particle':
                // Multiple small ripples at random offsets (random values stored for stable renders)
                newRipples = Array.from({ length: 6 }, (_, i) => ({
                    id: baseId + i,
                    x: x + (Math.random() - 0.5) * 20,
                    y: y + (Math.random() - 0.5) * 20,
                    layer: i + 1,
                    randomScale: Math.random(),
                    randomDuration: Math.random(),
                }));
                maxDuration = 700;
                break;
            case 'glass':
                // Expanding outer + shrinking inner
                newRipples = [
                    { id: baseId, x, y, layer: 1 }, // Outer expanding
                    { id: baseId + 1, x, y, layer: 2 }, // Inner shrinking
                ];
                maxDuration = 600;
                break;
            case 'neon':
                // Glowing multi-color layers
                newRipples = [
                    { id: baseId, x, y, layer: 1 }, // Inner glow
                    { id: baseId + 1, x, y, layer: 2 }, // Middle
                    { id: baseId + 2, x, y, layer: 3 }, // Outer halo
                ];
                maxDuration = 700;
                break;
            case 'echo':
                // Primary + delayed echoes
                newRipples = [{ id: baseId, x, y, layer: 1 }];
                maxDuration = 800;
                // Spawn echo ripples with delays
                timeoutsRef.current.push(setTimeout(() => {
                    setRipples((prev) => [...prev, { id: baseId + 10, x, y, layer: 2 }]);
                }, 100), setTimeout(() => {
                    setRipples((prev) => [...prev, { id: baseId + 20, x, y, layer: 3 }]);
                }, 200));
                break;
            case 'default':
            default:
                // Single ripple (original behavior)
                newRipples = [{ id: baseId, x, y, layer: 1 }];
                maxDuration = duration;
                break;
        }
        setRipples((prev) => [...prev, ...newRipples]);
        // Auto-remove all ripples after longest animation completes
        timeoutsRef.current.push(setTimeout(() => {
            setRipples((prev) => prev.filter((r) => r.id < baseId || r.id > baseId + 30));
        }, maxDuration));
    }, [duration, effect]);
    return {
        ripples,
        createRipple,
        buttonRef,
        scale,
        duration,
        effect,
    };
}
/**
 * Get ripple color classes based on button variant and color
 */
function getRippleColorClass(variant, color) {
    // For filled buttons, use white ripple for contrast
    if (variant === "filled") {
        return "bg-white/30";
    }
    // For outline/soft buttons, use color-matched ripple
    switch (color) {
        case "primary":
            return "bg-[var(--color-primary)]/20";
        case "success":
            return "bg-[var(--color-success)]/20";
        case "warning":
            return "bg-[var(--color-warning)]/20";
        case "danger":
            return "bg-[var(--color-danger)]/20";
        case "neutral":
            return "bg-[var(--color-neutral-500)]/20";
        default:
            return "bg-[var(--color-primary)]/20";
    }
}
/**
 * Get animation properties for specific ripple effect and layer
 */
function getRippleAnimation(effect, ripple, baseScale) {
    var _a, _b, _c;
    const layer = (_a = ripple.layer) !== null && _a !== void 0 ? _a : 1;
    switch (effect) {
        case 'aurora':
            // Triple layer with different speeds and opacities
            if (layer === 1) {
                return {
                    initial: { scale: 0, opacity: 0.5 },
                    animate: { scale: baseScale * 0.9, opacity: 0 },
                    transition: { duration: 0.4, ease: "easeOut" },
                };
            }
            else if (layer === 2) {
                return {
                    initial: { scale: 0, opacity: 0.3 },
                    animate: { scale: baseScale, opacity: 0 },
                    transition: { duration: 0.6, ease: "easeOut" },
                };
            }
            else {
                return {
                    initial: { scale: 0, opacity: 0.2 },
                    animate: { scale: baseScale * 1.2, opacity: 0 },
                    transition: { duration: 0.8, ease: "easeOut" },
                };
            }
        case 'particle': {
            // Use pre-computed random values from ripple creation for stable renders
            const particleScale = baseScale * (0.7 + ((_b = ripple.randomScale) !== null && _b !== void 0 ? _b : 0.5) * 0.6);
            const particleDelay = layer * 0.025;
            const particleDuration = 0.5 + ((_c = ripple.randomDuration) !== null && _c !== void 0 ? _c : 0.5) * 0.2;
            return {
                initial: { scale: 0, opacity: 0.6 },
                animate: { scale: particleScale, opacity: 0 },
                transition: { duration: particleDuration, ease: "easeOut", delay: particleDelay },
            };
        }
        case 'glass':
            if (layer === 1) {
                // Outer expanding ring
                return {
                    initial: { scale: 0, opacity: 0.4 },
                    animate: { scale: baseScale, opacity: 0 },
                    transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }, // Custom easing
                };
            }
            else {
                // Inner collapsing circle
                return {
                    initial: { scale: 1, opacity: 0.3 },
                    animate: { scale: 0, opacity: 0 },
                    transition: { duration: 0.6, ease: "easeIn" },
                };
            }
        case 'neon':
            // Layered glow effect with blur
            if (layer === 1) {
                return {
                    initial: { scale: 0, opacity: 0.7 },
                    animate: { scale: baseScale * 0.7, opacity: 0 },
                    transition: { duration: 0.5, ease: "easeOut" },
                    className: "blur-sm",
                };
            }
            else if (layer === 2) {
                return {
                    initial: { scale: 0, opacity: 0.5 },
                    animate: { scale: baseScale * 0.9, opacity: 0 },
                    transition: { duration: 0.6, ease: "easeOut" },
                };
            }
            else {
                return {
                    initial: { scale: 0, opacity: 0.3 },
                    animate: { scale: baseScale * 1.1, opacity: 0 },
                    transition: { duration: 0.7, ease: "easeOut" },
                    className: "blur-[2px]",
                };
            }
        case 'echo':
            // Delayed waves with increasing size
            return {
                initial: { scale: 0, opacity: 0.4 - layer * 0.1 },
                animate: { scale: baseScale + layer * 0.3, opacity: 0 },
                transition: { duration: 0.6, ease: "easeOut" },
            };
        case 'default':
        default:
            return {
                initial: { scale: 0, opacity: 0.5 },
                animate: { scale: baseScale, opacity: 0 },
                transition: { duration: 0.6, ease: "easeOut" },
            };
    }
}

export { getRippleAnimation, getRippleColorClass, useRipple };
