@php
    $pageTitle = $page?->title ?: 'Documentos de gestión';
    $pageExcerpt = $page?->excerpt ?: 'Consulta los documentos institucionales vigentes en un solo lugar.';
@endphp

<x-app-layout
    :meta-title="$pageTitle"
    :meta-description="$pageExcerpt"
    :meta-image="$page?->image"
>
    @push('styles')
        <link rel="stylesheet" href="{{ asset('cip/css/documentos-gestion.css') }}?v={{ @filemtime(public_path('cip/css/documentos-gestion.css')) ?: '1' }}">
    @endpush

    <section class="page-hero page-hero--documentos" aria-label="Encabezado de página">
        <div class="page-hero__bg" aria-hidden="true">
            <div class="page-hero__bg-pattern"></div>
            <div class="page-hero__bg-shape page-hero__bg-shape--1"></div>
            <div class="page-hero__bg-shape page-hero__bg-shape--2"></div>
            <div class="page-hero__bg-lines"></div>
        </div>
        <div class="container page-hero__inner">
            <nav class="page-hero__breadcrumb" aria-label="Ruta de navegación">
                <a href="{{ route('welcome') }}"><i class="fa-solid fa-house" aria-hidden="true"></i> Inicio</a>
                <i class="fa-solid fa-chevron-right page-hero__breadcrumb-sep" aria-hidden="true"></i>
                <span class="page-hero__breadcrumb-current">{{ $pageTitle }}</span>
            </nav>
            <h1 class="page-hero__title"><em>{{ $pageTitle }}</em></h1>
            <p class="page-hero__subtitle">{{ $pageExcerpt }}</p>
        </div>
        <div class="page-hero__divider" aria-hidden="true"></div>
    </section>

    <main class="documentos" id="contenido-principal">
        <div class="container">
            <div class="documentos__heading">
                <span class="documentos__eyebrow">Información institucional</span>
                <h2>Documentos disponibles</h2>
                <p>Selecciona un documento para visualizarlo sin salir de esta página.</p>
            </div>

            @if($documentos->isNotEmpty())
                <div class="documentos__selector" role="list" aria-label="Lista de documentos de gestión">
                    @foreach($documentos as $documento)
                        @php
                            $tienePdf = filled($documento->archivo_url);
                            $seleccionado = $documentoInicial?->id === $documento->id;
                        @endphp
                        <button
                            type="button"
                            class="documento-card{{ $seleccionado ? ' is-active' : '' }}"
                            role="listitem"
                            @disabled(!$tienePdf)
                            aria-pressed="{{ $seleccionado ? 'true' : 'false' }}"
                            aria-label="{{ $tienePdf ? 'Ver '.$documento->titulo : $documento->titulo.'. Sin archivo PDF' }}"
                            data-documento
                            data-pdf-url="{{ $documento->archivo_url }}"
                            data-titulo="{{ $documento->titulo }}"
                            data-abreviacion="{{ $documento->abreviacion }}"
                        >
                            <span class="documento-card__visual">
                                @if($documento->imagen_url)
                                    <img src="{{ $documento->imagen_url }}" alt="" loading="lazy" width="96" height="112">
                                @else
                                    <span class="documento-card__fallback" aria-hidden="true">
                                        <i class="fa-solid fa-file-pdf"></i>
                                    </span>
                                @endif
                            </span>
                            <span class="documento-card__content">
                                <strong>{{ $documento->abreviacion }}</strong>
                                <span>{{ $documento->titulo }}</span>
                                @unless($tienePdf)
                                    <small><i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i> Sin PDF</small>
                                @endunless
                            </span>
                        </button>
                    @endforeach
                </div>

                <section class="documentos__viewer" aria-labelledby="documento-activo-titulo">
                    <header class="documentos__viewer-header">
                        <div>
                            <span id="documento-activo-abreviacion">{{ $documentoInicial?->abreviacion ?: 'Documento' }}</span>
                            <h2 id="documento-activo-titulo">{{ $documentoInicial?->titulo ?: 'Seleccione un documento' }}</h2>
                        </div>
                        <a
                            class="documentos__open{{ $documentoInicial ? '' : ' is-disabled' }}"
                            id="documento-abrir"
                            href="{{ $documentoInicial?->archivo_url ?: '#' }}"
                            target="_blank"
                            rel="noopener noreferrer"
                            @if(!$documentoInicial) aria-disabled="true" tabindex="-1" @endif
                        >
                            <i class="fa-solid fa-up-right-from-square" aria-hidden="true"></i>
                            Abrir PDF
                        </a>
                    </header>

                    <div class="documentos__frame-wrap" id="documento-frame-wrap">
                        @if($documentoInicial)
                            <iframe
                                id="documento-frame"
                                src="{{ $documentoInicial->archivo_url }}#toolbar=1&navpanes=0&view=FitH"
                                title="Visor PDF: {{ $documentoInicial->titulo }}"
                                loading="eager"
                            ></iframe>
                        @else
                            <div class="documentos__empty-reader" id="documento-sin-pdf">
                                <i class="fa-solid fa-file-circle-xmark" aria-hidden="true"></i>
                                <strong>No hay un PDF disponible para mostrar.</strong>
                                <span>Agrega el archivo desde el módulo Documentos de gestión en Voyager.</span>
                            </div>
                        @endif
                    </div>
                </section>
            @else
                <div class="documentos__empty">
                    <i class="fa-solid fa-folder-open" aria-hidden="true"></i>
                    <h2>Aún no hay documentos publicados</h2>
                    <p>Los documentos activos que se registren en Voyager aparecerán aquí.</p>
                </div>
            @endif
        </div>
    </main>

    @if($documentoInicial)
        @push('scripts')
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    const buttons = Array.from(document.querySelectorAll('[data-documento]:not(:disabled)'));
                    const frame = document.getElementById('documento-frame');
                    const title = document.getElementById('documento-activo-titulo');
                    const abbreviation = document.getElementById('documento-activo-abreviacion');
                    const openLink = document.getElementById('documento-abrir');

                    buttons.forEach(function (button) {
                        button.addEventListener('click', function () {
                            const pdfUrl = button.dataset.pdfUrl;
                            if (!pdfUrl) return;

                            buttons.forEach(function (item) {
                                item.classList.remove('is-active');
                                item.setAttribute('aria-pressed', 'false');
                            });

                            button.classList.add('is-active');
                            button.setAttribute('aria-pressed', 'true');
                            title.textContent = button.dataset.titulo;
                            abbreviation.textContent = button.dataset.abreviacion;
                            frame.title = 'Visor PDF: ' + button.dataset.titulo;
                            frame.src = pdfUrl + '#toolbar=1&navpanes=0&view=FitH';
                            openLink.href = pdfUrl;

                            if (window.matchMedia('(max-width: 767px)').matches) {
                                document.querySelector('.documentos__viewer').scrollIntoView({ behavior: 'smooth', block: 'start' });
                            }
                        });
                    });
                });
            </script>
        @endpush
    @endif
</x-app-layout>