{{-- ============================================================
     Listado de clientes — implementado desde `Clientes.dc.html` (Claude Design).

     A ancho completo, como Entornos: es una herramienta interna y el espacio en
     blanco a los lados no compra nada. Ver briefs/clientes.md.
     ============================================================ --}}
<div class="w-full" style="font-size:14px; display:flex; flex-direction:column; gap:14px;">

    {{-- ============ Cabecera ============
         La descripción dice **lo que el usuario está viendo y puede hacer**, no una
         lista de estados. Y dice cuántos están «sin actividad todavía» porque son 18 de
         20 en la base real: un listado que los pinta igual hace pensar que hay veinte
         clientes trabajando. --}}
    <x-cabecera
        rotulo="Negocio"
        titulo="Clientes"
        descripcion="Quién nos compra, con sus datos de facturación, sus contactos y lo que tiene contratado. Entra en uno para ver sus licencias, sus entornos y sus contactos, o para darlo de baja.">

        <x-slot:icono>
            <x-nav-icon name="building-07" tint="orange" />
        </x-slot:icono>

        <x-slot:acciones>
    @can('admin.clients.create')
                <a href="{{ route('clients.create') }}" wire:navigate
                   class="flex flex-none items-center gap-2 rounded-lg px-4 py-2.5 text-[13.5px] font-semibold text-white"
                   style="background:var(--orange-500);"
                   onmouseover="this.style.background='var(--orange-600)'"
                   onmouseout="this.style.background='var(--orange-500)'">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
                    Nuevo cliente
                </a>
            @endcan
        </x-slot:acciones>
    </x-cabecera>

    @if (session('success'))
        <div class="rounded-lg px-4 py-2.5 text-[13px]"
             style="background:var(--success-50); color:var(--success-500);">
            {{ session('success') }}
        </div>
    @endif

    @if (session('warning'))
        <div class="rounded-lg px-4 py-2.5 text-[13px]"
             style="background:var(--warning-50); color:var(--warning-500);">
            {{ session('warning') }}
        </div>
    @endif

    {{-- ============ Buscador y pestañas ============ --}}
    <div class="flex flex-wrap items-center gap-3 rounded-xl border p-3 px-4"
         style="background:var(--surface-card); border-color:var(--border-subtle);">

        <div class="flex min-w-[240px] flex-1 items-center gap-2 rounded-lg border px-3 py-1.5"
             style="border-color:var(--border-default); background:var(--surface-page);">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--text-subtle)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="flex-none"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
            {{-- El marcador dice por dónde busca: si no, nadie prueba con el CIF. --}}
            <input type="text" wire:model.live.debounce.300ms="search"
                   placeholder="Nombre, shortname, CIF, razón social o CRM"
                   class="min-w-0 flex-1 border-none bg-transparent p-0 text-[13px] focus:ring-0"
                   style="color:var(--text-body);">
            <div wire:loading wire:target="search" class="flex-none">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--text-subtle)" stroke-width="2" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.22-8.56"/></svg>
            </div>
        </div>

        {{-- Los tres estados como segmentos. Es el filtro que más se usa. --}}
        <div class="flex flex-none gap-0.5 rounded-lg border p-[3px]"
             style="background:var(--surface-page); border-color:var(--border-default);">
            @php
                $pestanas = [
                    'alta' => 'De alta · ' . $resumen['alta'],
                    'baja' => 'De baja · ' . $resumen['baja'],
                    'todos' => 'Todos',
                ];
            @endphp
            @foreach ($pestanas as $clave => $etiqueta)
                <button type="button" wire:click="$set('estado', '{{ $clave }}')"
                        class="rounded-md px-3 py-[5px] text-[12.5px] font-semibold transition-colors"
                        @style([
                            'background:var(--neutral-800); color:#fff' => $estado === $clave,
                            'background:transparent; color:var(--text-muted)' => $estado !== $clave,
                        ])>
                    {{ $etiqueta }}
                </button>
            @endforeach
        </div>

        <span class="flex-none text-[12.5px]" style="color:var(--text-muted);">
            <strong class="font-bold" style="color:var(--text-strong);">{{ $clients->total() }}</strong>
            {{ $clients->total() === 1 ? 'cliente' : 'clientes' }}
        </span>
    </div>

    {{-- ============ Tabla ============ --}}
    <div class="overflow-hidden rounded-xl border"
         style="background:var(--surface-card); border-color:var(--border-subtle);">

        <div class="cli-grid hidden border-b px-5 py-2 text-[11px] font-semibold uppercase tracking-[0.06em] lg:grid"
             style="color:var(--text-muted); border-color:var(--divider);">
            <span>Cliente</span>
            <span>Licencias</span>
            <span>Entornos</span>
            <span>Desde</span>
            <span></span>
        </div>

        @forelse ($clients as $client)
            @php
                $estadoLic = $client->estadoDeLasLicencias();
                // Un cliente sin licencias y sin entornos: el alta a medio hacer. Se
                // pinta más apagado, y el de baja más todavía.
                $sinActividad = $client->tokens_count === 0 && $client->environments_count === 0;

                $colores = [
                    'activa' => ['var(--success-500)', 'var(--success-50)'],
                    'pronto' => ['var(--warning-500)', 'var(--warning-50)'],
                    'vencida' => ['var(--danger-500)', 'var(--danger-50)'],
                    'desactivada' => ['var(--neutral-600)', 'var(--surface-sunken)'],
                ];
            @endphp

            <a href="{{ route('clients.show', $client) }}" wire:navigate
               class="cli-grid items-center border-b px-5 py-2.5 transition-colors hover:bg-[var(--surface-alt)]"
               style="border-color:var(--divider); opacity:{{ ! $client->actived ? '0.65' : ($sinActividad ? '0.8' : '1') }};">

                {{-- Cliente --}}
                <div class="min-w-0">
                    <div class="flex min-w-0 items-center gap-2">
                        <span class="truncate text-[12.5px]"
                              style="color:var(--text-strong); font-weight:{{ $sinActividad ? '500' : '600' }};">
                            {{ $client->name }}
                        </span>
                        @unless ($client->actived)
                            <span class="flex-none rounded px-[7px] py-px text-[10.5px] font-semibold"
                                  style="color:var(--danger-500); background:var(--danger-50);">
                                DE BAJA
                            </span>
                        @endunless
                    </div>

                    @if (! $client->actived)
                        {{-- La baja, contada entera en el listado: antes el motivo y el
                             responsable solo se veían entrando a la ficha. --}}
                        <div class="mt-px truncate text-[11.5px]" style="color:var(--danger-500);">
                            @if ($client->deactivated_at)
                                desde {{ $client->deactivated_at->format('d/m/Y') }}
                            @endif
                            @if ($client->deactivation_reason)
                                · «{{ $client->deactivation_reason }}»
                            @endif
                            @if ($client->deactivatedBy)
                                · {{ $client->deactivatedBy->name }}
                            @endif
                        </div>
                    @else
                        <div class="mt-px truncate text-[11.5px]" style="color:var(--text-muted);">
                            {{ $client->shortname }}
                            @if ($client->cif)
                                · {{ $client->cif }}
                            @endif
                            @unless ($client->cif)
                                {{-- Falta el dato de facturar. Se avisa aquí porque hoy
                                     solo se descubría entrando a editar. --}}
                                <span class="font-semibold" style="color:var(--warning-500);">· sin CIF</span>
                            @endunless
                        </div>
                    @endif
                </div>

                {{-- Licencias --}}
                <div class="min-w-0">
                    @if ($estadoLic === 'nunca')
                        {{-- **Borde discontinuo y no una etiqueta gris**: «no tiene
                             ninguna» y «las tiene apagadas» eran la misma etiqueta y son
                             situaciones opuestas. --}}
                        <span class="rounded-full border border-dashed px-2.5 py-0.5 text-[11.5px]"
                              style="color:var(--text-subtle); border-color:var(--border-default);">
                            Sin licencias
                        </span>
                    @else
                        <span class="rounded-full px-2.5 py-0.5 text-[11.5px] font-semibold"
                              style="color:{{ $colores[$estadoLic][0] }}; background:{{ $colores[$estadoLic][1] }};">
                            {{ $client->etiquetaDeLasLicencias() }}
                        </span>
                    @endif
                </div>

                {{-- Entornos --}}
                <div class="min-w-0 text-[12.5px]">
                    @if ($client->environments_count > 0)
                        <span class="font-semibold" style="color:var(--text-strong);">
                            {{ $client->environments_count }}
                        </span>
                        @if ($client->sin_senal_count > 0)
                            <span class="text-[11.5px] font-semibold" style="color:var(--danger-500);">
                                · {{ $client->sin_senal_count }} sin señal
                            </span>
                        @elseif ($client->sin_sincronizar_count > 0)
                            {{-- Distinto de «sin señal»: es un alta sin terminar, no una
                                 avería. Misma distinción que en Entornos. --}}
                            <span class="text-[11.5px] font-semibold" style="color:var(--warning-500);">
                                · {{ $client->sin_sincronizar_count }} sin sincronizar
                            </span>
                        @endif
                    @else
                        <span style="color:var(--text-subtle);">—</span>
                    @endif
                </div>

                <span class="text-[12px]" style="color:var(--text-muted);">
                    {{ $client->fecha_inicio_relacion?->format('m/Y') ?? '—' }}
                </span>

                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--text-subtle)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hidden lg:block"><path d="m9 18 6-6-6-6"/></svg>
            </a>
        @empty
            <div class="px-6 py-8 text-center text-[13px]" style="color:var(--text-muted);">
                @if ($search !== '')
                    Ningún cliente coincide con «{{ $search }}».
                @elseif ($estado === 'baja')
                    Ningún cliente de baja.
                @else
                    Ningún cliente todavía.
                @endif
            </div>
        @endforelse

        {{-- El «Mostrando N–M de T» lo pinta la propia vista del paginado
             (`resources/views/vendor/livewire/tailwind.blade.php`), igual que en los
             otros quince listados: tenerlo aquí también lo decía dos veces. --}}
        @if ($clients->hasPages())
            <div class="px-5 py-2.5">{{ $clients->onEachSide(1)->links() }}</div>
        @endif
    </div>
</div>
