@php
    $announcements = \App\Models\Announcement::current()->orderBy('sort_order')->get();
@endphp

@if($announcements->count() > 0)
<div x-data="{
        show: false,
        announcements: @js($announcements->map(fn($a) => [
            'id' => $a->id,
            'title' => $a->title,
            'body' => $a->body,
            'image' => $a->image_url,
            'type' => $a->type,
            'typeLabel' => $a->type_label,
        ])),
        current: 0,
        init() {
            // Filter out already dismissed announcements
            this.announcements = this.announcements.filter(a =>
                !localStorage.getItem('umami_announcement_dismissed_' + a.id)
            );
            if (this.announcements.length > 0) {
                // Small delay so the page loads first
                setTimeout(() => { this.show = true; }, 500);
            }
        },
        dismiss() {
            localStorage.setItem('umami_announcement_dismissed_' + this.announcements[this.current].id, Date.now().toString());
            if (this.current < this.announcements.length - 1) {
                this.current++;
            } else {
                this.show = false;
            }
        },
        get announcement() {
            return this.announcements[this.current] || null;
        },
        get typeColor() {
            if (!this.announcement) return '';
            return {
                'closure': 'bg-red-100 text-red-800',
                'opening': 'bg-green-100 text-green-800',
                'info': 'bg-blue-100 text-blue-800',
            }[this.announcement.type] || 'bg-gray-100 text-gray-800';
        }
    }"
    x-cloak>

    {{-- Backdrop --}}
    <div
        x-show="show"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        @click="dismiss()"
        class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[60]"
    ></div>

    {{-- Modal Panel --}}
    <div
        x-show="show"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 translate-y-8 md:scale-95"
        x-transition:enter-end="opacity-100 translate-y-0 md:scale-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 translate-y-0 md:scale-100"
        x-transition:leave-end="opacity-0 translate-y-8 md:scale-95"
        @keydown.escape.window="show && dismiss()"
        class="fixed inset-x-4 bottom-4 md:bottom-auto md:top-1/2 md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:max-w-lg md:w-full z-[61] bg-white dark:bg-umami-dark rounded-2xl shadow-2xl overflow-hidden max-h-[85vh] flex flex-col"
    >
        {{-- Image (if present) --}}
        <template x-if="announcement && announcement.image">
            <div class="relative w-full aspect-video flex-shrink-0">
                <img :src="announcement.image" :alt="announcement.title"
                    class="w-full h-full object-cover">
                {{-- Type badge on image --}}
                <span :class="typeColor"
                    class="absolute top-3 left-3 text-xs font-semibold px-3 py-1 rounded-full"
                    x-text="announcement.typeLabel"></span>
            </div>
        </template>

        {{-- Content --}}
        <div class="p-6 overflow-y-auto flex-1">
            {{-- Type badge (when no image) --}}
            <template x-if="announcement && !announcement.image">
                <span :class="typeColor"
                    class="inline-block text-xs font-semibold px-3 py-1 rounded-full mb-3"
                    x-text="announcement.typeLabel"></span>
            </template>

            <h3 class="text-xl font-bold text-umami-dark dark:text-white mb-3"
                x-text="announcement?.title"></h3>
            <div class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed prose prose-sm max-w-none"
                x-html="announcement?.body"></div>
        </div>

        {{-- Footer / Actions --}}
        <div class="p-4 border-t border-gray-100 dark:border-white/10 flex items-center justify-between flex-shrink-0">
            {{-- Counter if multiple --}}
            <span class="text-xs text-gray-400" x-show="announcements.length > 1"
                x-text="(current + 1) + ' / ' + announcements.length"></span>
            <span x-show="announcements.length <= 1"></span>

            <div class="flex items-center gap-3">
                <button @click="dismiss()"
                    class="px-5 py-2.5 bg-umami-accent hover:bg-umami-accent/90 text-white text-sm font-medium rounded-lg transition-colors"
                    x-text="current < announcements.length - 1 ? 'Avanti' : 'Ho capito'">
                </button>
            </div>
        </div>
    </div>
</div>
@endif