import { jsx } from 'react/jsx-runtime';
import { useRef, useState, useCallback } from 'react';
import { useReducedMotion, useMotionValue, useSpring, motion } from 'motion/react';
import { cn } from '../../../utils/cn.js';

/**
 * Spotlight Component
 *
 * A mouse-following radial gradient that creates a subtle surface illumination
 * effect. Tracks the mouse position within the parent element and renders a
 * smooth, animated glow that follows the cursor.
 *
 * The parent container should have `position: relative` and `overflow: hidden`.
 *
 * Unlike SpotlightBorder (which highlights borders), this component illuminates
 * the surface area itself with a soft radial gradient.
 *
 * @example
 * ```tsx
 * <div className="relative overflow-hidden bg-gray-900 rounded-lg p-8">
 *   <Spotlight color="var(--color-primary)" intensity={0.2} />
 *   <span className="relative z-10">Hover over me</span>
 * </div>
 * ```
 *
 * @example Custom spring and size
 * ```tsx
 * <div className="relative overflow-hidden bg-slate-800 rounded-xl p-12">
 *   <Spotlight
 *     size={500}
 *     color="#8b5cf6"
 *     intensity={0.25}
 *     springConfig={{ damping: 20, stiffness: 150 }}
 *   />
 *   <h2 className="relative z-10 text-white">Interactive card</h2>
 * </div>
 * ```
 */
const Spotlight = ({ size = 300, color = "var(--color-primary)", intensity = 0.15, springConfig = { damping: 30, stiffness: 200 }, className, style, ...props }) => {
    var _a, _b, _c, _d;
    const shouldReduceMotion = useReducedMotion();
    const containerRef = useRef(null);
    const [isHovered, setIsHovered] = useState(false);
    // Raw mouse position motion values
    const mouseX = useMotionValue(0);
    const mouseY = useMotionValue(0);
    // Spring-animated values for smooth following
    const springX = useSpring(mouseX, {
        damping: (_a = springConfig.damping) !== null && _a !== void 0 ? _a : 30,
        stiffness: (_b = springConfig.stiffness) !== null && _b !== void 0 ? _b : 200,
    });
    const springY = useSpring(mouseY, {
        damping: (_c = springConfig.damping) !== null && _c !== void 0 ? _c : 30,
        stiffness: (_d = springConfig.stiffness) !== null && _d !== void 0 ? _d : 200,
    });
    // Use raw values when reduced motion is preferred
    const x = shouldReduceMotion ? mouseX : springX;
    const y = shouldReduceMotion ? mouseY : springY;
    const handleMouseMove = useCallback((event) => {
        var _a;
        const parent = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
        if (!parent)
            return;
        const rect = parent.getBoundingClientRect();
        mouseX.set(event.clientX - rect.left);
        mouseY.set(event.clientY - rect.top);
    }, [mouseX, mouseY]);
    const handleMouseEnter = useCallback((event) => {
        var _a;
        // Set position immediately on enter to avoid animating from origin
        const parent = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
        if (parent) {
            const rect = parent.getBoundingClientRect();
            const posX = event.clientX - rect.left;
            const posY = event.clientY - rect.top;
            mouseX.set(posX);
            mouseY.set(posY);
            // Jump springs to current position to avoid initial slide-in
            if (!shouldReduceMotion) {
                springX.jump(posX);
                springY.jump(posY);
            }
        }
        setIsHovered(true);
    }, [mouseX, mouseY, springX, springY, shouldReduceMotion]);
    const handleMouseLeave = useCallback(() => {
        setIsHovered(false);
    }, []);
    const halfSize = size / 2;
    return (jsx("div", { ref: containerRef, className: cn("absolute inset-0 pointer-events-none", className), style: {
            // Re-enable pointer events so we can track mouse within this layer.
            // The layer itself is visually transparent to interaction.
            pointerEvents: "auto",
            ...style,
        }, onMouseMove: handleMouseMove, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "aria-hidden": "true", ...props, children: jsx(motion.div, { className: "absolute pointer-events-none", style: {
                width: size,
                height: size,
                borderRadius: "50%",
                x,
                y,
                marginLeft: -halfSize,
                marginTop: -halfSize,
                background: `radial-gradient(circle at center, ${color}, transparent 70%)`,
                opacity: isHovered ? intensity : 0,
                transition: shouldReduceMotion
                    ? "opacity 0s"
                    : "opacity 0.3s ease-in-out",
            } }) }));
};
Spotlight.displayName = "Spotlight";

export { Spotlight };
