<div>
    {{-- Cabecera --}}
    <div class="w-full flex items-center justify-between">
        <a href="{{ route('license_tokens.index') }}"
            class="flex rounded-lg bg-white border border-gray-200 px-4 py-2 text-gray-700 hover:bg-gray-100 font-bold">
            <img src="{{ asset('vendor/blade-untitledui-icons/arrow-narrow-left.svg') }}" alt="Volver" class="w-6 h-6">
            <span class="ml-2">Volver</span>
        </a>
        <a href="{{ route('license_tokens.edit', $licenseToken) }}"
            class="flex rounded-lg bg-3ip border border-gray-200 px-4 py-2 text-white hover:bg-3ip-light font-bold ml-auto">
            <img src="{{ asset('vendor/blade-untitledui-icons/pencil.svg') }}" alt="Editar" class="w-6 h-6 svg-fill-white">
            <span class="ml-2">Editar token</span>
        </a>
    </div>

    {{-- Mensajes --}}
    @if (session()->has('success'))
        <div class="my-4 rounded bg-green-100 px-4 py-2 text-green-700">
            {{ session('success') }}
        </div>
    @endif
    @if (session()->has('error'))
        <div class="my-4 rounded bg-red-100 px-4 py-2 text-red-700">
            {{ session('error') }}
        </div>
    @endif

    {{-- Información del token --}}
    <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">
        <div class="w-full flex items-center justify-between">

            <div class="flex items-center justify-start" x-data="{
                token: '{{ $licenseToken->token }}',
                isVisible: false,
                copied: false,
                get displayedToken() {
                    if (this.isVisible) {
                        return this.token;
                    }
                    return this.token.replace(/[^-_]/g, '*');
                },
                toggleVisibility() {
                    this.isVisible = !this.isVisible;
                },
                async copyToClipboard() {
                    try {
                        await navigator.clipboard.writeText(this.token);
                        this.copied = true;
                        setTimeout(() => {
                            this.copied = false;
                        }, 2000);
                    } catch (err) {
                        console.error('Error al copiar:', err);
                    }
                }
            }">
                <div class="flex border rounded-lg p-2 border-gray-200 font-mono">
                    <span x-text="displayedToken"></span>
                </div>
                <button @click="toggleVisibility()" class="flex group ml-4">
                    <img x-show="!isVisible" src="{{ asset('vendor/blade-untitledui-icons/eye.svg') }}" alt="Ver"
                        class="w-5 h-5 svg-fill-gray group-hover:svg-fill-orange">
                    <img x-show="isVisible" src="{{ asset('vendor/blade-untitledui-icons/eye-off.svg') }}"
                        alt="Ocultar" class="w-5 h-5 svg-fill-gray group-hover:svg-fill-orange">
                </button>
                <button @click="copyToClipboard()" class="flex group ml-4">
                    <img x-show="!copied" src="{{ asset('vendor/blade-untitledui-icons/copy.svg') }}" alt="Copiar"
                        class="w-5 h-5 svg-fill-gray group-hover:svg-fill-orange">
                    <img x-show="copied" src="{{ asset('vendor/blade-untitledui-icons/check-circle.svg') }}"
                        alt="Copiado" class="w-5 h-5 svg-fill-green">
                </button>
            </div>
            <div class="flex items-center justify-end gap-4">
                <div class="flex items-center justify-end w-full">
                    @if ($licenseToken->active)
                        <span
                            class="flex items-center gap-1 text-green-600 font-semibold bg-green-100 border border-green-200 rounded px-2 py-1 w-full">
                            <img src="{{ asset('vendor/blade-untitledui-icons/check-circle.svg') }}" alt="Activo"
                                class="w-4 h-4 svg-fill-green">
                            <span>Licencia activa</span>
                        </span>
                    @else
                        <span
                            class="flex items-center gap-1 text-gray-400 font-semibold bg-gray-100 border border-gray-200 rounded px-2 py-1">
                            <img src="{{ asset('vendor/blade-untitledui-icons/hourglass.svg') }}" alt="Desactivada"
                                class="w-4 h-4 svg-fill-gray">
                            <span>Licencia inactiva</span>
                        </span>
                    @endif
                </div>
                <div class="flex items-center justify-end">
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" wire:click="toggleActive" wire:loading.attr="disabled"
                            @if ($licenseToken->active) checked @endif class="sr-only peer">
                        <div
                            class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-orange-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500">
                        </div>
                    </label>
                </div>
            </div>
        </div>

        <div class="w-full flex items-center gap-4 mt-4">
            <div class="flex items-center flex-wrap">
                <div class="text-gray-500 w-full">Cliente:</div>
                <div class="w-full font-bold">{{ $licenseToken->client->name }}</div>
            </div>
            @if($licenseToken->name)
            <div class="flex items-center flex-wrap">
                <div class="text-gray-500 w-full">Nombre:</div>
                <div class="w-full font-bold">{{ $licenseToken->name }}</div>
            </div>
            @endif
            <div class="flex items-center flex-wrap">
                <div class="text-gray-500 w-full">Fecha de la licencia:</div>
                <div class="w-full font-bold">{{ $licenseToken->start_at?->format('d/m/Y') ?? '—' }} -
                    {{ $licenseToken->end_at?->format('d/m/Y') ?? '—' }}</div>
            </div>
            <div class="flex items-center flex-wrap">
                <div class="text-gray-500 w-full">Creado:</div>
                <div class="w-full font-bold">{{ $licenseToken->created_at?->format('d/m/Y') ?? '—' }}</div>
            </div>
            <div class="flex items-center flex-wrap">
                <div class="text-gray-500 w-full">Autor:</div>
                <div class="w-full font-bold">{{ $licenseToken->creator->name ?? '—' }}</div>
            </div>
        </div>
    </div>

    <div class="w-full flex items-start gap-4 mt-4">
        {{-- Productos activos --}}
        <div class="w-full flex flex-wrap items-center justify-between rounded-lg bg-white border border-gray-200 px-8 py-4"
            x-data="{
                mode: 'view',
                selectedProducts: @entangle('selectedProducts'),
                toggleMode() {
                    if (this.mode === 'view') {
                        // Al entrar en modo edición, sincronizar con los productos actuales
                        this.selectedProducts = @this.selectedProducts;
                        this.mode = 'edit';
                    } else {
                        // Al salir sin guardar, restaurar los valores originales desde Livewire
                        this.selectedProducts = @this.selectedProducts;
                        this.mode = 'view';
                    }
                },
                toggleProduct(productId) {
                    const index = this.selectedProducts.indexOf(productId);
                    if (index > -1) {
                        this.selectedProducts.splice(index, 1);
                    } else {
                        this.selectedProducts.push(productId);
                    }
                },
                isProductSelected(productId) {
                    return this.selectedProducts.includes(productId);
                },
                async saveChanges() {
                    await @this.saveProducts(this.selectedProducts);
                    // Después de guardar, Livewire actualizará el componente y Alpine se reinicializará
                    // El modo volverá a 'view' automáticamente al reinicializarse
                    this.mode = 'view';
                }
            }">
            <div class="w-full flex items-center justify-between">
                <div class="w-full font-bold text-lg">Productos activos:</div>
                <div class="w-full flex items-center justify-end">
                    <button @click="toggleMode()" x-show="mode === 'view'"
                        class="flex items-center font-bold text-blue-600 hover:text-blue-800 text-lg">
                        Gestionar
                    </button>
                    <button @click="saveChanges()" x-show="mode === 'edit'"
                        class="flex items-center font-bold bg-3ip text-white rounded-lg px-4 py-2">
                        Guardar cambios
                    </button>
                </div>
            </div>
            <div class="w-full flex flex-wrap items-center justify-between mt-4" x-show="mode === 'edit'" x-cloak>
                @foreach ($allProducts as $product)
                    <div class="w-full flex items-center justify-between py-2">
                        <div class="flex items-center justify-start">
                            <div class="flex items-center justify-start mr-2 border border-gray-200 rounded-lg p-1">
                                <img src="{{ $product->image_url ?? asset('images/placeholder.png') }}" alt="{{ $product->name }}"
                                    class="w-10 h-10 rounded-full">
                            </div>
                            <div class="font-bold">{{ $product->name }}</div>
                        </div>
                        <div class="flex items-center justify-end">
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" :checked="isProductSelected({{ $product->id }})"
                                    @change="toggleProduct({{ $product->id }})" class="sr-only peer">
                                <div
                                    class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-orange-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500">
                                </div>
                            </label>
                        </div>
                    </div>
                    <hr class="w-full border-gray-200 my-2">
                @endforeach
            </div>
            <div class="w-full flex items-center flex-wrap justify-between mt-4" x-show="mode === 'view'" x-cloak>
                @foreach ($licenseToken->products as $product)
                    <div class="w-full flex items-center justify-start py-2">
                        <div class="flex items-center justify-start mr-2 border border-gray-200 rounded-lg p-1">
                            <img src="{{ $product->image_url ?? asset('images/placeholder.png') }}" alt="{{ $product->name }}"
                                class="w-10 h-10 rounded-full">
                        </div>
                        <div class="w-full font-bold">{{ $product->name }}</div>
                    </div>
                    <hr class="w-full border-gray-200 my-2">
                @endforeach
            </div>
        </div>
        {{-- Entornos vinculados --}}
        <div class="w-full flex flex-wrap items-center justify-between rounded-lg bg-white border border-gray-200 px-8 py-4"
            wire:key="environments-{{ $licenseToken->environments->pluck('id')->sort()->implode('-') }}"
            x-data="{
                mode: 'view',
                viewMode: 'existing', // 'existing' o 'new'
                selectedEnvironments: @entangle('selectedEnvironments'),
                searchQuery: '',
                toggleMode() {
                    if (this.mode === 'view') {
                        // Al entrar en modo edición, sincronizar con los entornos actuales
                        this.selectedEnvironments = @this.selectedEnvironments;
                        this.mode = 'edit';
                        this.viewMode = 'existing';
                    } else {
                        // Al salir sin guardar, restaurar los valores originales desde Livewire
                        this.selectedEnvironments = @this.selectedEnvironments;
                        this.mode = 'view';
                    }
                },
                toggleViewMode(newMode) {
                    this.viewMode = newMode;
                },
                toggleEnvironment(environmentId) {
                    const index = this.selectedEnvironments.indexOf(environmentId);
                    if (index > -1) {
                        this.selectedEnvironments.splice(index, 1);
                    } else {
                        this.selectedEnvironments.push(environmentId);
                    }
                },
                isEnvironmentSelected(environmentId) {
                    return this.selectedEnvironments.includes(environmentId);
                },
                async saveChanges() {
                    await @this.saveEnvironments(this.selectedEnvironments);
                    // Después de guardar, Livewire actualizará el componente
                    // El wire:key forzará la reinicialización de Alpine con los nuevos datos
                    this.mode = 'view';
                    // Esperar un momento para que Livewire actualice el DOM
                    await new Promise(resolve => setTimeout(resolve, 100));
                },
                filterEnvironments(environment) {
                    if (!this.searchQuery) return true;
                    const query = this.searchQuery.toLowerCase();
                    return environment.name.toLowerCase().includes(query) ||
                           environment.domain.toLowerCase().includes(query);
                }
            }">
            <div class="w-full flex items-center justify-between">
                <div class="w-full font-bold text-lg">Entornos vinculados:</div>
                <div class="w-full flex items-center justify-end">
                    <button @click="toggleMode()" x-show="mode === 'view'"
                        class="flex items-center font-bold text-blue-600 hover:text-blue-800 text-lg">
                        Gestionar
                    </button>
                    <button @click="saveChanges()" x-show="mode === 'edit'"
                        class="flex items-center font-bold bg-3ip text-white rounded-lg px-4 py-2">
                        Guardar cambios
                    </button>
                </div>
            </div>

            {{-- Modo edición --}}
            <div x-show="mode === 'edit'" x-cloak class="w-full mt-4">
                {{-- Toggle entre Entorno existente y Nuevo entorno --}}
                <div class="w-full flex items-center gap-2 mb-4">
                    <button @click="toggleViewMode('existing')"
                        class="w-full justify-center"
                        :class="viewMode === '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" :class="viewMode === 'existing' ? 'svg-fill-white' : ''">
                        <span>Entorno existente</span>
                    </button>
                    <button @click="toggleViewMode('new')"
                        class="w-full justify-center"
                        :class="viewMode === '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'">
                        <span class="mr-2">
                            <img src="{{ asset('vendor/blade-untitledui-icons/plus.svg') }}" alt="Nuevo entorno"
                                class="w-4 h-4" :class="viewMode === 'new' ? 'svg-fill-white' : ''">
                        </span>
                        <span>Nuevo entorno</span>
                    </button>
                </div>

                {{-- Vista de Entorno existente --}}
                <div x-show="viewMode === 'existing'" x-cloak 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"
                                x-model="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">
                        @foreach ($allEnvironments as $environment)
                            <div x-show="filterEnvironments(@js(['name' => $environment->name, 'domain' => $environment->domain]))"
                                class="w-full flex items-center justify-between py-3 px-2 rounded-lg transition-colors @if($environment->is_associated_to_other) bg-gray-100 @else hover:bg-gray-50 @endif">
                                <div class="flex items-center justify-start flex-1">
                                    <input type="checkbox"
                                        :checked="isEnvironmentSelected({{ $environment->id }})"
                                        @change="toggleEnvironment({{ $environment->id }})"
                                        @if($environment->is_associated_to_other) disabled @endif
                                        class="w-4 h-4 text-orange-600 border-gray-300 rounded focus:ring-orange-500 mr-3 @if($environment->is_associated_to_other) opacity-50 cursor-not-allowed @endif @if(!$environment->is_associated_to_other) cursor-pointer @endif">
                                    <div class="flex items-center justify-start mr-3">
                                        <img src="{{ $environment->type->image_url ?? asset('images/placeholder.png') }}"
                                            alt="{{ $environment->type->name ?? 'Environment' }}" class="w-10 h-10 rounded-full">
                                    </div>
                                    <div class="flex flex-col">
                                        <div class="font-bold">{{ $environment->name }}</div>
                                        <div class="text-sm text-gray-500">{{ $environment->domain }}</div>
                                    </div>
                                </div>
                                <div class="flex items-center justify-end">
                                    @if($environment->license_token_id && $environment->license_token_id !== $licenseToken->id)
                                        <span class="text-xs text-gray-500 bg-gray-200 px-2 py-1 rounded">Asociado</span>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- Vista de Nuevo entorno (formulario) --}}
                <div x-show="viewMode === 'new'" x-cloak class="w-full">
                    <div class="w-full mb-4">
                        <h3 class="font-bold text-lg mb-4">Crear nuevo entorno</h3>
                    </div>

                    <form wire:submit.prevent="createNewEnvironment"
                        @environment-created.window="viewMode = 'existing'"
                        class="w-full space-y-4">
                        {{-- Nombre --}}
                        <div>
                            <label for="newEnvironmentName" class="block text-sm font-medium text-gray-700 mb-1">Nombre</label>
                            <input type="text"
                                id="newEnvironmentName"
                                wire:model="newEnvironmentName"
                                class="w-full rounded-lg border border-gray-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-orange-300 @error('newSiteName') border-red-500 @enderror"
                                placeholder="Ej: Moodle Promocional">
                            @error('newEnvironmentName')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Dominio / URL --}}
                        <div>
                            <label for="newEnvironmentDomain" class="block text-sm font-medium text-gray-700 mb-1">Dominio / URL</label>
                            <input type="text"
                                id="newEnvironmentDomain"
                                wire:model="newEnvironmentDomain"
                                class="w-full rounded-lg border border-gray-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-orange-300 @error('newSiteDomain') border-red-500 @enderror"
                                placeholder="Ej: https://ejemplo.com">
                            @error('newEnvironmentDomain')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Descripción --}}
                        <div>
                            <label for="newEnvironmentDescription" class="block text-sm font-medium text-gray-700 mb-1">Descripción</label>
                            <textarea id="newEnvironmentDescription"
                                wire:model="newEnvironmentDescription"
                                rows="3"
                                class="w-full rounded-lg border border-gray-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-orange-300 @error('newSiteDescription') border-red-500 @enderror"
                                placeholder="Descripción del entorno"></textarea>
                            @error('newEnvironmentDescription')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Tipo de entorno --}}
                        <div>
                            <label for="newEnvironmentTypeId" class="block text-sm font-medium text-gray-700 mb-1">Tipo de entorno</label>
                            <select id="newEnvironmentTypeId"
                                wire:model="newEnvironmentTypeId"
                                class="w-full rounded-lg border border-gray-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-orange-300 @error('newSiteTypeId') border-red-500 @enderror">
                                <option value="">Seleccionar tipo</option>
                                @foreach($environmentTypes as $type)
                                    <option value="{{ $type->id }}">{{ $type->name }}</option>
                                @endforeach
                            </select>
                            @error('newEnvironmentTypeId')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Versión --}}
                        <div>
                            <label for="newEnvironmentVersion" class="block text-sm font-medium text-gray-700 mb-1">Versión</label>
                            <select id="newEnvironmentVersion"
                                wire:model="newEnvironmentVersion"
                                class="w-full rounded-lg border border-gray-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-orange-300 @error('newSiteVersion') border-red-500 @enderror">
                                <option value="">Seleccionar versión</option>
                                <option value="Moodle 4.1">Moodle 4.1</option>
                                <option value="Moodle 4.2">Moodle 4.2</option>
                                <option value="Moodle 4.3">Moodle 4.3</option>
                                <option value="Moodle 5.0">Moodle 5.0</option>
                                <option value="Moodle 5.1">Moodle 5.1</option>
                                <option value="Workplace 4.1">Workplace 4.1</option>
                                <option value="Workplace 4.2">Workplace 4.2</option>
                                <option value="Wordpress 6.9">Wordpress 6.9</option>
                            </select>
                            @error('newEnvironmentVersion')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Desarrollo (Entorno) --}}
                        <div>
                            <label for="newEnvironmentEnv" class="block text-sm font-medium text-gray-700 mb-1">Desarrollo</label>
                            <select id="newEnvironmentEnv"
                                wire:model="newEnvironmentEnv"
                                class="w-full rounded-lg border border-gray-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-orange-300 @error('newEnvironmentEnv') border-red-500 @enderror">
                                @foreach($environmentEnvironments as $key => $label)
                                    <option value="{{ $key }}">{{ $label }}</option>
                                @endforeach
                            </select>
                            @error('newEnvironmentEnv')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Alojamiento --}}
                        <div>
                            <label for="newEnvironmentHosting" class="block text-sm font-medium text-gray-700 mb-1">Alojamiento</label>
                            <select id="newEnvironmentHosting"
                                wire:model="newEnvironmentHosting"
                                class="w-full rounded-lg border border-gray-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-orange-300 @error('newEnvironmentHosting') border-red-500 @enderror">
                                <option value="">Seleccionar alojamiento</option>
                                <option value="1">Servidor interno</option>
                                <option value="2">Servidor externo</option>
                                <option value="3">Cloud</option>
                            </select>
                            @error('newEnvironmentHosting')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Botones --}}
                        <div class="flex items-center justify-end gap-3 pt-4">
                            <button type="button"
                                @click="viewMode = 'existing'"
                                class="px-4 py-2 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 font-bold">
                                Cancelar
                            </button>
                            <button type="submit"
                                wire:loading.attr="disabled"
                                class="px-4 py-2 rounded-lg bg-3ip text-white hover:bg-orange-600 font-bold disabled:opacity-50">
                                <span wire:loading.remove>Crear entorno</span>
                                <span wire:loading>Creando...</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- Modo visualización --}}
            <div class="w-full flex items-center flex-wrap justify-between mt-4" x-show="mode === 'view'" x-cloak>
                @foreach ($licenseToken->environments as $environment)
                    <div class="w-full flex items-center flex-col justify-start py-2">
                        <div class="flex items-center justify-start w-full">
                            <div class="flex items-center justify-start mr-2 border border-gray-200 rounded-lg p-1">
                                <img src="{{ $environment->type->image_url ?? asset('images/placeholder.png') }}"
                                    alt="{{ $environment->type->name ?? 'Environment' }}" class="w-10 h-10 rounded-full">
                            </div>
                            <div class="flex flex-col">
                                <div class="font-bold">{{ $environment->name }}</div>
                            </div>
                        </div>
                        <div class="text-sm text-gray-500 flex items-center justify-start w-full mt-2">
                            <a href="{{ $environment->domain }}" target="_blank" class="text-blue-600 hover:text-blue-800 flex items-center justify-start">
                                <img src="{{ asset('vendor/blade-untitledui-icons/globe.svg') }}" alt="Abrir entorno"
                                    class="w-4 h-4">
                                <span class="ml-2">{{ $environment->domain }}</span>
                            </a>
                        </div>
                    </div>
                    <hr class="w-full border-gray-200 my-2">
                @endforeach
            </div>
        </div>
    </div>

</div>
