{{-- ============================================================
     Ficha del cliente — implementada desde `Clientes.dc.html` (Claude Design).

     El orden responde a «quién es este cliente» antes que «qué tiene»: identidad y
     facturación arriba, lo contratado en medio, y los entornos como bloque
     subordinado. Ver briefs/clientes.md.
     ============================================================ --}}
<div class="w-full" style="font-size:14px; display:flex; flex-direction:column; gap:16px;">

    <div>
        <a href="{{ route('clients.index') }}" wire:navigate
           class="inline-flex items-center gap-1.5 text-[13px] font-semibold"
           style="color:var(--text-link);">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
            Clientes
        </a>
    </div>

    @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

    {{-- ============ Banner de baja ============
         Un cliente de baja no es un detalle de la cabecera: sus Moodles están
         recibiendo «Cliente inactivo». Lo primero que se lee, con el motivo y quién lo
         hizo, que es el dato que se pierde si no se escribe. --}}
    @unless ($client->actived)
        <div class="flex flex-wrap items-center gap-3.5 rounded-xl border px-5 py-3.5"
             style="background:var(--danger-50); border-color:var(--danger-500);">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--danger-500)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="flex-none"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>
            <div class="min-w-[240px] flex-1">
                <div class="text-[13.5px] font-bold" style="color:var(--danger-500);">
                    Cliente de baja
                    @if ($client->deactivated_at)
                        desde el {{ $client->deactivated_at->format('d/m/Y') }}
                    @endif
                </div>
                <div class="mt-0.5 text-[12.5px]" style="color:var(--text-body);">
                    @if ($client->deactivation_reason)
                        «{{ $client->deactivation_reason }}»
                    @endif
                    @if ($client->deactivatedBy)
                        — {{ $client->deactivatedBy->name }}.
                    @endif
                    Sus licencias están desactivadas y sus entornos reciben «Cliente inactivo».
                </div>
            </div>
            @can('admin.clients.edit')
                <button type="button" wire:click="abrirCambioDeEstado"
                        class="flex-none rounded-lg border px-3.5 py-2 text-[13px] font-semibold"
                        style="border-color:var(--danger-500); background:var(--surface-page); color:var(--danger-500);"
                        title="Reactiva {{ $impacto['licencias'] }} licencia(s) y {{ $impacto['entornos'] }} entorno(s)">
                    Dar de alta…
                </button>
            @endcan
        </div>
    @endunless

    {{-- ============ Identidad y facturación ============ --}}
    <section class="rounded-xl border px-6 py-5"
             style="background:var(--surface-card); border-color:var(--border-subtle);">

        <div class="flex flex-wrap items-start justify-between gap-6">
            <div class="min-w-0">
                <div class="flex flex-wrap items-center gap-2.5">
                    <h1 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:22px; font-weight:700; letter-spacing:-0.02em; color:var(--text-strong); margin:0;">
                        {{ $client->name }}
                    </h1>
                    <span class="rounded px-2 py-0.5 font-mono text-[11.5px]"
                          style="color:var(--text-muted); background:var(--surface-sunken);">
                        {{ $client->shortname }}
                    </span>
                    @if ($client->actived)
                        <span class="rounded-full px-2.5 py-0.5 text-[11.5px] font-semibold"
                              style="color:var(--success-500); background:var(--success-50);">
                            De alta
                        </span>
                    @else
                        <span class="rounded-full px-2.5 py-0.5 text-[11.5px] font-semibold"
                              style="color:var(--danger-500); background:var(--danger-50);">
                            De baja
                        </span>
                    @endif
                </div>

                {{-- Los productos que recibe, montados entre sí como en Entornos. Salen
                     de sus licencias: sin licencias no hay productos. --}}
                <div class="mt-2 flex items-center">
                    @forelse ($productos as $indice => $producto)
                        <div class="relative" style="z-index:{{ count($productos) - $indice }}; margin-left:{{ $indice > 0 ? '-8px' : '0' }};"
                             title="{{ $producto->name }}">
                            <img src="{{ $producto->image_url ?? asset('images/placeholder.png') }}"
                                 alt="{{ $producto->name }}"
                                 class="h-8 w-8 rounded-full border-2 bg-white object-contain"
                                 style="border-color:var(--border-subtle);">
                        </div>
                    @empty
                        <span class="text-[12px]" style="color:var(--text-subtle);">
                            Sin productos contratados
                        </span>
                    @endforelse
                </div>
            </div>

            <div class="flex flex-none flex-wrap gap-2">
                @can('admin.clients.edit')
                    <a href="{{ route('clients.edit', $client) }}" wire:navigate
                       class="rounded-lg border px-3.5 py-2 text-[13px] font-semibold"
                       style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                        Editar
                    </a>
                @endcan

                @can('admin.environments.create')
                    <a href="{{ route('environments.create-from-client', $client) }}" wire:navigate
                       class="rounded-lg border px-3.5 py-2 text-[13px] font-semibold"
                       style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                        Nuevo entorno
                    </a>
                @endcan

                @if ($client->actived)
                    @can('admin.clients.edit')
                        {{-- Con el impacto en el `title`: el número está antes de abrir la
                             modal, no solo dentro. --}}
                        <button type="button" wire:click="abrirCambioDeEstado"
                                class="rounded-lg border px-3.5 py-2 text-[13px] font-semibold"
                                style="border-color:var(--danger-500); background:var(--surface-page); color:var(--danger-500);"
                                title="Desactiva {{ $impacto['licencias'] }} licencia(s) y corta {{ $impacto['entornos'] }} entorno(s)">
                            Dar de baja…
                        </button>
                    @endcan
                @endif
            </div>
        </div>

        {{-- ============ Datos fiscales y de gestión ============
             **No estaban en la ficha**: la razón social, el CIF, la fecha de inicio y el
             CRM solo se veían entrando a editar, y son lo que busca Administración.

             Lo que falta se dice en ámbar cuando es un dato que hace falta para
             facturar, y con un guion cuando es opcional. Un hueco en blanco se lee como
             «no lo he mirado». --}}
        <div class="mt-4 grid grid-cols-2 gap-5 border-t pt-4 md:grid-cols-3 lg:grid-cols-5"
             style="border-color:var(--divider);">
            @php
                $campos = [
                    ['Razón social', $client->razon_social, 'Falta razón social', true],
                    ['CIF', $client->cif, 'Falta CIF', true],
                    ['Cliente desde', $client->fecha_inicio_relacion?->format('m/Y'), '—', false],
                    ['CRM', $client->crm_id, '—', false],
                ];
            @endphp

            @foreach ($campos as [$etiqueta, $valor, $vacio, $importante])
                <div>
                    <div class="text-[11px] font-semibold uppercase tracking-[0.06em]" style="color:var(--text-muted);">
                        {{ $etiqueta }}
                    </div>
                    <div class="mt-[3px] text-[13px]"
                         style="color:{{ $valor ? 'var(--text-body)' : ($importante ? 'var(--warning-500)' : 'var(--text-subtle)') }};">
                        {{ $valor ?: $vacio }}
                    </div>
                </div>
            @endforeach

            <div>
                <div class="text-[11px] font-semibold uppercase tracking-[0.06em]" style="color:var(--text-muted);">
                    Jira
                </div>
                <div class="mt-[3px] text-[13px]">
                    @if ($client->jira)
                        <a href="{{ $client->jira }}" target="_blank" rel="noopener"
                           class="font-semibold" style="color:var(--text-link);">
                            {{ \Illuminate\Support\Str::limit(preg_replace('#^https?://#', '', $client->jira), 24) }}
                        </a>
                    @else
                        <span style="color:var(--text-subtle);">—</span>
                    @endif
                </div>
            </div>
        </div>

        @if ($client->observation)
            <div class="mt-3 rounded-lg px-3.5 py-2.5 text-[12.5px]"
                 style="background:var(--surface-alt); color:var(--text-muted);">
                <strong class="font-semibold" style="color:var(--text-body);">Observaciones:</strong>
                {{ $client->observation }}
            </div>
        @endif
    </section>

    {{-- ============ Licencias y contactos ============ --}}
    <div class="grid grid-cols-1 items-start gap-4 lg:grid-cols-[3fr_2fr]">

        {{-- Licencias: antes solo se contaban. Para saber cuáles había que salir a la
             pantalla de Licencias y buscar por cliente. --}}
        <section class="overflow-hidden rounded-xl border"
                 style="background:var(--surface-card); border-color:var(--border-subtle);">
            <div class="flex items-baseline justify-between gap-4 px-5 pb-2.5 pt-3.5">
                <h2 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong); margin:0;">
                    Licencias
                </h2>
                @can('admin.license-tokens.create')
                    <a href="{{ route('license_tokens.create') }}" wire:navigate
                       class="text-[12.5px] font-semibold" style="color:var(--text-link);">
                        Nueva licencia
                    </a>
                @endcan
            </div>

            @forelse ($client->tokens->sortByDesc('end_at') as $token)
                @php
                    $estadoToken = $token->estado();
                    $coloresToken = [
                        'activa' => ['var(--success-500)', 'var(--success-50)', 'Activa'],
                        'pronto' => ['var(--warning-500)', 'var(--warning-50)', 'Vence pronto'],
                        'vencida' => ['var(--danger-500)', 'var(--danger-50)', 'Vencida'],
                        'desactivada' => ['var(--neutral-600)', 'var(--surface-sunken)', 'Desactivada'],
                    ];
                    [$color, $fondo, $texto] = $coloresToken[$estadoToken];
                @endphp

                <a href="{{ route('license_tokens.show', $token) }}" wire:navigate
                   class="cli-lic-grid items-center border-t px-5 py-2.5 text-[12.5px] transition-colors hover:bg-[var(--surface-alt)]"
                   style="border-color:var(--divider);">
                    {{-- **Cortado.** La fila entera ya enlaza a la ficha de la licencia, que
                         es donde está el token completo con su botón de copiar. Aquí basta el
                         prefijo para distinguir dos licencias del mismo cliente. --}}
                    <span class="justify-self-start truncate rounded px-2 py-0.5 font-mono text-[11.5px]"
                          style="color:var(--text-body); background:var(--surface-sunken);">
                        {{ $token->token_corto }}
                    </span>

                    <span>
                        <span class="rounded-full px-2.5 py-0.5 text-[11px] font-semibold"
                              style="color:{{ $color }}; background:{{ $fondo }};">
                            {{ $texto }}
                        </span>
                    </span>

                    <span class="truncate" style="color:var(--text-muted);">
                        {{ $token->products->pluck('name')->implode(' · ') ?: 'Sin productos' }}
                    </span>

                    <span style="color:{{ in_array($estadoToken, ['pronto', 'vencida'], true) ? $color : 'var(--text-muted)' }};
                                 font-weight:{{ in_array($estadoToken, ['pronto', 'vencida'], true) ? '600' : '400' }};">
                        {{ $token->end_at?->format('m/Y') ?? 'Sin fin' }}
                    </span>
                </a>
            @empty
                <div class="mx-5 mb-4 rounded-lg border border-dashed p-4 text-center text-[12.5px]"
                     style="border-color:var(--border-default); color:var(--text-muted);">
                    Nunca ha tenido licencias.
                    @can('admin.license-tokens.create')
                        <a href="{{ route('license_tokens.create') }}" wire:navigate
                           class="font-semibold" style="color:var(--text-link);">Crear la primera</a>
                    @endcan
                </div>
            @endforelse
        </section>

        {{-- Contactos: estaban detrás de una modal que se abría pulsando un contador
             que no parecía un botón. Es lo primero que busca Comercial. --}}
        <section class="overflow-hidden rounded-xl border"
                 style="background:var(--surface-card); border-color:var(--border-subtle);">
            <div class="flex items-baseline justify-between gap-4 px-5 pb-2.5 pt-3.5">
                <h2 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong); margin:0;">
                    Contactos
                </h2>
                @can('admin.clients.edit')
                    <a href="{{ route('clients.edit', $client) }}" wire:navigate
                       class="text-[12.5px] font-semibold" style="color:var(--text-link);">
                        Añadir
                    </a>
                @endcan
            </div>

            @forelse ($contactos as $contacto)
                <div class="flex items-center gap-3 border-t px-5 py-2.5" style="border-color:var(--divider);">
                    <div class="flex h-8 w-8 flex-none items-center justify-center rounded-full text-[11.5px] font-semibold"
                         style="background:var(--teal-100); color:var(--teal-700);">
                        {{ $contacto['iniciales'] }}
                    </div>
                    <div class="min-w-0 flex-1">
                        <div class="text-[13px] font-semibold" style="color:var(--text-strong);">
                            {{ $contacto['nombre'] }}
                            @if ($contacto['cargo'])
                                <span class="text-[12px] font-normal" style="color:var(--text-muted);">
                                    · {{ $contacto['cargo'] }}
                                </span>
                            @endif
                        </div>
                        <div class="mt-px truncate text-[12px]">
                            @if ($contacto['email'])
                                <a href="mailto:{{ $contacto['email'] }}" style="color:var(--text-link);">
                                    {{ $contacto['email'] }}
                                </a>
                            @endif
                            @if ($contacto['telefono'])
                                <span style="color:var(--text-muted);">
                                    @if ($contacto['email']) · @endif
                                    {{ $contacto['telefono'] }}
                                </span>
                            @endif
                            @if (! $contacto['email'] && ! $contacto['telefono'])
                                <span style="color:var(--text-subtle);">Sin correo ni teléfono</span>
                            @endif
                        </div>
                    </div>
                </div>
            @empty
                <div class="mx-5 mb-4 rounded-lg border border-dashed p-4 text-center text-[12.5px]"
                     style="border-color:var(--border-default); color:var(--text-muted);">
                    Sin contactos guardados.
                    @can('admin.clients.edit')
                        <a href="{{ route('clients.edit', $client) }}" wire:navigate
                           class="font-semibold" style="color:var(--text-link);">Añadir el primero</a>
                    @endcan
                </div>
            @endforelse
        </section>
    </div>

    {{-- ============ Entornos ============
         Bloque subordinado a propósito: antes tenía su propio buscador y su propio
         filtro, y pesaba tanto como los datos del cliente. Filas compactas; el detalle
         de cada entorno está en su pantalla. --}}
    <section class="overflow-hidden rounded-xl border"
             style="background:var(--surface-card); border-color:var(--border-subtle);">
        <div class="flex flex-wrap items-baseline justify-between gap-4 px-5 pb-2.5 pt-3.5">
            <div class="flex items-baseline gap-2.5">
                <h2 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong); margin:0;">
                    Entornos
                </h2>
                @if ($resumenDeEntornos['total'] > 0)
                    <span class="text-[12px]" style="color:var(--text-muted);">
                        {{ $resumenDeEntornos['total'] }}
                        @if ($resumenDeEntornos['sinSenal'] > 0)
                            · <span class="font-semibold" style="color:var(--danger-500);">{{ $resumenDeEntornos['sinSenal'] }} sin señal</span>
                        @endif
                        @if ($resumenDeEntornos['sinSincronizar'] > 0)
                            · <span class="font-semibold" style="color:var(--warning-500);">{{ $resumenDeEntornos['sinSincronizar'] }} sin sincronizar</span>
                        @endif
                        @if ($resumenDeEntornos['sinSenal'] === 0 && $resumenDeEntornos['sinSincronizar'] === 0)
                            · todos con señal
                        @endif
                    </span>
                @endif
            </div>
            <div class="flex gap-3.5">
                @can('admin.environments.create')
                    <a href="{{ route('environments.create-from-client', $client) }}" wire:navigate
                       class="text-[12.5px] font-semibold" style="color:var(--text-link);">
                        Crear entorno
                    </a>
                @endcan
                @can('admin.environments.index')
                    <a href="{{ route('environments.index') }}" wire:navigate
                       class="text-[12.5px] font-semibold" style="color:var(--text-link);">
                        Ver en Entornos
                    </a>
                @endcan
            </div>
        </div>

        @php
            // La paleta la da el catálogo de usos: era la misma lista copiada en seis vistas.
            $coloresEnv = \App\Models\Environments\Env::colores();
        @endphp

        @forelse ($entornos as $entorno)
            @php [$colorEnv, $fondoEnv] = $coloresEnv[$entorno['env']] ?? $coloresEnv['local']; @endphp

            <a href="{{ route('environments.edit', $entorno['id']) }}" wire:navigate
               class="cli-env-grid items-center border-t px-5 py-2.5 text-[12.5px] transition-colors hover:bg-[var(--surface-alt)]"
               style="border-color:var(--divider);">
                <span class="truncate font-semibold" style="color:var(--text-strong);">
                    {{ $entorno['dominio'] ?: $entorno['nombre'] }}
                </span>

                <span class="justify-self-start rounded px-[7px] py-px text-[10.5px] font-semibold"
                      style="color:{{ $colorEnv }}; background:{{ $fondoEnv }};">
                    {{ $entorno['env'] }}
                </span>

                <span class="truncate" style="color:var(--text-body);">
                    {{ $entorno['tipo'] ? $entorno['tipo'] . ' ' : '' }}{{ $entorno['version'] ?? '—' }}
                </span>

                {{-- Tres estados y no dos: «nunca sincronizado» es un alta sin terminar
                     y «sin señal» es una avería. --}}
                <span class="truncate">
                    @if ($entorno['nunca'])
                        <span class="font-semibold" style="color:var(--warning-500);">Nunca sincronizado</span>
                    @elseif ($entorno['sinSenal'])
                        <span class="font-semibold" style="color:var(--danger-500);">
                            Sin señal · hace {{ $entorno['dias'] }} día(s)
                        </span>
                    @else
                        <span style="color:var(--text-muted);">Sincronizado {{ $entorno['fecha'] }}</span>
                    @endif
                </span>

                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--text-subtle)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hidden md:block"><path d="m9 18 6-6-6-6"/></svg>
            </a>
        @empty
            <div class="mx-5 mb-4 rounded-lg border border-dashed p-4 text-center text-[12.5px]"
                 style="border-color:var(--border-default); color:var(--text-muted);">
                Sin entornos.
                @can('admin.environments.create')
                    <a href="{{ route('environments.create-from-client', $client) }}" wire:navigate
                       class="font-semibold" style="color:var(--text-link);">Crear el primero para este cliente</a>
                @endcan
            </div>
        @endforelse
    </section>
</div>
