@php
    $notifications = $panelNotifications ?? collect();
    $unreadCount = $panelUnreadNotificationCount ?? 0;
    $dropdownId = $dropdownId ?? 'panelNotificationsMenu';
    $buttonClass = $buttonClass ?? '';
    $alignmentClass = $alignmentClass ?? 'right-0';
@endphp

<details class="relative" data-panel-notifications>
    <summary class="list-none relative inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border border-gray-200 bg-white text-gray-600 shadow-sm transition hover:border-blue-200 hover:text-blue-600 {{ $buttonClass }}">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V4a2 2 0 10-4 0v1.341C7.67 6.165 6 8.389 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0a3 3 0 11-6 0m6 0H9" />
        </svg>

        @if($unreadCount > 0)
            <span class="absolute -right-0.5 -top-0.5 inline-flex min-w-[1.2rem] items-center justify-center rounded-full bg-red-500 px-1.5 py-0.5 text-[10px] font-bold leading-none text-white shadow">
                {{ $unreadCount > 9 ? '9+' : $unreadCount }}
            </span>
            <span class="absolute -right-0.5 -top-0.5 h-3.5 w-3.5 rounded-full bg-red-400 opacity-70 animate-ping"></span>
        @endif
    </summary>

    <div id="{{ $dropdownId }}" class="absolute {{ $alignmentClass }} z-50 mt-3 w-[22rem] overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl">
        <div class="flex items-center justify-between border-b border-gray-100 px-4 py-3">
            <div>
                <p class="text-sm font-semibold text-gray-900">Notifications</p>
                <p class="text-xs text-gray-500">{{ $unreadCount }} unread</p>
            </div>
            <form method="POST" action="{{ route('notifications.read-all') }}">
                @csrf
                <button type="submit" class="text-xs font-semibold text-blue-600 hover:text-blue-700">Mark all read</button>
            </form>
        </div>

        <div class="max-h-[26rem] overflow-y-auto">
            @forelse($notifications as $notification)
                <form method="POST" action="{{ route('notifications.read', $notification) }}" class="border-b border-gray-100 last:border-b-0">
                    @csrf
                    <input type="hidden" name="redirect_to" value="{{ $notification->action_url ?: route('notifications.index') }}">
                    <button type="submit" class="block w-full px-4 py-3 text-left transition hover:bg-gray-50">
                        <div class="flex items-start gap-3">
                            <span class="mt-1 h-2.5 w-2.5 flex-shrink-0 rounded-full {{ $notification->read_at ? 'bg-gray-300' : 'bg-blue-500 shadow-[0_0_0_6px_rgba(59,130,246,0.14)]' }}"></span>
                            <div class="min-w-0 flex-1">
                                <p class="text-sm font-semibold text-gray-900">{{ $notification->title }}</p>
                                <p class="mt-1 text-sm leading-5 text-gray-600">{{ $notification->message }}</p>
                                <div class="mt-2 flex items-center justify-between gap-3">
                                    <span class="text-xs text-gray-400">{{ $notification->created_at->diffForHumans() }}</span>
                                    @if($notification->action_url)
                                        <span class="text-xs font-semibold text-blue-600">Open</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </button>
                </form>
            @empty
                <div class="px-4 py-8 text-center">
                    <p class="text-sm font-medium text-gray-700">No notifications yet</p>
                    <p class="mt-1 text-xs text-gray-400">New lead, blog, and workflow updates will appear here.</p>
                </div>
            @endforelse
        </div>

        <div class="border-t border-gray-100 bg-gray-50 px-4 py-3">
            <a href="{{ route('notifications.index') }}" class="inline-flex items-center text-sm font-semibold text-gray-700 hover:text-blue-600">
                View all notifications
            </a>
        </div>
    </div>
</details>

@once
    <script>
        document.addEventListener('click', function (event) {
            document.querySelectorAll('[data-panel-notifications]').forEach(function (dropdown) {
                if (!dropdown.hasAttribute('open')) return;
                if (dropdown.contains(event.target)) return;
                dropdown.removeAttribute('open');
            });
        });
    </script>
@endonce