<x-layouts.tenant pageTitle="Pacientes">

    {{-- ── HEADER ── --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Pacientes</h1>
            <p class="text-sm text-gray-500 mt-0.5">Registro clínico y gestión de historia médica</p>
        </div>
        <a href="{{ route('tenant.patients.create') }}"
           class="inline-flex items-center gap-2 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-xl shadow-sm transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            Nuevo paciente
        </a>
    </div>

    {{-- ── STATS ── --}}
    <div class="grid grid-cols-3 gap-4 mb-6">
        <div class="bg-white border border-gray-200 rounded-2xl px-5 py-4 shadow-sm flex items-center gap-4">
            <div class="w-10 h-10 bg-indigo-100 rounded-xl flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
            </div>
            <div>
                <p class="text-2xl font-bold text-gray-900 leading-none">{{ $stats['total'] }}</p>
                <p class="text-xs text-gray-500 mt-0.5">Total pacientes</p>
            </div>
        </div>
        <div class="bg-white border border-gray-200 rounded-2xl px-5 py-4 shadow-sm flex items-center gap-4">
            <div class="w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <div>
                <p class="text-2xl font-bold text-gray-900 leading-none">{{ $stats['active'] }}</p>
                <p class="text-xs text-gray-500 mt-0.5">Activos</p>
            </div>
        </div>
        <div class="bg-white border border-gray-200 rounded-2xl px-5 py-4 shadow-sm flex items-center gap-4">
            <div class="w-10 h-10 bg-violet-100 rounded-xl flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg>
            </div>
            <div>
                <p class="text-2xl font-bold text-gray-900 leading-none">{{ $stats['with_hc'] }}</p>
                <p class="text-xs text-gray-500 mt-0.5">Con historia clínica</p>
            </div>
        </div>
    </div>

    {{-- ── SEARCH ── --}}
    <form method="GET" class="bg-white border border-gray-200 rounded-2xl shadow-sm px-4 py-3 mb-4 flex flex-col sm:flex-row items-center gap-3">
        <div class="relative flex-1 w-full">
            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            <input type="text" name="search" value="{{ request('search') }}"
                   placeholder="Buscar por nombre, documento, teléfono o email…"
                   class="w-full pl-9 pr-4 py-2 rounded-xl border-gray-200 text-sm focus:border-indigo-400 focus:ring-indigo-400 placeholder-gray-400">
        </div>
        <div class="flex items-center gap-2 flex-shrink-0">
            <select name="status" class="rounded-xl border-gray-200 text-sm focus:border-indigo-400 focus:ring-indigo-400 py-2 pr-8">
                <option value="">Todos los estados</option>
                <option value="active"   @selected(request('status')==='active')>Activos</option>
                <option value="inactive" @selected(request('status')==='inactive')>Inactivos</option>
            </select>
            <button type="submit"
                    class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-xl transition-colors">
                Buscar
            </button>
            @if(request()->hasAny(['search','status']))
                <a href="{{ route('tenant.patients.index') }}"
                   class="px-3 py-2 text-sm text-gray-500 hover:text-gray-700 rounded-xl hover:bg-gray-100 transition-colors">
                    Limpiar
                </a>
            @endif
        </div>
    </form>

    {{-- ── LISTA ── --}}
    <div class="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">

        @if($query->isEmpty())
            <div class="py-20 text-center">
                <div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center mx-auto mb-4">
                    <svg class="w-8 h-8 text-indigo-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                </div>
                <p class="text-sm font-semibold text-gray-700 mb-1">
                    @if(request()->hasAny(['search','status'])) No se encontraron resultados
                    @else Sin pacientes registrados @endif
                </p>
                <p class="text-xs text-gray-400 mb-5">
                    @if(request()->hasAny(['search','status'])) Intenta con otros términos.
                    @else Registra tu primer paciente para comenzar. @endif
                </p>
                <a href="{{ route('tenant.patients.create') }}"
                   class="inline-flex items-center gap-1.5 px-4 py-2 bg-indigo-600 text-white text-sm font-semibold rounded-xl hover:bg-indigo-700 transition-colors shadow-sm">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    Nuevo paciente
                </a>
            </div>
        @else
            {{-- Cabecera de tabla --}}
            <div class="hidden md:flex items-center gap-4 px-5 py-2.5 border-b border-gray-100 bg-gray-50/80">
                <div style="width:36px" class="flex-shrink-0"></div>
                <div class="flex-1 min-w-0 text-xs font-bold text-gray-400 uppercase tracking-wider">Paciente</div>
                <div style="width:130px" class="flex-shrink-0 text-xs font-bold text-gray-400 uppercase tracking-wider">Documento</div>
                <div style="width:190px" class="flex-shrink-0 text-xs font-bold text-gray-400 uppercase tracking-wider">Contacto</div>
                <div style="width:60px"  class="flex-shrink-0 text-xs font-bold text-gray-400 uppercase tracking-wider text-center">Citas</div>
                <div style="width:70px"  class="flex-shrink-0 text-xs font-bold text-gray-400 uppercase tracking-wider text-center">Evoluc.</div>
                <div style="width:90px"  class="flex-shrink-0 text-xs font-bold text-gray-400 uppercase tracking-wider text-right">Estado</div>
            </div>

            {{-- Filas --}}
            @php
                $colors = ['#6366f1','#10b981','#f59e0b','#8b5cf6','#06b6d4','#ec4899','#14b8a6','#f97316'];
            @endphp

            <div class="divide-y divide-gray-50">
                @foreach($query as $patient)
                    @php
                        $initials = collect(explode(' ', $patient->fullName()))->take(2)->map(fn($w)=>strtoupper(substr($w,0,1)))->implode('');
                        $color    = $colors[abs(crc32($patient->fullName())) % count($colors)];
                    @endphp
                    <div class="group flex items-center gap-4 px-5 py-3.5 hover:bg-indigo-50/40 transition-colors cursor-pointer"
                         onclick="window.location='{{ route('tenant.patients.show', $patient) }}'">

                        {{-- Avatar --}}
                        <div class="flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center text-white text-xs font-bold shadow-sm"
                             style="background:{{ $color }}">
                            {{ $initials }}
                        </div>

                        {{-- Nombre --}}
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 flex-wrap">
                                <a href="{{ route('tenant.patients.show', $patient) }}"
                                   class="text-sm font-semibold text-gray-900 group-hover:text-indigo-700 transition-colors"
                                   onclick="event.stopPropagation()">
                                    {{ $patient->fullName() }}
                                </a>
                                @if($patient->blood_type)
                                    <span class="text-[10px] font-bold bg-red-50 text-red-600 border border-red-200 rounded px-1.5 leading-4">{{ $patient->blood_type }}</span>
                                @endif
                                @if($patient->clinicalHistory)
                                    <span class="text-[10px] font-semibold bg-indigo-50 text-indigo-500 border border-indigo-200 rounded px-1.5 leading-4">HC</span>
                                @endif
                            </div>
                            <p class="text-xs text-gray-400 mt-0.5">
                                @if($patient->age()) {{ $patient->age() }} años @endif
                                @if($patient->gender) · {{ ['male'=>'Masculino','female'=>'Femenino','other'=>'Otro'][$patient->gender] ?? '' }} @endif
                            </p>
                        </div>

                        {{-- Documento --}}
                        <div class="flex-shrink-0 hidden md:block" style="width:130px">
                            @if($patient->document_number)
                                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wide">{{ $patient->document_type ?? 'DOC' }}</p>
                                <p class="text-sm text-gray-700 font-mono leading-tight">{{ $patient->document_number }}</p>
                            @else
                                <span class="text-gray-300">—</span>
                            @endif
                        </div>

                        {{-- Contacto --}}
                        <div class="flex-shrink-0 hidden md:block" style="width:190px">
                            <p class="text-sm text-gray-700 truncate">{{ $patient->phone }}</p>
                            @if($patient->email)
                                <p class="text-xs text-gray-400 truncate mt-0.5">{{ $patient->email }}</p>
                            @endif
                        </div>

                        {{-- Citas --}}
                        <div class="flex-shrink-0 hidden lg:flex justify-center" style="width:60px">
                            <span class="inline-flex items-center justify-center min-w-7 h-7 px-2 bg-gray-100 text-gray-600 text-xs font-bold rounded-lg">
                                {{ $patient->bookings_count }}
                            </span>
                        </div>

                        {{-- Evoluciones --}}
                        <div class="flex-shrink-0 hidden lg:flex justify-center" style="width:70px">
                            <span class="inline-flex items-center justify-center min-w-7 h-7 px-2 text-xs font-bold rounded-lg {{ $patient->clinical_evolutions_count > 0 ? 'bg-indigo-100 text-indigo-700' : 'bg-gray-100 text-gray-400' }}">
                                {{ $patient->clinical_evolutions_count }}
                            </span>
                        </div>

                        {{-- Estado + acciones --}}
                        <div class="flex-shrink-0 flex items-center justify-end gap-1.5" style="width:90px">
                            @if($patient->is_active)
                                <span class="inline-flex items-center gap-1 text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-2.5 py-1">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 inline-block"></span>
                                    <span class="hidden sm:inline">Activo</span>
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1 text-xs font-semibold bg-gray-100 text-gray-400 border border-gray-200 rounded-full px-2.5 py-1">
                                    <span class="w-1.5 h-1.5 rounded-full bg-gray-400 inline-block"></span>
                                    <span class="hidden sm:inline">Inactivo</span>
                                </span>
                            @endif

                            {{-- Acciones en hover --}}
                            <div class="opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1" onclick="event.stopPropagation()">
                                <a href="{{ route('tenant.patients.show', $patient) }}"
                                   class="w-7 h-7 flex items-center justify-center rounded-lg bg-indigo-100 hover:bg-indigo-200 text-indigo-600 transition-colors" title="Ver historia">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                </a>
                                <a href="{{ route('tenant.patients.edit', $patient) }}"
                                   class="w-7 h-7 flex items-center justify-center rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-500 transition-colors" title="Editar">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Footer paginación --}}
            <div class="px-5 py-3 border-t border-gray-100 flex items-center justify-between">
                <p class="text-xs text-gray-400">
                    @if($query->hasPages())
                        Mostrando {{ $query->firstItem() }}–{{ $query->lastItem() }} de {{ $query->total() }} pacientes
                    @else
                        {{ $query->total() }} paciente{{ $query->total() !== 1 ? 's' : '' }} en total
                    @endif
                </p>
                @if($query->hasPages())
                    <div>{{ $query->links() }}</div>
                @endif
            </div>
        @endif
    </div>

</x-layouts.tenant>
