{{--
    Notification Bell — include in your main navigation/header blade.
    Requires: auth middleware, notifications table (run migration 2024_01_01_000002).

    Example usage in your nav:
        @include('tasks._notification_bell')
--}}

@auth
@php
    $unreadCount = auth()->user()->unreadNotifications()->count();
    $recentNotifications = auth()->user()->notifications()->latest()->limit(8)->get();
@endphp

<div style="position:relative;display:inline-block;" id="notifBellWrap">

    {{-- Bell Button --}}
    <button id="notifBellBtn"
            onclick="toggleNotifDropdown()"
            style="background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
                   color:#d1d5db;width:38px;height:38px;border-radius:50%;cursor:pointer;
                   display:flex;align-items:center;justify-content:center;font-size:1rem;
                   position:relative;">
        🔔
        @if($unreadCount > 0)
        <span id="notifBadge"
              style="position:absolute;top:-2px;right:-2px;background:#ef4444;color:#fff;
                     font-size:.6rem;font-weight:700;min-width:16px;height:16px;
                     border-radius:999px;display:flex;align-items:center;justify-content:center;
                     padding:0 4px;line-height:1;">
            {{ $unreadCount > 9 ? '9+' : $unreadCount }}
        </span>
        @endif
    </button>

    {{-- Dropdown --}}
    <div id="notifDropdown"
         style="display:none;position:absolute;right:0;top:calc(100% + 8px);width:340px;
                background:#1a2035;border:1px solid rgba(255,255,255,.1);border-radius:10px;
                box-shadow:0 8px 32px rgba(0,0,0,.5);z-index:9999;overflow:hidden;">

        {{-- Dropdown Header --}}
        <div style="padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.07);
                    display:flex;align-items:center;justify-content:space-between;">
            <span style="font-size:.82rem;font-weight:700;color:#f3f4f6;">Notifications</span>
            @if($unreadCount > 0)
            <button onclick="markAllRead()"
                    style="background:none;border:none;color:#3b82f6;font-size:.72rem;cursor:pointer;">
                Mark all read
            </button>
            @endif
        </div>

        {{-- Notification Items --}}
        <div style="max-height:340px;overflow-y:auto;" id="notifList">
            @forelse($recentNotifications as $notif)
            @php
                $data = $notif->data;
                $isUnread = is_null($notif->read_at);
            @endphp
            <a href="{{ $data['url'] ?? route('tasks.index') }}"
               onclick="markRead('{{ $notif->id }}')"
               style="display:block;padding:.75rem 1rem;text-decoration:none;
                      border-bottom:1px solid rgba(255,255,255,.05);
                      background:{{ $isUnread ? 'rgba(59,130,246,.06)' : 'transparent' }};
                      transition:background .15s;"
               onmouseover="this.style.background='rgba(255,255,255,.04)'"
               onmouseout="this.style.background='{{ $isUnread ? 'rgba(59,130,246,.06)' : 'transparent' }}'">
                <div style="display:flex;align-items:flex-start;gap:.6rem;">
                    @if($isUnread)
                    <span style="width:7px;height:7px;border-radius:50%;background:#3b82f6;
                                 flex-shrink:0;margin-top:5px;"></span>
                    @else
                    <span style="width:7px;height:7px;flex-shrink:0;"></span>
                    @endif
                    <div style="flex:1;min-width:0;">
                        <p style="margin:0;font-size:.8rem;color:#f3f4f6;font-weight:{{ $isUnread ? 600 : 400 }};">
                            {{ $data['message'] ?? 'New notification' }}
                        </p>
                        @if(!empty($data['job_ref']))
                        <p style="margin:.15rem 0 0;font-size:.72rem;color:#6b7280;">
                            Job: {{ $data['job_ref'] }}
                            @if(!empty($data['due_date']))
                            &middot; Due {{ \Carbon\Carbon::parse($data['due_date'])->format('d M') }}
                            @endif
                        </p>
                        @endif
                        <p style="margin:.15rem 0 0;font-size:.68rem;color:#4b5563;">
                            {{ $notif->created_at->diffForHumans() }}
                        </p>
                    </div>
                </div>
            </a>
            @empty
            <div style="padding:2rem;text-align:center;color:#6b7280;font-size:.82rem;">
                No notifications yet
            </div>
            @endforelse
        </div>

        {{-- Footer --}}
        <div style="padding:.6rem 1rem;border-top:1px solid rgba(255,255,255,.07);text-align:center;">
            <a href="{{ route('tasks.index') }}"
               style="font-size:.75rem;color:#3b82f6;text-decoration:none;">
                View all tasks →
            </a>
        </div>
    </div>
</div>

<script>
function toggleNotifDropdown() {
    const dd = document.getElementById('notifDropdown');
    dd.style.display = dd.style.display === 'none' ? 'block' : 'none';
}

// Close on outside click
document.addEventListener('click', function (e) {
    const wrap = document.getElementById('notifBellWrap');
    if (wrap && !wrap.contains(e.target)) {
        document.getElementById('notifDropdown').style.display = 'none';
    }
});

function markRead(notifId) {
    fetch(`/notifications/${notifId}/read`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json',
        }
    });
    // Badge update
    const badge = document.getElementById('notifBadge');
    if (badge) {
        let count = parseInt(badge.innerText);
        if (!isNaN(count) && count > 0) {
            count--;
            badge.innerText = count > 9 ? '9+' : count;
            if (count === 0) badge.remove();
        }
    }
}

function markAllRead() {
    fetch(`/notifications/read-all`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json',
        }
    }).then(() => window.location.reload());
}
</script>
@endauth