import React from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '../../lib/utils'

const badgeVariants = cva(
  ["inline-flex items-center gap-1.5", 
  "font-medium transition-all duration-200", 
  "border focus:outline-none",
  "focus-visible:ring-2 focus-visible:ring-offset-1"],
  {
    variants: {
      variant: {
        default: [
          "border-transparent bg-primary text-primary-foreground",
          "hover:bg-primary/90",
          "focus-visible:ring-primary/30",
        ],
        secondary: [
          "border-transparent bg-secondary text-secondary-foreground",
          "hover:bg-secondary/80",
          "focus-visible:ring-gray-400/30",
        ],
        destructive: [
          "border-transparent bg-destructive text-destructive-foreground",
          "hover:bg-destructive/90",
          "focus-visible:ring-destructive/30",
        ],
        outline: [
          "border-input bg-transparent",
          "hover:border-input/80",
          "focus-visible:ring-gray-400/30",
        ],
        success: [
          "border-transparent bg-green-500 text-white",
          "hover:bg-green-600",
          "focus-visible:ring-green-500/30",
        ],
        warning: [
          "border-transparent bg-yellow-500 text-white",
          "hover:bg-yellow-600",
          "focus-visible:ring-yellow-500/30",
        ],
        pro: [
          "border-transparent bg-gradient-to-r from-purple-600 to-pink-600 text-white",
          "hover:from-purple-700 hover:to-pink-700",
          "focus-visible:ring-purple-400/30",
        ],
      },
      size: {
        sm: "h-5 px-2 text-xs",
        default: "h-6 px-3 text-sm",
        lg: "h-8 px-4 text-base",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface BadgeProProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {
  enablePulse?: boolean
  enableGlow?: boolean
  enableShimmer?: boolean
  removable?: boolean
  onRemove?: () => void
  leftIcon?: React.ReactNode
  rightIcon?: React.ReactNode
}

export const BadgePro = React.forwardRef<
  HTMLDivElement,
  BadgeProProps
>(({
  className,
  variant,
  size,
  enablePulse = false,
  enableGlow = false,
  enableShimmer = false,
  removable = false,
  onRemove,
  leftIcon,
  rightIcon,
  children,
  ...props
}, ref) => {
  const [isRemoving, setIsRemoving] = React.useState(false)

  const handleRemove = () => {
    setIsRemoving(true)
    setTimeout(() => {
      onRemove?.()
    }, 300)
  }

  // Auto-assign icons for special variants
  let autoLeftIcon = leftIcon
  let autoChildren = children
  
  if (variant === 'pro' && !leftIcon) {
    autoLeftIcon = (
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-3 h-3">
        <path d="M12 0L13.09 8.26L22 9L13.09 9.74L12 18L10.91 9.74L2 9L10.91 8.26L12 0Z" fill="currentColor"/>
        <path d="M19 5L19.5 7L21 7.5L19.5 8L19 10L18.5 8L17 7.5L18.5 7L19 5Z" fill="currentColor"/>
        <path d="M19 15L19.5 17L21 17.5L19.5 18L19 20L18.5 18L17 17.5L18.5 17L19 15Z" fill="currentColor"/>
      </svg>
    )
    autoChildren = children || 'Pro'
  }

  return (
    <AnimatePresence>
      {!isRemoving && (
        <motion.div
          ref={ref}
          className={cn(
            badgeVariants({ variant, size }),
            enablePulse && "animate-pulse",
            enableGlow && "shadow-lg shadow-current/50",
            enableShimmer && "relative overflow-hidden",
            className
          )}
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.8 }}
          transition={{ duration: 0.2 }}
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
        >
          {enableShimmer && (
            <motion.div
              className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/20 to-transparent"
              animate={{ translateX: "200%" }}
              transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
            />
          )}
          
          {autoLeftIcon && (
            <motion.span 
              className="inline-flex shrink-0"
              animate={enablePulse ? { scale: [1, 1.2, 1] } : {}}
              transition={{ duration: 2, repeat: Infinity }}
            >
              {autoLeftIcon}
            </motion.span>
          )}
          
          <span className="truncate">{autoChildren}</span>
          
          {rightIcon && (
            <span className="inline-flex shrink-0">
              {rightIcon}
            </span>
          )}
          
          {removable && onRemove && (
            <motion.button 
              type="button"
              className="ml-1 -mr-1 h-3.5 w-3.5 rounded-full inline-flex items-center justify-center hover:bg-black/10 dark:hover:bg-white/10"
              onClick={handleRemove}
              whileHover={{ rotate: 90 }}
              transition={{ type: "spring", stiffness: 300 }}
              aria-label="Remove badge"
            >
              <svg 
                width="8" 
                height="8" 
                viewBox="0 0 8 8" 
                fill="none" 
                xmlns="http://www.w3.org/2000/svg"
                className="opacity-70"
                aria-hidden="true"
              >
                <path d="M0.799988 7.19999L7.19999 0.799988M0.799988 0.799988L7.19999 7.19999" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </motion.button>
          )}
        </motion.div>
      )}
    </AnimatePresence>
  )
})

BadgePro.displayName = 'BadgePro'

export { badgeVariants }