import { Lock, Crown } from "lucide-react"
import { usePro } from "@/contexts/pro-context"
import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"

interface ProLockedOverlayProps {
  children: React.ReactNode
  featureName?: string
  description?: string
  /** If true, shows content with a subtle lock instead of blur overlay */
  showPreview?: boolean
}

export function ProLockedOverlay({ 
  children, 
  featureName = "This feature",
  description = "Upgrade to Pro to unlock this feature and many more.",
  showPreview = true
}: ProLockedOverlayProps) {
  const { isPro, triggerShake } = usePro()

  if (isPro) {
    return <>{children}</>
  }

  // New behavior: show content with click handler to trigger shake and subtle fade
  if (showPreview) {
    return (
      <div 
        className="relative cursor-pointer"
        onClick={(e) => {
          // Prevent actual interaction and trigger shake
          e.preventDefault()
          e.stopPropagation()
          triggerShake()
        }}
      >
        {/* The actual content - visible with subtle fade but not interactive */}
        <div className="pointer-events-none select-none opacity-75">
          {children}
        </div>
      </div>
    )
  }

  // Legacy behavior with blur overlay (for backwards compatibility)
  return (
    <div className="relative">
      {/* The actual content - visible but with overlay */}
      <div className="pointer-events-none select-none opacity-50 blur-[1px]">
        {children}
      </div>
      
      {/* Lock overlay */}
      <div className="absolute inset-0 flex justify-center bg-background/60 backdrop-blur-[2px] rounded-lg" style={{ paddingTop: '200px' }}>
        <div className="text-center p-6 max-w-sm h-fit">
          <div className="mx-auto w-12 h-12 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center mb-4">
            <Lock className="h-6 w-6 text-white" />
          </div>
          <h3 className="text-lg font-semibold mb-2 flex items-center justify-center gap-2">
            <Crown className="h-4 w-4 text-amber-500" />
            Pro Feature
          </h3>
          <p className="text-sm text-muted-foreground mb-4">
            {featureName} is available in the Pro version. {description}
          </p>
        </div>
      </div>
    </div>
  )
}

/**
 * A smaller inline lock badge for individual form controls
 */
export function ProLockBadge() {
  const { isPro } = usePro()
  
  if (isPro) return null
  
  return (
    <span className="inline-flex items-center gap-1 text-xs bg-gradient-to-r from-amber-500 to-orange-500 text-white px-1.5 py-0.5 rounded">
      <Lock className="h-2.5 w-2.5" />
      Pro
    </span>
  )
}

/**
 * Wrapper for locked form controls - triggers shake on click
 */
interface ProLockedControlProps {
  children: React.ReactNode
  className?: string
}

export function ProLockedControl({ children, className }: ProLockedControlProps) {
  const { isPro, triggerShake } = usePro()
  
  if (isPro) {
    return <>{children}</>
  }
  
  return (
    <div 
      className={cn("pro-locked-control opacity-60", className)}
      onClick={(e) => {
        e.preventDefault()
        e.stopPropagation()
        triggerShake()
      }}
    >
      <div className="pointer-events-none">
        {children}
      </div>
    </div>
  )
}

/**
 * Displays a locked value (e.g., analytics numbers) as XX
 */
interface ProLockedValueProps {
  value: string | number
  className?: string
}

export function ProLockedValue({ value, className }: ProLockedValueProps) {
  const { isPro, triggerShake } = usePro()
  
  if (isPro) {
    return <span className={className}>{value}</span>
  }
  
  // Convert numbers to XX format
  const maskedValue = typeof value === 'number' 
    ? 'XX' 
    : value.toString().replace(/[0-9]/g, 'X').replace(/[a-zA-Z]/g, 'X')
  
  return (
    <span 
      className={cn("cursor-pointer select-none", className)}
      onClick={(e) => {
        e.preventDefault()
        triggerShake()
      }}
      title="Upgrade to Pro to see this value"
    >
      {maskedValue}
    </span>
  )
}

/**
 * A label with Pro badge for individual Pro settings
 * Shows a crown Pro badge and fades the text when not Pro
 */
interface ProSettingLabelProps {
  children: React.ReactNode
  className?: string
  /** Optional: show even if user is Pro (useful for showing what's included) */
  alwaysShowBadge?: boolean
}

export function ProSettingLabel({ children, className, alwaysShowBadge = false }: ProSettingLabelProps) {
  const { isPro, triggerShake } = usePro()
  
  const showBadge = alwaysShowBadge || !isPro
  
  return (
    <span 
      className={cn(
        "inline-flex items-center gap-2",
        !isPro && "cursor-pointer",
        className
      )}
      onClick={!isPro ? (e) => {
        e.preventDefault()
        triggerShake()
      } : undefined}
    >
      <span className={!isPro ? "text-muted-foreground" : ""}>
        {children}
      </span>
      {showBadge && (
        <Badge 
          className={cn(
            "h-5 px-1.5 text-[10px] gap-0.5",
            isPro 
              ? "bg-gradient-to-r from-amber-500 to-orange-500 text-white border-0"
              : "bg-gradient-to-r from-amber-500/80 to-orange-500/80 text-white border-0 opacity-70"
          )}
        >
          <Crown className="h-2.5 w-2.5" />
          Pro
        </Badge>
      )}
    </span>
  )
}