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

import React, { useState } from 'react';
import { Crown, Users, MapPin, Package, TrendingUp, RefreshCw, AlertCircle, CheckCircle, ArrowRight, Star, ExternalLink, Download, CreditCard, X } from 'lucide-react';
import { Button, Card, Badge, Modal } from '../../../../components/ui';
import { PageHeader } from '../../../../components/layout';
import { useAuthUser } from '../../../../stores/auth.store';
import { useCurrentTenant } from '../../../../stores';
import { useToast } from '../../../../hooks/ui/useToast';
import { subscriptionService, type UsageSummary, type AvailablePlans } from '../../../../api';

const SubscriptionPage: React.FC = () => {
  const user = useAuthUser();
  const currentTenant = useCurrentTenant();
  const { addToast } = useToast();

  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);

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

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

    if (!tenantId) {
      addToast('No se encontró información del tenant', { type: 'error' });
      return;
    }

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

      // FIX: Handle demo mode or missing subscription data
      if (!usage || !usage.usage) {
        // If no usage data, likely a demo tenant - create mock data
        const mockUsage: UsageSummary = {
          plan: 'demo',
          status: 'active',
          monthly_price: 0,
          next_billing_date: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
          usage: {
            users: {
              current: 1,
              limit: 5,
              unlimited: false,
              usage_percentage: 20
            },
            locations: {
              current: 1,
              limit: 1,
              unlimited: false,
              usage_percentage: 100
            },
            products: {
              current: 0,
              limit: 50,
              unlimited: false,
              usage_percentage: 0
            }
          }
        };
        setUsageSummary(mockUsage);
      } else {
        setUsageSummary(usage);
      }
      setAvailablePlans(plans);
    } catch (error) {
      console.error('Error loading subscription data:', error);
      addToast("No se pudo cargar la información de suscripción", { type: 'error' });
    } finally {
      setSubscriptionLoading(false);
    }
  };

  const handleUpgradeClick = (planKey: string) => {
    setSelectedPlan(planKey);
    setUpgradeDialogOpen(true);
  };

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

    if (!tenantId || !selectedPlan) {
      addToast('Información de tenant no disponible', { type: 'error' });
      return;
    }

    try {
      setUpgrading(true);

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

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

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

      if (result.success) {
        addToast(result.message, { type: 'success' });

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

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

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

    if (!tenantId) {
      addToast('Información de tenant no disponible', { type: 'error' });
      return;
    }

    try {
      setCancelling(true);

      // In a real implementation, this would call an API endpoint to cancel the subscription
      // const result = await subscriptionService.cancelSubscription(tenantId);
      
      // For now, we'll simulate the cancellation
      addToast('Tu suscripción ha sido cancelada', { type: 'success' });

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

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

    if (!tenantId) {
      addToast('No se encontró información del tenant', { type: 'error' });
      return;
    }

    try {
      setInvoicesLoading(true);
      // In a real implementation, this would call an API endpoint to get invoices
      // const invoices = await subscriptionService.getInvoices(tenantId);
      
      // For now, we'll simulate some invoices
      setInvoices([
        { id: 'inv_001', date: '2023-10-01', amount: 49.00, status: 'paid', description: 'Plan Starter Mensual' },
        { id: 'inv_002', date: '2023-09-01', amount: 49.00, status: 'paid', description: 'Plan Starter Mensual' },
        { id: 'inv_003', date: '2023-08-01', amount: 49.00, status: 'paid', description: 'Plan Starter Mensual' },
      ]);
    } catch (error) {
      console.error('Error loading invoices:', error);
      addToast('Error al cargar las facturas', { type: 'error' });
    } finally {
      setInvoicesLoading(false);
    }
  };

  const handleDownloadInvoice = (invoiceId: string) => {
    // In a real implementation, this would download the actual invoice
    console.log(`Downloading invoice: ${invoiceId}`);
    addToast(`Descargando factura ${invoiceId}`, { type: 'info' });
  };

  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: {usageSummary.plan}
              </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 mb-6">
              <div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-[var(--text-secondary)]">Precio Mensual</span>
                  <span className="font-semibold text-[var(--text-primary)]">{subscriptionService.formatPrice(usageSummary.monthly_price)}</span>
                </div>
              </div>
              <div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-[var(--text-secondary)]">Próxima Facturación</span>
                  <span className="font-medium text-[var(--text-primary)]">
                    {new Date(usageSummary.next_billing_date).toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit' })}
                  </span>
                </div>
              </div>
              <div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-[var(--text-secondary)]">Usuarios</span>
                  <span className="font-medium text-[var(--text-primary)]">
                    {usageSummary.usage.users.current}/{usageSummary.usage.users.unlimited ? '∞' : usageSummary.usage.users.limit}
                  </span>
                </div>
              </div>
              <div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-[var(--text-secondary)]">Ubicaciones</span>
                  <span className="font-medium text-[var(--text-primary)]">
                    {usageSummary.usage.locations.current}/{usageSummary.usage.locations.unlimited ? '∞' : usageSummary.usage.locations.limit}
                  </span>
                </div>
              </div>
            </div>

            <div className="flex flex-wrap gap-2">
              <Button variant="outline" onClick={() => window.open('https://billing.bakery.com', '_blank')} className="flex items-center gap-2">
                <ExternalLink className="w-4 h-4" />
                Portal de Facturación
              </Button>
              <Button variant="outline" onClick={() => console.log('Download invoice')} className="flex items-center gap-2">
                <Download className="w-4 h-4" />
                Descargar Facturas
              </Button>
              <Button variant="outline" onClick={loadSubscriptionData} className="flex items-center gap-2">
                <RefreshCw className="w-4 h-4" />
                Actualizar
              </Button>
            </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>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {/* Users */}
              <div className="space-y-4 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}</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 - usageSummary.usage.users.current} restantes`}</span>
                </p>
              </div>

              {/* Locations */}
              <div className="space-y-4 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}</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 - usageSummary.usage.locations.current} restantes`}</span>
                </p>
              </div>

              {/* Products */}
              <div className="space-y-4 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}</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' : 'Ilimitado'}</span>
                </p>
              </div>
            </div>
          </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>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {Object.entries(availablePlans.plans).map(([planKey, plan]) => {
                const isCurrentPlan = usageSummary.plan === planKey;
                const getPlanColor = () => {
                  switch (planKey) {
                    case 'starter': return 'border-blue-500/30 bg-blue-500/5';
                    case 'professional': return 'border-purple-500/30 bg-purple-500/5';
                    case 'enterprise': return 'border-amber-500/30 bg-amber-500/5';
                    default: return 'border-[var(--border-primary)] bg-[var(--bg-secondary)]';
                  }
                };

                return (
                  <Card
                    key={planKey}
                    className={`relative p-6 ${getPlanColor()} ${
                      isCurrentPlan ? 'ring-2 ring-[var(--color-primary)]' : ''
                    }`}
                  >
                    {plan.popular && (
                      <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                        <Badge variant="primary" className="px-3 py-1">
                          <Star className="w-3 h-3 mr-1" />
                          Más Popular
                        </Badge>
                      </div>
                    )}

                    <div className="text-center mb-6">
                      <h4 className="text-xl font-bold text-[var(--text-primary)] mb-2">{plan.name}</h4>
                      <div className="text-3xl font-bold text-[var(--color-primary)] mb-1">
                        {subscriptionService.formatPrice(plan.monthly_price)}
                        <span className="text-lg text-[var(--text-secondary)]">/mes</span>
                      </div>
                      <p className="text-sm text-[var(--text-secondary)]">{plan.description}</p>
                    </div>

                    <div className="space-y-3 mb-6">
                      <div className="flex items-center gap-2 text-sm">
                        <Users className="w-4 h-4 text-[var(--color-primary)]" />
                        <span>{plan.max_users === -1 ? 'Usuarios ilimitados' : `${plan.max_users} usuarios`}</span>
                      </div>
                      <div className="flex items-center gap-2 text-sm">
                        <MapPin className="w-4 h-4 text-[var(--color-primary)]" />
                        <span>{plan.max_locations === -1 ? 'Ubicaciones ilimitadas' : `${plan.max_locations} ubicación${plan.max_locations > 1 ? 'es' : ''}`}</span>
                      </div>
                      <div className="flex items-center gap-2 text-sm">
                        <Package className="w-4 h-4 text-[var(--color-primary)]" />
                        <span>{plan.max_products === -1 ? 'Productos ilimitados' : `${plan.max_products} productos`}</span>
                      </div>
                    </div>

                    {/* Features Section */}
                    <div className="border-t border-[var(--border-color)] pt-4 mb-6">
                      <h5 className="text-sm font-semibold text-[var(--text-primary)] mb-3 flex items-center">
                        <TrendingUp className="w-4 h-4 mr-2 text-[var(--color-primary)]" />
                        Funcionalidades Incluidas
                      </h5>
                      <div className="space-y-2">
                        {(() => {
                          const getPlanFeatures = (planKey: string) => {
                            switch (planKey) {
                              case 'starter':
                                return [
                                  '✓ Panel de Control Básico',
                                  '✓ Gestión de Inventario',
                                  '✓ Gestión de Pedidos',
                                  '✓ Gestión de Proveedores',
                                  '✓ Punto de Venta Básico',
                                  '✗ Analytics Avanzados',
                                  '✗ Pronósticos IA',
                                  '✗ Insights Predictivos'
                                ];
                              case 'professional':
                                return [
                                  '✓ Panel de Control Avanzado',
                                  '✓ Gestión de Inventario Completa',
                                  '✓ Analytics de Ventas',
                                  '✓ Pronósticos con IA (92% precisión)',
                                  '✓ Análisis de Rendimiento',
                                  '✓ Optimización de Producción',
                                  '✓ Integración POS',
                                  '✗ Insights Predictivos Avanzados'
                                ];
                              case 'enterprise':
                                return [
                                  '✓ Todas las funcionalidades Professional',
                                  '✓ Insights Predictivos con IA',
                                  '✓ Analytics Multi-ubicación',
                                  '✓ Integración ERP',
                                  '✓ API Personalizada',
                                  '✓ Gestor de Cuenta Dedicado',
                                  '✓ Soporte 24/7 Prioritario',
                                  '✓ Demo Personalizada'
                                ];
                              default:
                                return [];
                            }
                          };

                          return getPlanFeatures(planKey).map((feature, index) => (
                            <div key={index} className={`text-xs flex items-center gap-2 ${
                              feature.startsWith('✓')
                                ? 'text-green-600'
                                : 'text-[var(--text-secondary)] opacity-60'
                            }`}>
                              <span>{feature}</span>
                            </div>
                          ));
                        })()}
                      </div>
                    </div>

                    {isCurrentPlan ? (
                      <Badge variant="success" className="w-full justify-center py-2">
                        <CheckCircle className="w-4 h-4 mr-2" />
                        Plan Actual
                      </Badge>
                    ) : (
                      <Button
                        variant={plan.popular ? 'primary' : 'outline'}
                        className="w-full"
                        onClick={() => handleUpgradeClick(planKey)}
                      >
                        {plan.contact_sales ? 'Contactar Ventas' : 'Cambiar Plan'}
                        <ArrowRight className="w-4 h-4 ml-2" />
                      </Button>
                    )}
                  </Card>
                );
              })}
            </div>
          </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>
              <Button 
                variant="outline" 
                onClick={loadInvoices} 
                disabled={invoicesLoading}
                className="flex items-center gap-2"
              >
                <RefreshCw className={`w-4 h-4 ${invoicesLoading ? 'animate-spin' : ''}`} />
                {invoicesLoading ? 'Cargando...' : 'Actualizar'}
              </Button>
            </div>

            {invoicesLoading ? (
              <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">
                <p className="text-[var(--text-secondary)]">No hay facturas disponibles</p>
              </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">ID</th>
                      <th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium">Fecha</th>
                      <th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium">Descripción</th>
                      <th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium">Monto</th>
                      <th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium">Estado</th>
                      <th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium">Acciones</th>
                    </tr>
                  </thead>
                  <tbody>
                    {invoices.map((invoice) => (
                      <tr key={invoice.id} className="border-b border-[var(--border-color)] hover:bg-[var(--bg-secondary)]">
                        <td className="py-3 px-4 text-[var(--text-primary)]">{invoice.id}</td>
                        <td className="py-3 px-4 text-[var(--text-primary)]">{invoice.date}</td>
                        <td className="py-3 px-4 text-[var(--text-primary)]">{invoice.description}</td>
                        <td className="py-3 px-4 text-[var(--text-primary)]">{subscriptionService.formatPrice(invoice.amount)}</td>
                        <td className="py-3 px-4">
                          <Badge variant={invoice.status === 'paid' ? 'success' : 'default'}>
                            {invoice.status === 'paid' ? 'Pagada' : 'Pendiente'}
                          </Badge>
                        </td>
                        <td className="py-3 px-4">
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleDownloadInvoice(invoice.id)}
                            className="flex items-center gap-2"
                          >
                            <Download className="w-4 h-4" />
                            Descargar
                          </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">
              <CreditCard className="w-5 h-5 mr-2 text-red-500" />
              Gestión de Suscripción
            </h3>
            
            <div className="flex flex-col sm:flex-row gap-4">
              <div className="flex-1">
                <h4 className="font-medium text-[var(--text-primary)] mb-2">Cancelar Suscripción</h4>
                <p className="text-sm text-[var(--text-secondary)] mb-4">
                  Si cancelas tu suscripción, perderás acceso a las funcionalidades premium al final del período de facturación actual.
                </p>
                <Button
                  variant="danger"
                  onClick={handleCancellationClick}
                  className="flex items-center gap-2"
                >
                  <X className="w-4 h-4" />
                  Cancelar Suscripción
                </Button>
              </div>
              
              <div className="flex-1">
                <h4 className="font-medium text-[var(--text-primary)] mb-2">Método de Pago</h4>
                <p className="text-sm text-[var(--text-secondary)] mb-4">
                  Actualiza tu información de pago para asegurar la continuidad de tu servicio.
                </p>
                <Button
                  variant="outline"
                  className="flex items-center gap-2"
                >
                  <CreditCard className="w-4 h-4" />
                  Actualizar Método de Pago
                </Button>
              </div>
            </div>
          </Card>
        </>
      )}

      {/* Upgrade Modal */}
      {upgradeDialogOpen && selectedPlan && availablePlans && (
        <Modal
          isOpen={upgradeDialogOpen}
          onClose={() => setUpgradeDialogOpen(false)}
          title="Confirmar Cambio de Plan"
        >
          <div className="space-y-4">
            <p className="text-[var(--text-secondary)]">
              ¿Estás seguro de que quieres cambiar tu plan de suscripción?
            </p>
            {availablePlans.plans[selectedPlan] && usageSummary && (
              <div className="p-4 bg-[var(--bg-secondary)] rounded-lg space-y-2">
                <div className="flex justify-between">
                  <span>Plan actual:</span>
                  <span>{usageSummary.plan}</span>
                </div>
                <div className="flex justify-between">
                  <span>Nuevo plan:</span>
                  <span>{availablePlans.plans[selectedPlan].name}</span>
                </div>
                <div className="flex justify-between font-medium">
                  <span>Nuevo precio:</span>
                  <span>{subscriptionService.formatPrice(availablePlans.plans[selectedPlan].monthly_price)}/mes</span>
                </div>
              </div>
            )}

            <div className="flex gap-2 pt-4">
              <Button
                variant="outline"
                onClick={() => setUpgradeDialogOpen(false)}
                className="flex-1"
              >
                Cancelar
              </Button>
              <Button
                variant="primary"
                onClick={handleUpgradeConfirm}
                disabled={upgrading}
                className="flex-1"
              >
                {upgrading ? 'Procesando...' : 'Confirmar Cambio'}
              </Button>
            </div>
          </div>
        </Modal>
      )}

      {/* Cancellation Modal */}
      {cancellationDialogOpen && (
        <Modal
          isOpen={cancellationDialogOpen}
          onClose={() => setCancellationDialogOpen(false)}
          title="Cancelar Suscripción"
        >
          <div className="space-y-4">
            <p className="text-[var(--text-secondary)]">
              ¿Estás seguro de que deseas cancelar tu suscripción? Esta acción no se puede deshacer.
            </p>
            <p className="text-[var(--text-secondary)]">
              Perderás acceso a las funcionalidades premium al final del período de facturación actual.
            </p>

            <div className="flex gap-2 pt-4">
              <Button
                variant="outline"
                onClick={() => setCancellationDialogOpen(false)}
                className="flex-1"
              >
                Volver
              </Button>
              <Button
                variant="danger"
                onClick={handleCancelSubscription}
                disabled={cancelling}
                className="flex-1"
              >
                {cancelling ? 'Cancelando...' : 'Confirmar Cancelación'}
              </Button>
            </div>
          </div>
        </Modal>
      )}
    </div>
  );
};

export default SubscriptionPage;