'use client'

import { Check } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { Card, CardContent } from '@/components/ui/Card'
import { AnimatedSection, AnimatedContainer, AnimatedItem } from '@/components/ui/AnimatedSection'
import { cn } from '@/lib/utils'

export interface PricingPlan {
  name: string
  description: string
  price: string
  period?: string
  features: string[]
  popular?: boolean
  ctaText?: string
  ctaHref?: string
}

interface ServicePricingProps {
  title?: string
  subtitle?: string
  plans: PricingPlan[]
  colorTheme?: 'cyan' | 'orange' | 'red' | 'slate' | 'emerald' | 'primary'
}

const colorClasses = {
  cyan: {
    bg: 'bg-cyan-600',
    bgLight: 'bg-cyan-100',
    text: 'text-cyan-600',
    border: 'border-cyan-600',
    ring: 'ring-cyan-600',
    hover: 'hover:bg-cyan-700',
  },
  orange: {
    bg: 'bg-orange-600',
    bgLight: 'bg-orange-100',
    text: 'text-orange-600',
    border: 'border-orange-600',
    ring: 'ring-orange-600',
    hover: 'hover:bg-orange-700',
  },
  red: {
    bg: 'bg-red-600',
    bgLight: 'bg-red-100',
    text: 'text-red-600',
    border: 'border-red-600',
    ring: 'ring-red-600',
    hover: 'hover:bg-red-700',
  },
  slate: {
    bg: 'bg-slate-700',
    bgLight: 'bg-slate-100',
    text: 'text-slate-700',
    border: 'border-slate-700',
    ring: 'ring-slate-700',
    hover: 'hover:bg-slate-800',
  },
  emerald: {
    bg: 'bg-emerald-600',
    bgLight: 'bg-emerald-100',
    text: 'text-emerald-600',
    border: 'border-emerald-600',
    ring: 'ring-emerald-600',
    hover: 'hover:bg-emerald-700',
  },
  primary: {
    bg: 'bg-primary-600',
    bgLight: 'bg-primary-100',
    text: 'text-primary-600',
    border: 'border-primary-600',
    ring: 'ring-primary-600',
    hover: 'hover:bg-primary-700',
  },
}

export function ServicePricing({
  title = 'Planes y Precios',
  subtitle = 'Elige el plan que mejor se adapte a tus necesidades',
  plans,
  colorTheme = 'primary',
}: ServicePricingProps) {
  const colors = colorClasses[colorTheme]

  return (
    <section className="section-padding">
      <div className="container-custom">
        <AnimatedSection className="text-center max-w-3xl mx-auto mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900">
            {title}
          </h2>
          <p className="mt-4 text-lg text-gray-600">{subtitle}</p>
        </AnimatedSection>

        <AnimatedContainer className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
          {plans.map((plan, idx) => (
            <AnimatedItem key={idx}>
              <Card
                className={cn(
                  'relative h-full flex flex-col',
                  plan.popular && `ring-2 ${colors.ring}`
                )}
              >
                {plan.popular && (
                  <div
                    className={cn(
                      'absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full text-sm font-semibold text-white',
                      colors.bg
                    )}
                  >
                    Más Popular
                  </div>
                )}
                <CardContent className="p-6 flex flex-col flex-1">
                  <div className="text-center mb-6">
                    <h3 className="text-xl font-bold text-gray-900 mb-2">
                      {plan.name}
                    </h3>
                    <p className="text-sm text-gray-600 mb-4">{plan.description}</p>
                    <div className="flex items-baseline justify-center gap-1">
                      <span className={cn('text-4xl font-bold', colors.text)}>
                        {plan.price}
                      </span>
                      {plan.period && (
                        <span className="text-gray-500">/{plan.period}</span>
                      )}
                    </div>
                  </div>

                  <ul className="space-y-3 mb-6 flex-1">
                    {plan.features.map((feature, fidx) => (
                      <li key={fidx} className="flex items-start gap-3">
                        <Check className={cn('w-5 h-5 flex-shrink-0 mt-0.5', colors.text)} />
                        <span className="text-sm text-gray-600">{feature}</span>
                      </li>
                    ))}
                  </ul>

                  <Button
                    href={plan.ctaHref || '/contacto'}
                    className={cn(
                      'w-full',
                      plan.popular
                        ? `${colors.bg} text-white ${colors.hover}`
                        : 'bg-gray-100 text-gray-900 hover:bg-gray-200'
                    )}
                  >
                    {plan.ctaText || 'Solicitar Información'}
                  </Button>
                </CardContent>
              </Card>
            </AnimatedItem>
          ))}
        </AnimatedContainer>

        <AnimatedSection delay={0.4} className="text-center mt-8">
          <p className="text-gray-600">
            ¿Necesitas un plan personalizado?{' '}
            <a href="/contacto" className={cn('font-medium', colors.text, 'hover:underline')}>
              Contáctanos
            </a>
          </p>
        </AnimatedSection>
      </div>
    </section>
  )
}