@php
    $embedFile = collect($files)->first(fn (array $file) => $file['url'] === $embedUrl);
    $plainBody = trim(preg_replace('/\s+/', ' ', strip_tags($announcement->bodyHtml())) ?? '');
    $date = $announcement->issued_on->translatedFormat('j \d\e F \d\e Y');
    $summary = $plainBody !== '' ? Str::limit($plainBody, 160) : $announcement->type->name.' del '.$date;
    $important = $announcement->isImportantActive();
    $facts = array_filter([
        'Fecha' => $date,
        'Número' => $announcement->number,
        'Emite' => $announcement->issuer,
        'Sede' => $announcement->campus?->getLabel(),
        'Vigencia' => $announcement->validityLabel(),
    ]);
@endphp
<x-layouts.site :title="$announcement->title">
    @push('head')
        <meta name="description" content="{{ $summary }}">
        <meta property="og:type" content="article">
        <meta property="og:title" content="{{ $announcement->title }}">
        <meta property="og:description" content="{{ $summary }}">
        @unless ($preview)
            <meta property="og:url" content="{{ route('announcements.show', $announcement) }}">
        @endunless
        @if ($preview)
            <meta name="robots" content="noindex">
        @endif
    @endpush

    @if ($preview)
        <div role="status" class="bg-accent text-accent-ink">
            <p class="mx-auto max-w-7xl px-4 py-3 font-bold">Vista previa: el público todavía no ve este comunicado.</p>
        </div>
    @endif

    <article>
        <header class="relative overflow-hidden bg-field text-white">
            <x-site.contours class="[mask-image:linear-gradient(90deg,transparent_0_45%,#000_85%)]" />
            <div class="relative mx-auto max-w-4xl px-4 pt-10 pb-12">
                <nav aria-label="Ruta" class="text-sm text-on-field">
                    <a href="{{ route('home') }}" class="hover:text-white hover:underline">Inicio</a>
                    <span aria-hidden="true" class="px-1.5">/</span>
                    <a href="{{ route('announcements') }}" class="hover:text-white hover:underline">Comunicados</a>
                </nav>
                <p class="mt-6 flex flex-wrap items-center gap-2 text-sm">
                    @if ($important)
                        <span class="rounded-md bg-accent px-2.5 py-1 font-bold text-accent-ink">Importante</span>
                    @endif
                    <a href="{{ route('announcements', ['tipo' => $announcement->type->slug]) }}" class="rounded-md bg-white/10 px-2.5 py-1 font-semibold text-white hover:bg-white/20">{{ $announcement->type->name }}</a>
                    @if ($announcement->number)
                        <span class="font-semibold text-on-field tabular-nums wrap-anywhere">{{ $announcement->number }}</span>
                    @endif
                </p>
                <h1 class="mt-4 text-[clamp(1.75rem,3.8vw,2.9rem)] leading-[1.1] font-extrabold tracking-tight text-balance wrap-anywhere [font-stretch:118%]">{{ $announcement->title }}</h1>
                <p class="mt-4 text-lg text-on-field">
                    <time datetime="{{ $announcement->issued_on->toDateString() }}">{{ $date }}</time>@if ($announcement->campus) · {{ $announcement->campus->getLabel() }}@endif
                </p>
            </div>
        </header>

        <div class="mx-auto max-w-4xl px-4 py-10">
            {{-- Ficha: los datos oficiales de un vistazo, antes del texto. --}}
            <aside aria-label="Datos del comunicado" class="rounded-2xl bg-surface p-5 sm:p-6">
                <dl class="grid gap-x-8 gap-y-4 sm:grid-cols-2 lg:grid-cols-3">
                    <div>
                        <dt class="text-sm font-semibold text-muted">Tipo</dt>
                        <dd class="mt-0.5 font-semibold">{{ $announcement->type->name }}</dd>
                    </div>
                    @foreach ($facts as $label => $value)
                        <div>
                            <dt class="text-sm font-semibold text-muted">{{ $label }}</dt>
                            <dd class="mt-0.5 font-semibold wrap-anywhere">{{ $value }}</dd>
                        </div>
                    @endforeach
                </dl>
            </aside>

            @if ($announcement->body)
                <div class="prose prose-lg prose-site rich-content mt-10 max-w-none wrap-anywhere">{!! $announcement->bodyHtml() !!}</div>
            @endif

            @if ($files !== [])
                <section class="mt-10" aria-labelledby="files-title">
                    <h2 id="files-title" class="text-2xl font-extrabold [font-stretch:115%]">Archivos del comunicado</h2>
                    <ul class="mt-4 grid gap-3">
                        @foreach ($files as $file)
                            <li class="flex flex-wrap items-center gap-x-4 gap-y-3 rounded-2xl p-4 ring-1 ring-line">
                                <span aria-hidden="true" class="flex h-12 w-14 shrink-0 items-center justify-center rounded-lg bg-field text-xs font-extrabold tracking-wide text-white">{{ $file['extension'] }}</span>
                                <span class="min-w-0 flex-1">
                                    <strong class="block leading-snug wrap-anywhere">{{ $file['name'] }}</strong>
                                    <span class="text-sm text-muted">{{ $file['extension'] }} · {{ $file['size'] }}</span>
                                </span>
                                <span class="flex gap-2">
                                    <a href="{{ $file['url'] }}" target="_blank" rel="noopener" aria-label="Ver {{ $file['name'] }} ({{ $file['extension'] }}, {{ $file['size'] }})" class="inline-flex min-h-11 items-center rounded-lg px-4 font-bold ring-1 ring-line hover:bg-surface">Ver</a>
                                    <a href="{{ $file['url'] }}" download aria-label="Descargar {{ $file['name'] }} ({{ $file['extension'] }}, {{ $file['size'] }})" class="inline-flex min-h-11 items-center rounded-lg bg-accent px-4 font-bold text-accent-ink hover:brightness-105">Descargar</a>
                                </span>
                            </li>
                        @endforeach
                    </ul>
                </section>
            @endif

            @if ($embedUrl)
                {{-- Solo en pantallas grandes: en celular el visor del navegador es incómodo. --}}
                <section class="mt-10 hidden lg:block" aria-labelledby="embed-title">
                    <h2 id="embed-title" class="text-2xl font-extrabold [font-stretch:115%]">Leer aquí</h2>
                    <iframe src="{{ $embedUrl }}" title="{{ $embedFile['name'] ?? 'Documento PDF' }} del comunicado: {{ $announcement->title }}" loading="lazy" class="mt-4 h-[85vh] w-full rounded-2xl bg-surface ring-1 ring-line"></iframe>
                    <p class="mt-2 text-sm text-muted">¿No se ve? Puedes <a href="{{ $embedUrl }}" target="_blank" rel="noopener" class="font-semibold text-link underline underline-offset-4">ver o descargar el PDF</a>.</p>
                </section>
            @endif

            <footer class="mt-14 border-t border-line pt-6">
                <a href="{{ route('announcements') }}" class="inline-flex min-h-12 items-center gap-2 rounded-lg bg-surface px-5 font-bold hover:text-link">
                    <span aria-hidden="true">←</span> Todos los comunicados
                </a>
            </footer>
        </div>
    </article>
</x-layouts.site>