@php
    use Carbon\Carbon;
    Carbon::setLocale('es');  // Para meses en español

    $anioActual = Carbon::now()->format('Y');
    $anioAnterior = Carbon::now()->subYear()->format('Y');

    $historialPorAnio = $auditor->historial
        ->groupBy(fn($item) => Carbon::parse($item->fecha)->format('Y'))
        ->sortKeysDesc();

    $mostrarTodos = !$auditor->tipo_solicitud;

    $items = $mostrarTodos
        ? $auditor->historial
        : ($historialPorAnio->get($anioActual) ?? collect());
@endphp
<div 
    class="mt-6 w-full rounded-xl border border-gray-300 bg-white p-6 shadow-sm"
    x-data="{
        verMas: false,
        documentoSeleccionado: null,
        modalExplicacionVisible: false,
        seleccionarDocumento(url) { this.documentoSeleccionado = url },
        cerrarVisor() { this.documentoSeleccionado = null },
        abrirModalExplicacion() { this.modalExplicacionVisible = true },
        cerrarModalExplicacion() { this.modalExplicacionVisible = false },
    }"
>
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-semibold flex items-center gap-2 text-gray-900">
            <x-heroicon-o-document-text class="w-5 h-5 text-primary-600" />
            Historial de Cambios
        </h2>
        <button
            @click="abrirModalExplicacion()"
            type="button"
            class="text-sm bg-primary-600 text-white px-3 py-1 rounded hover:bg-primary-700 transition"
            title="Explicación de la tabla"
        >
            ¿Qué es esto?
        </button>
    </div>

    @if($auditor->historial->isEmpty())
        <p class="text-center text-gray-500 italic">No hay registros de historial.</p>
    @else
        <!-- Tabla para pantallas md+ -->
        <div class="hidden md:flex justify-center overflow-x-auto">
            <table class="min-w-full max-w-4xl table-auto text-gray-700 text-sm border border-gray-200 rounded-md">
                <thead class="bg-gray-100">
                    <tr>
                        <th class="px-4 py-3 text-left font-medium border-b border-gray-300">📆 Fecha</th>
                        <th class="px-4 py-3 text-left font-medium border-b border-gray-300">📝 Motivo</th>
                        <th class="px-4 py-3 text-center font-medium border-b border-gray-300">📄 Documento</th>
                        <th class="px-4 py-3 text-left font-medium border-b border-gray-300">👤 Usuario</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 bg-white">
                    @foreach($items as $item)
                        @php
                            $urlFinal = $item->url_documento ? Storage::url($item->url_documento) : null;
                        @endphp
                        <tr class="hover:bg-gray-50 transition-colors duration-150">
                            <td class="px-4 py-3 whitespace-nowrap">{{ Carbon::parse($item->fecha)->translatedFormat('F j, Y') }}</td>
                            <td class="px-4 py-3">{{ $item->motivo }}</td>
                            <td class="px-4 py-3 text-center">
                                @if($urlFinal)
                                    <button 
                                        @click="seleccionarDocumento('{{ $urlFinal }}')" 
                                        class="text-primary-600 hover:underline cursor-pointer bg-transparent border-0 p-0"
                                    >Ver doc...</button>
                                @else
                                    <span class="italic text-gray-400">N/A</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap">{{ $item->user->name ?? 'N/D' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Vista móvil -->
        <div class="md:hidden mt-4 space-y-4 max-w-md mx-auto">
            @foreach($items as $item)
                @php
                    $urlFinal = $item->url_documento ? Storage::url($item->url_documento) : null;
                @endphp
                <div class="border border-gray-300 rounded-md bg-white p-4 shadow-sm hover:shadow-md transition">
                    <div class="flex justify-between mb-2 text-sm text-gray-600 font-semibold">
                        <span>📆 Fecha:</span>
                        <span class="text-gray-900">{{ Carbon::parse($item->fecha)->format('d/m/Y') }}</span>
                    </div>
                    <div class="flex justify-between mb-2 text-sm text-gray-600 font-semibold">
                        <span>📝 Motivo:</span>
                        <span class="text-gray-900 max-w-[65%] break-words text-right">{{ $item->motivo }}</span>
                    </div>
                    <div class="flex justify-between mb-2 text-sm text-gray-600 font-semibold items-center">
                        <span>📄 Documento:</span>
                        @if($urlFinal)
                            <button 
                                @click="seleccionarDocumento('{{ $urlFinal }}')" 
                                class="text-primary-600 hover:underline cursor-pointer bg-transparent border-0 p-0"
                            >Ver</button>
                        @else
                            <span class="italic text-gray-400">N/A</span>
                        @endif
                    </div>
                    <div class="flex justify-between text-sm text-gray-600 font-semibold">
                        <span>👤 Usuario:</span>
                        <span class="text-gray-900">{{ $item->user->name ?? 'N/D' }}</span>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

    <!-- Modal Visor PDF -->
    <div 
        x-show="documentoSeleccionado" 
        x-transition
        style="background-color: rgba(0,0,0,0.5);"
        class="fixed inset-0 z-50 flex items-center justify-center p-4"
        x-on:keydown.escape.window="cerrarVisor()"
        @click.self="cerrarVisor()"
        x-cloak
    >
        <div class="bg-white rounded-md shadow-lg w-full max-w-5xl h-screen relative flex flex-col">
            <button 
                @click="cerrarVisor()" 
                class="absolute top-3 left-3 text-gray-600 hover:text-gray-900 rounded-full p-1 bg-gray-100 hover:bg-gray-200 shadow cursor-pointer"
                title="Cerrar visor"
                aria-label="Cerrar visor"
                style="font-size: 24px; line-height: 1;"
            >
                &times;
            </button>

            <iframe 
                :src="documentoSeleccionado" 
                class="flex-grow w-full rounded-b-md"
                frameborder="0"
                allowfullscreen
            ></iframe>
        </div>
    </div>

    <!-- Modal Explicativo -->
    <div
        x-show="modalExplicacionVisible"
        x-transition
        style="background-color: rgba(0,0,0,0.5);"
        class="fixed inset-0 z-50 flex items-center justify-center p-6"
        @click.self="cerrarModalExplicacion()"
        x-cloak
    >
        <div class="bg-white rounded-lg shadow-lg max-w-3xl w-full p-6 relative">
            <button
                @click="cerrarModalExplicacion()"
                class="absolute top-3 right-3 text-gray-600 hover:text-gray-900 rounded-full p-1 bg-gray-100 hover:bg-gray-200 shadow cursor-pointer"
                title="Cerrar"
                aria-label="Cerrar modal"
                style="font-size: 24px; line-height: 1;"
            >&times;</button>
            <br><br>
            <h3 class="text-xl font-semibold mb-4 text-gray-900">Explicación del Historial de Cambios</h3>
            <p class="text-gray-700 leading-relaxed">
                Esta tabla muestra el historial de cambios realizados en los datos y documentos del auditor.
                Cada registro indica la fecha en que se hizo la modificación, el motivo del cambio,
                un enlace para ver el documento relacionado (si aplica), y el usuario solicitó la acción.
            </p>
            <p class="mt-3 text-gray-700 leading-relaxed">
                El historial es útil para llevar un control detallado y transparente de todas las actualizaciones,
                permitiendo auditorías internas y seguimiento del proceso de corrección.
            </p>
            <p class="mt-3 text-gray-700 leading-relaxed font-semibold">
                Recuerda que sólo los archivos antiguos que se reemplazan se almacenan aquí para mantener un registro claro.
            </p>
        </div>
    </div>
</div>