import { useNavigate } from 'react-router-dom'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Check, X, Sparkles } from 'lucide-react'

const plans = [
  {
    name: "Basic",
    price: "9",
    period: "/ month",
    description: "Perfect for getting started",
    features: [
      { text: "1 email account", included: true },
      { text: "500 emails / day", included: true },
      { text: "Basic categories", included: true },
      { text: "Email support", included: true },
      { text: "Historical email analysis", included: false },
      { text: "Custom rules", included: false },
      { text: "Priority support", included: false },
    ],
    cta: "Start Basic",
    popular: false,
    priceId: "price_basic_monthly"
  },
  {
    name: "Pro",
    price: "19",
    period: "/ month",
    description: "For power users",
    features: [
      { text: "3 email accounts", included: true },
      { text: "Unlimited emails", included: true },
      { text: "All categories", included: true },
      { text: "Email support", included: true },
      { text: "Historical email analysis", included: true },
      { text: "Custom rules", included: true },
      { text: "Priority support", included: false },
    ],
    cta: "Start Pro",
    popular: true,
    priceId: "price_pro_monthly"
  },
  {
    name: "Business",
    price: "49",
    period: "/ month",
    description: "For teams & companies",
    features: [
      { text: "10 email accounts", included: true },
      { text: "Unlimited emails", included: true },
      { text: "All categories", included: true },
      { text: "Email + chat support", included: true },
      { text: "Historical email analysis", included: true },
      { text: "Custom rules", included: true },
      { text: "Priority support", included: true },
    ],
    cta: "Start Business",
    popular: false,
    priceId: "price_business_monthly"
  },
]

export function Pricing() {
  const navigate = useNavigate()

  return (
    <section id="pricing" className="py-24 bg-slate-50 dark:bg-slate-900">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section header */}
        <div className="text-center mb-16">
          <Badge className="mb-4">
            <Sparkles className="w-3 h-3 mr-1" />
            14-day free trial
          </Badge>
          <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 dark:text-slate-100 mb-4">
            Simple, transparent pricing
          </h2>
          <p className="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
            Choose the plan that fits you. Cancel anytime, no hidden costs.
          </p>
        </div>

        {/* Pricing cards */}
        <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
          {plans.map((plan, index) => (
            <PricingCard 
              key={index} 
              {...plan} 
              onSelect={() => navigate(`/register?plan=${plan.name.toLowerCase()}`)}
            />
          ))}
        </div>

        {/* FAQ teaser */}
        <div className="mt-16 text-center">
          <p className="text-slate-600 dark:text-slate-400">
            Still have questions?{' '}
            <button 
              onClick={() => document.getElementById('faq')?.scrollIntoView({ behavior: 'smooth' })}
              className="text-primary-600 dark:text-primary-400 font-semibold hover:text-primary-700 dark:hover:text-primary-300"
            >
              Check our FAQ
            </button>
          </p>
        </div>
      </div>
    </section>
  )
}

interface PricingCardProps {
  name: string
  price: string
  period: string
  description: string
  features: { text: string; included: boolean }[]
  cta: string
  popular: boolean
  onSelect: () => void
}

function PricingCard({ 
  name, 
  price, 
  period, 
  description, 
  features, 
  cta, 
  popular,
  onSelect 
}: PricingCardProps) {
  return (
    <div 
      className={`relative bg-white dark:bg-slate-800 rounded-2xl p-8 ${
        popular 
          ? 'ring-2 ring-primary-500 dark:ring-primary-400 shadow-xl scale-105' 
          : 'border border-slate-200 dark:border-slate-700 hover:border-primary-200 dark:hover:border-primary-800 hover:shadow-lg'
      } transition-all duration-300`}
    >
      {popular && (
        <div className="absolute -top-4 left-1/2 -translate-x-1/2">
          <Badge className="bg-primary-500 dark:bg-primary-600 text-white border-0 shadow-md">
            Most Popular
          </Badge>
        </div>
      )}

      {/* Header */}
      <div className="text-center mb-6">
        <h3 className="text-xl font-bold text-slate-900 dark:text-slate-100 mb-1">{name}</h3>
        <p className="text-sm text-slate-500 dark:text-slate-400">{description}</p>
      </div>

      {/* Price */}
      <div className="text-center mb-8">
        <div className="flex items-baseline justify-center">
          <span className="text-5xl font-extrabold text-slate-900 dark:text-slate-100">${price}</span>
          <span className="text-slate-500 dark:text-slate-400 ml-1">{period}</span>
        </div>
      </div>

      {/* Features */}
      <ul className="space-y-4 mb-8">
        {features.map((feature, index) => (
          <li key={index} className="flex items-center gap-3">
            {feature.included ? (
              <div className="w-5 h-5 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center flex-shrink-0">
                <Check className="w-3 h-3 text-green-600 dark:text-green-400" />
              </div>
            ) : (
              <div className="w-5 h-5 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center flex-shrink-0">
                <X className="w-3 h-3 text-slate-400 dark:text-slate-500" />
              </div>
            )}
            <span className={feature.included ? 'text-slate-700 dark:text-slate-300' : 'text-slate-400 dark:text-slate-500'}>
              {feature.text}
            </span>
          </li>
        ))}
      </ul>

      {/* CTA */}
      <Button 
        className="w-full" 
        variant={popular ? 'default' : 'outline'}
        size="lg"
        onClick={onSelect}
      >
        {cta}
      </Button>
    </div>
  )
}
