<x-filament-panels::page>
    {{-- Tab Navigation --}}
    <x-filament::tabs>
        <x-filament::tabs.item
            :active="$activeTab === 'empresa'"
            wire:click="$set('activeTab', 'empresa')"
            icon="heroicon-m-building-office"
        >
            Empresa
        </x-filament::tabs.item>

        <x-filament::tabs.item
            :active="$activeTab === 'operacion'"
            wire:click="$set('activeTab', 'operacion')"
            icon="heroicon-m-cog-6-tooth"
        >
            Operación
        </x-filament::tabs.item>

        <x-filament::tabs.item
            :active="$activeTab === 'suscripcion'"
            wire:click="$set('activeTab', 'suscripcion')"
            icon="heroicon-m-credit-card"
        >
            Suscripción
        </x-filament::tabs.item>
    </x-filament::tabs>

    {{-- Tab Content --}}
    <div class="mt-6">
        {{-- Tab: Empresa --}}
        @if($activeTab === 'empresa')
            <form wire:submit="saveCompanySettings">
                {{ $this->companyForm }}

                <div class="mt-8 flex justify-end" style="margin-top: 2rem;">
                    <x-filament::button type="submit" icon="heroicon-o-check">
                        Guardar Cambios
                    </x-filament::button>
                </div>
            </form>
        @endif

        {{-- Tab: Operación --}}
        @if($activeTab === 'operacion')
            <form wire:submit="saveOperationalSettings">
                {{ $this->operationalForm }}

                <div class="mt-8 flex justify-end" style="margin-top: 2rem;">
                    <x-filament::button type="submit" icon="heroicon-o-check">
                        Guardar Cambios
                    </x-filament::button>
                </div>
            </form>
        @endif

        {{-- Tab: Suscripción --}}
        @if($activeTab === 'suscripcion')
            @php
                $subData = $this->getSubscriptionData();
                $subscription = $subData['subscription'];
                $plan = $subData['plan'];
                $usage = $subData['usage'];
            @endphp

            <div class="grid gap-6" style="display: grid; row-gap: 1.5rem;">
                {{-- Plan Info Section --}}
                <x-filament::section>
                <x-slot name="heading">
                    <div class="flex items-center justify-between w-full">
                        <span>{{ $plan ? 'Plan ' . $plan->name : 'Sin Plan Activo' }}</span>
                        @if($subscription)
                            <x-filament::badge :color="match($subscription->status) {
                                'active' => 'success',
                                'trial' => 'info',
                                'grace' => 'warning',
                                default => 'danger'
                            }">
                                {{ $subscription->status_label }}
                            </x-filament::badge>
                        @endif
                    </div>
                </x-slot>

                <x-slot name="description">
                    {{ $plan->description ?? 'Tu plan de suscripción actual' }}
                </x-slot>

                @if($subscription)
                    <div class="grid grid-cols-2 gap-4 sm:grid-cols-4 mt-4">
                        <div class="rounded-lg bg-gray-50 dark:bg-white/5 p-4 text-center ring-1 ring-gray-950/5 dark:ring-white/10">
                            <div class="text-lg font-semibold text-gray-950 dark:text-white">
                                {{ $subscription->billing_cycle_label }}
                            </div>
                            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">Ciclo de Facturación</div>
                        </div>

                        <div class="rounded-lg bg-gray-50 dark:bg-white/5 p-4 text-center ring-1 ring-gray-950/5 dark:ring-white/10">
                            <div class="text-lg font-semibold text-gray-950 dark:text-white">
                                {{ $subscription->ends_at?->format('d/m/Y') ?? '-' }}
                            </div>
                            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">Fecha de Renovación</div>
                        </div>

                        <div class="rounded-lg bg-gray-50 dark:bg-white/5 p-4 text-center ring-1 ring-gray-950/5 dark:ring-white/10">
                            <div class="text-lg font-semibold {{ $subscription->daysUntilExpiration() <= 7 ? 'text-danger-600' : 'text-gray-950 dark:text-white' }}">
                                {{ $subscription->daysUntilExpiration() }} días
                            </div>
                            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">Hasta Renovación</div>
                        </div>

                        <div class="rounded-lg bg-gray-50 dark:bg-white/5 p-4 text-center ring-1 ring-gray-950/5 dark:ring-white/10">
                            <div class="text-lg font-semibold text-gray-950 dark:text-white">
                                {{ $plan?->formatted_price ?? '-' }}
                            </div>
                            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">Precio Mensual</div>
                        </div>
                    </div>
                @else
                    <div class="py-8 text-center">
                        <x-filament::icon
                            icon="heroicon-o-exclamation-triangle"
                            class="mx-auto h-12 w-12 text-warning-500"
                        />
                        <p class="mt-2 text-gray-600 dark:text-gray-400">No tienes una suscripción activa</p>
                        <p class="text-sm text-gray-500">Contacta al administrador para activar tu plan</p>
                    </div>
                @endif
            </x-filament::section>

            {{-- Usage Stats --}}
            @if($subscription)
                <x-filament::section>
                    <x-slot name="heading">Uso de tu Plan</x-slot>

                    <div class="space-y-4">
                        {{-- Users --}}
                        <div>
                            <div class="flex justify-between text-sm mb-1">
                                <span class="text-gray-600 dark:text-gray-400">Usuarios</span>
                                <span class="font-medium text-gray-950 dark:text-white">
                                    {{ $usage['users']['current'] }} / {{ $usage['users']['max'] == 0 ? 'Ilimitado' : $usage['users']['max'] }}
                                </span>
                            </div>
                            @if($usage['users']['max'] > 0)
                                <div class="h-2 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
                                    <div class="h-2 rounded-full transition-all {{ $usage['users']['percentage'] >= 90 ? 'bg-danger-500' : ($usage['users']['percentage'] >= 70 ? 'bg-warning-500' : 'bg-success-500') }}"
                                         style="width: {{ min(100, $usage['users']['percentage']) }}%"></div>
                                </div>
                            @endif
                        </div>

                        {{-- Credits --}}
                        <div>
                            <div class="flex justify-between text-sm mb-1">
                                <span class="text-gray-600 dark:text-gray-400">Créditos Activos</span>
                                <span class="font-medium text-gray-950 dark:text-white">
                                    {{ $usage['credits']['current'] }} / {{ $usage['credits']['max'] == 0 ? 'Ilimitado' : $usage['credits']['max'] }}
                                </span>
                            </div>
                            @if($usage['credits']['max'] > 0)
                                <div class="h-2 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
                                    <div class="h-2 rounded-full transition-all {{ $usage['credits']['percentage'] >= 90 ? 'bg-danger-500' : ($usage['credits']['percentage'] >= 70 ? 'bg-warning-500' : 'bg-success-500') }}"
                                         style="width: {{ min(100, $usage['credits']['percentage']) }}%"></div>
                                </div>
                            @endif
                        </div>

                        {{-- Clients --}}
                        <div>
                            <div class="flex justify-between text-sm mb-1">
                                <span class="text-gray-600 dark:text-gray-400">Clientes</span>
                                <span class="font-medium text-gray-950 dark:text-white">
                                    {{ $usage['clients']['current'] }} / {{ $usage['clients']['max'] == 0 ? 'Ilimitado' : $usage['clients']['max'] }}
                                </span>
                            </div>
                            @if($usage['clients']['max'] > 0)
                                <div class="h-2 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
                                    <div class="h-2 rounded-full transition-all {{ $usage['clients']['percentage'] >= 90 ? 'bg-danger-500' : ($usage['clients']['percentage'] >= 70 ? 'bg-warning-500' : 'bg-success-500') }}"
                                         style="width: {{ min(100, $usage['clients']['percentage']) }}%"></div>
                                </div>
                            @endif
                        </div>

                        {{-- Volume --}}
                        <div>
                            <div class="flex justify-between text-sm mb-1">
                                <span class="text-gray-600 dark:text-gray-400">Volumen Mensual</span>
                                <span class="font-medium text-gray-950 dark:text-white">
                                    ${{ number_format($usage['volume']['current'], 0, ',', '.') }} /
                                    {{ $usage['volume']['max'] == 0 ? 'Ilimitado' : '$' . number_format($usage['volume']['max'], 0, ',', '.') }}
                                </span>
                            </div>
                            @if($usage['volume']['max'] > 0)
                                <div class="h-2 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
                                    <div class="h-2 rounded-full transition-all {{ $usage['volume']['percentage'] >= 90 ? 'bg-danger-500' : ($usage['volume']['percentage'] >= 70 ? 'bg-warning-500' : 'bg-success-500') }}"
                                         style="width: {{ min(100, $usage['volume']['percentage']) }}%"></div>
                                </div>
                            @endif
                        </div>
                    </div>
                </x-filament::section>
            @endif

            {{-- Features --}}
            @if($plan)
                <x-filament::section>
                    <x-slot name="heading">Funcionalidades de tu Plan</x-slot>

                    <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
                        @php
                            $features = [
                                ['key' => 'has_pwa_access', 'label' => 'App PWA para Cobradores'],
                            ];
                        @endphp

                        @foreach($features as $feature)
                            <div class="flex items-center gap-2">
                                @if($plan->{$feature['key']})
                                    <x-filament::icon
                                        icon="heroicon-m-check-circle"
                                        class="h-5 w-5 text-success-500"
                                    />
                                    <span class="text-sm text-gray-950 dark:text-white">{{ $feature['label'] }}</span>
                                @else
                                    <x-filament::icon
                                        icon="heroicon-m-x-circle"
                                        class="h-5 w-5 text-gray-300 dark:text-gray-600"
                                    />
                                    <span class="text-sm text-gray-400">{{ $feature['label'] }}</span>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </x-filament::section>
            @endif

            {{-- Pending Requests --}}
            @if($subData['pending_requests'] > 0)
                <x-filament::section>
                    <div class="flex items-center gap-3">
                        <x-filament::icon
                            icon="heroicon-o-clock"
                            class="h-6 w-6 text-warning-500"
                        />
                        <div>
                            <p class="font-medium text-warning-600 dark:text-warning-400">
                                Tienes {{ $subData['pending_requests'] }} solicitud(es) pendiente(s)
                            </p>
                            <p class="text-sm text-gray-500">
                                Estamos revisando tu solicitud. Te notificaremos cuando sea procesada.
                            </p>
                        </div>
                    </div>
                </x-filament::section>
            @endif
            </div>
        @endif
    </div>
</x-filament-panels::page>
