bakery-ia/frontend/src/pages/app/settings/subscription/SubscriptionPage.tsx

import React, { useState, useEffect } from 'react';
import { Crown, Users, MapPin, Package, TrendingUp, RefreshCw, AlertCircle, CheckCircle, ArrowRight, Star, ExternalLink, Download, CreditCard, X, Activity, Database, Zap, HardDrive, ShoppingCart, ChefHat, Settings, Sparkles, ChevronDown, ChevronUp } from 'lucide-react';
import { Button, Card, Badge, Modal } from '../../../../components/ui';
import { DialogModal } from '../../../../components/ui/DialogModal/DialogModal';
import { PageHeader } from '../../../../components/layout';
import { useAuthUser } from '../../../../stores/auth.store';
import { useCurrentTenant } from '../../../../stores';
import { showToast } from '../../../../utils/toast';
import { subscriptionService, type UsageSummary, type AvailablePlans } from '../../../../api';
import { useSubscriptionEvents } from '../../../../contexts/SubscriptionEventsContext';
import { SubscriptionPricingCards } from '../../../../components/subscription/SubscriptionPricingCards';
import { PlanComparisonTable, ROICalculator, UsageMetricCard } from '../../../../components/subscription';
import { useSubscription } from '../../../../hooks/useSubscription';
import {
  trackSubscriptionPageViewed,
  trackUpgradeCTAClicked,
  trackUsageMetricViewed
} from '../../../../utils/subscriptionAnalytics';
import { useTranslation } from 'react-i18next';

const SubscriptionPage: React.FC = () => {
  const user = useAuthUser();
  const currentTenant = useCurrentTenant();
  const { notifySubscriptionChanged } = useSubscriptionEvents();
  const { t } = useTranslation('subscription');

  const [usageSummary, setUsageSummary] = useState<UsageSummary | null>(null);
  const [availablePlans, setAvailablePlans] = useState<AvailablePlans | null>(null);
  const [subscriptionLoading, setSubscriptionLoading] = useState(false);
  const [upgradeDialogOpen, setUpgradeDialogOpen] = useState(false);
  const [selectedPlan, setSelectedPlan] = useState<string>('');
  const [upgrading, setUpgrading] = useState(false);
  const [cancellationDialogOpen, setCancellationDialogOpen] = useState(false);
  const [cancelling, setCancelling] = useState(false);
  const [invoices, setInvoices] = useState<any[]>([]);
  const [invoicesLoading, setInvoicesLoading] = useState(false);
  const [invoicesLoaded, setInvoicesLoaded] = useState(false);

  // New state for enhanced features
  const [showComparison, setShowComparison] = useState(false);
  const [showROI, setShowROI] = useState(false);

  // Use new subscription hook for usage forecast data
  const { subscription: subscriptionData, usage: forecastUsage, forecast } = useSubscription();

  // Load subscription data on component mount
  React.useEffect(() => {
    loadSubscriptionData();
    loadInvoices();
  }, []);

  // Track page view
  useEffect(() => {
    if (usageSummary) {
      trackSubscriptionPageViewed(usageSummary.plan);
    }
  }, [usageSummary]);

  // Track high usage metrics
  useEffect(() => {
    if (forecast?.metrics) {
      forecast.metrics.forEach(metric => {
        if (metric.usage_percentage >= 80) {
          trackUsageMetricViewed(
            metric.metric,
            metric.current,
            metric.limit,
            metric.usage_percentage,
            metric.days_until_breach
          );
        }
      });
    }
  }, [forecast]);

  const loadSubscriptionData = async () => {
    const tenantId = currentTenant?.id || user?.tenant_id;

    if (!tenantId) {
      showToast.error('No se encontró información del tenant');
      return;
    }

    try {
      setSubscriptionLoading(true);
      const [usage, plans] = await Promise.all([
        subscriptionService.getUsageSummary(tenantId),
        subscriptionService.fetchAvailablePlans()
      ]);

      // CRITICAL: No more mock data - show real errors instead
      if (!usage || !usage.usage) {
        throw new Error('No subscription found. Please contact support or create a new subscription.');
      }

      setUsageSummary(usage);
      setAvailablePlans(plans);
    } catch (error) {
      console.error('Error loading subscription data:', error);
      showToast.error(
        error instanceof Error && error.message.includes('No subscription')
          ? error.message
          : "No se pudo cargar la información de suscripción. Por favor, contacte con soporte."
      );
    } finally {
      setSubscriptionLoading(false);
    }
  };

  const handleUpgradeClick = (planKey: string, source: string = 'pricing_cards') => {
    if (usageSummary) {
      trackUpgradeCTAClicked(usageSummary.plan, planKey, source);
    }
    setSelectedPlan(planKey);
    setUpgradeDialogOpen(true);
  };

  const handleUpgradeConfirm = async () => {
    const tenantId = currentTenant?.id || user?.tenant_id;

    if (!tenantId || !selectedPlan) {
      showToast.error('Información de tenant no disponible');
      return;
    }

    try {
      setUpgrading(true);

      const validation = await subscriptionService.validatePlanUpgrade(
        tenantId,
        selectedPlan
      );

      if (!validation.can_upgrade) {
        showToast.error(validation.reason || 'No se puede actualizar el plan');
        return;
      }

      const result = await subscriptionService.upgradePlan(tenantId, selectedPlan);

      if (result.success) {
        showToast.success(result.message);

        // Invalidate cache to ensure fresh data on next fetch
        subscriptionService.invalidateCache();

        // Broadcast subscription change event to refresh sidebar and other components
        notifySubscriptionChanged();

        await loadSubscriptionData();
        setUpgradeDialogOpen(false);
        setSelectedPlan('');
      } else {
        showToast.error('Error al cambiar el plan');
      }
    } catch (error) {
      console.error('Error upgrading plan:', error);
      showToast.error('Error al procesar el cambio de plan');
    } finally {
      setUpgrading(false);
    }
  };

  const handleCancellationClick = () => {
    setCancellationDialogOpen(true);
  };

  const handleCancelSubscription = async () => {
    const tenantId = currentTenant?.id || user?.tenant_id;

    if (!tenantId) {
      showToast.error('Información de tenant no disponible');
      return;
    }

    try {
      setCancelling(true);

      const result = await subscriptionService.cancelSubscription(tenantId, 'User requested cancellation');

      if (result.success) {
        const daysRemaining = result.days_remaining;
        const effectiveDate = new Date(result.cancellation_effective_date).toLocaleDateString('es-ES', {
          year: 'numeric',
          month: 'long',
          day: 'numeric'
        });

        showToast.success(
          `Suscripción cancelada. Acceso de solo lectura a partir del ${effectiveDate} (${daysRemaining} días restantes)`
        );
      }

      await loadSubscriptionData();
      setCancellationDialogOpen(false);
    } catch (error) {
      console.error('Error cancelling subscription:', error);
      showToast.error('Error al cancelar la suscripción');
    } finally {
      setCancelling(false);
    }
  };

  const loadInvoices = async () => {
    const tenantId = currentTenant?.id || user?.tenant_id;

    if (!tenantId) {
      return;
    }

    try {
      setInvoicesLoading(true);
      const fetchedInvoices = await subscriptionService.getInvoices(tenantId);
      setInvoices(fetchedInvoices);
      setInvoicesLoaded(true);
    } catch (error) {
      console.error('Error loading invoices:', error);
      // Don't show error toast on initial load, just log it
      if (invoicesLoaded) {
        showToast.error('Error al cargar las facturas');
      }
    } finally {
      setInvoicesLoading(false);
    }
  };

  const handleDownloadInvoice = (invoice: any) => {
    if (invoice.invoice_pdf) {
      window.open(invoice.invoice_pdf, '_blank');
    } else if (invoice.hosted_invoice_url) {
      window.open(invoice.hosted_invoice_url, '_blank');
    } else {
      showToast.warning('No hay PDF disponible para esta factura');
    }
  };

  const ProgressBar: React.FC<{ value: number; className?: string }> = ({ value, className = '' }) => {
    const getProgressColor = () => {
      if (value >= 90) return 'bg-red-500';
      if (value >= 80) return 'bg-yellow-500';
      return 'bg-green-500';
    };

    return (
      <div className={`w-full bg-[var(--bg-tertiary)] border border-[var(--border-secondary)] rounded-full h-3 ${className}`}>
        <div
          className={`${getProgressColor()} h-full rounded-full transition-all duration-500 relative`}
          style={{ width: `${Math.min(100, Math.max(0, value))}%` }}
        >
          <div className="absolute inset-0 bg-gradient-to-r from-transparent to-white/20 rounded-full"></div>
        </div>
      </div>
    );
  };

  return (
    <div className="p-6 space-y-6">
      <PageHeader
        title="Suscripción y Facturación"
        description="Gestiona tu suscripción, uso de recursos y facturación"
      />

      {subscriptionLoading ? (
        <div className="flex items-center justify-center min-h-[400px]">
          <div className="flex flex-col items-center gap-4">
            <RefreshCw className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
            <p className="text-[var(--text-secondary)]">Cargando información de suscripción...</p>
          </div>
        </div>
      ) : !usageSummary || !availablePlans ? (
        <div className="flex items-center justify-center min-h-[400px]">
          <div className="flex flex-col items-center gap-4">
            <AlertCircle className="w-12 h-12 text-[var(--text-tertiary)]" />
            <div className="text-center">
              <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">No se pudo cargar la información</h3>
              <p className="text-[var(--text-secondary)] mb-4">Hubo un problema al cargar los datos de suscripción</p>
              <Button onClick={loadSubscriptionData} variant="primary">
                <RefreshCw className="w-4 h-4 mr-2" />
                Reintentar
              </Button>
            </div>
          </div>
        </div>
      ) : (
        <>
          {/* Current Plan Overview */}
          <Card className="p-6">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-lg font-semibold text-[var(--text-primary)] flex items-center">
                <Crown className="w-5 h-5 mr-2 text-yellow-500" />
                Plan Actual
              </h3>
              <Badge
                variant={usageSummary.status === 'active' ? 'success' : 'default'}
                className="text-sm font-medium"
              >
                {usageSummary.status === 'active' ? 'Activo' : usageSummary.status}
              </Badge>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              <div className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
                <div className="flex flex-col">
                  <span className="text-sm text-[var(--text-secondary)] mb-1">Plan</span>
                  <span className="font-semibold text-[var(--text-primary)] text-lg capitalize">{usageSummary.plan}</span>
                </div>
              </div>
              <div className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
                <div className="flex flex-col">
                  <span className="text-sm text-[var(--text-secondary)] mb-1">Precio Mensual</span>
                  <span className="font-semibold text-[var(--text-primary)] text-lg">{subscriptionService.formatPrice(usageSummary.monthly_price)}</span>
                </div>
              </div>
              <div className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
                <div className="flex flex-col">
                  <span className="text-sm text-[var(--text-secondary)] mb-1">Próxima Facturación</span>
                  <span className="font-medium text-[var(--text-primary)] text-lg">
                    {new Date(usageSummary.next_billing_date).toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit', year: 'numeric' })}
                  </span>
                </div>
              </div>
              <div className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
                <div className="flex flex-col">
                  <span className="text-sm text-[var(--text-secondary)] mb-1">Ciclo de Facturación</span>
                  <span className="font-medium text-[var(--text-primary)] text-lg capitalize">
                    {usageSummary.billing_cycle === 'monthly' ? 'Mensual' : 'Anual'}
                  </span>
                </div>
              </div>
            </div>
          </Card>

          {/* Usage Details */}
          <Card className="p-6">
            <h3 className="text-lg font-semibold mb-6 text-[var(--text-primary)] flex items-center">
              <TrendingUp className="w-5 h-5 mr-2 text-orange-500" />
              Uso de Recursos
            </h3>

            {/* Team & Organization Metrics */}
            <div className="mb-6">
              <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 uppercase tracking-wide">Equipo & Organización</h4>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {/* Users */}
                <div className="space-y-3 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="p-2 bg-blue-500/10 rounded-lg border border-blue-500/20">
                        <Users className="w-4 h-4 text-blue-500" />
                      </div>
                      <span className="font-medium text-[var(--text-primary)]">Usuarios</span>
                    </div>
                    <span className="text-sm font-bold text-[var(--text-primary)]">
                      {usageSummary.usage.users.current}<span className="text-[var(--text-tertiary)]">/</span>
                      <span className="text-[var(--text-tertiary)]">{usageSummary.usage.users.unlimited ? '∞' : usageSummary.usage.users.limit ?? 0}</span>
                    </span>
                  </div>
                  <ProgressBar value={usageSummary.usage.users.usage_percentage} />
                  <p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
                    <span>{usageSummary.usage.users.usage_percentage}% utilizado</span>
                    <span className="font-medium">{usageSummary.usage.users.unlimited ? 'Ilimitado' : `${(usageSummary.usage.users.limit ?? 0) - usageSummary.usage.users.current} restantes`}</span>
                  </p>
                </div>

                {/* Locations */}
                <div className="space-y-3 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="p-2 bg-green-500/10 rounded-lg border border-green-500/20">
                        <MapPin className="w-4 h-4 text-green-500" />
                      </div>
                      <span className="font-medium text-[var(--text-primary)]">Ubicaciones</span>
                    </div>
                    <span className="text-sm font-bold text-[var(--text-primary)]">
                      {usageSummary.usage.locations.current}<span className="text-[var(--text-tertiary)]">/</span>
                      <span className="text-[var(--text-tertiary)]">{usageSummary.usage.locations.unlimited ? '∞' : usageSummary.usage.locations.limit ?? 0}</span>
                    </span>
                  </div>
                  <ProgressBar value={usageSummary.usage.locations.usage_percentage} />
                  <p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
                    <span>{usageSummary.usage.locations.usage_percentage}% utilizado</span>
                    <span className="font-medium">{usageSummary.usage.locations.unlimited ? 'Ilimitado' : `${(usageSummary.usage.locations.limit ?? 0) - usageSummary.usage.locations.current} restantes`}</span>
                  </p>
                </div>
              </div>
            </div>

            {/* Product & Inventory Metrics */}
            <div className="mb-6">
              <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 uppercase tracking-wide">Productos & Inventario</h4>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {/* Products */}
                <div className="space-y-3 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="p-2 bg-purple-500/10 rounded-lg border border-purple-500/20">
                        <Package className="w-4 h-4 text-purple-500" />
                      </div>
                      <span className="font-medium text-[var(--text-primary)]">Productos</span>
                    </div>
                    <span className="text-sm font-bold text-[var(--text-primary)]">
                      {usageSummary.usage.products.current}<span className="text-[var(--text-tertiary)]">/</span>
                      <span className="text-[var(--text-tertiary)]">{usageSummary.usage.products.unlimited ? '∞' : usageSummary.usage.products.limit ?? 0}</span>
                    </span>
                  </div>
                  <ProgressBar value={usageSummary.usage.products.usage_percentage} />
                  <p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
                    <span>{usageSummary.usage.products.usage_percentage}% utilizado</span>
                    <span className="font-medium">{usageSummary.usage.products.unlimited ? 'Ilimitado' : `${(usageSummary.usage.products.limit ?? 0) - usageSummary.usage.products.current} restantes`}</span>
                  </p>
                </div>

                {/* Recipes */}
                <div className="space-y-3 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="p-2 bg-amber-500/10 rounded-lg border border-amber-500/20">
                        <ChefHat className="w-4 h-4 text-amber-500" />
                      </div>
                      <span className="font-medium text-[var(--text-primary)]">Recetas</span>
                    </div>
                    <span className="text-sm font-bold text-[var(--text-primary)]">
                      {usageSummary.usage.recipes.current}<span className="text-[var(--text-tertiary)]">/</span>
                      <span className="text-[var(--text-tertiary)]">{usageSummary.usage.recipes.unlimited ? '∞' : usageSummary.usage.recipes.limit ?? 0}</span>
                    </span>
                  </div>
                  <ProgressBar value={usageSummary.usage.recipes.usage_percentage} />
                  <p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
                    <span>{usageSummary.usage.recipes.usage_percentage}% utilizado</span>
                    <span className="font-medium">{usageSummary.usage.recipes.unlimited ? 'Ilimitado' : `${(usageSummary.usage.recipes.limit ?? 0) - usageSummary.usage.recipes.current} restantes`}</span>
                  </p>
                </div>

                {/* Suppliers */}
                <div className="space-y-3 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="p-2 bg-teal-500/10 rounded-lg border border-teal-500/20">
                        <ShoppingCart className="w-4 h-4 text-teal-500" />
                      </div>
                      <span className="font-medium text-[var(--text-primary)]">Proveedores</span>
                    </div>
                    <span className="text-sm font-bold text-[var(--text-primary)]">
                      {usageSummary.usage.suppliers.current}<span className="text-[var(--text-tertiary)]">/</span>
                      <span className="text-[var(--text-tertiary)]">{usageSummary.usage.suppliers.unlimited ? '∞' : usageSummary.usage.suppliers.limit ?? 0}</span>
                    </span>
                  </div>
                  <ProgressBar value={usageSummary.usage.suppliers.usage_percentage} />
                  <p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
                    <span>{usageSummary.usage.suppliers.usage_percentage}% utilizado</span>
                    <span className="font-medium">{usageSummary.usage.suppliers.unlimited ? 'Ilimitado' : `${(usageSummary.usage.suppliers.limit ?? 0) - usageSummary.usage.suppliers.current} restantes`}</span>
                  </p>
                </div>
              </div>
            </div>

            {/* ML & Analytics Metrics (Daily) */}
            <div className="mb-6">
              <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 uppercase tracking-wide">IA & Analíticas (Uso Diario)</h4>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {/* Training Jobs Today */}
                <div className="space-y-3 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="p-2 bg-indigo-500/10 rounded-lg border border-indigo-500/20">
                        <Database className="w-4 h-4 text-indigo-500" />
                      </div>
                      <span className="font-medium text-[var(--text-primary)]">Entrenamientos IA Hoy</span>
                    </div>
                    <span className="text-sm font-bold text-[var(--text-primary)]">
                      {usageSummary.usage.training_jobs_today.current}<span className="text-[var(--text-tertiary)]">/</span>
                      <span className="text-[var(--text-tertiary)]">{usageSummary.usage.training_jobs_today.unlimited ? '∞' : usageSummary.usage.training_jobs_today.limit ?? 0}</span>
                    </span>
                  </div>
                  <ProgressBar value={usageSummary.usage.training_jobs_today.usage_percentage} />
                  <p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
                    <span>{usageSummary.usage.training_jobs_today.usage_percentage}% utilizado</span>
                    <span className="font-medium">{usageSummary.usage.training_jobs_today.unlimited ? 'Ilimitado' : `${(usageSummary.usage.training_jobs_today.limit ?? 0) - usageSummary.usage.training_jobs_today.current} restantes`}</span>
                  </p>
                </div>

                {/* Forecasts Today */}
                <div className="space-y-3 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="p-2 bg-pink-500/10 rounded-lg border border-pink-500/20">
                        <TrendingUp className="w-4 h-4 text-pink-500" />
                      </div>
                      <span className="font-medium text-[var(--text-primary)]">Pronósticos Hoy</span>
                    </div>
                    <span className="text-sm font-bold text-[var(--text-primary)]">
                      {usageSummary.usage.forecasts_today.current}<span className="text-[var(--text-tertiary)]">/</span>
                      <span className="text-[var(--text-tertiary)]">{usageSummary.usage.forecasts_today.unlimited ? '∞' : usageSummary.usage.forecasts_today.limit ?? 0}</span>
                    </span>
                  </div>
                  <ProgressBar value={usageSummary.usage.forecasts_today.usage_percentage} />
                  <p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
                    <span>{usageSummary.usage.forecasts_today.usage_percentage}% utilizado</span>
                    <span className="font-medium">{usageSummary.usage.forecasts_today.unlimited ? 'Ilimitado' : `${(usageSummary.usage.forecasts_today.limit ?? 0) - usageSummary.usage.forecasts_today.current} restantes`}</span>
                  </p>
                </div>
              </div>
            </div>

            {/* API & Storage Metrics */}
            <div>
              <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 uppercase tracking-wide">API & Almacenamiento</h4>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {/* API Calls This Hour */}
                <div className="space-y-3 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="p-2 bg-orange-500/10 rounded-lg border border-orange-500/20">
                        <Zap className="w-4 h-4 text-orange-500" />
                      </div>
                      <span className="font-medium text-[var(--text-primary)]">Llamadas API (Esta Hora)</span>
                    </div>
                    <span className="text-sm font-bold text-[var(--text-primary)]">
                      {usageSummary.usage.api_calls_this_hour.current}<span className="text-[var(--text-tertiary)]">/</span>
                      <span className="text-[var(--text-tertiary)]">{usageSummary.usage.api_calls_this_hour.unlimited ? '∞' : usageSummary.usage.api_calls_this_hour.limit ?? 0}</span>
                    </span>
                  </div>
                  <ProgressBar value={usageSummary.usage.api_calls_this_hour.usage_percentage} />
                  <p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
                    <span>{usageSummary.usage.api_calls_this_hour.usage_percentage}% utilizado</span>
                    <span className="font-medium">{usageSummary.usage.api_calls_this_hour.unlimited ? 'Ilimitado' : `${(usageSummary.usage.api_calls_this_hour.limit ?? 0) - usageSummary.usage.api_calls_this_hour.current} restantes`}</span>
                  </p>
                </div>

                {/* File Storage */}
                <div className="space-y-3 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="p-2 bg-cyan-500/10 rounded-lg border border-cyan-500/20">
                        <HardDrive className="w-4 h-4 text-cyan-500" />
                      </div>
                      <span className="font-medium text-[var(--text-primary)]">Almacenamiento</span>
                    </div>
                    <span className="text-sm font-bold text-[var(--text-primary)]">
                      {usageSummary.usage.file_storage_used_gb.current.toFixed(2)}<span className="text-[var(--text-tertiary)]">/</span>
                      <span className="text-[var(--text-tertiary)]">{usageSummary.usage.file_storage_used_gb.unlimited ? '∞' : `${usageSummary.usage.file_storage_used_gb.limit} GB`}</span>
                    </span>
                  </div>
                  <ProgressBar value={usageSummary.usage.file_storage_used_gb.usage_percentage} />
                  <p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
                    <span>{usageSummary.usage.file_storage_used_gb.usage_percentage}% utilizado</span>
                    <span className="font-medium">{usageSummary.usage.file_storage_used_gb.unlimited ? 'Ilimitado' : `${((usageSummary.usage.file_storage_used_gb.limit ?? 0) - usageSummary.usage.file_storage_used_gb.current).toFixed(2)} GB restantes`}</span>
                  </p>
                </div>
              </div>
            </div>
          </Card>

          {/* Enhanced Usage Metrics with Predictive Analytics */}
          {forecastUsage && forecast && (
            <Card className="p-6">
              <div className="flex items-center justify-between mb-6">
                <h3 className="text-lg font-semibold text-[var(--text-primary)] flex items-center">
                  <TrendingUp className="w-5 h-5 mr-2 text-purple-500" />
                  Análisis Predictivo de Uso
                </h3>
                <p className="text-sm text-[var(--text-secondary)]">
                  Predicciones basadas en tendencias de crecimiento
                </p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {/* Products */}
                <UsageMetricCard
                  metric="products"
                  label="Productos"
                  current={forecastUsage.products.current}
                  limit={forecastUsage.products.limit}
                  trend={forecastUsage.products.trend}
                  predictedBreachDate={forecastUsage.products.predictedBreachDate}
                  daysUntilBreach={forecastUsage.products.daysUntilBreach}
                  currentTier={usageSummary.plan}
                  upgradeTier="professional"
                  upgradeLimit={500}
                  onUpgrade={() => handleUpgradeClick('professional', 'usage_metric_products')}
                  icon={<Package className="w-5 h-5" />}
                />

                {/* Users */}
                <UsageMetricCard
                  metric="users"
                  label="Usuarios"
                  current={forecastUsage.users.current}
                  limit={forecastUsage.users.limit}
                  trend={forecastUsage.users.trend}
                  predictedBreachDate={forecastUsage.users.predictedBreachDate}
                  daysUntilBreach={forecastUsage.users.daysUntilBreach}
                  currentTier={usageSummary.plan}
                  upgradeTier="professional"
                  upgradeLimit={20}
                  onUpgrade={() => handleUpgradeClick('professional', 'usage_metric_users')}
                  icon={<Users className="w-5 h-5" />}
                />

                {/* Locations */}
                <UsageMetricCard
                  metric="locations"
                  label="Ubicaciones"
                  current={forecastUsage.locations.current}
                  limit={forecastUsage.locations.limit}
                  currentTier={usageSummary.plan}
                  upgradeTier="professional"
                  upgradeLimit={3}
                  onUpgrade={() => handleUpgradeClick('professional', 'usage_metric_locations')}
                  icon={<MapPin className="w-5 h-5" />}
                />

                {/* Training Jobs */}
                <UsageMetricCard
                  metric="training_jobs"
                  label="Entrenamientos IA"
                  current={forecastUsage.trainingJobs.current}
                  limit={forecastUsage.trainingJobs.limit}
                  unit="/día"
                  currentTier={usageSummary.plan}
                  upgradeTier="professional"
                  upgradeLimit={5}
                  onUpgrade={() => handleUpgradeClick('professional', 'usage_metric_training')}
                  icon={<Database className="w-5 h-5" />}
                />

                {/* Forecasts */}
                <UsageMetricCard
                  metric="forecasts"
                  label="Pronósticos"
                  current={forecastUsage.forecasts.current}
                  limit={forecastUsage.forecasts.limit}
                  unit="/día"
                  currentTier={usageSummary.plan}
                  upgradeTier="professional"
                  upgradeLimit={100}
                  onUpgrade={() => handleUpgradeClick('professional', 'usage_metric_forecasts')}
                  icon={<TrendingUp className="w-5 h-5" />}
                />

                {/* Storage */}
                <UsageMetricCard
                  metric="storage"
                  label="Almacenamiento"
                  current={forecastUsage.storage.current}
                  limit={forecastUsage.storage.limit}
                  unit=" GB"
                  trend={forecastUsage.storage.trend}
                  predictedBreachDate={forecastUsage.storage.predictedBreachDate}
                  daysUntilBreach={forecastUsage.storage.daysUntilBreach}
                  currentTier={usageSummary.plan}
                  upgradeTier="professional"
                  upgradeLimit={10}
                  onUpgrade={() => handleUpgradeClick('professional', 'usage_metric_storage')}
                  icon={<HardDrive className="w-5 h-5" />}
                />
              </div>
            </Card>
          )}

          {/* High Usage Warning Banner (Starter tier with >80% usage) */}
          {usageSummary.plan === 'starter' && forecastUsage && forecastUsage.highUsageMetrics.length > 0 && (
            <Card className="p-6 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 border-2 border-blue-500">
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center flex-shrink-0">
                  <Sparkles className="w-6 h-6 text-white" />
                </div>
                <div className="flex-1">
                  <h3 className="text-lg font-bold mb-2">
                    ¡Estás superando el plan Starter!
                  </h3>
                  <p className="text-sm text-[var(--text-secondary)] mb-4">
                    Estás usando {forecastUsage.highUsageMetrics.length} métrica{forecastUsage.highUsageMetrics.length > 1 ? 's' : ''} con más del 80% de capacidad.
                    Actualiza a Professional para obtener 10 veces más capacidad y funciones avanzadas.
                  </p>
                  <div className="flex flex-wrap gap-2">
                    <Button
                      onClick={() => handleUpgradeClick('professional', 'high_usage_banner')}
                      className="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white"
                    >
                      Actualizar a Professional
                    </Button>
                    <Button
                      variant="outline"
                      onClick={() => setShowROI(true)}
                    >
                      Ver Tus Ahorros
                    </Button>
                  </div>
                </div>
              </div>
            </Card>
          )}

          {/* ROI Calculator (Starter tier only) */}
          {usageSummary.plan === 'starter' && (
            <Card className="p-6">
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-semibold text-[var(--text-primary)]">Calcula Tus Ahorros</h3>
                <button
                  onClick={() => setShowROI(!showROI)}
                  className="text-sm text-[var(--color-primary)] hover:underline flex items-center gap-1"
                >
                  {showROI ? (
                    <>
                      <ChevronUp className="w-4 h-4" />
                      Ocultar Calculadora
                    </>
                  ) : (
                    <>
                      <ChevronDown className="w-4 h-4" />
                      Mostrar Calculadora
                    </>
                  )}
                </button>
              </div>

              {showROI && (
                <ROICalculator
                  currentTier="starter"
                  targetTier="professional"
                  monthlyPrice={149}
                  context="settings"
                  defaultExpanded={false}
                  onUpgrade={() => handleUpgradeClick('professional', 'roi_calculator')}
                />
              )}
            </Card>
          )}

          {/* Plan Comparison */}
          {availablePlans && (
            <Card className="p-6">
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-semibold text-[var(--text-primary)]">Comparar Planes</h3>
                <button
                  onClick={() => setShowComparison(!showComparison)}
                  className="text-sm text-[var(--color-primary)] hover:underline flex items-center gap-1"
                >
                  {showComparison ? (
                    <>
                      <ChevronUp className="w-4 h-4" />
                      Ocultar Comparación
                    </>
                  ) : (
                    <>
                      <ChevronDown className="w-4 h-4" />
                      Mostrar Comparación Detallada
                    </>
                  )}
                </button>
              </div>

              {showComparison && (
                <PlanComparisonTable
                  plans={availablePlans}
                  currentTier={usageSummary.plan}
                  onSelectPlan={(tier) => handleUpgradeClick(tier, 'comparison_table')}
                  mode="inline"
                />
              )}
            </Card>
          )}

          {/* Available Plans */}
          <Card className="p-6">
            <h3 className="text-lg font-semibold mb-6 text-[var(--text-primary)] flex items-center">
              <Crown className="w-5 h-5 mr-2 text-yellow-500" />
              Planes Disponibles
            </h3>
            <SubscriptionPricingCards
              mode="settings"
              selectedPlan={usageSummary.plan}
              onPlanSelect={(plan) => handleUpgradeClick(plan, 'pricing_cards')}
              showPilotBanner={false}
            />
          </Card>

          {/* Invoices Section */}
          <Card className="p-6">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-lg font-semibold text-[var(--text-primary)] flex items-center">
                <Download className="w-5 h-5 mr-2 text-blue-500" />
                Historial de Facturas
              </h3>
            </div>

            {invoicesLoading && !invoicesLoaded ? (
              <div className="flex items-center justify-center py-8">
                <div className="flex flex-col items-center gap-4">
                  <RefreshCw className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
                  <p className="text-[var(--text-secondary)]">Cargando facturas...</p>
                </div>
              </div>
            ) : invoices.length === 0 ? (
              <div className="text-center py-8">
                <div className="flex flex-col items-center gap-3">
                  <div className="p-4 bg-[var(--bg-secondary)] rounded-full">
                    <Download className="w-8 h-8 text-[var(--text-tertiary)]" />
                  </div>
                  <p className="text-[var(--text-secondary)]">No hay facturas disponibles</p>
                  <p className="text-sm text-[var(--text-tertiary)]">Las facturas aparecerán aquí una vez realizados los pagos</p>
                </div>
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b border-[var(--border-color)]">
                      <th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium text-sm">Fecha</th>
                      <th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium text-sm">Descripción</th>
                      <th className="text-right py-3 px-4 text-[var(--text-secondary)] font-medium text-sm">Monto</th>
                      <th className="text-center py-3 px-4 text-[var(--text-secondary)] font-medium text-sm">Estado</th>
                      <th className="text-center py-3 px-4 text-[var(--text-secondary)] font-medium text-sm">Acciones</th>
                    </tr>
                  </thead>
                  <tbody>
                    {invoices.map((invoice) => (
                      <tr key={invoice.id} className="border-b border-[var(--border-color)] hover:bg-[var(--bg-secondary)] transition-colors">
                        <td className="py-3 px-4 text-[var(--text-primary)] font-medium">
                          {new Date(invoice.date).toLocaleDateString('es-ES', {
                            day: '2-digit',
                            month: 'short',
                            year: 'numeric'
                          })}
                        </td>
                        <td className="py-3 px-4 text-[var(--text-primary)]">
                          {invoice.description || 'Suscripción'}
                        </td>
                        <td className="py-3 px-4 text-[var(--text-primary)] font-semibold text-right">
                          {subscriptionService.formatPrice(invoice.amount)}
                        </td>
                        <td className="py-3 px-4 text-center">
                          <Badge variant={invoice.status === 'paid' ? 'success' : invoice.status === 'open' ? 'warning' : 'default'}>
                            {invoice.status === 'paid' ? 'Pagada' : invoice.status === 'open' ? 'Pendiente' : invoice.status}
                          </Badge>
                        </td>
                        <td className="py-3 px-4 text-center">
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleDownloadInvoice(invoice)}
                            disabled={!invoice.invoice_pdf && !invoice.hosted_invoice_url}
                            className="flex items-center gap-2 mx-auto"
                          >
                            <Download className="w-4 h-4" />
                            {invoice.invoice_pdf ? 'PDF' : 'Ver'}
                          </Button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </Card>

          {/* Subscription Management */}
          <Card className="p-6">
            <h3 className="text-lg font-semibold mb-6 text-[var(--text-primary)] flex items-center">
              <Settings className="w-5 h-5 mr-2 text-purple-500" />
              Gestión de Suscripción
            </h3>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Payment Method Card */}
              <div className="p-6 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)] hover:border-[var(--color-primary)]/30 transition-colors">
                <div className="flex items-start gap-4">
                  <div className="p-3 bg-blue-500/10 rounded-lg border border-blue-500/20 flex-shrink-0">
                    <CreditCard className="w-6 h-6 text-blue-500" />
                  </div>
                  <div className="flex-1">
                    <h4 className="font-semibold text-[var(--text-primary)] mb-2">Método de Pago</h4>
                    <p className="text-sm text-[var(--text-secondary)] mb-4 leading-relaxed">
                      Actualiza tu información de pago para asegurar la continuidad de tu servicio sin interrupciones.
                    </p>
                    <Button
                      variant="outline"
                      className="flex items-center gap-2 w-full sm:w-auto"
                      onClick={() => showToast.info('Función disponible próximamente')}
                    >
                      <CreditCard className="w-4 h-4" />
                      Actualizar Método de Pago
                    </Button>
                  </div>
                </div>
              </div>

              {/* Cancel Subscription Card */}
              <div className="p-6 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)] hover:border-red-500/30 transition-colors">
                <div className="flex items-start gap-4">
                  <div className="p-3 bg-red-500/10 rounded-lg border border-red-500/20 flex-shrink-0">
                    <AlertCircle className="w-6 h-6 text-red-500" />
                  </div>
                  <div className="flex-1">
                    <h4 className="font-semibold text-[var(--text-primary)] mb-2">Cancelar Suscripción</h4>
                    <p className="text-sm text-[var(--text-secondary)] mb-4 leading-relaxed">
                      Si cancelas, mantendrás acceso de solo lectura hasta el final de tu período de facturación actual.
                    </p>
                    <Button
                      variant="danger"
                      onClick={handleCancellationClick}
                      className="flex items-center gap-2 w-full sm:w-auto"
                    >
                      <X className="w-4 h-4" />
                      Cancelar Suscripción
                    </Button>
                  </div>
                </div>
              </div>
            </div>

            {/* Additional Info */}
            <div className="mt-6 p-4 bg-blue-500/5 border border-blue-500/20 rounded-lg">
              <div className="flex items-start gap-3">
                <Activity className="w-5 h-5 text-blue-500 flex-shrink-0 mt-0.5" />
                <div>
                  <p className="text-sm text-[var(--text-primary)] font-medium mb-1">
                    ¿Necesitas ayuda?
                  </p>
                  <p className="text-sm text-[var(--text-secondary)]">
                    Si tienes preguntas sobre tu suscripción o necesitas asistencia, contacta a nuestro equipo de soporte en{' '}
                    <a href="mailto:support@bakery-ia.com" className="text-blue-500 hover:text-white hover:bg-blue-500 px-2 py-0.5 rounded transition-all duration-200 no-underline">
                      support@bakery-ia.com
                    </a>
                  </p>
                </div>
              </div>
            </div>
          </Card>
        </>
      )}

      {/* Upgrade Dialog */}
      {upgradeDialogOpen && selectedPlan && availablePlans && (
        <DialogModal
          isOpen={upgradeDialogOpen}
          onClose={() => setUpgradeDialogOpen(false)}
          title="Confirmar Cambio de Plan"
          message={
            <div className="space-y-3">
              <p>¿Estás seguro de que quieres cambiar tu plan de suscripción?</p>
              {availablePlans.plans[selectedPlan as keyof typeof availablePlans.plans] && usageSummary && (
                <div className="p-4 bg-[var(--bg-secondary)] rounded-lg space-y-2">
                  <div className="flex justify-between">
                    <span>Plan actual:</span>
                    <span>{t(`plans.${usageSummary.plan}.name`, usageSummary.plan)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Nuevo plan:</span>
                    <span>{t(`plans.${selectedPlan}.name`, availablePlans.plans[selectedPlan as keyof typeof availablePlans.plans].name)}</span>
                  </div>
                  <div className="flex justify-between font-medium">
                    <span>Nuevo precio:</span>
                    <span>{subscriptionService.formatPrice(availablePlans.plans[selectedPlan as keyof typeof availablePlans.plans].monthly_price)}/mes</span>
                  </div>
                </div>
              )}
            </div>
          }
          type="confirm"
          onConfirm={handleUpgradeConfirm}
          onCancel={() => setUpgradeDialogOpen(false)}
          confirmLabel="Confirmar Cambio"
          cancelLabel="Cancelar"
          loading={upgrading}
        />
      )}

      {/* Cancellation Dialog */}
      {cancellationDialogOpen && (
        <DialogModal
          isOpen={cancellationDialogOpen}
          onClose={() => setCancellationDialogOpen(false)}
          title="Cancelar Suscripción"
          message={
            <div className="space-y-3">
              <p>¿Estás seguro de que deseas cancelar tu suscripción? Esta acción no se puede deshacer.</p>
              <p>Perderás acceso a las funcionalidades premium al final del período de facturación actual.</p>
            </div>
          }
          type="warning"
          onConfirm={handleCancelSubscription}
          onCancel={() => setCancellationDialogOpen(false)}
          confirmLabel="Confirmar Cancelación"
          cancelLabel="Volver"
          loading={cancelling}
        />
      )}
    </div>
  );
};

export default SubscriptionPage;