import React, { useState } from 'react';
import { Crown, Users, MapPin, Package, TrendingUp, RefreshCw, AlertCircle, CheckCircle, ArrowRight, Star, ExternalLink, Download, CreditCard, X, Activity, Database, Zap, HardDrive, ShoppingCart, ChefHat } 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';
import { SubscriptionPricingCards } from '../../../../components/subscription/SubscriptionPricingCards';

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.fetchAvailablePlans()
      ]);

      // 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: 'starter',
          status: 'active',
          billing_cycle: 'monthly',
          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
            },
            recipes: {
              current: 0,
              limit: 50,
              unlimited: false,
              usage_percentage: 0
            },
            suppliers: {
              current: 0,
              limit: 20,
              unlimited: false,
              usage_percentage: 0
            },
            training_jobs_today: {
              current: 0,
              limit: 1,
              unlimited: false,
              usage_percentage: 0
            },
            forecasts_today: {
              current: 0,
              limit: 10,
              unlimited: false,
              usage_percentage: 0
            },
            api_calls_this_hour: {
              current: 0,
              limit: 100,
              unlimited: false,
              usage_percentage: 0
            },
            file_storage_used_gb: {
              current: 0,
              limit: 5,
              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);

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

        addToast(
          `Suscripción cancelada. Acceso de solo lectura a partir del ${effectiveDate} (${daysRemaining} días restantes)`,
          { 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>

            {/* 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}</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-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}</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>
              </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}</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 - 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}</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 - 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}</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 - 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}</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 - 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}</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 - 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}</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 - 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 - usageSummary.usage.file_storage_used_gb.current).toFixed(2)} GB restantes`}</span>
                  </p>
                </div>
              </div>
            </div>
          </Card>

          {/* Available Plans */}
          <div>
            <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="selection"
              selectedPlan={usageSummary.plan}
              onPlanSelect={handleUpgradeClick}
              showPilotBanner={false}
            />
          </div>

          {/* 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;