<div>
    {{-- Header --}}
    <div class="fixed top-0 left-0 right-0 w-full  bg-white flex items-center justify-between p-4 z-50 border-b border-gray-200">
        <div class="flex items-center">
            <img src="{{ Storage::url('images_static/tresipunt-square.svg') }}" alt="Logo" class="w-10 h-10 mr-3">
            <h1 class="text-2xl font-bold">Crea una nueva licencia</h1>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('license_tokens.index') }}"
                class="text-gray-700 hover:text-gray-900 px-4 py-2">
                Cancelar
            </a>
            @if($currentStep > 1 && $currentStep < 5)
                <button wire:click="previousStep"
                    class="text-gray-700 hover:text-gray-900 px-4 py-2">
                    Atrás
                </button>
            @endif
            @if($currentStep < 4)
                <button wire:click="nextStep"
                    class="bg-3ip hover:bg-3ip-light text-white px-4 py-2 rounded-lg">
                    Siguiente
                </button>
            @endif
        </div>
    </div>

    {{-- Steps (solo visible en steps 1-4) --}}
    @if($currentStep < 5)
        <div class="pt-20 pb-4">
            @include('livewire.components.steps-partial', ['steps' => ['Licencia', 'Entorno', 'Productos', 'Revisión'], 'currentStep' => $currentStep])
        </div>
    @endif

    {{-- Contenido según step --}}
    <div class="w-full px-20 pb-4 @if($currentStep === 5) mt-20 @endif">
        <div class="mx-auto max-w-3xl px-8">
            <div class="w-full flex flex-wrap items-center justify-between mt-8 rounded-lg bg-white border border-gray-200 px-8 py-4">

                @if($currentStep === 1)
                    {{-- Step 1: Datos de licencia --}}
                    <div class="w-full">
                        <div class="w-full flex items-center justify-center flex-col mb-8">
                            <h1 class="text-4xl font-bold">Licencia</h1>
                            <p class="text-gray-500 text-sm text-center mt-2">
                                Establece los detalles de la licencia.
                            </p>
                        </div>

                        <div class="space-y-6">
                            {{-- Generación de la licencia --}}
                            <div class="flex items-center">
                                <input type="checkbox" wire:model.live="autoGenerateToken" id="autoGenerateToken"
                                    class="w-4 h-4 text-3ip border-gray-300 rounded focus:ring-3ip">
                                <label for="autoGenerateToken" class="ml-2 text-sm font-medium text-gray-700">
                                    Autogenerar licencia
                                </label>
                            </div>

                            {{-- Token manual (solo visible si autoGenerateToken = false) --}}
                            @if(!$autoGenerateToken)
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Token de licencia</label>
                                    <input type="text" wire:model.live="token"
                                        class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('token') border-red-500 @enderror"
                                        placeholder="3IP-XXXX-XXXX-XXXX-XXXX"
                                        required>
                                    @error('token')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            @endif

                            {{-- Cliente --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Selecciona el cliente al que quieres enlazar esta licencia
                                </label>

                                {{-- Búsqueda --}}
                                    <div class="relative">
                                        <img src="{{ asset('vendor/blade-untitledui-icons/search-lg.svg') }}" alt="Buscar"
                                            class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400">
                                        <input type="text" wire:model.live="clientSearchQuery"
                                            class="w-full rounded-t-lg border border-gray-200 pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                            placeholder="Busca cliente por nombre">
                                    </div>

                                {{-- Lista de clientes --}}
                                <div class="space-y-2 max-h-96 overflow-y-auto border-l border-r border-b rounded-b-lg border-gray-200  p-2">
                                    @forelse($this->clients as $client)
                                        <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer {{ $clientId === $client->id ? 'bg-blue-50 border-blue-500' : '' }}">
                                            <input type="radio" wire:model.live="clientId" value="{{ $client->id }}"
                                                class="mr-4 w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                                            <div class="flex-1">
                                                <div class="font-medium text-gray-900">{{ $client->name }}</div>
                                                @if($client->shortname)
                                                    <div class="text-sm text-gray-500">{{ $client->shortname }}</div>
                                                @endif
                                            </div>
                                        </label>
                                    @empty
                                        <div class="text-center py-8 text-gray-500">
                                            No se encontraron clientes
                                        </div>
                                    @endforelse
                                </div>

                                {{-- Paginación --}}
                                <div class="mt-4">
                                    @include('livewire.components.simple-pagination', ['paginator' => $this->clients])
                                </div>

                                @error('clientId')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            {{-- Nombre --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Nombre (opcional)
                                </label>
                                <input type="text" wire:model.live="name"
                                    class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('name') border-red-500 @enderror"
                                    placeholder="Nombre descriptivo del token">
                                @error('name')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            {{-- Fechas --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Selecciona el rango de fechas de la licencia
                                </label>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 mb-1">Inicio</label>
                                        <input type="date" wire:model.live="startAt"
                                            class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('startAt') border-red-500 @enderror">
                                        @error('startAt')
                                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 mb-1">Fin</label>
                                        <input type="date" wire:model.live="endAt"
                                            class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('endAt') border-red-500 @enderror">
                                        @error('endAt')
                                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            {{-- Observaciones --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Observaciones (opcional)
                                </label>
                                <textarea wire:model.live="observation" rows="3"
                                    class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('observation') border-red-500 @enderror"
                                    placeholder="Escribe una observación aquí..."></textarea>
                                @error('observation')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        {{-- Botón siguiente en el card --}}
                        <div class="mt-6 flex justify-end">
                            <button wire:click="nextStep" wire:loading.attr="disabled"
                                class="bg-3ip hover:bg-3ip-light text-white px-6 py-2 rounded-lg disabled:opacity-50">
                                Siguiente
                            </button>
                        </div>
                    </div>

                @elseif($currentStep === 2)
                    {{-- Step 2: Selección de entorno --}}
                    <div class="w-full">
                        <div class="w-full flex items-center justify-center flex-col mb-8">
                            <h1 class="text-4xl font-bold">Entorno</h1>
                            <p class="text-gray-500 text-sm text-center mt-2">
                                Asocia tu licencia a un entorno existente o crea uno nuevo.
                            </p>
                        </div>

                        <div wire:key="environment-selection-wrapper">
                            <livewire:license-tokens.components.environment-selection
                                :clientId="$clientId"
                                :mode="$environmentMode"
                                :selectedIds="$selectedEnvironmentIds"
                                :newEnvironmentData="$newEnvironmentData" />
                        </div>

                        {{-- Botón siguiente en el card --}}
                        <div class="mt-6 flex justify-end">
                            <button wire:click="nextStep" wire:loading.attr="disabled"
                                class="bg-3ip hover:bg-3ip-light text-white px-6 py-2 rounded-lg disabled:opacity-50">
                                Siguiente
                            </button>
                        </div>
                    </div>

                @elseif($currentStep === 3)
                    {{-- Step 3: Selección de productos --}}
                    <div class="w-full">
                        <div class="w-full flex items-center justify-center flex-col mb-8">
                            <h1 class="text-4xl font-bold">Productos</h1>
                            <p class="text-gray-500 text-sm text-center mt-2">
                                Selecciona los productos que se incluirán en esta licencia.
                            </p>
                        </div>

                        <div wire:key="product-selection-wrapper">
                            <livewire:license-tokens.components.product-selection
                                :selectedProductIds="$selectedProductIds" />
                        </div>

                        {{-- Botón siguiente en el card --}}
                        <div class="mt-6 flex justify-end">
                            <button wire:click="nextStep" wire:loading.attr="disabled"
                                class="bg-3ip hover:bg-3ip-light text-white px-6 py-2 rounded-lg disabled:opacity-50">
                                Siguiente
                            </button>
                        </div>
                    </div>

                @elseif($currentStep === 4)
                    {{-- Step 4: Revisión --}}
                    <div class="w-full">
                        <livewire:license-tokens.components.review
                            :clientId="$clientId"
                            :token="$token"
                            :name="$name"
                            :startAt="$startAt"
                            :endAt="$endAt"
                            :observation="$observation"
                            :environmentMode="$environmentMode"
                            :selectedEnvironmentIds="$selectedEnvironmentIds"
                            :newEnvironmentData="$newEnvironmentData"
                            :selectedProductIds="$selectedProductIds" />

                        {{-- Botón finalizar --}}
                        <div class="mt-6 flex justify-end">
                            <button wire:click="saveLicense" wire:loading.attr="disabled"
                                class="bg-3ip hover:bg-3ip-light text-white px-6 py-2 rounded-lg disabled:opacity-50">
                                <span wire:loading.remove wire:target="saveLicense">Finalizar</span>
                                <span wire:loading wire:target="saveLicense">Guardando...</span>
                            </button>
                        </div>
                    </div>

                @elseif($currentStep === 5)
                    {{-- Step 5: Página de éxito --}}
                    @if($createdLicenseTokenId)
                        <livewire:license-tokens.components.license-success :licenseTokenId="$createdLicenseTokenId" wire:key="license-success-{{ $createdLicenseTokenId }}" />
                    @endif
                @endif
            </div>
        </div>
    </div>
</div>

