import React, { useRef, useState } from 'react';

export const SpotlightCard = ({ children, className = "", spotlightColor = "rgba(255, 255, 255, 0.25)", rounded = "rounded-3xl" }) => {
    const divRef = useRef(null);
    const [position, setPosition] = useState({ x: 0, y: 0 });
    const [opacity, setOpacity] = useState(0);

    const handleMouseMove = (e) => {
        if (!divRef.current) return;

        const div = divRef.current;
        const rect = div.getBoundingClientRect();

        setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
    };

    const handleFocus = () => {
        setOpacity(1);
    };

    const handleBlur = () => {
        setOpacity(0);
    };

    const handleMouseEnter = () => {
        setOpacity(1);
    };

    const handleMouseLeave = () => {
        setOpacity(0);
    };

    // Calculate inner rounding based on outer rounding
    // If rounded-3xl (24px), inner should be ~22px
    // If rounded-none (0px), inner should be 0px
    const innerRounded = rounded === "rounded-none" ? "rounded-none" : "rounded-[22px]";

    return (
        <div
            ref={divRef}
            onMouseMove={handleMouseMove}
            onFocus={handleFocus}
            onBlur={handleBlur}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
            // Light: bg-white, Dark: bg-zinc-800
            className={`group relative ${rounded} bg-white dark:bg-zinc-800 overflow-hidden shadow-sm dark:shadow-none ${className}`}
        >
            {/* 
        Rainbow Glow Layer 
        - Background: Full conic RGB rainbow (Works on both, provides the color)
        - Mask reveals transparency
      */}
            <div
                className='pointer-events-none absolute inset-0 opacity-0 transition duration-300'
                style={{
                    opacity,
                    background: `conic-gradient(from 0deg, #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)`,
                    WebkitMaskImage: `radial-gradient(500px circle at ${position.x}px ${position.y}px, black, transparent 40%)`,
                    maskImage: `radial-gradient(500px circle at ${position.x}px ${position.y}px, black, transparent 40%)`,
                }}
            />

            {/* 
        Inner Mask (Content Container) 
        - Light Mode: bg-white/90 (Opaque white with slight blur)
        - Dark Mode: bg-zinc-950/90
      */}
            <div className={`absolute inset-[2px] ${innerRounded} bg-white/90 dark:bg-zinc-950/90 backdrop-blur-xl z-10 transition-colors duration-300`} />

            {/* Surface Shine (Subtle top sheen) */}
            <div
                className='pointer-events-none absolute inset-0 opacity-0 transition duration-300 z-20 mix-blend-overlay'
                style={{
                    opacity,
                    background: `radial-gradient(400px circle at ${position.x}px ${position.y}px, rgba(255,255,255,0.3), transparent 40%)`,
                }}
            />

            {/* Light Mode Border (to separate card when not glowing) */}
            <div className="absolute inset-0 rounded-3xl border border-zinc-200 dark:border-transparent pointer-events-none z-20" />

            {/* Content */}
            <div className="relative h-full z-30 flex flex-col">
                {children}
            </div>
        </div>
    );
};