bakery-ia/frontend/src/components/subscription/SubscriptionPricingCards.tsx

import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { Check, Star, Loader, Users, MapPin, Package } from 'lucide-react';
import { Button, Card } from '../ui';
import {
  subscriptionService,
  type PlanMetadata,
  type SubscriptionTier,
  type BillingCycle,
  SUBSCRIPTION_TIERS
} from '../../api';
import { getRegisterUrl } from '../../utils/navigation';

type BillingCycle = 'monthly' | 'yearly';
type DisplayMode = 'landing' | 'settings' | 'selection';

interface SubscriptionPricingCardsProps {
  mode?: DisplayMode;
  selectedPlan?: string;
  onPlanSelect?: (planKey: string) => void;
  showPilotBanner?: boolean;
  pilotCouponCode?: string;
  pilotTrialMonths?: number;
  showComparison?: boolean;
  className?: string;
  billingCycle?: BillingCycle;
  onBillingCycleChange?: (cycle: BillingCycle) => void;
}

export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> = ({
  mode = 'landing',
  selectedPlan,
  onPlanSelect,
  showPilotBanner = false,
  pilotCouponCode,
  pilotTrialMonths = 3,
  showComparison = false,
  className = '',
  billingCycle: externalBillingCycle,
  onBillingCycleChange
}) => {
  const { t } = useTranslation('subscription');
  const [plans, setPlans] = useState<Record<SubscriptionTier, PlanMetadata> | null>(null);
  const [internalBillingCycle, setInternalBillingCycle] = useState<BillingCycle>('monthly');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Use external billing cycle if provided, otherwise use internal state
  const billingCycle = externalBillingCycle || internalBillingCycle;

  useEffect(() => {
    loadPlans();
  }, []);

  const loadPlans = async () => {
    try {
      setLoading(true);
      setError(null);
      const availablePlans = await subscriptionService.fetchAvailablePlans();
      setPlans(availablePlans.plans);
    } catch (err) {
      console.error('Failed to load plans:', err);
      setError(t('ui.error_loading'));
    } finally {
      setLoading(false);
    }
  };

  const getPrice = (plan: PlanMetadata) => {
    return billingCycle === 'monthly' ? plan.monthly_price : plan.yearly_price;
  };

  const getSavings = (plan: PlanMetadata) => {
    if (billingCycle === 'yearly') {
      return subscriptionService.calculateYearlySavings(
        plan.monthly_price,
        plan.yearly_price
      );
    }
    return null;
  };

  const formatFeatureName = (feature: string): string => {
    const translatedFeature = t(`features.${feature}`);
    return translatedFeature.startsWith('features.')
      ? feature.replace(/_/g, ' ')
      : translatedFeature;
  };

  const handlePlanAction = (tier: string, plan: PlanMetadata) => {
    if ((mode === 'settings' || mode === 'selection') && onPlanSelect) {
      onPlanSelect(tier);
    }
  };

  // Get top 3 benefits for each tier (business outcomes)
  const getTopBenefits = (tier: SubscriptionTier, plan: PlanMetadata): string[] => {
    // Use hero_features if available, otherwise use first 3 features
    return plan.hero_features?.slice(0, 3) || plan.features.slice(0, 3);
  };

  // Format limit display with emoji and user-friendly text
  const formatLimit = (value: number | string | null | undefined, unlimitedKey: string): string => {
    if (!value || value === -1 || (typeof value === 'string' && value.toLowerCase() === 'unlimited')) {
      return t(unlimitedKey);
    }
    return value.toString();
  };

  if (loading) {
    return (
      <div className={`flex justify-center items-center py-20 ${className}`}>
        <Loader className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
        <span className="ml-3 text-[var(--text-secondary)]">{t('ui.loading')}</span>
      </div>
    );
  }

  if (error || !plans) {
    return (
      <div className={`text-center py-20 ${className}`}>
        <p className="text-[var(--color-error)] mb-4">{error}</p>
        <Button onClick={loadPlans}>{t('ui.retry')}</Button>
      </div>
    );
  }

  return (
    <div className={className}>
      {/* Pilot Program Banner */}
      {showPilotBanner && pilotCouponCode && (
        <Card className="p-6 mb-8 bg-gradient-to-r from-amber-50 via-orange-50 to-amber-50 dark:from-amber-900/20 dark:via-orange-900/20 dark:to-amber-900/20 border-2 border-amber-400 dark:border-amber-500">
          <div className="flex items-center gap-4">
            <div className="flex-shrink-0">
              <div className="w-14 h-14 bg-gradient-to-br from-amber-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg">
                <Star className="w-7 h-7 text-white fill-white" />
              </div>
            </div>
            <div className="flex-1">
              <h3 className="text-xl font-bold text-amber-900 dark:text-amber-100 mb-1">
                {t('ui.pilot_program_active')}
              </h3>
              <p className="text-sm text-amber-800 dark:text-amber-200"
                 dangerouslySetInnerHTML={{
                   __html: t('ui.pilot_program_description', { count: pilotTrialMonths })
                     .replace('{count}', `<strong>${pilotTrialMonths}</strong>`)
                     .replace('20%', '<strong>20%</strong>')
                 }}
              />
            </div>
          </div>
        </Card>
      )}

      {/* Billing Cycle Toggle - Only show if not externally controlled */}
      {!externalBillingCycle && (
        <div className="flex justify-center mb-8">
          <div className="inline-flex rounded-lg border-2 border-[var(--border-primary)] p-1 bg-[var(--bg-secondary)]">
            <button
              onClick={() => {
                const newCycle: BillingCycle = 'monthly';
                setInternalBillingCycle(newCycle);
                if (onBillingCycleChange) {
                  onBillingCycleChange(newCycle);
                }
              }}
              className={`px-6 py-2 rounded-md text-sm font-semibold transition-all ${
                billingCycle === 'monthly'
                  ? 'bg-[var(--color-primary)] text-white shadow-md'
                  : 'text-[var(--text-secondary)] hover:bg-[var(--bg-primary)] hover:text-[var(--text-primary)]'
              }`}
            >
              {t('billing.monthly', 'Mensual')}
            </button>
            <button
              onClick={() => {
                const newCycle: BillingCycle = 'yearly';
                setInternalBillingCycle(newCycle);
                if (onBillingCycleChange) {
                  onBillingCycleChange(newCycle);
                }
              }}
              className={`px-6 py-2 rounded-md text-sm font-semibold transition-all flex items-center gap-2 ${
                billingCycle === 'yearly'
                  ? 'bg-[var(--color-primary)] text-white shadow-md'
                  : 'text-[var(--text-secondary)] hover:bg-[var(--bg-primary)] hover:text-[var(--text-primary)]'
              }`}
            >
              {t('billing.yearly', 'Anual')}
              <span className="text-xs font-bold text-green-600 dark:text-green-400">
                {t('billing.save_percent', 'Ahorra 17%')}
              </span>
            </button>
          </div>
        </div>
      )}

      {/* Simplified Plans Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-start lg:items-stretch">
        {Object.entries(plans).map(([tier, plan]) => {
          const price = getPrice(plan);
          const savings = getSavings(plan);
          const isPopular = plan.popular;
          const tierKey = tier as SubscriptionTier;
          const topBenefits = getTopBenefits(tierKey, plan);

          const CardWrapper = mode === 'landing' ? Link : 'div';
          const isCurrentPlan = mode === 'settings' && selectedPlan === tier;
          const cardProps = mode === 'landing'
            ? { to: getRegisterUrl(tier, billingCycle) }
            : mode === 'selection' || (mode === 'settings' && !isCurrentPlan)
              ? { onClick: () => handlePlanAction(tier, plan) }
              : {};

          const isSelected = mode === 'selection' && selectedPlan === tier;

          return (
            <CardWrapper
              key={tier}
              {...cardProps}
              className={`
                relative rounded-2xl p-8 transition-all duration-300 block no-underline
                ${(mode === 'settings' && !isCurrentPlan) || mode === 'selection' || mode === 'landing' ? 'cursor-pointer' : ''}
                ${isCurrentPlan
                  ? 'bg-[var(--bg-secondary)] border-2 border-[var(--color-primary)] opacity-70 cursor-not-allowed'
                  : isSelected
                  ? 'bg-gradient-to-br from-green-600 to-emerald-700 shadow-2xl ring-4 ring-green-400/60 scale-105 z-20 transform animate-[pulse_2s_ease-in-out_infinite]'
                  : isPopular
                  ? 'bg-gradient-to-br from-blue-600 to-blue-800 shadow-xl ring-2 ring-blue-400 lg:scale-105 lg:z-10 hover:ring-4 hover:ring-blue-300 hover:shadow-2xl'
                  : 'bg-[var(--bg-secondary)] border-2 border-[var(--border-primary)] hover:border-[var(--color-primary)] hover:shadow-xl hover:scale-[1.03] hover:ring-2 hover:ring-[var(--color-primary)]/30'
                }
              `}
            >
              {/* Current Plan Badge */}
              {isCurrentPlan && (
                <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 z-10">
                  <div className="bg-[var(--color-primary)] text-white px-6 py-2 rounded-full text-sm font-bold shadow-xl flex items-center gap-1.5 border-2 border-[var(--color-primary)]">
                    <Check className="w-4 h-4 stroke-[3]" />
                    {t('ui.current_plan', 'Plan Actual')}
                  </div>
                </div>
              )}

              {/* Selected Badge */}
              {isSelected && !isCurrentPlan && (
                <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 z-10">
                  <div className="bg-white text-green-700 px-6 py-2 rounded-full text-sm font-bold shadow-xl flex items-center gap-1.5 border-2 border-green-400">
                    <Check className="w-4 h-4 stroke-[3]" />
                    {t('ui.selected', 'Seleccionado')}
                  </div>
                </div>
              )}

              {/* Popular Badge */}
              {isPopular && !isSelected && !isCurrentPlan && (
                <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                  <div className="bg-gradient-to-r from-green-500 to-emerald-600 text-white px-6 py-2 rounded-full text-sm font-bold shadow-lg flex items-center gap-1">
                    <Star className="w-4 h-4 fill-current" />
                    {t('ui.most_popular')}
                  </div>
                </div>
              )}

              {/* Plan Header */}
              <div className="mb-6">
                <h3 className={`text-2xl font-bold mb-2 ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white' : 'text-[var(--text-primary)]'}`}>
                  {t(`plans.${tier}.name`, plan.name)}
                </h3>
                <p className={`text-sm ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white/90' : 'text-[var(--text-secondary)]'}`}>
                  {plan.tagline_key ? t(plan.tagline_key) : plan.tagline || ''}
                </p>
              </div>

              {/* Price */}
              <div className="mb-6">
                <div className="flex items-baseline">
                  <span className={`text-4xl font-bold ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white' : 'text-[var(--text-primary)]'}`}>
                    {subscriptionService.formatPrice(price)}
                  </span>
                  <span className={`ml-2 text-lg ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white/80' : 'text-[var(--text-secondary)]'}`}>
                    /{billingCycle === 'monthly' ? t('ui.per_month') : t('ui.per_year')}
                  </span>
                </div>

                {/* Trial Badge - Always Visible */}
                <div className={`mt-3 px-3 py-1.5 text-sm font-medium rounded-full inline-block ${
                  (isPopular || isSelected) && !isCurrentPlan ? 'bg-white/20 text-white' : 'bg-green-500/10 text-green-600 dark:text-green-400'
                }`}>
                  {savings
                    ? t('ui.save_amount', { amount: subscriptionService.formatPrice(savings.savingsAmount) })
                    : showPilotBanner
                      ? t('billing.free_months', { count: pilotTrialMonths })
                      : t('billing.free_trial_days', { count: plan.trial_days })
                  }
                </div>
              </div>

              {/* Perfect For */}
              {plan.recommended_for_key && (
                <div className={`mb-6 text-center px-4 py-2 rounded-lg ${
                  (isPopular || isSelected) && !isCurrentPlan ? 'bg-white/10' : 'bg-[var(--bg-primary)] border border-[var(--border-primary)]'
                }`}>
                  <p className={`text-sm font-medium ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white/90' : 'text-[var(--text-secondary)]'}`}>
                    {t(plan.recommended_for_key)}
                  </p>
                </div>
              )}

              {/* Feature Inheritance Indicator */}
              {tier === SUBSCRIPTION_TIERS.PROFESSIONAL && (
                <div className={`mb-5 px-4 py-3 rounded-xl transition-all ${
                  (isPopular || isSelected) && !isCurrentPlan
                    ? 'bg-gradient-to-r from-white/20 to-white/10 border-2 border-white/40 shadow-lg'
                    : 'bg-gradient-to-r from-blue-500/10 to-blue-600/5 border-2 border-blue-400/30 dark:from-blue-400/10 dark:to-blue-500/5 dark:border-blue-400/30'
                }`}>
                  <p className={`text-xs font-bold uppercase tracking-wide text-center ${
                    (isPopular || isSelected) && !isCurrentPlan ? 'text-white drop-shadow-sm' : 'text-blue-600 dark:text-blue-300'
                  }`}>
                    ✓ {t('ui.feature_inheritance_professional')}
                  </p>
                </div>
              )}
              {tier === SUBSCRIPTION_TIERS.ENTERPRISE && (
                <div className={`mb-5 px-4 py-3 rounded-xl transition-all ${
                  (isPopular || isSelected) && !isCurrentPlan
                    ? 'bg-gradient-to-r from-white/20 to-white/10 border-2 border-white/40 shadow-lg'
                    : 'bg-gradient-to-r from-gray-700/20 to-gray-800/10 border-2 border-gray-600/40 dark:from-gray-600/20 dark:to-gray-700/10 dark:border-gray-500/40'
                }`}>
                  <p className={`text-xs font-bold uppercase tracking-wide text-center ${
                    (isPopular || isSelected) && !isCurrentPlan ? 'text-white drop-shadow-sm' : 'text-gray-700 dark:text-gray-300'
                  }`}>
                    ✓ {t('ui.feature_inheritance_enterprise')}
                  </p>
                </div>
              )}

              {/* Top 3 Benefits + Key Limits */}
              <div className="space-y-3 mb-6">
                {/* Business Benefits */}
                {topBenefits.map((feature) => (
                  <div key={feature} className="flex items-start">
                    <div className="flex-shrink-0 mt-1">
                      <div className={`w-5 h-5 rounded-full flex items-center justify-center ${
                        (isPopular || isSelected) && !isCurrentPlan ? 'bg-white' : 'bg-green-500'
                      }`}>
                        <Check className={`w-3 h-3 ${(isPopular || isSelected) && !isCurrentPlan ? 'text-blue-600' : 'text-white'}`} />
                      </div>
                    </div>
                    <span className={`ml-3 text-sm font-medium ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white' : 'text-[var(--text-primary)]'}`}>
                      {formatFeatureName(feature)}
                    </span>
                  </div>
                ))}

                {/* Key Limits (Users, Locations, Products) */}
                <div className={`pt-4 mt-4 border-t space-y-2 ${(isPopular || isSelected) && !isCurrentPlan ? 'border-white/20' : 'border-[var(--border-primary)]'}`}>
                  <div className="flex items-center text-sm">
                    <Users className={`w-4 h-4 mr-2 ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white/80' : 'text-[var(--text-secondary)]'}`} />
                    <span className={`font-medium ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white' : 'text-[var(--text-primary)]'}`}>
                      {formatLimit(plan.limits.users, 'limits.users_unlimited')} {t('limits.users_label', 'usuarios')}
                    </span>
                  </div>
                  <div className="flex items-center text-sm">
                    <MapPin className={`w-4 h-4 mr-2 ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white/80' : 'text-[var(--text-secondary)]'}`} />
                    <span className={`font-medium ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white' : 'text-[var(--text-primary)]'}`}>
                      {formatLimit(plan.limits.locations, 'limits.locations_unlimited')} {t('limits.locations_label', 'ubicaciones')}
                    </span>
                  </div>
                  <div className="flex items-center text-sm">
                    <Package className={`w-4 h-4 mr-2 ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white/80' : 'text-[var(--text-secondary)]'}`} />
                    <span className={`font-medium ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white' : 'text-[var(--text-primary)]'}`}>
                      {formatLimit(plan.limits.products, 'limits.products_unlimited')} {t('limits.products_label', 'productos')}
                    </span>
                  </div>
                </div>
              </div>

              {/* CTA Button */}
              <Button
                disabled={isCurrentPlan}
                className={`w-full py-4 text-base font-semibold transition-all ${
                  isCurrentPlan
                    ? 'bg-gray-400 text-gray-700 cursor-not-allowed opacity-60'
                    : isSelected
                    ? 'bg-white text-green-700 hover:bg-gray-50 shadow-lg border-2 border-white/50'
                    : isPopular
                    ? 'bg-white text-blue-600 hover:bg-gray-100'
                    : 'bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-dark)]'
                }`}
                onClick={(e) => {
                  if ((mode === 'settings' || mode === 'selection') && !isCurrentPlan) {
                    e.preventDefault();
                    e.stopPropagation();
                    handlePlanAction(tier, plan);
                  }
                }}
              >
                {isCurrentPlan
                  ? (
                    <span className="flex items-center justify-center gap-2">
                      <Check className="w-5 h-5" />
                      {t('ui.current_plan', 'Plan Actual')}
                    </span>
                  )
                  : mode === 'selection' && isSelected
                  ? (
                    <span className="flex items-center justify-center gap-2">
                      <Check className="w-5 h-5" />
                      {t('ui.plan_selected', 'Plan Seleccionado')}
                    </span>
                  )
                  : mode === 'settings'
                  ? t('ui.change_subscription', 'Cambiar Suscripción')
                  : t('ui.start_free_trial')}
              </Button>

              {/* Footer */}
              <p className={`text-xs text-center mt-3 ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white/80' : 'text-[var(--text-secondary)]'}`}>
                {showPilotBanner
                  ? t('ui.free_trial_footer', { months: pilotTrialMonths })
                  : t('ui.free_trial_footer', { months: 0 })
                }
              </p>
            </CardWrapper>
          );
        })}
      </div>

      {/* Comparison Link */}
      {showComparison && mode === 'landing' && (
        <div className="text-center mt-8">
          <Link
            to="#comparison"
            className="text-[var(--color-primary)] hover:underline text-sm font-medium"
          >
            {t('ui.view_full_comparison', 'Ver comparación completa de características →')}
          </Link>
        </div>
      )}
    </div>
  );
};