{{-- 
    Single row in the patient history timeline.
    Variables:
        $entry   - array shape from PatientHistoryService::timeline()
        $patient - Patient model
--}}
@php
    $typeColors = [
        'opd'       => 'bg-blue-50 text-blue-800 border-blue-200',
        'dental'    => 'bg-purple-50 text-purple-800 border-purple-200',
        'ipd'       => 'bg-indigo-50 text-indigo-800 border-indigo-200',
        'admission' => 'bg-indigo-50 text-indigo-800 border-indigo-200',
        'anc'       => 'bg-pink-50 text-pink-800 border-pink-200',
        'maternity' => 'bg-rose-50 text-rose-800 border-rose-200',
        'visit'     => 'bg-blue-50 text-blue-800 border-blue-200',
    ];
    $statusColors = [
        'completed'   => 'text-emerald-700',
        'discharged'  => 'text-emerald-700',
        'delivered'   => 'text-emerald-700',
        'cancelled'   => 'text-gray-500 line-through',
        'in_consultation' => 'text-amber-700',
        'admitted'    => 'text-blue-700',
        'active'      => 'text-blue-700',
    ];
    $color = $typeColors[$entry['subtype']] ?? $typeColors[$entry['type']] ?? 'bg-gray-50 text-gray-800 border-gray-200';
    $stColor = $statusColors[$entry['status']] ?? 'text-gray-700';
    $detailsUrl = route('patients.history.details', [
        'patient' => $patient->id,
        'type'    => $entry['type'],
        'id'      => $entry['id'],
    ]);
@endphp

<div data-history-row class="border-b border-gray-100 last:border-b-0">
    <div class="flex items-center gap-3 p-3 hover:bg-gray-50 transition-colors">
        {{-- Date column --}}
        <div class="flex-shrink-0 w-20 text-right">
            <div class="text-xs font-bold text-gray-900">{{ $entry['date']?->format('d M Y') ?? '—' }}</div>
            <div class="text-[10.5px] text-gray-500">{{ $entry['date']?->format('H:i') ?? '' }}</div>
        </div>

        {{-- Type badge --}}
        <span class="flex-shrink-0 text-[10.5px] font-bold uppercase px-2 py-0.5 rounded-full border {{ $color }}">
            {{ $entry['subtype'] }}
        </span>

        {{-- Reference + summary --}}
        <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2">
                <span class="font-mono text-[11.5px] text-gray-700">{{ $entry['reference'] }}</span>
                @if($entry['clinician'])
                    <span class="text-[11.5px] text-gray-500">· {{ $entry['clinician'] }}</span>
                @endif
            </div>
            <div class="text-xs text-gray-700 truncate">{{ $entry['summary'] ?: '—' }}</div>
        </div>

        {{-- Status --}}
        <span class="flex-shrink-0 text-[11.5px] font-semibold capitalize {{ $stColor }}">
            {{ str_replace('_', ' ', $entry['status']) }}
        </span>

        {{-- Toggle button --}}
        <button type="button" class="history-row-toggle flex-shrink-0 text-xs text-cr-700 hover:text-cr-900 font-semibold inline-flex items-center gap-1"
                data-url="{{ $detailsUrl }}">
            Details
            <svg class="history-arrow w-3 h-3 transition-transform" style="transition: transform .15s" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
        </button>
    </div>

    {{-- Lazy-loaded details container --}}
    <div data-history-details class="hidden border-t border-gray-100 bg-gray-50"></div>
</div>