{{-- Ad Popup/Modal Component --}}
{{-- Follows the same pattern as announcement-modal.blade.php --}}
{{-- z-index z-[55]/z-[56] — below announcements z-[60]/z-[61] --}}
@php
    $popupAds = \Illuminate\Support\Facades\Cache::remember('ads_popup', 300, function () {
        return \App\Models\Ad::current()
            ->forPlacement('popup')
            ->orderBy('sort_order')
            ->get();
    });
@endphp

@if($popupAds->count() > 0)
<div x-data="{
        show: false,
        ads: @js($popupAds->map(fn($a) => [
            'id' => $a->id,
            'body' => $a->body,
            'link_url' => $a->link_url,
            'open_in_new_tab' => $a->open_in_new_tab,
            'bg_color' => $a->bg_color,
            'text_color' => $a->text_color,
        ])),
        current: 0,
        init() {
            // Filter out already dismissed ads
            this.ads = this.ads.filter(a =>
                !localStorage.getItem('umami_ad_dismissed_' + a.id)
            );
            if (this.ads.length > 0) {
                // Show after 1.5s delay (after announcements at 0.5s)
                setTimeout(() => {
                    this.show = true;
                    this.trackImpression();
                }, 1500);
            }
        },
        dismiss() {
            localStorage.setItem('umami_ad_dismissed_' + this.ads[this.current].id, Date.now().toString());
            if (this.current < this.ads.length - 1) {
                this.current++;
                this.trackImpression();
            } else {
                this.show = false;
            }
        },
        trackImpression() {
            const csrfToken = document.querySelector('meta[name=&quot;csrf-token&quot;]');
            if (!csrfToken || !this.ad) return;
            fetch('/api/v1/ads/track', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken.content,
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ ad_id: this.ad.id, type: 'impression' }),
            }).catch(() => {});
        },
        trackClick() {
            const csrfToken = document.querySelector('meta[name=&quot;csrf-token&quot;]');
            if (!csrfToken || !this.ad) return;
            fetch('/api/v1/ads/track', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken.content,
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ ad_id: this.ad.id, type: 'click' }),
            }).catch(() => {});
        },
        get ad() { return this.ads[this.current] || null; }
    }"
    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-[55]"
    ></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-[56] bg-white rounded-2xl shadow-2xl overflow-hidden max-h-[85vh] flex flex-col"
    >
        {{-- Close button --}}
        <button @click="dismiss()"
            class="absolute top-3 right-3 z-10 w-8 h-8 flex items-center justify-center rounded-full bg-black/10 hover:bg-black/20 text-gray-600 hover:text-gray-800 transition-colors"
            title="Chiudi">
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>

        {{-- Content --}}
        <div class="p-6 overflow-y-auto flex-1"
             :style="{ backgroundColor: ad?.bg_color || '#ffffff', color: ad?.text_color || '#374151' }">
            <template x-if="ad && ad.link_url">
                <a :href="'/ad/' + ad.id + '/click'"
                   :target="ad.open_in_new_tab ? '_blank' : '_self'"
                   rel="noopener"
                   @click="trackClick()"
                   class="block hover:opacity-90 transition-opacity">
                    <div x-html="ad.body"></div>
                </a>
            </template>
            <template x-if="ad && !ad.link_url">
                <div x-html="ad.body"></div>
            </template>
        </div>

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

            <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 < ads.length - 1 ? 'Avanti' : 'Chiudi'">
            </button>
        </div>
    </div>
</div>
@endif