{{--
    Pestaña "Demo en vivo" del formulario de comunicados: la página del
    comunicado y su fila en el tablón, con lo que el usuario lleva escrito.
    Datos: App\Filament\Resources\Announcements\Schemas\AnnouncementDemoData.
--}}
@php
    $title = filled($announcement->title) ? $announcement->title : 'El título del comunicado aparecerá aquí';
    $type = $type ?? 'Tipo de comunicado';
    $date = $announcement->issued_on->translatedFormat('j \d\e F \d\e Y');
    $validity = $announcement->validityLabel();
    $draft = $announcement->status !== \App\Enums\PublicationStatus::Published;
    $facts = array_filter([
        'Tipo' => $type,
        'Fecha' => $date,
        'Número' => $announcement->number,
        'Emite' => $announcement->issuer,
        'Sede' => $announcement->campus?->getLabel(),
        'Vigencia' => $validity,
    ]);
    // El editor vacío entrega un párrafo sin texto, no una cadena vacía.
    $hasBody = filled(trim(strip_tags($bodyHtml)));
    $empty = ! $hasBody && $files === [];
@endphp

<div
    x-data="{ device: 'desktop' }"
    x-init="
        window.announcementDemoArmed ??= true;
        new IntersectionObserver(([entry]) => {
            if (! entry.isIntersecting) { window.announcementDemoArmed = true; return; }
            if (window.announcementDemoArmed) { window.announcementDemoArmed = false; $wire.$refresh(); }
        }).observe($el);
    "
    class="grid gap-6 2xl:grid-cols-[1fr_22rem]"
>
    <section class="min-w-0">
        <div class="mb-3 flex flex-wrap items-center justify-between gap-3">
            <p class="flex flex-wrap items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                <x-filament::icon icon="heroicon-o-arrow-path" class="size-4" aria-hidden="true" />
                Muestra lo que llevas escrito. Aún no se guarda nada.
                @if ($draft)
                    <span class="rounded-md bg-gray-100 px-2 py-0.5 font-semibold dark:bg-white/10">Borrador: el público no lo verá</span>
                @endif
            </p>
            <div class="inline-flex rounded-lg bg-gray-100 p-1 dark:bg-white/10" role="group" aria-label="Tamaño de pantalla">
                @foreach (['desktop' => ['heroicon-o-computer-desktop', 'Escritorio'], 'mobile' => ['heroicon-o-device-phone-mobile', 'Celular']] as $key => [$icon, $text])
                    <button
                        type="button"
                        x-on:click="device = @js($key)"
                        x-bind:aria-pressed="device === @js($key)"
                        class="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-semibold text-gray-600 transition dark:text-gray-300"
                        x-bind:class="device === @js($key) ? 'bg-[#122b57]! text-white! shadow-sm' : ''"
                    >
                        <x-filament::icon :icon="$icon" class="size-4" aria-hidden="true" />
                        {{ $text }}
                    </button>
                @endforeach
            </div>
        </div>

        <div
            class="mx-auto overflow-hidden rounded-2xl bg-white shadow-xl ring-1 ring-gray-950/10 transition-all duration-300 dark:bg-gray-950 dark:ring-white/10"
            x-bind:class="device === 'mobile' ? 'max-w-[380px]' : 'max-w-[900px]'"
        >
            <div class="flex items-center gap-2 border-b border-gray-200 bg-gray-50 px-3 py-2 dark:border-white/10 dark:bg-white/5" aria-hidden="true">
                <span class="size-2.5 rounded-full bg-[#ff5f57]"></span><span class="size-2.5 rounded-full bg-[#febc2e]"></span><span class="size-2.5 rounded-full bg-[#28c840]"></span>
                <span class="ms-2 flex-1 truncate rounded-md bg-white px-3 py-1 text-xs text-gray-500 ring-1 ring-gray-200 dark:bg-white/10 dark:text-gray-400 dark:ring-white/10">facultad.unamba.edu.pe/comunicados/…</span>
            </div>

            <div class="nd-page @container max-h-[70vh] overflow-y-auto" x-bind:class="device === 'mobile' ? 'nd-mobile' : ''">
                <div class="flex items-center gap-2 bg-[#122b57] px-4 py-2.5 text-white">
                    <img src="{{ asset('images/brand/escudo-unamba.jpg') }}" alt="" class="size-6 rounded-full bg-white p-0.5">
                    <span class="text-xs font-bold [font-stretch:112%]">Facultad de Administración</span>
                </div>

                <header class="bg-[#122b57] px-5 pt-4 pb-6 text-white @lg:px-8">
                    <p class="text-[11px] text-[#d5def0]">Inicio / Comunicados</p>
                    <p class="mt-2 flex flex-wrap items-center gap-1.5 text-[11px]">
                        @if ($important)
                            <span class="rounded bg-[#f28c28] px-2 py-0.5 font-bold text-[#1b1206]">Importante</span>
                        @endif
                        <span class="rounded bg-white/15 px-2 py-0.5 font-semibold">{{ $type }}</span>
                        @if (filled($announcement->number))
                            <span class="font-semibold text-[#d5def0] [overflow-wrap:anywhere]">{{ $announcement->number }}</span>
                        @endif
                    </p>
                    <h1 class="nd-title mt-2 font-extrabold [font-stretch:118%] [overflow-wrap:anywhere]">{{ $title }}</h1>
                    <p class="mt-2 text-sm text-[#d5def0]">{{ $date }}@if ($announcement->campus) · {{ $announcement->campus->getLabel() }}@endif</p>
                </header>

                <div class="px-5 py-5 @lg:px-8">
                    <dl class="grid gap-x-6 gap-y-3 rounded-xl bg-[#eef2f7] p-4 text-sm @lg:grid-cols-3 dark:bg-white/5">
                        @foreach ($facts as $label => $value)
                            <div>
                                <dt class="text-xs font-semibold text-gray-500 dark:text-gray-400">{{ $label }}</dt>
                                <dd class="font-semibold [overflow-wrap:anywhere]">{{ $value }}</dd>
                            </div>
                        @endforeach
                    </dl>

                    @if ($empty)
                        <p class="mt-5 text-sm text-gray-400">Aquí irá el texto del comunicado y, debajo, los archivos para ver o descargar. Necesitas al menos una de las dos cosas.</p>
                    @endif

                    @if ($hasBody)
                        <div class="nd-body rich-content mt-5">{!! $bodyHtml !!}</div>
                    @endif

                    @if ($files !== [])
                        <p class="mt-6 font-extrabold [font-stretch:115%]">Archivos del comunicado</p>
                        <ul class="mt-2 grid gap-2 text-sm">
                            @foreach ($files as $file)
                                <li class="flex flex-wrap items-center gap-3 rounded-xl p-3 ring-1 ring-gray-950/10 dark:ring-white/10">
                                    <span class="flex h-9 w-11 shrink-0 items-center justify-center rounded-md bg-[#122b57] text-[10px] font-extrabold text-white">{{ $file['extension'] }}</span>
                                    <span class="min-w-0 flex-1 font-bold [overflow-wrap:anywhere]">{{ $file['name'] }}</span>
                                    <span class="flex gap-1.5 text-xs font-bold">
                                        <span class="rounded-md px-2.5 py-1.5 ring-1 ring-gray-950/15 dark:ring-white/20">Ver</span>
                                        <span class="rounded-md bg-[#f28c28] px-2.5 py-1.5 text-[#1b1206]">Descargar</span>
                                    </span>
                                </li>
                            @endforeach
                        </ul>
                        <p class="mt-2 text-xs text-gray-500 dark:text-gray-400" x-show="device === 'desktop'">En computadora, el primer PDF se muestra además incrustado para leerlo sin descargar.</p>
                    @endif
                </div>
            </div>
        </div>
    </section>

    {{-- Fila en el tablón --}}
    <aside>
        <p class="mb-2 flex items-center gap-2 font-bold text-gray-950 dark:text-white">
            <x-filament::icon icon="heroicon-o-megaphone" class="size-5 text-[#22498f] dark:text-[#8fb0ee]" aria-hidden="true" />
            Así sale en la lista de comunicados
        </p>
        <div class="flex gap-3 rounded-2xl bg-white p-4 ring-1 ring-gray-950/10 dark:bg-gray-950 dark:ring-white/10 {{ $important ? 'border-s-4 border-[#f28c28]' : '' }}">
            <div class="w-11 shrink-0 text-center leading-none" aria-hidden="true">
                <span class="block text-xl font-extrabold">{{ $announcement->issued_on->format('d') }}</span>
                <span class="mt-1 block text-[10px] font-bold tracking-wider text-gray-500 uppercase dark:text-gray-400">{{ rtrim($announcement->issued_on->translatedFormat('M'), '.') }}</span>
                <span class="mt-0.5 block text-[10px] text-gray-500 dark:text-gray-400">{{ $announcement->issued_on->format('Y') }}</span>
            </div>
            <div class="min-w-0 flex-1 text-sm">
                <p class="flex flex-wrap items-center gap-1.5 text-xs">
                    @if ($important)
                        <span class="rounded-md bg-[#f28c28] px-2 py-0.5 font-bold text-[#1b1206]">Importante</span>
                    @endif
                    <span class="rounded-md bg-[#5a9a46]/15 px-2 py-0.5 font-semibold text-[#2f6522] dark:text-[#8fd07a]">{{ $type }}</span>
                    @if (filled($announcement->number))
                        <span class="font-semibold text-gray-500 [overflow-wrap:anywhere] dark:text-gray-400">{{ $announcement->number }}</span>
                    @endif
                </p>
                <p class="mt-1.5 leading-snug font-bold text-gray-950 [overflow-wrap:anywhere] dark:text-white">{{ $title }}</p>
                <p class="mt-1 text-gray-600 dark:text-gray-400">
                    {{ collect([$validity, $announcement->campus ? $announcement->campus->getLabel() : null, $files !== [] ? trans_choice('{1} 1 archivo|[2,*] :count archivos', count($files)) : null])->filter()->implode(' · ') }}
                </p>
            </div>
        </div>
        @if ($important)
            <p class="mt-3 text-sm text-gray-600 dark:text-gray-400">
                Al publicarlo irá primero en la lista y resaltado en el inicio{{ $announcement->valid_until ? ', hasta que venza su plazo.' : ', hasta que apagues «Importante».' }}
            </p>
        @elseif ($announcement->is_important)
            <p class="mt-3 text-sm text-gray-600 dark:text-gray-400">Está marcado como importante, pero su plazo ya cerró: no se resaltará.</p>
        @endif
    </aside>
</div>