"use client";

import * as React from "react";
import { motion, useMotionValue, useSpring } from "framer-motion";
import { cn } from "../../lib/utils";

export interface SpotlightCardProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
  spotlightColor?: string;
  spotlightSize?: number;
  spotlightIntensity?: number;
  borderRadius?: string;
}

const SpotlightCard = React.forwardRef<HTMLDivElement, SpotlightCardProps>(
  (
    {
      children,
      className,
      spotlightColor = "rgba(255, 255, 255, 0.15)",
      spotlightSize = 400,
      spotlightIntensity = 0.5,
      borderRadius = "0.5rem",
      style,
      ...props
    },
    ref
  ) => {
    const cardRef = React.useRef<HTMLDivElement>(null);
    const mouseX = useMotionValue(0);
    const mouseY = useMotionValue(0);

    const springConfig = { damping: 20, stiffness: 300 };
    const spotlightX = useSpring(mouseX, springConfig);
    const spotlightY = useSpring(mouseY, springConfig);

    const handleMouseMove = React.useCallback(
      (e: React.MouseEvent<HTMLDivElement>) => {
        if (!cardRef.current) return;

        const rect = cardRef.current.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        mouseX.set(x);
        mouseY.set(y);
      },
      [mouseX, mouseY]
    );

    const handleMouseLeave = React.useCallback(() => {
      // Optionally fade out the spotlight on mouse leave
      // For now, we'll keep it at the last position
    }, []);

    return (
      <motion.div
        ref={(el) => {
          cardRef.current = el;
          if (ref) {
            if (typeof ref === "function") ref(el);
            else ref.current = el;
          }
        }}
        className={cn(
          "relative overflow-hidden bg-card text-card-foreground",
          className
        )}
        style={{
          borderRadius,
          ...style,
        }}
        onMouseMove={handleMouseMove}
        onMouseLeave={handleMouseLeave}
        whileHover={{ scale: 1.02 }}
        transition={{ type: "spring", stiffness: 400, damping: 25 }}
        {...props}
      >
        {/* Spotlight overlay */}
        <motion.div
          className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 hover:opacity-100"
          style={{
            background: `radial-gradient(${spotlightSize}px circle at var(--x) var(--y), ${spotlightColor}, transparent ${spotlightIntensity * 100}%)`,
            "--x": spotlightX,
            "--y": spotlightY,
          } as React.CSSProperties}
        />

        {/* Border glow effect */}
        <motion.div
          className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 hover:opacity-100"
          style={{
            background: `radial-gradient(${spotlightSize * 1.5}px circle at var(--x) var(--y), ${spotlightColor}, transparent 40%)`,
            "--x": spotlightX,
            "--y": spotlightY,
            filter: "blur(40px)",
          } as React.CSSProperties}
        />

        {/* Card border */}
        <div
          className="absolute inset-0 rounded-[inherit] border border-border/50"
          style={{
            background: `radial-gradient(${spotlightSize * 2}px circle at var(--x) var(--y), rgba(255,255,255,0.1), transparent 40%)`,
            "--x": spotlightX,
            "--y": spotlightY,
          } as React.CSSProperties}
        />

        {/* Content */}
        <div className="relative z-10">{children}</div>
      </motion.div>
    );
  }
);

SpotlightCard.displayName = "SpotlightCard";

export { SpotlightCard };