@php
    $categoryId = $categoryId ?? null;
    $ads = isset($ads)
        ? $ads
        : (function () use ($categoryId) {
            try {
                $user = auth()->user();
                // For authenticated, show global ads; for vendor users, show vendor-specific
                $vendorId = $user ? $user->vendor_id : null;
                return getTopNoteAds($vendorId, null, $categoryId);
            } catch (\Throwable $e) {
                return collect();
            }
        })();
@endphp
@if ($ads && $ads->count())
    @once
        @push('styles')
            <link rel="stylesheet" href="{{ vasset('vendor/tiny-slider/tiny-slider.css') }}" />
            <style>
                .top-ads-wrapper {
                    margin-bottom: 12px;
                    transition: opacity 0.2s ease;
                    overflow: hidden;
                    position: relative;
                }

                .top-ads-wrapper.is-loading {
                    opacity: 0;
                }

                #top-ads-slider {
                    width: 100%;
                    position: relative;
                    min-height: 220px;
                }

                @media (max-width: 768px) {
                    #top-ads-slider {
                        min-height: 180px;
                    }
                }

                #top-ads-slider .slide-item {
                    position: relative;
                    width: 100%;
                }

                #top-ads-slider .slide-item img {
                    display: block;
                    width: 100%;
                    height: auto;
                    border-radius: 8px;
                    max-height: 220px;
                    object-fit: cover;
                }

                /* Gallery mode styles */
                .tns-gallery>.tns-item {
                    display: block !important;
                    position: absolute !important;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: auto;
                    opacity: 0;
                    visibility: hidden;
                    pointer-events: none;
                    transition: opacity 0.6s ease, visibility 0.6s ease;
                }

                .tns-gallery>.tns-slide-active {
                    display: block !important;
                    position: relative !important;
                    opacity: 1;
                    visibility: visible;
                    pointer-events: auto;
                    z-index: 1;
                }

                /* Override tiny-slider default display: none for tns-normal */
                .tns-gallery>.tns-normal {
                    display: block !important;
                    position: absolute !important;
                }

                .tns-gallery>.tns-fadeIn {
                    animation: fadeIn 0.6s ease;
                    position: relative !important;
                }

                .tns-gallery>.tns-fadeOut {
                    animation: fadeOut 0.6s ease;
                    position: absolute !important;
                }

                @keyframes fadeIn {
                    from {
                        opacity: 0;
                    }

                    to {
                        opacity: 1;
                    }
                }

                @keyframes fadeOut {
                    from {
                        opacity: 1;
                    }

                    to {
                        opacity: 0;
                    }
                }

                .top-ads-wrapper .tns-nav {
                    text-align: center;
                    margin-top: 8px;
                }

                .top-ads-wrapper .tns-nav button {
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background: #ccc;
                    border: none;
                    margin: 0 4px;
                    padding: 0;
                }

                .top-ads-wrapper .tns-nav button.tns-nav-active {
                    background: #007bff;
                }

                .tns-outer {
                    position: relative;
                }

                /* Hide duplicate slides until tiny-slider finishes hydration */
                #top-ads-slider:not(.tns-slider) .slide-item:not(:first-child) {
                    display: none;
                }

                /* Mobile optimization */
                @media (max-width: 768px) {
                    #top-ads-slider .slide-item img {
                        max-height: 180px;
                    }
                }
            </style>
        @endpush

        @push('head-scripts')
            <script src="{{ vasset('vendor/tiny-slider/tiny-slider.js') }}" defer></script>
        @endpush

        @push('scripts')
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    if (typeof tns === 'undefined') return;
                    var wrap = document.querySelector('.top-ads-wrapper.is-loading');
                    if (!wrap) return;

                    var sliderContainer = document.getElementById('top-ads-slider');
                    if (!sliderContainer) return;

                    try {
                        var slider = tns({
                            container: '#top-ads-slider',
                            mode: 'gallery',
                            items: 1,
                            slideBy: 1,
                            autoplay: true,
                            autoplayTimeout: 4000,
                            autoplayButtonOutput: false,
                            controls: false,
                            nav: true,
                            speed: 600,
                            animateIn: 'tns-fadeIn',
                            animateOut: 'tns-fadeOut',
                            animateDelay: false,
                            loop: false,
                            rewind: true,
                            autoplayHoverPause: true,
                            onInit: function() {
                                wrap.classList.remove('is-loading');
                            }
                        });

                        wrap.addEventListener('mouseenter', function() {
                            slider.pause();
                        });
                        wrap.addEventListener('mouseleave', function() {
                            slider.play();
                        });
                    } catch (e) {
                        console.error('Slider init error:', e);
                        wrap.classList.remove('is-loading');
                    }
                });
            </script>
        @endpush
    @endonce

    <div class="top-ads-wrapper is-loading">
        <div class="my-slider" id="top-ads-slider">
            @foreach ($ads as $ad)
                <div class="slide-item">
                    @if ($ad->link_url)
                        <a href="{{ $ad->link_url }}" target="_blank" rel="noopener">
                            <img src="{{ $ad->url }}" alt="{{ $ad->title ?? 'Ad' }}" />
                        </a>
                    @else
                        <img src="{{ $ad->url }}" alt="{{ $ad->title ?? 'Ad' }}" />
                    @endif
                </div>
            @endforeach
        </div>
    </div>
@endif