@extends('layouts.admin')

@section('title', 'Notifications')

@push('styles')
<style>
    .notifications-page h1 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .notifications-page h1 i { color: var(--accent); }

    .notifications-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .notifications-header-actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .unread-badge {
        background: var(--accent);
        color: #fff;
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .mark-all-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.5rem 1rem;
        background: transparent;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-secondary);
        font-family: inherit;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all var(--transition);
    }

    .mark-all-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

    .notification-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .notification-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem 1.25rem;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        transition: all var(--transition);
        text-decoration: none;
        color: inherit;
    }

    .notification-item:hover {
        border-color: var(--accent);
    }

    .notification-item.unread {
        border-left: 3px solid var(--accent);
        background: var(--accent-light);
    }

    .notification-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    .notification-icon.support { background: rgba(108, 92, 231, 0.15); color: #6c5ce7; }
    .notification-icon.escrow { background: rgba(16, 191, 255, 0.15); color: var(--accent); }
    .notification-icon.dispute { background: rgba(255, 71, 87, 0.15); color: var(--danger); }
    .notification-icon.verification { background: rgba(0, 212, 170, 0.15); color: var(--success); }
    .notification-icon.user { background: rgba(0, 212, 170, 0.15); color: var(--success); }
    .notification-icon.system { background: rgba(255, 165, 2, 0.15); color: var(--warning); }
    .notification-icon.info { background: rgba(16, 191, 255, 0.15); color: var(--accent); }

    .notification-content {
        flex: 1;
        min-width: 0;
    }

    .notification-title {
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--text-primary);
        margin-bottom: 0.25rem;
    }

    .notification-message {
        font-size: 0.8rem;
        color: var(--text-muted);
        line-height: 1.4;
    }

    .notification-time {
        font-size: 0.7rem;
        color: var(--text-muted);
        margin-top: 0.375rem;
    }

    .notification-actions {
        flex-shrink: 0;
    }

    .mark-read-btn {
        background: none;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all var(--transition);
    }

    .mark-read-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

    .empty-state {
        text-align: center;
        padding: 3rem 1.5rem;
        color: var(--text-muted);
    }

    .empty-state i {
        font-size: 2.5rem;
        margin-bottom: 0.75rem;
        opacity: 0.4;
        display: block;
    }

    .empty-state p {
        font-size: 0.85rem;
    }
</style>
@endpush

@section('content')
    <div class="notifications-page">
        <div class="notifications-header">
            <div>
                <h1><i class="fas fa-bell"></i> Notifications</h1>
                <p style="color: var(--text-muted); font-size: 0.85rem;">Admin alerts for support tickets, disputes, and system events</p>
            </div>
            <div class="notifications-header-actions">
                @if($unreadCount > 0)
                    <span class="unread-badge">{{ $unreadCount }} unread</span>
                    <form method="POST" action="{{ route('admin.notifications.mark-all-read') }}">
                        @csrf
                        <button type="submit" class="mark-all-btn">
                            <i class="fas fa-check-double"></i> Mark All Read
                        </button>
                    </form>
                @endif
            </div>
        </div>

        @if($notifications->count() > 0)
            <div class="notification-list">
                @foreach($notifications as $notification)
                    @php
                        $notifUrl = \App\Support\NotificationLinker::for($notification);
                        $iconType = $notification->type ?? 'info';
                        $iconMap = [
                            'support' => 'fa-headset',
                            'escrow' => 'fa-shield-halved',
                            'dispute' => 'fa-gavel',
                            'verification' => 'fa-id-card',
                            'user' => 'fa-user',
                            'system' => 'fa-cog',
                        ];
                        $icon = $iconMap[$iconType] ?? 'fa-bell';
                    @endphp
                    <div class="notification-item {{ $notification->read_at ? '' : 'unread' }}"
                         @if($notifUrl) onclick="window.location.href='{{ $notifUrl }}'" style="cursor:pointer;" @endif>
                        <div class="notification-icon {{ $iconType }}">
                            <i class="fas {{ $icon }}"></i>
                        </div>

                        <div class="notification-content">
                            <div class="notification-title">{{ $notification->title }}</div>
                            <div class="notification-message">{{ $notification->message }}</div>
                            <div class="notification-time">{{ $notification->created_at->diffForHumans() }}</div>
                        </div>

                        @if(!$notification->read_at)
                            <div class="notification-actions">
                                <form method="POST" action="{{ route('admin.notifications.read', $notification->id) }}" onclick="event.stopPropagation();">
                                    @csrf
                                    @method('PUT')
                                    <button type="submit" class="mark-read-btn">
                                        <i class="fas fa-check"></i> Mark Read
                                    </button>
                                </form>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>

            @include('partials.table-pagination', ['paginator' => $notifications, 'label' => 'notifications'])
        @else
            <div class="empty-state">
                <i class="fas fa-bell-slash"></i>
                <p>No notifications yet. You'll see alerts for new support tickets, disputes, and system events here.</p>
            </div>
        @endif
    </div>
@endsection