@php
    $diskUrl = fn (string $path) => \Illuminate\Support\Facades\Storage::url($path);
@endphp

<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                {{ $medicalRecord->title ?: __('Entrada clínica') }}
            </h2>
            <div class="flex flex-wrap items-center gap-2">
                <a href="{{ route('clients.patients.medical-records.index', [$client, $patient]) }}"
                   class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-teal-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" 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 2"/></svg>
                    {{ __('Historial') }}
                </a>
                <a href="{{ route('clients.patients.medical-records.print', [$client, $patient, $medicalRecord]) }}"
                   target="_blank" rel="noopener"
                   class="inline-flex items-center gap-1.5 rounded-lg border border-slate-300 bg-slate-800 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-slate-900">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
                    {{ __('Imprimir') }}
                </a>
                @can('medical_records.edit')
                    <a href="{{ route('clients.patients.medical-records.edit', [$client, $patient, $medicalRecord]) }}"
                       class="inline-flex items-center gap-1.5 rounded-lg bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" 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>
                        {{ __('Editar') }}
                    </a>
                @endcan
            </div>
        </div>
    </x-slot>

    <div class="py-8">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8 space-y-6" x-data="filePreviewModal()" @keydown.escape.window="closePreview()">
            <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-6 text-sm text-gray-700 dark:text-gray-300 space-y-2">
                <p>{{ $medicalRecord->recorded_at->translatedFormat('d M Y H:i') }}
                    @if ($medicalRecord->author)
                        · {{ __('Por') }} {{ $medicalRecord->author->name }}
                    @endif
                </p>
                @if ($medicalRecord->weight_kg)
                    <p><span class="font-medium text-gray-900 dark:text-gray-100">{{ __('Peso') }}:</span> {{ $medicalRecord->weight_kg }} kg</p>
                @endif
                @if ($medicalRecord->temperature_c)
                    <p><span class="font-medium text-gray-900 dark:text-gray-100">{{ __('Temperatura') }}:</span> {{ $medicalRecord->temperature_c }} °C</p>
                @endif
                @if ($medicalRecord->chief_complaint)
                    <p><span class="font-medium text-gray-900 dark:text-gray-100">{{ __('Motivo de consulta') }}:</span> {{ $medicalRecord->chief_complaint }}</p>
                @endif
                @if ($medicalRecord->physical_exam)
                    <div class="mt-4">
                        <p class="font-medium text-gray-900 dark:text-gray-100">{{ __('Examen físico') }}</p>
                        <div class="mt-1 whitespace-pre-wrap">{{ $medicalRecord->physical_exam }}</div>
                    </div>
                @endif
                @if ($medicalRecord->diagnosis)
                    <div class="mt-4">
                        <p class="font-medium text-gray-900 dark:text-gray-100">{{ __('Diagnóstico') }}</p>
                        <div class="mt-1 whitespace-pre-wrap">{{ $medicalRecord->diagnosis }}</div>
                    </div>
                @endif
                @if ($medicalRecord->treatment)
                    <div class="mt-4">
                        <p class="font-medium text-gray-900 dark:text-gray-100">{{ __('Tratamiento') }}</p>
                        <div class="mt-1 whitespace-pre-wrap">{{ $medicalRecord->treatment }}</div>
                    </div>
                @endif
                @if ($medicalRecord->medications)
                    <div class="mt-4">
                        <p class="font-medium text-gray-900 dark:text-gray-100">{{ __('Medicación') }}</p>
                        <div class="mt-1 whitespace-pre-wrap">{{ $medicalRecord->medications }}</div>
                    </div>
                @endif
                @if ($medicalRecord->body)
                    <div class="mt-4">
                        <p class="font-medium text-gray-900 dark:text-gray-100">{{ __('Notas adicionales') }}</p>
                        <div class="prose dark:prose-invert max-w-none mt-1 whitespace-pre-wrap">{{ $medicalRecord->body }}</div>
                    </div>
                @endif
            </div>

            @if ($medicalRecord->attachments->isNotEmpty())
                <div class="rounded-xl border border-teal-100 bg-white p-6 shadow-sm dark:border-teal-900/40 dark:bg-gray-800">
                    <h3 class="mb-4 flex items-center gap-2 text-lg font-semibold text-gray-900 dark:text-gray-100">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-teal-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        {{ __('Multimedia / adjuntos') }}
                    </h3>
                    <ul class="grid gap-4 sm:grid-cols-2">
                        @foreach ($medicalRecord->attachments as $att)
                            @php
                                $u = $diskUrl($att->path);
                            @endphp
                            <li class="overflow-hidden rounded-xl border border-slate-200 bg-slate-50/80 shadow-sm dark:border-slate-600 dark:bg-slate-900/50">
                                <div class="relative h-32 w-full overflow-hidden bg-slate-200 dark:bg-slate-700">
                                    @if ($att->isImage())
                                        <img src="{{ $u }}" alt="" class="h-full w-full object-cover" loading="lazy" />
                                    @elseif ($att->isPdf())
                                        <div class="flex h-full flex-col items-center justify-center gap-1 text-red-600">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 2l5 5h-5V4zM8.5 13H10v1.5H8.5V13zm0 2.5H10V17H8.5v-1.5zM10 19H8.5v-1.5H10V19zm3.5-6H16v1.5h-2.5V13zm0 2.5H16V17h-2.5v-1.5zM16 19h-2.5v-1.5H16V19z"/></svg>
                                            <span class="text-xs font-semibold uppercase tracking-wide">PDF</span>
                                        </div>
                                    @elseif ($att->isVideo())
                                        <div class="flex h-full items-center justify-center text-violet-600">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-14 w-14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                        </div>
                                    @else
                                        <div class="flex h-full items-center justify-center text-slate-500">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                                        </div>
                                    @endif
                                </div>
                                <div class="p-3">
                                    <p class="truncate text-xs font-medium text-slate-800 dark:text-slate-200" title="{{ $att->original_name }}">{{ $att->original_name }}</p>
                                    <div class="mt-3 flex flex-wrap gap-2">
                                        <button type="button"
                                                class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg bg-teal-600 px-3 py-2 text-xs font-semibold text-white shadow-sm hover:bg-teal-700 sm:flex-initial"
                                                @click="openPreview({{ \Illuminate\Support\Js::from(['url' => str_replace('\\', '/', $u), 'title' => $att->original_name, 'mime' => $att->mime]) }})">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" 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>
                                            {{ __('Ver') }}
                                        </button>
                                        <a href="{{ $u }}"
                                           download="{{ $att->original_name }}"
                                           class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs font-semibold text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700 sm:flex-initial">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                                            {{ __('Descargar') }}
                                        </a>
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @can('medical_records.edit')
                <form method="post" action="{{ route('clients.patients.medical-records.destroy', [$client, $patient, $medicalRecord]) }}" class="text-right"
                      onsubmit="return confirm(@js(__('¿Eliminar esta entrada y sus adjuntos?')));">
                    @csrf
                    @method('delete')
                    <button type="submit" class="inline-flex items-center gap-1 text-sm text-red-600 hover:underline dark:text-red-400">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                        {{ __('Eliminar entrada') }}
                    </button>
                </form>
            @endcan

            @include('partials.file-preview-modal')
        </div>
    </div>
</x-app-layout>