@php
    $lang = request()->query('lang', 'en');
    $allPatients = \App\Models\Patient::with('translations')
        ->where('enabled', true)
        ->get();
    $selectedId = $getState();
    $selectedPatient = $allPatients->firstWhere('avatar_id', $selectedId);
@endphp
<div x-data="{
    search: '',
    genderFilter: '',
    minAge: '',
    maxAge: '',
    get filtered() {
        return this.all.filter(p => {
            const matchName = !this.search || p.name.toLowerCase().includes(this.search.toLowerCase());
            const matchGender = !this.genderFilter || p.gender === this.genderFilter;
            const matchMinAge = !this.minAge || (p.age && p.age >= parseInt(this.minAge));
            const matchMaxAge = !this.maxAge || (p.age && p.age <= parseInt(this.maxAge));
            return matchName && matchGender && matchMinAge && matchMaxAge;
        });
    },
    get hasFilters() { return !!(this.search || this.genderFilter || this.minAge || this.maxAge); },
    clearFilters() { this.search=''; this.genderFilter=''; this.minAge=''; this.maxAge=''; },
    all: @js($allPatients->map(function($p) use ($lang) { $t = $p->translateFor($lang, 'en'); return [
        'avatar_id' => $p->avatar_id,
        'name' => $p->name,
        'gender' => $p->gender,
        'age' => $p->age,
        'description' => strip_tags(($t['description'] ?? $p->description) ?? ''),
        'enabled' => $p->enabled,
        'showFullDesc' => false,
    ]; })->values()),
    selectedId: @js($selectedId),
}"
    wire:ignore
    class="space-y-4"
>
    <div class="flex items-center justify-between">
        <div class="text-sm text-gray-600">Click a row to select a patient</div>
        <button type="button" x-show="hasFilters" @click="clearFilters()" class="text-sm text-gray-600 hover:text-gray-800 underline">Clear filters</button>
    </div>
    <div class="flex flex-wrap items-center gap-2 mb-2">
        <input
            type="text"
            x-model="search"
            placeholder="Search patient by name..."
            class="filament-input w-full max-w-xs rounded-lg border-gray-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 shadow-sm"
        />
        <div class="flex gap-1 whitespace-nowrap">
            <button type="button" @click="genderFilter = ''" :class="genderFilter === '' ? 'bg-primary-500 text-white' : 'bg-gray-100 text-gray-700'" class="px-3 py-1 rounded">All</button>
            <button type="button" @click="genderFilter = 'male'" :class="genderFilter === 'male' ? 'bg-primary-500 text-white' : 'bg-gray-100 text-gray-700'" class="px-3 py-1 rounded">Male</button>
            <button type="button" @click="genderFilter = 'female'" :class="genderFilter === 'female' ? 'bg-primary-500 text-white' : 'bg-gray-100 text-gray-700'" class="px-3 py-1 rounded">Female</button>
        </div>
        <input
            type="number"
            x-model="minAge"
            min="0"
            max="120"
            placeholder="Min Age"
            class="filament-input w-24 rounded-lg border-gray-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 shadow-sm"
        />
        <span>-</span>
        <input
            type="number"
            x-model="maxAge"
            min="0"
            max="120"
            placeholder="Max Age"
            class="filament-input w-24 rounded-lg border-gray-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 shadow-sm"
        />
    </div>
    <div class="rounded-lg border border-gray-200 bg-white shadow-md w-full max-w-5xl mx-auto">
        <table class="w-full text-sm rounded-xl overflow-hidden shadow-sm table-auto">
            <thead class="bg-gradient-to-r from-blue-50 to-blue-100 sticky top-0 z-10">
                <tr>
    <th class="w-8"></th>
    <th class="px-4 py-2 text-left font-semibold">Name</th>
    <th class="px-4 py-2 text-left font-semibold">Gender</th>
    <th class="px-4 py-2 text-left font-semibold">Age</th>
    <th class="px-4 py-2 text-left font-semibold">Description</th>
</tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                <template x-if="filtered.length === 0">
                    <tr>
                        <td colspan="5" class="px-4 py-6 text-center text-gray-600">
                            No patients match the current filters.
                            <button type="button" class="ml-1 underline text-blue-600 hover:text-blue-800" @click="clearFilters()">Clear filters</button>
                        </td>
                    </tr>
                </template>
                <template x-for="patient in filtered" :key="patient.avatar_id">
                    <tr
                        :class="{
                            'bg-gradient-to-r from-blue-50 to-blue-100 shadow-lg border-l-4 border-blue-600 transform scale-[1.01]': patient.avatar_id === selectedId,
                            'hover:bg-blue-50 transition-all duration-200 cursor-pointer hover:shadow-md hover:scale-[1.005] odd:bg-gray-50': true
                        }"
                        @click="$wire.set('data.patient_avatar_id_table', patient.avatar_id); selectedId = patient.avatar_id;"
                        @keydown.enter.prevent="$wire.set('data.patient_avatar_id_table', patient.avatar_id); selectedId = patient.avatar_id;"
                        @keydown.space.prevent="$wire.set('data.patient_avatar_id_table', patient.avatar_id); selectedId = patient.avatar_id;"
                        role="button" tabindex="0" aria-selected="false"
                        title="Click to select this patient"
                        class="group focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-1"
                    >
                        <td class="px-2 py-2 text-center align-middle w-8 group-hover:bg-blue-50 transition-colors">
                            <template x-if="patient.avatar_id === selectedId">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
                                </svg>
                            </template>
                            <template x-if="patient.avatar_id !== selectedId">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <circle cx="12" cy="12" r="8" stroke-width="1.5" />
                                </svg>
                            </template>
                        </td>
                        <td class="px-4 py-2 font-medium whitespace-nowrap group-hover:text-blue-700 transition-colors" x-text="patient.name"></td>
                        <td class="px-4 py-2 text-center group-hover:bg-blue-50 transition-colors" x-text="patient.gender ? (patient.gender.charAt(0).toUpperCase() + patient.gender.slice(1)) : ''"></td>
                        <td class="px-4 py-2 text-center group-hover:bg-blue-50 transition-colors" x-text="patient.age"></td>
                        <td class="px-4 py-2 max-w-[300px] 2xl:max-w-[400px] group-hover:bg-blue-50 transition-colors">
                            <span x-show="!patient.showFullDesc" x-text="patient.description && patient.description.length > 60 ? patient.description.substring(0, 60) + '…' : patient.description"></span>
                            <span x-show="patient.showFullDesc" x-text="patient.description"></span>
                            <template x-if="patient.description && patient.description.length > 60">
                                <button type="button" class="ml-2 text-xs text-blue-600 underline hover:text-blue-800" @click.stop="patient.showFullDesc = !patient.showFullDesc">
                                    <span x-text="patient.showFullDesc ? 'Show less' : 'Show more'"></span>
                                </button>
                            </template>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>
    <template x-if="selectedId">
        <div class="mt-2 text-sm">
            <span class="inline-flex items-center gap-2 rounded-full bg-green-50 px-3 py-1 text-green-700 ring-1 ring-inset ring-green-600/20">
                Selected patient:
                <strong x-text="(all.find(p => p.avatar_id === selectedId) || {}).name || ''"></strong>
            </span>
        </div>
    </template>
</div>