<div class="environment-card {{ !$environment->active ? 'opacity-60' : '' }}">
    <div class="flex min-w-0">
        <div class="w-12 h-12 shrink-0 border rounded flex items-center justify-center">
            <img src="{{ $environment->type->image_url ?? asset('images/placeholder.png') }}"
                alt="{{ $environment->type->name }}" class="w-8 h-8">
        </div>
        <div class="flex flex-col ml-4 min-w-0">
            <div class="flex items-center gap-2">
                <h3 class="text-lg font-bold truncate">{{ $environment->name }}</h3>
                @if (!$environment->active)
                    <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-semibold text-gray-600">
                        Inactivo
                    </span>
                @endif
            </div>
            <p class="text-gray-500 text-sm truncate" title="{{ $environment->domain }}">
                <a href="{{ $environment->domain }}" target="_blank" class="hover:text-3ip underline decoration-dotted">
                    {{ $environment->domain }}
                </a>
            </p>
            <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-gray-600">
                @if ($environment->env)
                    <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5">
                        {{ \App\Models\Environments\Environment::ENVIRONMENTS[$environment->env] ?? $environment->env }}
                    </span>
                @endif
                @if ($environment->version)
                    <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5">
                        Moodle {{ $environment->version }}
                    </span>
                @endif
                @if ($environment->lastversion)
                    <span class="inline-flex items-center rounded-full bg-red-100 px-2 py-0.5 text-red-700">
                        Core: actualización mayor disponible
                    </span>
                @endif
                @if ($environment->lastminor && !$environment->lastversion)
                    <span class="inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-amber-700">
                        Core: actualización menor disponible
                    </span>
                @endif
                @if (isset($environment->outdated_plugins_count) && $environment->outdated_plugins_count > 0)
                    <span class="inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-amber-700">
                        Plugins con actualizaciones
                    </span>
                @endif
            </div>
        </div>
    </div>
    @if ($showClient)
        <div class="font-bold truncate" title="{{ $environment->client->name }}">
            {{ $environment->client->name }}
        </div>
    @else
        <div></div>
    @endif
    <div class="flex flex-col justify-start min-w-0">
        <h3 class="text-lg text-gray-500">Productos</h3>
        <div class="flex items-center mt-2">
            @php
                $environmentProducts = $environment->licenseToken
                    ? $environment->licenseToken->products->whereNotNull('image')->unique('id')
                    : collect();
            @endphp
            @if ($environmentProducts->count() > 0)
                @foreach ($environmentProducts as $index => $product)
                    <div class="relative group"
                        style="z-index: {{ $environmentProducts->count() - $index }}; margin-left: {{ $index > 0 ? '-5px' : '0' }};">
                        <img src="{{ $product->image_url ?? asset('images/placeholder.png') }}"
                            alt="{{ $product->name }}"
                            class="w-8 h-8 bg-white rounded-full object-contain border-2 border-gray-200 hover:border-3ip transition-all cursor-pointer"
                            title="{{ $product->name }}">
                    </div>
                @endforeach
            @else
                <p class="text-gray-500 text-sm">No hay productos asociados</p>
            @endif
        </div>
    </div>
    <div class="flex font-bold min-w-0">
        @if ($environment->licenseToken)
            <button
                x-data="{ copied: false }"
                @click="navigator.clipboard.writeText('{{ $environment->licenseToken->token }}').then(() => { copied = true; setTimeout(() => copied = false, 2000); })"
                class="border rounded-lg p-2 border-gray-200 flex items-center hover:bg-gray-50 transition-colors w-full justify-center">
                <img src="{{ asset('vendor/blade-untitledui-icons/copy.svg') }}" alt="Token"
                    class="w-4 h-4 shrink-0" x-cloak x-show="!copied">
                <span class="ml-2 truncate max-w-[120px]" title="{{ $environment->licenseToken->token }}">
                    <span x-show="!copied">{{ Str::limit($environment->licenseToken->token, 10, '...') }}</span>
                    <span x-cloak x-show="copied" class="text-3ip">¡Copiado!</span>
                </span>
            </button>
        @else
            <a href="{{ route('license_tokens.associate-license', [$client, $environment]) }}"
                class="border rounded-lg p-2 border-gray-200 flex items-center w-full justify-center">
                <img src="{{ asset('vendor/blade-untitledui-icons/check-done-02.svg') }}"
                    alt="Asociar licencia" class="w-4 h-4 shrink-0">
                <span class="ml-2 truncate">Asociar licencia</span>
            </a>
        @endif
    </div>
    <div class="flex items-center justify-end gap-2 shrink-0">
        <x-dropdown align="right" width="48">
            <x-slot name="trigger">
                <button
                    class="border rounded-lg p-2 border-gray-200 flex items-center hover:bg-gray-50 transition-colors">
                    <img src="{{ asset('vendor/blade-untitledui-icons/settings.svg') }}" alt="Configurar entorno"
                        class="w-4 h-4">
                </button>
            </x-slot>

            <x-slot name="content">
                <x-dropdown-link class="flex items-center" :href="route('environments.edit', $environment)" wire:navigate>
                    <img src="{{ asset('vendor/blade-untitledui-icons/settings.svg') }}" alt="Configurar entorno" class="w-4 h-4">
                    <span class="ml-2 font-bold">Configurar</span>
                </x-dropdown-link>

                @if ($environment->licenseToken)
                    <button wire:click="openDisassociateModal" class="w-full text-start">
                        <x-dropdown-link class="flex items-center">
                            <img src="{{ asset('vendor/blade-untitledui-icons/trash.svg') }}" alt="Desasociar entorno" class="w-4 h-4">
                            <span class="ml-2 font-bold">Desasociar entorno</span>
                        </x-dropdown-link>
                    </button>
                @endif
            </x-slot>
        </x-dropdown>
        <a class="border rounded-lg p-2 border-gray-200 flex items-center" href="{{ $environment->domain }}" target="_blank">
            <img src="{{ asset('vendor/blade-untitledui-icons/globe.svg') }}" alt="Abrir entorno"
                class="w-4 h-4">
        </a>
        <a href="{{ route('environments.plugins.index', $environment) }}"
           class="border rounded-lg p-2 border-gray-200 flex items-center hover:bg-gray-50 transition-colors text-xs font-semibold text-gray-700">
            <img src="{{ asset('vendor/blade-untitledui-icons/puzzle-piece-02.svg') }}" alt="Ver plugins"
                 class="w-4 h-4 mr-1">
            Ver plugins
        </a>
    </div>
</div>

