<x-layouts.tenant pageTitle="Evolución clínica">
    <x-page-header :title="'Evolución — '.$patient->fullName()"
                   :subtitle="'Consulta del '.$evolution->created_at->format('d/m/Y H:i')">
        <div class="flex gap-2">
            @if(!$evolution->isSigned())
                <form method="POST" action="{{ route('tenant.evolutions.sign', [$patient, $evolution]) }}"
                      onsubmit="return confirm('¿Firmar y bloquear esta evolución? No podrá editarse.')">
                    @csrf
                    <button type="submit"
                            class="inline-flex items-center px-3 py-2 bg-green-600 hover:bg-green-700 text-white text-xs font-semibold rounded-lg">
                        ✍️ Firmar evolución
                    </button>
                </form>
            @else
                <a href="{{ route('tenant.pdf.evolution', [$patient, $evolution]) }}" target="_blank"
                   class="inline-flex items-center px-3 py-2 bg-gray-600 hover:bg-gray-700 text-white text-xs font-semibold rounded-lg">
                    ↓ Descargar PDF
                </a>
            @endif
            <x-btn :href="route('tenant.patients.show', $patient)" variant="secondary">Volver al paciente</x-btn>
        </div>
    </x-page-header>

    @if(session('success'))
        <div class="mb-4 bg-green-50 border border-green-200 text-green-800 rounded-lg px-4 py-3 text-sm">
            {{ session('success') }}
        </div>
    @endif

    @if($evolution->isSigned())
        <div class="mb-4 bg-green-50 border border-green-200 rounded-xl px-4 py-3 flex items-center gap-3">
            <span class="text-green-600 text-xl">✅</span>
            <div>
                <p class="text-sm font-semibold text-green-800">Evolución firmada y bloqueada</p>
                <p class="text-xs text-green-600">Firmada el {{ $evolution->signed_at->format('d/m/Y H:i') }} por {{ $evolution->signer?->name ?? '—' }}</p>
            </div>
        </div>
    @else
        <div class="mb-4 bg-yellow-50 border border-yellow-200 rounded-xl px-4 py-3 text-sm text-yellow-800">
            ⚠ Esta evolución está en borrador. Fírmala para bloquearla y habilitarla para descarga en PDF.
        </div>
    @endif

    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <div class="xl:col-span-2 space-y-4">

            <x-card title="Motivo de consulta">
                <p class="text-sm text-gray-800 whitespace-pre-wrap">{{ $evolution->consultation_reason }}</p>
            </x-card>

            @if($evolution->current_illness)
                <x-card title="Enfermedad actual / Anamnesis">
                    <p class="text-sm text-gray-800 whitespace-pre-wrap">{{ $evolution->current_illness }}</p>
                </x-card>
            @endif

            @if($evolution->vital_signs)
                <x-card title="Signos vitales">
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                        @php
                            $vsLabels = [
                                'weight'=>'Peso','height'=>'Talla','bmi'=>'IMC',
                                'temperature'=>'Temperatura','systolic_bp'=>'P.A. Sistólica',
                                'diastolic_bp'=>'P.A. Diastólica','heart_rate'=>'Frec. cardíaca',
                                'respiratory_rate'=>'Frec. respiratoria','oxygen_sat'=>'Sat. O₂',
                            ];
                        @endphp
                        @foreach($vsLabels as $key => $label)
                            @if(isset($evolution->vital_signs[$key]) && $evolution->vital_signs[$key] !== '')
                                <div class="bg-blue-50 rounded-lg p-3 text-center">
                                    <p class="text-lg font-bold text-blue-800">{{ $evolution->vital_signs[$key] }}</p>
                                    <p class="text-xs text-blue-500">{{ $label }}</p>
                                </div>
                            @endif
                        @endforeach
                    </div>
                    @if(!empty($evolution->vital_signs['observations']))
                        <p class="mt-3 text-xs text-gray-500">{{ $evolution->vital_signs['observations'] }}</p>
                    @endif
                </x-card>
            @endif

            @if($evolution->physical_exam)
                <x-card title="Examen físico">
                    <p class="text-sm text-gray-800 whitespace-pre-wrap">{{ $evolution->physical_exam }}</p>
                </x-card>
            @endif

            @if($evolution->diagnoses->count())
                <x-card title="Diagnósticos">
                    <div class="space-y-2">
                        @foreach($evolution->diagnoses as $diag)
                            <div class="flex items-start gap-3 p-2 bg-gray-50 rounded-lg">
                                <span class="text-xs px-2 py-0.5 rounded-full font-medium
                                    {{ $diag->type === 'primary' ? 'bg-red-100 text-red-700' : ($diag->type === 'secondary' ? 'bg-orange-100 text-orange-700' : 'bg-gray-200 text-gray-600') }}">
                                    {{ $diag->typeLabel() }}
                                </span>
                                <div>
                                    <p class="text-sm font-medium text-gray-800">{{ $diag->name }}</p>
                                    @if($diag->cie10_code)
                                        <p class="text-xs text-gray-400">CIE-10: {{ $diag->cie10_code }}</p>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </x-card>
            @endif

            @if($evolution->diagnosis_notes)
                <x-card title="Notas de diagnóstico">
                    <p class="text-sm text-gray-800 whitespace-pre-wrap">{{ $evolution->diagnosis_notes }}</p>
                </x-card>
            @endif

            @if($evolution->treatment_plan)
                <x-card title="Plan de tratamiento">
                    <p class="text-sm text-gray-800 whitespace-pre-wrap">{{ $evolution->treatment_plan }}</p>
                </x-card>
            @endif

            @if($evolution->recommendations)
                <x-card title="Recomendaciones">
                    <p class="text-sm text-gray-800 whitespace-pre-wrap">{{ $evolution->recommendations }}</p>
                </x-card>
            @endif
        </div>

        <div class="space-y-4">
            <x-card title="Información de la consulta">
                <dl class="space-y-3 text-sm">
                    <div>
                        <dt class="text-xs text-gray-400">Profesional</dt>
                        <dd class="font-medium">{{ $evolution->employee?->user?->name ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-400">Fecha de consulta</dt>
                        <dd>{{ $evolution->created_at->format('d/m/Y H:i') }}</dd>
                    </div>
                    @if($evolution->next_control_date)
                        <div>
                            <dt class="text-xs text-gray-400">Próximo control</dt>
                            <dd class="font-medium text-indigo-700">{{ $evolution->next_control_date->format('d/m/Y') }}</dd>
                        </div>
                    @endif
                    <div>
                        <dt class="text-xs text-gray-400">Estado</dt>
                        <dd>
                            <span class="text-xs px-2 py-0.5 rounded-full font-semibold
                                {{ $evolution->isSigned() ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700' }}">
                                {{ $evolution->isSigned() ? 'Firmada' : 'Borrador' }}
                            </span>
                        </dd>
                    </div>
                </dl>
            </x-card>

            {{-- Acciones relacionadas --}}
            @if($evolution->isSigned())
                <x-card title="Acciones">
                    <div class="space-y-2">
                        <a href="{{ route('tenant.prescriptions.create', $patient) }}"
                           class="block w-full text-center text-xs bg-teal-600 hover:bg-teal-700 text-white py-2 rounded-lg">
                            💊 Nueva receta
                        </a>
                        <a href="{{ route('tenant.orders.create', $patient) }}"
                           class="block w-full text-center text-xs bg-amber-600 hover:bg-amber-700 text-white py-2 rounded-lg">
                            📋 Nueva orden
                        </a>
                        <a href="{{ route('tenant.pdf.evolution', [$patient, $evolution]) }}" target="_blank"
                           class="block w-full text-center text-xs border border-gray-300 hover:bg-gray-50 text-gray-700 py-2 rounded-lg">
                            ↓ Descargar PDF
                        </a>
                    </div>
                </x-card>
            @endif
        </div>
    </div>
</x-layouts.tenant>
