import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { CheckCircle, Database, Zap, Users, LucideIcon } from "lucide-react"

interface TokenBreakdown {
  icon: LucideIcon
  title: string
  value: string
  description: string
  color: 'blue' | 'green' | 'purple'
}

interface PricingFeature {
  text: string
}

interface PricingCardProps {
  title: string
  price: string
  tokensIncluded: string
  tokenBreakdown: TokenBreakdown[]
  features: PricingFeature[]
  ctaText: string
  ctaHref: string
  variant?: 'default' | 'featured'
}

export default function PricingCard({
  title,
  price,
  tokensIncluded,
  tokenBreakdown,
  features,
  ctaText,
  ctaHref,
  variant = 'default'
}: PricingCardProps) {
  const getColorClasses = (color: 'blue' | 'green' | 'purple') => {
    switch (color) {
      case 'blue':
        return {
          bg: "bg-blue-50 dark:bg-blue-800",
          icon: "text-blue-600 dark:text-blue-300",
          title: "text-blue-800 dark:text-blue-200",
          value: "text-blue-600 dark:text-blue-300",
          description: "text-blue-700 dark:text-blue-200"
        }
      case 'green':
        return {
          bg: "bg-green-50 dark:bg-green-800",
          icon: "text-green-600 dark:text-green-300",
          title: "text-green-800 dark:text-green-200",
          value: "text-green-600 dark:text-green-300",
          description: "text-green-700 dark:text-green-200"
        }
      case 'purple':
        return {
          bg: "bg-purple-50 dark:bg-purple-800",
          icon: "text-purple-600 dark:text-purple-300",
          title: "text-purple-800 dark:text-purple-200",
          value: "text-purple-600 dark:text-purple-300",
          description: "text-purple-700 dark:text-purple-200"
        }
    }
  }

  return (
    <Card className="border-2 border-blue-200 bg-blue-50 dark:bg-blue-900 dark:border-blue-700 transition-colors">
      <CardHeader className="text-center">
        <CardTitle className="text-3xl font-bold text-blue-700 dark:text-blue-400">
          {title}
        </CardTitle>
        <CardDescription className="text-2xl font-semibold text-blue-600 dark:text-blue-300">
          {price}
        </CardDescription>
        <Badge className="bg-green-600 text-white text-lg px-4 py-2 mt-2 dark:bg-green-500">
          {tokensIncluded}
        </Badge>
      </CardHeader>

      <CardContent>
        {/* Token Breakdown */}
        <div className="bg-white dark:bg-gray-800 p-6 rounded-lg mb-6 transition-colors">
          <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4 text-center">
            🎯 Que comprennent {tokensIncluded} ?
          </h3>
          <div className="grid md:grid-cols-3 gap-6">
            {tokenBreakdown.map((item, index) => {
              const colorClasses = getColorClasses(item.color)
              const Icon = item.icon
              return (
                <div key={index} className={`text-center p-4 ${colorClasses.bg} rounded-lg transition-colors`}>
                  <Icon className={`h-8 w-8 mx-auto ${colorClasses.icon} mb-2`} />
                  <h4 className={`font-semibold ${colorClasses.title}`}>{item.title}</h4>
                  <p className={`text-2xl font-bold ${colorClasses.value}`}>{item.value}</p>
                  <p className={`text-sm ${colorClasses.description}`}>{item.description}</p>
                </div>
              )
            })}
          </div>
        </div>

        {/* Features */}
        <div className="space-y-3 mb-6 text-gray-900 dark:text-gray-200">
          {features.map((feature, index) => (
            <div key={index} className="flex items-center">
              <CheckCircle className="h-5 w-5 text-green-600 dark:text-green-300 mr-3" />
              <span>{feature.text}</span>
            </div>
          ))}
        </div>

        {/* CTA */}
        <div className="text-center">
          <p className="text-lg font-semibold text-blue-700 dark:text-blue-400 mb-4">
            Tarification à la consommation + setup personnalisé
          </p>
          <Link href={ctaHref}>
            <Button size="lg" className="w-full">
              {ctaText}
            </Button>
          </Link>
        </div>
      </CardContent>
    </Card>
  )
}