<div>
    {{-- Toggle entre Entorno existente y Nuevo entorno --}}
    <div class="w-full flex items-center gap-2 mb-6">
        <button type="button" wire:click="selectMode('existing')"
            class="w-full justify-center {{ $mode === 'existing' ? 'bg-black text-white font-bold px-4 py-2 rounded-lg flex items-center' : 'bg-white text-gray-700 font-bold border border-gray-200 px-4 py-2 rounded-lg flex items-center hover:bg-gray-50' }}">
            <img src="{{ asset('vendor/blade-untitledui-icons/server-04.svg') }}" alt="Entorno existente"
                class="w-4 h-4 mr-2 {{ $mode === 'existing' ? 'svg-fill-white' : '' }}">
            <span>Entorno existente</span>
        </button>
        <button type="button" wire:click="selectMode('new')"
            class="w-full justify-center {{ $mode === 'new' ? 'bg-black text-white font-bold px-4 py-2 rounded-lg flex items-center' : 'bg-white text-gray-700 font-bold border border-gray-200 px-4 py-2 rounded-lg flex items-center hover:bg-gray-50' }}">
            <img src="{{ asset('vendor/blade-untitledui-icons/plus.svg') }}" alt="Nuevo entorno"
                class="w-4 h-4 mr-2 {{ $mode === 'new' ? 'svg-fill-white' : '' }}">
            <span>Nuevo entorno</span>
        </button>
    </div>

    @if($mode === 'existing')
        {{-- Vista de Entorno existente --}}
        <div class="w-full">
            <div class="w-full mb-4">
                <h3 class="font-bold text-lg mb-2">Listado de entornos</h3>
                <div class="relative">
                    <input type="text" wire:model.live="searchQuery"
                        placeholder="Buscar entorno por nombre o dominio"
                        class="w-full rounded-lg border border-gray-200 px-4 py-2 pl-10 focus:outline-none focus:ring-2 focus:ring-orange-300">
                    <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">
                </div>
            </div>

            <div class="w-full max-h-96 overflow-y-auto space-y-2">
                @forelse($this->environments as $environment)
                    <label class="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer {{ in_array($environment->id, $selectedIds) ? 'bg-blue-50 border-blue-500' : '' }} {{ $environment->is_associated_to_other ? 'opacity-60' : '' }}">
                        <div class="flex items-center justify-start flex-1">
                            <input type="checkbox" 
                                wire:click="toggleEnvironment({{ $environment->id }})"
                                @if(in_array($environment->id, $selectedIds)) checked @endif
                                @if($environment->is_associated_to_other) disabled @endif
                                class="mr-4 w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                            <div class="flex items-center">
                                @if($environment->type && $environment->type->image_url)
                                    <img src="{{ $environment->type->image_url }}" alt="{{ $environment->type->name }}"
                                        class="w-10 h-10 rounded-full mr-3">
                                @else
                                    <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mr-3">
                                        <span class="text-gray-600 text-xs font-bold">{{ substr($environment->name, 0, 2) }}</span>
                                    </div>
                                @endif
                                <div>
                                    <div class="font-bold">{{ $environment->name }}</div>
                                    <div class="text-sm text-gray-500">
                                        {{ $environment->env ? \App\Models\Environments\Environment::ENVIRONMENTS[$environment->env] ?? $environment->env : '' }}
                                        @if($environment->type)
                                            · {{ $environment->type->name }}
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if($environment->is_associated_to_other)
                            <span class="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">Asociado</span>
                        @endif
                    </label>
                @empty
                    <div class="text-center py-8 text-gray-500">
                        @if($clientId)
                            No se encontraron entornos para este cliente
                        @else
                            Selecciona un cliente primero
                        @endif
                    </div>
                @endforelse
            </div>
        </div>
    @else
        {{-- Vista de Nuevo entorno --}}
        <div class="w-full">
            <h3 class="font-bold text-lg mb-4">Crear nuevo entorno</h3>
            <div class="space-y-6">
                {{-- Nombre --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Nombre</label>
                    <input type="text" wire:model.live="newEnvironmentData.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('newEnvironmentData.name') border-red-500 @enderror"
                        placeholder="Introduce tu nombre"
                        required>
                    @error('newEnvironmentData.name')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Dominio / URL --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Dominio / URL</label>
                    <input type="text" wire:model.live="newEnvironmentData.domain"
                        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('newEnvironmentData.domain') border-red-500 @enderror"
                        placeholder="www.tresipunt.com"
                        required>
                    @error('newEnvironmentData.domain')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Descripción --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Descripción</label>
                    <textarea wire:model.live="newEnvironmentData.description" 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('newEnvironmentData.description') border-red-500 @enderror"
                        placeholder="Escribe una breve descripción del entorno aquí..."></textarea>
                    @error('newEnvironmentData.description')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Grid de 2 columnas para selects --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {{-- Tipo de entorno --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Tipo de entorno</label>
                        <select wire:model.live="newEnvironmentData.type_id"
                            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('newEnvironmentData.type_id') border-red-500 @enderror">
                            <option value="">Selecciona el tipo</option>
                            @foreach($types as $type)
                                <option value="{{ $type->id }}">{{ $type->name }}</option>
                            @endforeach
                        </select>
                        @error('newEnvironmentData.type_id')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Versión --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Versión</label>
                        <input type="text" wire:model.live="newEnvironmentData.version"
                            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('newEnvironmentData.version') border-red-500 @enderror"
                            placeholder="Selecciona la versión"
                            required>
                        @error('newEnvironmentData.version')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Desarrollo --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Desarrollo</label>
                        <select wire:model.live="newEnvironmentData.env"
                            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('newEnvironmentData.env') border-red-500 @enderror"
                            required>
                            <option value="">Selecciona el desarrollo</option>
                            @foreach($envs as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('newEnvironmentData.env')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>
            <p class="text-sm text-gray-500 mt-4">
                El entorno se creará automáticamente al finalizar el proceso de creación de la licencia.
            </p>
        </div>
    @endif
</div>

