@extends('layouts.app')

@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;
    }

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

    .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);
    }

    .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.info { background: rgba(16, 191, 255, 0.15); color: var(--accent); }
    .notification-icon.success { background: rgba(0, 184, 148, 0.15); color: var(--success); }
    .notification-icon.warning { background: rgba(253, 203, 110, 0.15); color: #fdcb6e; }
    .notification-icon.danger { background: rgba(255, 71, 87, 0.15); color: var(--danger); }
    .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.verification { background: rgba(0, 212, 170, 0.15); color: var(--success); }

    .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: 2.5rem 1.5rem;
        color: var(--text-muted);
    }

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

    .empty-state p {
        font-size: 0.85rem;
    }

    .pagination-wrapper {
        margin-top: 1.5rem;
        display: flex;
        justify-content: center;
    }
</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;">Stay updated on your escrow activity</p>
            </div>
            @if($unreadCount > 0)
                <span class="unread-badge">{{ $unreadCount }} unread</span>
            @endif
        </div>

        @if($notifications->count() > 0)
            <div class="notification-list">
                @foreach($notifications as $notification)
                    @php $notifUrl = \App\Support\NotificationLinker::for($notification); @endphp
                    <div class="notification-item {{ $notification->read_at ? '' : 'unread' }}"
                         @if($notifUrl) onclick="window.location.href='{{ $notifUrl }}'" style="cursor:pointer;" @endif>
                        @php
                            $iconType = $notification->type ?? 'info';
                            $iconMap = [
                                'support' => 'fa-headset',
                                'escrow' => 'fa-shield-halved',
                                'dispute' => 'fa-gavel',
                                'verification' => 'fa-id-card',
                                'wallet' => 'fa-wallet',
                                'marketplace_order' => 'fa-shopping-bag',
                                'review' => 'fa-star',
                                'message' => 'fa-envelope',
                                'success' => 'fa-check-circle',
                                'warning' => 'fa-exclamation-triangle',
                                'danger' => 'fa-times-circle',
                            ];
                            $icon = $iconMap[$iconType] ?? 'fa-bell';
                        @endphp
                        <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('escrow.notifications.read', $notification) }}" 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 updates about your escrow transactions here.</p>
            </div>
        @endif
    </div>
@endsection