import { Button } from '@/components/ui/button'
import { X, Sparkles, Zap, Infinity as InfinityIcon } from 'lucide-react'
import { useNavigate } from 'react-router-dom'
import { trackUpgradeClicked } from '@/lib/analytics'
import { useAuth } from '@/context/AuthContext'

interface UpgradePromptProps {
  title?: string
  benefits?: string[]
  source: 'after_sort' | 'limit_reached' | 'auto_schedule' | 'after_rules'
  onDismiss: () => void
}

const defaultBenefits: Record<string, string[]> = {
  after_sort: [
    'Sort unlimited emails automatically',
    'Set up auto-schedule for hands-free organization',
    'Access all premium features',
  ],
  limit_reached: [
    'Unlimited email sorting',
    'No monthly limits',
    'Priority support',
  ],
  auto_schedule: [
    'Auto-schedule available in Pro plan',
    'Set it and forget it',
    'Keep your inbox clean automatically',
  ],
  after_rules: [
    'Automate with Pro plan',
    'Unlimited rules and customizations',
    'Advanced AI features',
  ],
}

export function UpgradePrompt({ 
  title = 'Keep your inbox clean automatically',
  benefits,
  source,
  onDismiss,
}: UpgradePromptProps) {
  const navigate = useNavigate()
  const { user } = useAuth()
  const promptBenefits = benefits || defaultBenefits[source] || defaultBenefits.after_sort

  // Check if this prompt was already shown in this session
  const sessionKey = `upgrade_prompt_shown_${source}`
  const wasShown = sessionStorage.getItem(sessionKey) === 'true'

  if (wasShown) {
    return null
  }

  const handleUpgrade = () => {
    if (user?.$id) {
      trackUpgradeClicked(user.$id, source)
    }
    navigate('/settings?tab=subscription')
  }

  const handleDismiss = () => {
    sessionStorage.setItem(sessionKey, 'true')
    onDismiss()
  }

  return (
    <div className="bg-gradient-to-r from-primary-50 to-accent-50 border-2 border-primary-200 rounded-xl p-4 sm:p-6 shadow-lg">
      <div className="flex items-start justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-lg bg-primary-500 flex items-center justify-center flex-shrink-0">
            <Sparkles className="w-5 h-5 text-white" />
          </div>
          <div>
            <h3 className="text-lg font-bold text-slate-900">{title}</h3>
          </div>
        </div>
        <button
          onClick={handleDismiss}
          className="text-slate-400 hover:text-slate-600 transition-colors flex-shrink-0"
        >
          <X className="w-5 h-5" />
        </button>
      </div>

      <ul className="space-y-2 mb-4">
        {promptBenefits.map((benefit, idx) => (
          <li key={idx} className="flex items-start gap-2 text-sm text-slate-700">
            <Zap className="w-4 h-4 text-primary-500 flex-shrink-0 mt-0.5" />
            <span>{benefit}</span>
          </li>
        ))}
      </ul>

      <div className="flex gap-3">
        <Button
          onClick={handleUpgrade}
          className="flex-1 bg-primary-600 hover:bg-primary-700"
        >
          <InfinityIcon className="w-4 h-4 mr-2" />
          Upgrade
        </Button>
        <Button
          variant="outline"
          onClick={handleDismiss}
          className="border-slate-300 text-slate-600 hover:bg-slate-50"
        >
          Not now
        </Button>
      </div>
    </div>
  )
}
