@php
    use Illuminate\Support\Facades\Schema;

    $notificationUser = auth('admin')->user() ?? auth()->user();
    // Custom app notifications use user_id on this table; do not require notifiable_* so older DBs still load.
    $hasNotificationColumns = Schema::hasTable('notifications')
        && Schema::hasColumn('notifications', 'user_id');

    $useAppNotifications = $notificationUser instanceof \App\Models\User && $hasNotificationColumns;

    if ($useAppNotifications) {
        app(\App\Services\NotificationService::class)->reconcileConnectionRequestNotificationsForUser($notificationUser);
    }

    $notificationCount = $useAppNotifications
        ? $notificationUser->unreadNotifications()->count()
        : 0;

    $recentNotifications = $useAppNotifications
        ? $notificationUser->notifications()->with('sender')->latest()->limit(5)->get()
        : collect();

    // Helper to resolve the direct target URL for each notification
    $resolveUrl = function($notification) {
        // Connection requests → requests inbox (optional fragment when we stored the row id)
        if (in_array((string) $notification->type, ['connection_request', 'new_connection_request'], true)) {
            $url = route('user.connections.requests', ['view' => 'requests', 'requests' => 1]);
            $cid = $notification->data['connection_id'] ?? null;
            if ($cid) {
                $url .= '#connection-request-' . (int) $cid;
            }
            return $url;
        }
        if ((string) $notification->type === 'connection_accepted') {
            return route('user.connect.index');
        }
        // Connect engagement (like/comment/repost/dislike) — not connection request/accept rows
        $isConnectEngagement = ! in_array((string) $notification->type, ['connection_request', 'new_connection_request', 'connection_accepted'], true)
            && (
                in_array($notification->type, ['connect_engagement', 'like', 'comment', 'repost', 'dislike'], true)
                || (($notification->data['category'] ?? null) === 'connect')
            );
        if ($isConnectEngagement) {
            $postId = $notification->data['meta']['post_id']
                ?? $notification->data['post_id']
                ?? null;
            if ($postId) {
                $action = $notification->data['meta']['type']
                    ?? $notification->data['type']
                    ?? $notification->type;
                $query = http_build_query(array_filter(['highlight' => $postId, 'action' => $action]));
                return route('user.connect.index') . '?' . $query . '#post-' . $postId;
            }
            return route('user.connect.index');
        }
        // Fallback to action_url or data.url
        if (!empty($notification->action_url)) {
            return $notification->action_url;
        }
        if (!empty($notification->data['url'])) {
            return $notification->data['url'];
        }
        return route('notifications.show', $notification);
    };
@endphp

<!-- Notification Bell Dropdown -->
<div
    class="nav-notification-bell-root relative"
    x-data="{ open: false, count: {{ $notificationCount }} }"
    @notify-count.window="count = Number($event.detail.count) || 0"
>
    <button type="button" @click="open = !open" class="relative rounded-lg p-2 text-slate-600 hover:bg-slate-100 transition" aria-label="Notifications">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
        </svg>
        <span x-show="count > 0" class="absolute top-0 right-0 inline-flex h-5 w-5 items-center justify-center rounded-full bg-red-600 text-xs font-bold text-white">
            <span x-text="count > 9 ? '9+' : count"></span>
        </span>
    </button>

    <!-- Dropdown -->
    <div x-show="open" 
         @click.away="open = false"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95"
         class="absolute right-0 mt-2 w-80 md:w-96 rounded-2xl border border-slate-200 bg-white shadow-xl z-50"
         style="display: none;">
        
        <!-- Header -->
        <div class="border-b border-slate-200 px-4 py-3 flex items-center justify-between">
            <h3 class="font-semibold text-ink">Notifications</h3>
            <a href="{{ route('notifications.index') }}" class="text-sm font-semibold text-brand hover:text-brand/80">
                View All
            </a>
        </div>

        <!-- Notifications List -->
        <div class="max-h-96 overflow-y-auto">
            @forelse($recentNotifications as $notification)
                @php
                    $isConnReq = in_array((string) $notification->type, ['connection_request', 'new_connection_request'], true);
                    $pendingConnId = $isConnReq ? ($notification->data['connection_id'] ?? null) : null;
                    $canRespondInDropdown = $isConnReq && $pendingConnId && auth()->check();
                    $goUrl = $resolveUrl($notification);
                @endphp
                <div class="flex items-stretch border-b border-slate-100 hover:bg-slate-50 transition {{ is_null($notification->read_at) ? 'bg-brand/5' : '' }}">
                    <a href="{{ $goUrl }}"
                       onclick="return notificationDropdownOpenLink(event, {{ (int) $notification->id }}, @json($goUrl))"
                       class="flex flex-1 min-w-0 items-start gap-3 px-4 py-3 text-left">
                        <!-- Icon/Avatar -->
                        <div class="flex-shrink-0">
                            @if($notification->icon)
                                <span class="text-2xl">{{ $notification->icon }}</span>
                            @elseif($notification->sender)
                                <img src="{{ $notification->sender->displayAvatarUrl() }}" alt="{{ $notification->sender->name }}" class="h-10 w-10 rounded-full object-cover border-2 border-slate-200" width="40" height="40" loading="lazy" decoding="async">
                            @else
                                <div class="h-10 w-10 rounded-full bg-slate-200 flex items-center justify-center">
                                    <svg class="w-5 h-5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                                </div>
                            @endif
                        </div>

                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-semibold text-ink {{ is_null($notification->read_at) ? 'text-brand' : '' }}">
                                {{ $notification->title }}
                            </p>
                            <p class="text-xs text-slate-600 mt-0.5 line-clamp-2">
                                {{ $notification->body }}
                            </p>
                            <p class="text-xs text-slate-500 mt-1">
                                {{ $notification->created_at->diffForHumans() }}
                            </p>
                        </div>

                        @if(is_null($notification->read_at))
                            <div class="flex-shrink-0 pt-1">
                                <span class="inline-block h-2 w-2 rounded-full bg-brand" aria-hidden="true"></span>
                            </div>
                        @endif
                    </a>
                    @if($canRespondInDropdown)
                        <div class="flex flex-col justify-center gap-1.5 border-l border-slate-100 px-2 py-2 shrink-0">
                            <form method="POST" action="{{ route('nurse.connect.respond', ['nurseConnection' => $pendingConnId]) }}" class="inline" onsubmit="this.querySelector('button').disabled=true">
                                @csrf
                                <input type="hidden" name="mark_notification_id" value="{{ $notification->id }}">
                                <input type="hidden" name="status" value="accepted">
                                <button type="submit" class="whitespace-nowrap rounded-lg bg-brand px-2.5 py-1 text-xs font-semibold text-white hover:bg-brand/90">
                                    Accept
                                </button>
                            </form>
                            <form method="POST" action="{{ route('nurse.connect.respond', ['nurseConnection' => $pendingConnId]) }}" class="inline" onsubmit="this.querySelector('button').disabled=true">
                                @csrf
                                <input type="hidden" name="mark_notification_id" value="{{ $notification->id }}">
                                <input type="hidden" name="status" value="declined">
                                <button type="submit" class="whitespace-nowrap rounded-lg border border-slate-200 bg-white px-2.5 py-1 text-xs font-semibold text-slate-600 hover:bg-slate-50">
                                    Decline
                                </button>
                            </form>
                        </div>
                    @endif
                </div>
            @empty
                <div class="px-4 py-8 text-center">
                    <svg class="mx-auto h-12 w-12 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                    </svg>
                    <p class="mt-2 text-sm text-slate-500">No notifications</p>
                </div>
            @endforelse
        </div>

        <!-- Footer -->
        @if($recentNotifications->count() > 0)
            <div class="border-t border-slate-200 px-4 py-2 text-center">
                <button onclick="markAllAsRead()" class="text-sm font-semibold text-brand hover:text-brand/80">
                    Mark All as Read
                </button>
            </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
    function syncNavNotificationCount() {
        fetch('/api/notifications/unread-count', {
            credentials: 'same-origin',
            headers: { 'Accept': 'application/json' },
        })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                if (data && typeof data.count !== 'undefined') {
                    window.dispatchEvent(new CustomEvent('notify-count', { detail: { count: data.count } }));
                }
            })
            .catch(function () {});
    }

    function notificationDropdownOpenLink(event, notificationId, url) {
        // Preserve new-tab / modified clicks
        if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
            return true;
        }
        event.preventDefault();
        markNotificationReadThenNavigate(notificationId, url, event.currentTarget);
        return false;
    }

    // Mark read then navigate so the request is not aborted by immediate navigation (same tab).
    function markNotificationReadThenNavigate(notificationId, url, anchorEl) {
        const row = anchorEl && anchorEl.closest ? anchorEl.closest('div.flex.items-stretch') : null;
        if (row) {
            row.classList.remove('bg-brand/5');
            const dot = row.querySelector('span.rounded-full.bg-brand');
            if (dot) dot.remove();
        }

        const token = document.querySelector('meta[name="csrf-token"]')?.content;
        fetch('/notifications/' + notificationId + '/read', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': token || '',
            },
            credentials: 'same-origin',
            keepalive: true,
        })
            .then(function (r) { return r.ok ? r.json() : null; })
            .catch(function () { return null; })
            .finally(function () {
                syncNavNotificationCount();
                window.location.assign(url);
            });
    }

    function markAllAsRead() {
        fetch('/notifications/read-all', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.dispatchEvent(new CustomEvent('notify-count', { detail: { count: 0 } }));
                window.location.reload();
            }
        });
    }

    // Poll for new notifications every 30 seconds
    setInterval(function () {
        syncNavNotificationCount();
    }, 30000);
</script>
@endpush