/**
 * PricingCard Component
 * Displays a pricing plan with features and CTA
 */

import React from 'react';
import { Check, X, Zap, Star } from 'lucide-react';
import type { PricingPlan, PlanInterval } from '../../types/payment.types';

interface PricingCardProps {
  plan: PricingPlan;
  interval: PlanInterval;
  isCurrentPlan?: boolean;
  onSelect?: (planId: string, interval: PlanInterval) => void;
  loading?: boolean;
}

const tierStyles: Record<string, { border: string; button: string; badge: string }> = {
  free: {
    border: 'border-gray-600',
    button: 'bg-gray-700 hover:bg-gray-600 text-white',
    badge: '',
  },
  basic: {
    border: 'border-blue-500/50',
    button: 'bg-blue-600 hover:bg-blue-500 text-white',
    badge: '',
  },
  pro: {
    border: 'border-purple-500',
    button: 'bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-500 hover:to-blue-500 text-white',
    badge: 'bg-purple-500',
  },
  premium: {
    border: 'border-purple-500/50',
    button: 'bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white',
    badge: 'bg-purple-500',
  },
  enterprise: {
    border: 'border-yellow-500/50',
    button: 'bg-yellow-600 hover:bg-yellow-500 text-black',
    badge: 'bg-yellow-500',
  },
};

export const PricingCard: React.FC<PricingCardProps> = ({
  plan,
  interval,
  isCurrentPlan = false,
  onSelect,
  loading = false,
}) => {
  const price = interval === 'month' ? plan.priceMonthly : plan.priceYearly;
  const monthlyEquivalent = interval === 'year' ? plan.priceYearly / 12 : plan.priceMonthly;
  const yearlyDiscount = plan.priceMonthly > 0
    ? Math.round((1 - plan.priceYearly / 12 / plan.priceMonthly) * 100)
    : 0;

  const styles = tierStyles[plan.tier];

  return (
    <div
      className={`relative bg-gray-800 rounded-2xl border-2 ${styles.border} p-6 flex flex-col ${
        plan.isPopular ? 'ring-2 ring-purple-500 ring-offset-2 ring-offset-gray-900' : ''
      }`}
    >
      {/* Popular Badge */}
      {plan.isPopular && (
        <div className="absolute -top-4 left-1/2 -translate-x-1/2">
          <span className="px-4 py-1 bg-gradient-to-r from-purple-500 to-blue-500 text-white text-sm font-semibold rounded-full flex items-center gap-1">
            <Star className="w-4 h-4" />
            Más Popular
          </span>
        </div>
      )}

      {/* Current Plan Badge */}
      {isCurrentPlan && (
        <div className="absolute -top-4 right-4">
          <span className="px-3 py-1 bg-green-500 text-white text-xs font-semibold rounded-full">
            Plan Actual
          </span>
        </div>
      )}

      {/* Header */}
      <div className="text-center mb-6">
        <h3 className="text-xl font-bold text-white mb-2">{plan.name}</h3>
        <p className="text-sm text-gray-400">{plan.description}</p>
      </div>

      {/* Price */}
      <div className="text-center mb-6">
        {plan.tier === 'free' ? (
          <div className="text-4xl font-bold text-white">Gratis</div>
        ) : (
          <>
            <div className="flex items-baseline justify-center gap-1">
              <span className="text-4xl font-bold text-white">
                ${monthlyEquivalent.toFixed(0)}
              </span>
              <span className="text-gray-400">/mes</span>
            </div>
            {interval === 'year' && yearlyDiscount > 0 && (
              <div className="mt-1 text-sm text-green-400">
                Ahorra {yearlyDiscount}% con el plan anual
              </div>
            )}
            {interval === 'year' && (
              <div className="text-xs text-gray-500 mt-1">
                Facturado ${price.toFixed(0)}/año
              </div>
            )}
          </>
        )}
      </div>

      {/* Limits */}
      <div className="grid grid-cols-2 gap-3 mb-6 p-4 bg-gray-900/50 rounded-lg">
        <div className="text-center">
          <div className="text-lg font-bold text-white">
            {plan.limits.maxCourses === -1 ? '∞' : plan.limits.maxCourses}
          </div>
          <div className="text-xs text-gray-400">Cursos</div>
        </div>
        <div className="text-center">
          <div className="text-lg font-bold text-white">
            {plan.limits.maxApiCalls === -1 ? '∞' : plan.limits.maxApiCalls.toLocaleString()}
          </div>
          <div className="text-xs text-gray-400">API Calls/mes</div>
        </div>
        <div className="text-center">
          <div className="text-lg font-bold text-white">
            {plan.limits.maxPaperTrades === -1 ? '∞' : plan.limits.maxPaperTrades}
          </div>
          <div className="text-xs text-gray-400">Paper Trades</div>
        </div>
        <div className="text-center">
          <div className="text-lg font-bold text-white">
            {plan.limits.maxWatchlistSymbols}
          </div>
          <div className="text-xs text-gray-400">Watchlist</div>
        </div>
      </div>

      {/* Features */}
      <div className="flex-1 space-y-3 mb-6">
        {plan.features.map((feature) => (
          <div key={feature.id} className="flex items-start gap-3">
            {feature.included ? (
              <Check className="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5" />
            ) : (
              <X className="w-5 h-5 text-gray-600 flex-shrink-0 mt-0.5" />
            )}
            <div>
              <span className={feature.included ? 'text-gray-300' : 'text-gray-500'}>
                {feature.name}
              </span>
              {feature.value && (
                <span className="text-sm text-gray-500 ml-1">({feature.value})</span>
              )}
            </div>
          </div>
        ))}

        {/* Premium Features */}
        {plan.limits.mlSignalsAccess && (
          <div className="flex items-start gap-3">
            <Zap className="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5" />
            <span className="text-yellow-400">Señales ML Premium</span>
          </div>
        )}
        {plan.limits.prioritySupport && (
          <div className="flex items-start gap-3">
            <Check className="w-5 h-5 text-purple-400 flex-shrink-0 mt-0.5" />
            <span className="text-purple-400">Soporte Prioritario</span>
          </div>
        )}
        {plan.limits.customAgents && (
          <div className="flex items-start gap-3">
            <Check className="w-5 h-5 text-blue-400 flex-shrink-0 mt-0.5" />
            <span className="text-blue-400">Agentes Personalizados</span>
          </div>
        )}
      </div>

      {/* CTA Button */}
      <button
        onClick={() => onSelect?.(plan.id, interval)}
        disabled={loading || isCurrentPlan || !plan.isActive}
        className={`w-full py-3 px-6 rounded-lg font-semibold transition-all ${styles.button} disabled:opacity-50 disabled:cursor-not-allowed`}
      >
        {loading ? (
          <span className="flex items-center justify-center gap-2">
            <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
              <circle
                className="opacity-25"
                cx="12"
                cy="12"
                r="10"
                stroke="currentColor"
                strokeWidth="4"
                fill="none"
              />
              <path
                className="opacity-75"
                fill="currentColor"
                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
              />
            </svg>
            Procesando...
          </span>
        ) : isCurrentPlan ? (
          'Plan Actual'
        ) : plan.tier === 'free' ? (
          'Comenzar Gratis'
        ) : (
          'Suscribirse'
        )}
      </button>
    </div>
  );
};

export default PricingCard;
