<div wire:poll.15s="refresh"
     x-data="{ open: false }"
     @new-notification.window="window.__playBellSound && window.__playBellSound()"
     class="relative">

    {{-- Bell Button --}}
    <button @click="open = !open"
            class="relative p-2 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-50 transition-colors">
        <x-heroicon-o-bell class="w-5 h-5"/>
        @if($unreadCount > 0)
            <span class="absolute top-1.5 right-1.5 w-2 h-2 bg-indigo-500 rounded-full ring-2 ring-white"></span>
            <span class="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-0.5 bg-indigo-600 text-white text-[9px] font-bold rounded-full flex items-center justify-center leading-none">
                {{ $unreadCount > 9 ? '9+' : $unreadCount }}
            </span>
        @endif
    </button>

    {{-- Dropdown --}}
    <div x-show="open"
         x-cloak
         @click.outside="open = false"
         x-transition:enter="transition ease-out duration-100"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-75"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95"
         class="absolute right-0 mt-1 w-80 bg-white border border-gray-100 rounded-xl shadow-lg z-50 overflow-hidden">

        {{-- Header --}}
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-50">
            <span class="text-xs font-semibold text-gray-700">{{ t('notifications.title') }}</span>

            <div class="flex items-center gap-2">
                @if($unreadCount > 0)
                    <button wire:click="markAllRead"
                            class="text-[10px] text-indigo-600 hover:text-indigo-800 transition-colors">
                        {{ t('notifications.mark_all_read') }}
                    </button>
                @endif

                @if(count($notifications) > 0)
                    <div x-data="{ deleteOpen: false }" class="relative">
                        <button @click="deleteOpen = !deleteOpen"
                                class="p-1 rounded text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors">
                            <x-heroicon-o-trash class="w-3.5 h-3.5"/>
                        </button>
                        <div x-show="deleteOpen"
                             x-cloak
                             @click.outside="deleteOpen = false"
                             class="absolute right-0 mt-1 w-44 bg-white border border-gray-100 rounded-xl shadow-lg overflow-hidden z-10">
                            <button wire:click="deleteAllRead" @click="deleteOpen = false"
                                    class="w-full text-left px-3 py-2.5 text-[11px] text-gray-700 hover:bg-gray-50 transition-colors">
                                {{ t('notifications.delete_read') }}
                            </button>
                            <button wire:click="deleteAll" @click="deleteOpen = false"
                                    class="w-full text-left px-3 py-2.5 text-[11px] text-red-500 hover:bg-red-50 transition-colors">
                                {{ t('notifications.delete_all') }}
                            </button>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- Liste --}}
        <div class="max-h-80 overflow-y-auto">
            @forelse($notifications as $n)
                <div class="group flex items-start gap-3 px-4 py-3 hover:bg-gray-50 transition-colors border-b border-gray-50 last:border-0 {{ is_null($n['read_at']) ? 'bg-indigo-50/30' : '' }}">

                    {{-- Klickbarer Bereich --}}
                    <button wire:click="markRead('{{ $n['id'] }}')"
                            class="flex items-start gap-3 flex-1 min-w-0 text-left">
                        <div class="w-6 h-6 rounded-md flex items-center justify-center shrink-0 mt-0.5
                            {{ $n['type'] === 'event_reminder' ? 'bg-indigo-100' : 'bg-green-100' }}">
                            @if($n['type'] === 'event_reminder')
                                <x-heroicon-o-calendar class="w-3.5 h-3.5 text-indigo-600"/>
                            @else
                                <x-heroicon-o-check-circle class="w-3.5 h-3.5 text-green-600"/>
                            @endif
                        </div>

                        <div class="flex-1 min-w-0">
                            <p class="text-xs font-medium text-gray-800 truncate">{{ $n['title'] }}</p>
                            @if($n['message'])
                                <p class="text-[10px] text-gray-400 truncate">{{ $n['message'] }}</p>
                            @endif
                            <p class="text-[10px] text-gray-300 mt-0.5">
                                {{ \Carbon\Carbon::parse($n['created_at'])->diffForHumans() }}
                            </p>
                        </div>

                        @if(is_null($n['read_at']))
                            <div class="w-1.5 h-1.5 bg-indigo-500 rounded-full shrink-0 mt-1.5"></div>
                        @endif
                    </button>

                    {{-- Löschen-Button (erscheint bei Hover) --}}
                    <button wire:click="deleteNotification('{{ $n['id'] }}')"
                            class="opacity-0 group-hover:opacity-100 transition-opacity shrink-0 mt-0.5 p-1 rounded text-gray-300 hover:text-red-400 hover:bg-red-50">
                        <x-heroicon-o-x-mark class="w-3.5 h-3.5"/>
                    </button>
                </div>
            @empty
                <div class="px-4 py-6 text-center">
                    <x-heroicon-o-bell-slash class="w-6 h-6 text-gray-300 mx-auto mb-2"/>
                    <p class="text-xs text-gray-400">{{ t('notifications.empty') }}</p>
                </div>
            @endforelse
        </div>

    </div>
</div>

@script
<script>
(function () {
    window.__bellAudioCtx = window.__bellAudioCtx || null;

    if (!window.__bellAudioUnlocked) {
        window.__bellAudioUnlocked = true;
        document.addEventListener('click', function () {
            if (!window.__bellAudioCtx) {
                window.__bellAudioCtx = new (window.AudioContext || window.webkitAudioContext)();
            }
            if (window.__bellAudioCtx.state === 'suspended') {
                window.__bellAudioCtx.resume();
            }
        }, { passive: true });
    }

    window.__playBellSound = function () {
        try {
            if (!window.__bellAudioCtx) {
                window.__bellAudioCtx = new (window.AudioContext || window.webkitAudioContext)();
            }
            const ctx = window.__bellAudioCtx;

            const doPlay = () => {
                const t = ctx.currentTime;
                const osc1 = ctx.createOscillator();
                const gain1 = ctx.createGain();
                osc1.connect(gain1); gain1.connect(ctx.destination);
                osc1.frequency.value = 880;
                gain1.gain.setValueAtTime(0.15, t);
                gain1.gain.exponentialRampToValueAtTime(0.001, t + 0.3);
                osc1.start(t); osc1.stop(t + 0.3);

                const osc2 = ctx.createOscillator();
                const gain2 = ctx.createGain();
                osc2.connect(gain2); gain2.connect(ctx.destination);
                osc2.frequency.value = 660;
                gain2.gain.setValueAtTime(0, t + 0.15);
                gain2.gain.setValueAtTime(0.12, t + 0.15);
                gain2.gain.exponentialRampToValueAtTime(0.001, t + 0.5);
                osc2.start(t + 0.15); osc2.stop(t + 0.5);
            };

            ctx.state === 'suspended' ? ctx.resume().then(doPlay) : doPlay();
        } catch (e) {}
    };

    if (window.__bellEchoRegistered) return;
    window.__bellEchoRegistered = true;
    if (typeof window.Echo === 'undefined') return;

    window.Echo.private('notifications.{{ auth()->id() }}')
        .listen('.notification.created', (data) => {
            $wire.refresh();
            if (typeof window.message !== 'undefined') {
                window.message.toast({
                    type: data.type === 'event_reminder' ? 'info' : 'success',
                    title: data.title,
                    text: data.message ?? '',
                    icon: true, close: true, duration: 6000,
                });
            }
            window.__playBellSound && window.__playBellSound();
        });
})();
</script>
@endscript
