<div class="w-full flex items-center mt-4 bg-white">
    <table class="w-full border-separate rounded-lg border border-gray-200 text-sm">
        <thead>
            <tr>
                <th class="text-left border-b px-4 py-3">Tokens</th>
                @if ($showClient)
                    <th class="border-b px-4 py-3">Cliente</th>
                @endif
                <th class="border-b px-4 py-3">Fechas</th>
                <th class="border-b px-4 py-3">Entornos</th>
                <th class="text-left border-b px-4 py-3">Productos</th>
                <th class="text-left border-b px-4 py-3">Estado</th>
                @if ($showActions)
                    <th class="text-left border-b px-4 py-3"></th>
                @endif
            </tr>
        </thead>
        <tbody>
            @foreach ($tokens as $token)
                <tr>
                    <td class="{{ !$loop->last ? 'border-b' : '' }} p-4">
                        <div class="flex items-center gap-2">
                            @if ($showRadio)
                                <input type="radio" name="token" value="{{ $token->id }}"
                                    wire:model.live="selectedTokenId">
                            @endif
                            <button x-data="{ copied: false }"
                                @click="navigator.clipboard.writeText('{{ $token->token }}').then(() => { copied = true; setTimeout(() => copied = false, 2000); })"
                                class="flex items-center justify-center p-1 hover:bg-gray-100 rounded transition-colors"
                                title="Copiar token">
                                <img src="{{ asset('vendor/blade-untitledui-icons/copy.svg') }}" alt="Copiar"
                                    class="w-4 h-4" x-cloak x-show="!copied">
                                <span x-cloak x-show="copied" class="text-green-600 text-xs font-semibold">✓</span>
                            </button>
                            <div class="flex flex-col">
                                @if($token->name)
                                    <span class="font-semibold truncate" title="{{ $token->name }}">
                                        {{ $token->name }}
                                    </span>
                                    <span class="text-xs text-gray-500 truncate font-mono" title="{{ $token->token }}">
                                        {{ Str::limit($token->token, 13, '...') }}
                                    </span>
                                @else
                                    <span class="truncate" title="{{ $token->token }}">
                                        {{ Str::limit($token->token, 13, '...') }}
                                    </span>
                                @endif
                            </div>
                        </div>
                    </td>
                    @if ($showClient)
                        <td class="{{ !$loop->last ? 'border-b' : '' }} p-4">
                            {{ $token->client->name }}
                        </td>
                    @endif
                    <td class="{{ !$loop->last ? 'border-b' : '' }} p-4 text-center">
                        {{ $token->start_at->format('d/m/Y') }} - {{ $token->end_at->format('d/m/Y') }}</td>
                    <td class="{{ !$loop->last ? 'border-b' : '' }} p-4 text-center">
                        {{ $token->sites_count }}</td>
                    <td class="{{ !$loop->last ? 'border-b' : '' }} p-4">
                        <div class="flex items-center">
                            @php
                                $tokenProducts = $token->products->whereNotNull('image')->unique('id');
                            @endphp
                            @if ($tokenProducts->count() > 0)
                                @foreach ($tokenProducts as $index => $product)
                                    <div class="relative group"
                                        style="z-index: {{ $tokenProducts->count() - $index }}; margin-left: {{ $index > 0 ? '-8px' : '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
                                <span class="text-gray-500 text-sm">Sin productos</span>
                            @endif
                        </div>
                    </td>
                    <td class="{{ !$loop->last ? 'border-b' : '' }} p-4">
                        @php
                            $status = $token->getStatus();
                        @endphp

                        @if ($status === 'activo')
                            <span
                                class="inline-flex items-center gap-1 text-green-600 font-semibold bg-green-100 border border-green-200 rounded px-2 py-1">
                                <img src="{{ asset('vendor/blade-untitledui-icons/check-circle.svg') }}" alt="Activo"
                                    class="w-4 h-4 svg-fill-green">
                                <span>Activo</span>
                            </span>
                        @elseif ($status === 'vencen_pronto')
                            <span
                                class="inline-flex items-center gap-1 text-orange-600 font-semibold bg-orange-100 border border-orange-200 rounded px-2 py-1">
                                <img src="{{ asset('vendor/blade-untitledui-icons/alert-triangle.svg') }}"
                                    alt="Vencen pronto" class="w-4 h-4 svg-fill-orange">
                                <span>Vence pronto</span>
                            </span>
                        @elseif ($status === 'vencida')
                            <span
                                class="inline-flex items-center gap-1 text-red-600 font-semibold bg-red-100 border border-red-200 rounded px-2 py-1">
                                <img src="{{ asset('vendor/blade-untitledui-icons/alert-circle.svg') }}" alt="Vencida"
                                    class="w-4 h-4 svg-fill-red">
                                <span>Vencida</span>
                            </span>
                        @else
                            <span
                                class="inline-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>Desactivada</span>
                            </span>
                        @endif
                    </td>
                    @if ($showActions)
                        <td class="{{ !$loop->last ? 'border-b' : '' }} p-4">
                            <div class="flex items-center gap-2">
                                @can('admin.license-tokens.show')
                                <a href="{{ route('license_tokens.show', $token->id) }}" class="group">
                                    <img src="{{ asset('vendor/blade-untitledui-icons/settings.svg') }}" alt="Ver"
                                        class="w-6 h-6 svg-fill-gray group-hover:svg-fill-orange">
                                </a>
                                @endcan
                                @can('admin.license-tokens.destroy')
                                <button wire:click="openDeleteModal({{ $token->id }})" class="group">
                                    <img src="{{ asset('vendor/blade-untitledui-icons/trash.svg') }}" alt="Eliminar"
                                        class="w-6 h-6 svg-fill-red group-hover:svg-fill-orange">
                                </button>
                                @endcan
                            </div>
                        </td>
                    @endif
                </tr>
            @endforeach
        </tbody>
    </table>
    @if(method_exists($tokens, 'links'))
        <div class="mt-4">
            {{ $tokens->links() }}
        </div>
    @endif
</div>
