@props([
    'gtmId' => config('cookie-consent.gtm_id'),
    'enabled' => config('cookie-consent.enabled', true),
    'cookieName' => config('cookie-consent.cookie_name', 'cookie_consent'),
])

{{--
    Google Tag Manager (noscript) Komponente
    
    Diese Komponente muss direkt nach dem öffnenden <body> Tag eingefügt werden:
    
    <body>
        <x-cookie-consent::components.gtm-noscript />
        ...
    </body>
    
    Der noscript-Teil wird nur angezeigt, wenn:
    1. GTM aktiviert ist (gtm_id gesetzt)
    2. Der Cookie-Consent bereits erteilt wurde (analytics: true)
    
    Hinweis: Bei JavaScript-deaktivierten Browsern funktioniert GTM ohnehin nicht vollständig,
    aber der noscript-iframe ermöglicht grundlegendes Tracking.
--}}

@if ($enabled && $gtmId)
    {{-- 
        Alpine.js Wrapper für dynamische Anzeige basierend auf Cookie-Consent 
        Der noscript-Teil wird erst nach Zustimmung in den DOM eingefügt
    --}}
    <div x-data="{
        gtmId: '{{ $gtmId }}',
        cookieName: '{{ $cookieName }}',
        hasConsent: false,
    
        init() {
            this.checkConsent();
    
            // Auf Consent-Updates hören
            window.addEventListener('cookie-consent-updated', (e) => {
                this.hasConsent = e.detail && e.detail.analytics === true;
            });
    
            // Auf GTM-Load-Event hören
            window.addEventListener('gtm-consent-granted', () => {
                this.hasConsent = true;
            });
        },
    
        checkConsent() {
            const cookie = this.getCookie(this.cookieName);
            if (cookie) {
                try {
                    const settings = JSON.parse(cookie);
                    this.hasConsent = settings.analytics === true;
                } catch (e) {
                    this.hasConsent = false;
                }
            }
        },
    
        getCookie(name) {
            const nameEQ = name + '=';
            const ca = document.cookie.split(';');
            for (let i = 0; i < ca.length; i++) {
                let c = ca[i].trim();
                if (c.indexOf(nameEQ) === 0) {
                    return decodeURIComponent(c.substring(nameEQ.length));
                }
            }
            return null;
        }
    }">
        {{-- GTM noscript iframe - wird nur bei Consent angezeigt --}}
        <template x-if="hasConsent">
            <noscript>
                <iframe x-bind:src="'https://www.googletagmanager.com/ns.html?id=' + gtmId" height="0" width="0"
                    style="display:none;visibility:hidden" title="Google Tag Manager"></iframe>
            </noscript>
        </template>
    </div>

    {{-- 
        Fallback für Server-Side Rendering: 
        Wenn der Cookie bereits existiert und Analytics erlaubt, 
        können wir den noscript-Teil direkt rendern 
    --}}
    @php
        $cookieValue = request()->cookie($cookieName);
        $serverSideConsent = false;
        if ($cookieValue) {
            try {
                $decoded = json_decode($cookieValue, true);
                $serverSideConsent = isset($decoded['analytics']) && $decoded['analytics'] === true;
            } catch (\Exception $e) {
                $serverSideConsent = false;
            }
        }
    @endphp

    @if ($serverSideConsent)
        <!-- Google Tag Manager (noscript) -->
        <noscript>
            <iframe src="https://www.googletagmanager.com/ns.html?id={{ $gtmId }}" height="0" width="0"
                style="display:none;visibility:hidden" title="Google Tag Manager"></iframe>
        </noscript>
        <!-- End Google Tag Manager (noscript) -->
    @endif
@endif
