@props([
    'maxNotifications' => 5,
    'showMarkAllRead' => true,
    'showViewAll' => true,
])

@php
    $user = auth()->check() ? auth()->user() : null;
    $notifications = $user ? $user->notifications()->limit($maxNotifications)->get() : collect();
    $unreadCount = $user ? $user->unreadNotifications()->count() : 0;
@endphp

@if(!$user)
    <button class="btn btn-outline-secondary" disabled>
        <i class="fas fa-bell"></i>
    </button>
@else

<div class="dropdown" id="notificationWidget">
    <button class="btn btn-outline-secondary dropdown-toggle position-relative" type="button" 
            id="notificationDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fas fa-bell"></i>
        @if($unreadCount > 0)
            <span class="badge badge-danger badge-pill position-absolute" 
                  style="top: -8px; right: -8px; font-size: 0.7em;" id="notificationBadge">
                {{ $unreadCount > 99 ? '99+' : $unreadCount }}
            </span>
        @endif
    </button>
    
    <div class="dropdown-menu dropdown-menu-right shadow" aria-labelledby="notificationDropdown" 
         style="width: 350px; max-height: 400px; overflow-y: auto;">
        
        <div class="dropdown-header d-flex justify-content-between align-items-center">
            <span class="font-weight-bold">
                <i class="fas fa-bell mr-1"></i>
                Notifications
                @if($unreadCount > 0)
                    <span class="badge badge-primary ml-1">{{ $unreadCount }}</span>
                @endif
            </span>
            
            @if($showMarkAllRead && $unreadCount > 0)
                <button type="button" class="btn btn-sm btn-link text-muted p-0" 
                        id="markAllReadWidget" title="Mark all as read">
                    <i class="fas fa-check-double"></i>
                </button>
            @endif
        </div>
        
        <div class="dropdown-divider"></div>
        
        <div id="notificationsList">
            @if($notifications->count() > 0)
                @foreach($notifications as $notification)
                    <div class="dropdown-item-text notification-item-widget {{ $notification->read_at ? '' : 'unread' }}" 
                         data-id="{{ $notification->id }}">
                        <div class="d-flex align-items-start">
                            <div class="mr-2 mt-1">
                                @php
                                    $type = $notification->data['type'] ?? 'general';
                                    $iconClass = match($type) {
                                        'frost', 'freeze' => 'fas fa-snowflake text-info',
                                        'extreme_weather', 'wind', 'rain' => 'fas fa-cloud-bolt text-warning',
                                        'task_due', 'task_overdue' => 'fas fa-tasks text-primary',
                                        'equipment_maintenance' => 'fas fa-wrench text-orange',
                                        'test' => 'fas fa-vial text-success',
                                        default => 'fas fa-info-circle text-secondary',
                                    };
                                @endphp
                                <i class="{{ $iconClass }}"></i>
                            </div>
                            <div class="flex-grow-1" style="min-width: 0;">
                                <div class="d-flex justify-content-between align-items-start">
                                    <h6 class="mb-1 font-weight-semibold text-truncate">
                                        {{ $notification->data['title'] ?? 'Notification' }}
                                    </h6>
                                    @if(!$notification->read_at)
                                        <span class="unread-dot ml-1 mt-1"></span>
                                    @endif
                                </div>
                                <p class="mb-1 small text-muted" style="line-height: 1.3;">
                                    {{ Str::limit($notification->data['message'] ?? '', 100) }}
                                </p>
                                <small class="text-muted">
                                    {{ $notification->created_at->diffForHumans() }}
                                </small>
                            </div>
                        </div>
                        
                        @if(!$notification->read_at)
                            <div class="text-right mt-1">
                                <button type="button" class="btn btn-sm btn-link text-muted p-0 mark-read-widget" 
                                        data-id="{{ $notification->id }}" title="Mark as read">
                                    <i class="fas fa-check small"></i>
                                </button>
                            </div>
                        @endif
                    </div>
                    @if(!$loop->last)
                        <div class="dropdown-divider my-1"></div>
                    @endif
                @endforeach
            @else
                <div class="dropdown-item-text text-center py-3">
                    <i class="fas fa-bell-slash text-muted fa-2x mb-2"></i>
                    <p class="text-muted mb-0">No notifications</p>
                </div>
            @endif
        </div>
        
        @if($showViewAll || ($showMarkAllRead && $unreadCount > 0))
            <div class="dropdown-divider"></div>
            <div class="dropdown-footer text-center">
                @if($showViewAll)
                    <a href="{{ route('notifications.index') }}" class="btn btn-sm btn-primary">
                        <i class="fas fa-list mr-1"></i>
                        View All Notifications
                    </a>
                @endif
            </div>
        @endif
    </div>
</div>

@push('styles')
<style>
.notification-item-widget {
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0;
    transition: background-color 0.2s;
}

.notification-item-widget:hover {
    background-color: #f8f9fa;
}

.notification-item-widget.unread {
    background-color: #f8f9fe;
    border-left: 3px solid #007bff;
}

.unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #007bff;
    display: inline-block;
    flex-shrink: 0;
}

.dropdown-header {
    padding: 0.75rem 1rem 0.5rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.dropdown-footer {
    padding: 0.75rem 1rem;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

#notificationBadge {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Auto-refresh notification count every 30 seconds
    setInterval(function() {
        refreshNotificationCount();
    }, 30000);
    
    // Mark single notification as read
    $(document).on('click', '.mark-read-widget', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        const notificationId = $(this).data('id');
        const $item = $(this).closest('.notification-item-widget');
        
        $.post(`/notifications/${notificationId}/read`, {
            _token: $('meta[name="csrf-token"]').attr('content')
        })
        .done(function(response) {
            if (response.success) {
                $item.removeClass('unread');
                $item.find('.unread-dot').remove();
                $item.find('.mark-read-widget').remove();
                updateWidgetBadge(response.unread_count);
            }
        });
    });
    
    // Mark all notifications as read
    $('#markAllReadWidget').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        $.post('/notifications/read-all', {
            _token: $('meta[name="csrf-token"]').attr('content')
        })
        .done(function(response) {
            if (response.success) {
                $('.notification-item-widget').removeClass('unread');
                $('.unread-dot').remove();
                $('.mark-read-widget').remove();
                $('#markAllReadWidget').hide();
                updateWidgetBadge(0);
            }
        });
    });
    
    // Refresh notification count
    function refreshNotificationCount() {
        $.get('/notifications/unread-count')
        .done(function(response) {
            updateWidgetBadge(response.unread_count);
        });
    }
    
    // Update badge count
    function updateWidgetBadge(count) {
        const $badge = $('#notificationBadge');
        const $markAllBtn = $('#markAllReadWidget');
        
        if (count > 0) {
            const displayCount = count > 99 ? '99+' : count;
            if ($badge.length === 0) {
                $('#notificationDropdown').append(`
                    <span class="badge badge-danger badge-pill position-absolute" 
                          style="top: -8px; right: -8px; font-size: 0.7em;" id="notificationBadge">
                        ${displayCount}
                    </span>
                `);
            } else {
                $badge.text(displayCount).show();
            }
            $markAllBtn.show();
        } else {
            $badge.hide();
            $markAllBtn.hide();
        }
    }
});
</script>
@endpush
@endif