"use client"

import React, { useRef, useState } from "react"
import { motion } from "framer-motion"
import { cn } from "../../lib/utils"
import { Card, CardContent } from "../ui/card"
import { Button } from "../ui/button"
import { Lock, Sparkles } from "lucide-react"
import { useSubscription } from "../../hooks/use-subscription"

export interface SpotlightCardProps extends React.HTMLAttributes<HTMLDivElement> {
  spotlightColor?: string
  spotlightSize?: number
  intensity?: number
  borderGlow?: boolean
}

const SpotlightCardInternal = React.forwardRef<HTMLDivElement, SpotlightCardProps>(
  ({ 
    children, 
    className, 
    spotlightColor = "rgba(255, 255, 255, 0.25)",
    spotlightSize = 300,
    intensity = 0.8,
    borderGlow = true,
    ...props 
  }, ref) => {
    const cardRef = useRef<HTMLDivElement>(null)
    const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
    const [isHovered, setIsHovered] = useState(false)

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

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

      setMousePosition({ x, y })
    }

    const handleMouseEnter = () => {
      setIsHovered(true)
    }

    const handleMouseLeave = () => {
      setIsHovered(false)
    }

    return (
      <motion.div
        ref={(node) => {
          cardRef.current = node
          if (typeof ref === "function") {
            ref(node)
          } else if (ref) {
            ref.current = node
          }
        }}
        className={cn(
          "relative overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm",
          className
        )}
        onMouseMove={handleMouseMove}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        whileHover={{ scale: 1.02 }}
        transition={{ duration: 0.2 }}
      >
        {/* Spotlight effect */}
        <motion.div
          className="absolute inset-0 pointer-events-none"
          animate={{
            opacity: isHovered ? intensity : 0,
          }}
          transition={{ duration: 0.3 }}
          style={{
            background: `radial-gradient(${spotlightSize}px circle at ${mousePosition.x}px ${mousePosition.y}px, ${spotlightColor}, transparent 70%)`,
          }}
        />

        {/* Secondary glow effect */}
        <motion.div
          className="absolute inset-0 pointer-events-none"
          animate={{
            opacity: isHovered ? intensity * 0.5 : 0,
          }}
          transition={{ duration: 0.4, delay: 0.1 }}
          style={{
            background: `radial-gradient(${spotlightSize * 1.5}px circle at ${mousePosition.x}px ${mousePosition.y}px, ${spotlightColor.replace('0.25', '0.1')}, transparent 80%)`,
          }}
        />

        {/* Border glow */}
        {borderGlow && (
          <motion.div
            className="absolute inset-0 rounded-lg pointer-events-none"
            animate={{
              opacity: isHovered ? 0.6 : 0,
            }}
            transition={{ duration: 0.3 }}
            style={{
              background: `linear-gradient(135deg, transparent 30%, ${spotlightColor.replace('0.25', '0.4')} 50%, transparent 70%)`,
              backgroundSize: '200% 200%',
              backgroundPosition: `${(mousePosition.x / cardRef.current?.offsetWidth!) * 100}% ${(mousePosition.y / cardRef.current?.offsetHeight!) * 100}%`,
            }}
          />
        )}

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

        {/* Subtle animated particles */}
        <motion.div
          className="absolute inset-0 pointer-events-none"
          animate={{
            opacity: isHovered ? 0.3 : 0,
          }}
          transition={{ duration: 0.5 }}
        >
          {[...Array(3)].map((_, i) => (
            <motion.div
              key={i}
              className="absolute w-1 h-1 bg-white rounded-full"
              animate={isHovered ? {
                x: [mousePosition.x, mousePosition.x + Math.random() * 100 - 50],
                y: [mousePosition.y, mousePosition.y + Math.random() * 100 - 50],
                opacity: [0, 1, 0],
                scale: [0, 1, 0],
              } : {}}
              transition={{
                duration: 2,
                delay: i * 0.2,
                repeat: isHovered ? Infinity : 0,
                ease: "easeOut"
              }}
              style={{
                left: mousePosition.x,
                top: mousePosition.y,
              }}
            />
          ))}
        </motion.div>
      </motion.div>
    )
  }
)

SpotlightCardInternal.displayName = "SpotlightCardInternal"

export const SpotlightCard = React.forwardRef<HTMLDivElement, SpotlightCardProps>(
  ({ className, ...props }, ref) => {
    // Check if we're in docs mode or have pro access
    const { hasProAccess, isLoading } = useSubscription()
    
    // In docs mode, always show the component
    
    // If not in docs mode and no pro access, show upgrade prompt
    if (!isLoading && !hasProAccess) {
      return (
        <Card className={cn("w-fit", className)}>
          <CardContent className="py-6 text-center">
            <div className="space-y-4">
              <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto">
                <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
              </div>
              <div>
                <h3 className="font-semibold text-sm mb-2">Pro Feature</h3>
                <p className="text-muted-foreground text-xs mb-4">
                  Spotlight Card is available exclusively to MoonUI Pro subscribers.
                </p>
                <a href="/pricing">
                  <Button size="sm">
                    <Sparkles className="mr-2 h-4 w-4" />
                    Upgrade to Pro
                  </Button>
                </a>
              </div>
            </div>
          </CardContent>
        </Card>
      )
    }

    return <SpotlightCardInternal className={className} ref={ref} {...props} />
  }
)

SpotlightCard.displayName = "SpotlightCard"