'use client'

import { useState } from 'react'
import { Lock, Crown, Check, CreditCard } from 'lucide-react'
import { toast } from 'sonner'

interface PremiumOverlayProps {
  title: string
  onUnlock?: () => void
}

export function PremiumOverlay({ title, onUnlock }: PremiumOverlayProps) {
  const [isProcessing, setIsProcessing] = useState(false)
  const [showPayment, setShowPayment] = useState(false)

  const handleUnlock = async () => {
    setIsProcessing(true)
    
    // Simulate payment processing
    await new Promise((resolve) => setTimeout(resolve, 2000))
    
    toast.success('Content unlocked successfully!')
    setIsProcessing(false)
    setShowPayment(false)
    onUnlock?.()
  }

  return (
    <div className="absolute inset-0 bg-black/90 backdrop-blur-sm rounded-2xl flex items-center justify-center z-10">
      {!showPayment ? (
        <div className="text-center px-6 py-8 max-w-md">
          <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center">
            <Lock className="w-10 h-10 text-white" />
          </div>
          
          <h3 className="text-2xl font-bold font-[family-name:var(--font-poppins)] text-white mb-2">
            Premium Content
          </h3>
          
          <p className="text-gray-400 mb-6">
            &ldquo;{title}&rdquo; is premium content. Unlock it now to start watching.
          </p>

          <button
            onClick={() => setShowPayment(true)}
            className="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-amber-500 to-orange-500 text-white rounded-xl font-semibold text-lg hover:from-amber-600 hover:to-orange-600 transition-all shadow-lg shadow-amber-500/25"
          >
            <Crown className="w-5 h-5" />
            Unlock to Watch
          </button>
        </div>
      ) : (
        <div className="bg-[#141414] rounded-2xl p-8 max-w-md mx-4 border border-white/10">
          <div className="flex items-center gap-3 mb-6">
            <div className="w-12 h-12 rounded-full bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center">
              <Crown className="w-6 h-6 text-white" />
            </div>
            <div>
              <h3 className="text-xl font-bold text-white">Unlock Premium</h3>
              <p className="text-sm text-gray-400">{title}</p>
            </div>
          </div>

          {/* Pricing */}
          <div className="bg-white/5 rounded-xl p-4 mb-6">
            <div className="flex items-center justify-between mb-4">
              <span className="text-gray-400">One-time payment</span>
              <span className="text-2xl font-bold text-white">$2.99</span>
            </div>
            
            <ul className="space-y-2">
              {['Full HD streaming', 'Download for offline', 'No ads', 'Lifetime access'].map((feature) => (
                <li key={feature} className="flex items-center gap-2 text-sm text-gray-300">
                  <Check className="w-4 h-4 text-green-500" />
                  {feature}
                </li>
              ))}
            </ul>
          </div>

          {/* Payment Button */}
          <button
            onClick={handleUnlock}
            disabled={isProcessing}
            className="w-full flex items-center justify-center gap-2 px-6 py-4 bg-[#e50914] text-white rounded-xl font-semibold hover:bg-[#f40612] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isProcessing ? (
              <>
                <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                Processing...
              </>
            ) : (
              <>
                <CreditCard className="w-5 h-5" />
                Pay $2.99
              </>
            )}
          </button>

          <button
            onClick={() => setShowPayment(false)}
            className="w-full mt-3 text-sm text-gray-400 hover:text-white transition-colors"
          >
            Cancel
          </button>

          <p className="text-xs text-gray-500 text-center mt-4">
            Secure payment powered by Stripe
          </p>
        </div>
      )}
    </div>
  )
}