/**
 * Pro Upgrade Components
 * 
 * Reusable components for showing upgrade prompts
 */

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { 
  Crown, 
  Sparkles, 
  Lock, 
  ArrowRight, 
  CheckCircle2,
  Zap,
  Shield,
  Headphones
} from "lucide-react"
import { usePro } from "@/contexts/pro-context"

interface ProBadgeProps {
  className?: string
}

/**
 * Golden "PRO" badge with crown icon - always shows in golden/amber style
 * Used to indicate Pro features throughout the app
 */
export function ProBadge({ className = "" }: ProBadgeProps) {
  return (
    <Badge className={`bg-gradient-to-r from-amber-500 to-orange-500 text-white hover:from-amber-600 hover:to-orange-600 border-0 ${className}`}>
      <Crown className="h-3 w-3 mr-1" />
      Pro
    </Badge>
  )
}

interface ProFeatureLockProps {
  feature: string
  description?: string
  children?: React.ReactNode
}

/**
 * Overlay for locked Pro features
 */
export function ProFeatureLock({ feature, description, children }: ProFeatureLockProps) {
  const { isPro, upgradeUrl } = usePro()
  
  if (isPro) {
    return <>{children}</>
  }
  
  const handleUpgrade = () => {
    window.open(upgradeUrl, '_blank')
  }
  
  return (
    <div className="relative">
      {children && (
        <div className="opacity-30 pointer-events-none blur-[2px]">
          {children}
        </div>
      )}
      <div className="absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm rounded-lg">
        <Card className="w-full max-w-md mx-4 border-amber-200 shadow-lg">
          <CardHeader className="text-center pb-2">
            <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-3">
              <Lock className="h-6 w-6 text-white" />
            </div>
            <CardTitle className="text-lg">{feature}</CardTitle>
            {description && (
              <CardDescription>{description}</CardDescription>
            )}
          </CardHeader>
          <CardContent className="text-center">
            <Button 
              className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white"
              onClick={handleUpgrade}
            >
              <Sparkles className="h-4 w-4 mr-2" />
              Upgrade to Pro
              <ArrowRight className="h-4 w-4 ml-2" />
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

interface UpgradeCardProps {
  title?: string
  description?: string
  features?: string[]
  compact?: boolean
}

/**
 * Upgrade prompt card
 */
export function UpgradeCard({ 
  title = "Unlock Pro Features",
  description = "Get access to advanced features with Swift Commerce Pro",
  features = [],
  compact = false
}: UpgradeCardProps) {
  const { upgradeUrl } = usePro()
  
  const handleUpgrade = () => {
    window.open(upgradeUrl, '_blank')
  }
  
  if (compact) {
    return (
      <Card className="border-amber-200 bg-gradient-to-br from-amber-50 to-orange-50">
        <CardContent className="p-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center">
              <Crown className="h-5 w-5 text-white" />
            </div>
            <div>
              <p className="font-medium">{title}</p>
              <p className="text-sm text-muted-foreground">{description}</p>
            </div>
          </div>
          <Button 
            size="sm"
            className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white"
            onClick={handleUpgrade}
          >
            Upgrade
            <ArrowRight className="h-4 w-4 ml-1" />
          </Button>
        </CardContent>
      </Card>
    )
  }
  
  return (
    <Card className="border-amber-200 bg-gradient-to-br from-amber-50 to-orange-50 overflow-hidden">
      <CardHeader className="pb-4">
        <div className="flex items-start justify-between">
          <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center shadow-lg">
            <Crown className="h-7 w-7 text-white" />
          </div>
          <ProBadge />
        </div>
        <CardTitle className="text-xl mt-4">{title}</CardTitle>
        <CardDescription className="text-base">{description}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {features.length > 0 && (
          <ul className="space-y-2">
            {features.map((feature, index) => (
              <li key={index} className="flex items-center gap-2 text-sm">
                <CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" />
                <span>{feature}</span>
              </li>
            ))}
          </ul>
        )}
        
        <div className="pt-2">
          <Button 
            className="w-full bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white"
            onClick={handleUpgrade}
          >
            <Sparkles className="h-4 w-4 mr-2" />
            Upgrade to Pro
            <ArrowRight className="h-4 w-4 ml-2" />
          </Button>
        </div>
        
        <div className="flex items-center justify-center gap-4 pt-2 text-xs text-muted-foreground">
          <span className="flex items-center gap-1">
            <Shield className="h-3 w-3" />
            30-day money back
          </span>
          <span className="flex items-center gap-1">
            <Headphones className="h-3 w-3" />
            Priority support
          </span>
        </div>
      </CardContent>
    </Card>
  )
}

interface ProFeatureListProps {
  features: Array<{
    name: string
    description: string
    icon?: React.ReactNode
  }>
}

/**
 * List of Pro features
 */
export function ProFeatureList({ features }: ProFeatureListProps) {
  const { upgradeUrl } = usePro()
  
  const handleUpgrade = () => {
    window.open(upgradeUrl, '_blank')
  }
  
  return (
    <Card className="border-amber-200">
      <CardHeader>
        <div className="flex items-center gap-2">
          <Zap className="h-5 w-5 text-amber-500" />
          <CardTitle>Pro Features</CardTitle>
        </div>
        <CardDescription>
          Unlock these powerful features with Swift Commerce Pro
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid gap-3">
          {features.map((feature, index) => (
            <div 
              key={index} 
              className="flex items-start gap-3 p-3 rounded-lg bg-muted/50"
            >
              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center flex-shrink-0">
                {feature.icon || <Sparkles className="h-4 w-4 text-white" />}
              </div>
              <div>
                <p className="font-medium text-sm">{feature.name}</p>
                <p className="text-xs text-muted-foreground">{feature.description}</p>
              </div>
              <ProBadge className="ml-auto" />
            </div>
          ))}
        </div>
        
        <Button 
          className="w-full bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white"
          onClick={handleUpgrade}
        >
          <Crown className="h-4 w-4 mr-2" />
          Get Pro Now
        </Button>
      </CardContent>
    </Card>
  )
}

/**
 * Inline Pro upgrade prompt (for use next to limited features)
 */
export function InlineUpgradePrompt({ message }: { message: string }) {
  const { upgradeUrl } = usePro()
  
  const handleUpgrade = () => {
    window.open(upgradeUrl, '_blank')
  }
  
  return (
    <div className="flex items-center gap-2 p-2 rounded-lg bg-amber-50 border border-amber-200 text-sm">
      <Lock className="h-4 w-4 text-amber-600" />
      <span className="text-amber-800">{message}</span>
      <Button 
        variant="link" 
        size="sm" 
        className="text-amber-600 hover:text-amber-700 p-0 h-auto"
        onClick={handleUpgrade}
      >
        Upgrade to Pro
        <ArrowRight className="h-3 w-3 ml-1" />
      </Button>
    </div>
  )
}

import { ReactNode } from "react"
import { BookOpen, ExternalLink } from "lucide-react"
import { cn } from "@/lib/utils"

interface LockedFeaturePageProps {
  /** Icon component to display */
  icon: ReactNode
  /** Feature title */
  title: string
  /** Feature description */
  description: string
  /** Documentation URL - opens in new tab */
  documentationUrl: string
  /** UpgradeCard title */
  upgradeTitle: string
  /** UpgradeCard description */
  upgradeDescription: string
  /** Features list for UpgradeCard */
  features: string[]
}

/**
 * Full-page layout for locked Pro features
 * Uses same header style as FeatureHeader for consistency
 */
export function LockedFeaturePage({
  icon,
  title,
  description,
  documentationUrl,
  upgradeTitle,
  upgradeDescription,
  features,
}: LockedFeaturePageProps) {
  const handleDocumentationClick = () => {
    window.open(documentationUrl, '_blank', 'noopener,noreferrer')
  }

  return (
    <div className="flex flex-1 flex-col overflow-auto">
      {/* Sticky Header - matching FeatureHeader style */}
      <div className="sticky top-0 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
        <div className="flex flex-col gap-4 p-6 pb-4">
          {/* Top Row: Icon, Title, Description + Actions */}
          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            {/* Left side: Icon + Title + Description */}
            <div className="flex items-start gap-4">
              <div className={cn(
                "flex h-12 w-12 shrink-0 items-center justify-center rounded-lg text-white transition-colors mt-0.5",
                "bg-zinc-400"
              )}>
                {icon}
              </div>
              <div className="min-w-0">
                <div className="flex items-center gap-2">
                  <h1 className="text-2xl font-bold tracking-tight truncate text-muted-foreground">{title}</h1>
                  <ProBadge />
                </div>
                <p className="text-sm text-muted-foreground line-clamp-1">
                  {description}
                </p>
              </div>
            </div>

            {/* Right side: Actions */}
            <div className="flex items-center gap-2 lg:shrink-0">
              <Button 
                variant="outline" 
                size="sm"
                onClick={handleDocumentationClick}
                className="gap-2"
              >
                <BookOpen className="h-4 w-4" />
                <span className="hidden sm:inline">Documentation</span>
                <ExternalLink className="h-3 w-3 text-muted-foreground" />
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* Content */}
      <div className="flex-1 p-6 pt-6">
        <div className="max-w-md">
          <UpgradeCard
            title={upgradeTitle}
            description={upgradeDescription}
            features={features}
          />
        </div>
      </div>
    </div>
  )
}