@props(['position'])

@php
    $cfg      = config("ads.slots.{$position}");
    $provider = $cfg['provider'] ?? null;
    $id       = $cfg['id']       ?? null;
    $height   = $cfg['height']   ?? null;
    $width    = $cfg['width']    ?? null;
    $format   = $cfg['format']   ?? 'auto';

    // id khaali ho to slot render hi nahi hoga -- khaali dabba nahi banega
    $show = config('ads.enabled') && $provider && $id;

    $insStyle = 'display:inline-block;'
        . ($width  ? "width:{$width}px;"   : '')
        . ($height ? "height:{$height}px;" : '');
@endphp

@if ($show)

    {{-- ================= ONE-TIME CSS ================= --}}
    @once
    @push('styles')
        <style>
            .ad-slot {
                min-height: var(--ad-h, 0px);
            }

            /* NO transition -- animate karne se shift lamba chalta hai
               aur multiple frames me count hota hai */
            .ad-slot--collapsed {
                --ad-h: 0px;
                min-height: 0;
                height: 0;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }
        </style>
    @endpush
@endonce

    <div class="ad-slot ad-slot--{{ $position }}"
         role="region"
         aria-label="Advertisement"
         @if ($height) style="--ad-h:{{ $height }}px" @endif>

        @if ($provider === 'adsense')
            <div wire:ignore
                 data-ad-mount
                 data-ad-provider="adsense"
                 data-ad-client="{{ config('ads.adsense.client') }}">
                <ins class="adsbygoogle"
                     style="display:block"
                     data-ad-client="{{ config('ads.adsense.client') }}"
                     data-ad-slot="{{ $id }}"
                     data-ad-format="{{ $format }}"
                     data-full-width-responsive="true"></ins>
            </div>

        @elseif ($provider === 'bitmedia')
            <div wire:ignore
                 data-ad-mount
                 data-ad-provider="bitmedia"
                 data-ad-zone="{{ $id }}">
                <ins class="{{ $id }}" style="{{ $insStyle }}"></ins>
            </div>
        @endif

    </div>

    {{-- ================= ONE-TIME JS ================= --}}
    @once
        @push('scripts')
            <script>
            (function () {
                const GRACE_MS = 2500;

                function collapse(slot) {
                    slot.classList.add('ad-slot--collapsed');
                    slot.setAttribute('aria-hidden', 'true');
                    slot.removeAttribute('role');
                }

                function watch(slot) {
                    if (slot.dataset.adWatched) return;
                    slot.dataset.adWatched = '1';

                    const ins = slot.querySelector('ins');
                    if (!ins) return collapse(slot);

                    const mo = new MutationObserver(() => {
                        const st = ins.getAttribute('data-ad-status');
                        if (st === 'unfilled') { collapse(slot); mo.disconnect(); }
                        if (st === 'filled')   { mo.disconnect(); }
                    });
                    mo.observe(ins, { attributes: true, attributeFilter: ['data-ad-status'] });

                    setTimeout(() => {
                        mo.disconnect();
                        const filled = ins.getAttribute('data-ad-status') === 'filled'
                            || ins.offsetHeight > 10
                            || ins.querySelector('iframe, img, div');
                        if (!filled) collapse(slot);
                    }, GRACE_MS);
                }

                function scan(root) {
                    (root || document).querySelectorAll('.ad-slot:not([data-ad-watched])').forEach(watch);
                }

                if (document.readyState === 'loading') {
                    document.addEventListener('DOMContentLoaded', function () { scan(); });
                } else {
                    scan();
                }

                document.addEventListener('livewire:navigated', function () { scan(); });
                document.addEventListener('livewire:init', function () {
                    Livewire.hook('morph.updated', function (payload) { scan(payload.el); });
                });
            })();
            </script>
        @endpush
    @endonce

@endif