"use client"

import React, { useRef, useState } from "react"
import { motion, useMotionValue, useSpring, useTransform } 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 MagneticButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  strength?: number
  range?: number
  springConfig?: {
    stiffness?: number
    damping?: number
  }
}

const MagneticButtonInternal = React.forwardRef<HTMLButtonElement, MagneticButtonProps>(
  ({ 
    children, 
    className, 
    strength = 0.3, 
    range = 100,
    springConfig = { stiffness: 200, damping: 15 },
    ...props 
  }, ref) => {
    const buttonRef = useRef<HTMLButtonElement>(null)
    const [isHovered, setIsHovered] = useState(false)

    const x = useMotionValue(0)
    const y = useMotionValue(0)

    const springX = useSpring(x, springConfig)
    const springY = useSpring(y, springConfig)

    const rotateX = useTransform(springY, [-range, range], [5, -5])
    const rotateY = useTransform(springX, [-range, range], [-5, 5])

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

      const rect = buttonRef.current.getBoundingClientRect()
      const centerX = rect.left + rect.width / 2
      const centerY = rect.top + rect.height / 2

      const deltaX = e.clientX - centerX
      const deltaY = e.clientY - centerY

      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)

      if (distance < range) {
        x.set(deltaX * strength)
        y.set(deltaY * strength)
      }
    }

    const handleMouseLeave = () => {
      setIsHovered(false)
      x.set(0)
      y.set(0)
    }

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

    return (
      <motion.button
        ref={(node) => {
          buttonRef.current = node
          if (typeof ref === "function") {
            ref(node)
          } else if (ref) {
            ref.current = node
          }
        }}
        className={cn(
          "relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
          "h-9 px-4 py-2",
          className
        )}
        onMouseMove={handleMouseMove}
        onMouseLeave={handleMouseLeave}
        onMouseEnter={handleMouseEnter}
        style={{
          x: springX,
          y: springY,
          rotateX,
          rotateY,
          transformPerspective: 1000,
        }}
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
        animate={{
          rotateX: isHovered ? rotateX.get() : 0,
          rotateY: isHovered ? rotateY.get() : 0,
        }}
        transition={{ duration: 0.3 }}
      >
        <motion.div
          className="relative z-10"
          animate={{
            scale: isHovered ? 1.02 : 1,
          }}
          transition={{ duration: 0.2 }}
        >
          {children}
        </motion.div>

        {/* Glow effect */}
        <motion.div
          className="absolute inset-0 rounded-md bg-primary/20 blur-md"
          animate={{
            opacity: isHovered ? 0.8 : 0,
            scale: isHovered ? 1.1 : 1,
          }}
          transition={{ duration: 0.3 }}
        />
      </motion.button>
    )
  }
)

MagneticButtonInternal.displayName = "MagneticButtonInternal"

export const MagneticButton = React.forwardRef<HTMLButtonElement, MagneticButtonProps>(
  ({ 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">
                  Magnetic Button 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 <MagneticButtonInternal className={className} ref={ref} {...props} />
  }
)

MagneticButton.displayName = "MagneticButton"