@extends('layouts.app')

@section('title', 'Notifications')

@section('content')
<div class="px-8 py-8">

    {{-- Flash message --}}
    @if(session('success'))
    <div class="mb-6 flex items-center gap-3 bg-emerald-50 border border-emerald-200 text-emerald-700 text-sm rounded-lg px-4 py-3">
        <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
        </svg>
        {{ session('success') }}
    </div>
    @endif

    {{-- Page header --}}
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-xl font-semibold text-slate-900">Notifications</h1>
            <p class="text-sm text-slate-400 mt-0.5">{{ $notifications->total() }} total</p>
        </div>
        <div class="flex items-center gap-2">
            {{-- Mark all read --}}
            <form method="POST" action="{{ route('notifications.read-all') }}" class="inline">
                @csrf
                <button type="submit"
                        class="inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-slate-600 bg-white border border-slate-200 hover:border-slate-300 rounded-lg transition-colors">
                    Mark all read
                </button>
            </form>

            {{-- Clear read --}}
            <form method="POST" action="{{ route('notifications.clear') }}" class="inline"
                  onsubmit="return confirm('Clear all read notifications?')">
                @csrf
                <button type="submit"
                        class="inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-red-500 bg-white border border-red-100 hover:border-red-300 rounded-lg transition-colors">
                    Clear read
                </button>
            </form>
        </div>
    </div>

    {{-- Notification list --}}
    <div class="bg-white border border-slate-100 rounded-xl overflow-hidden">

        @if($notifications->isEmpty())
        {{-- Empty state --}}
        <div class="py-20 text-center">
            <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-slate-100 mb-4">
                <svg class="w-6 h-6 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          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>
            <p class="text-sm font-medium text-slate-700">No notifications yet</p>
            <p class="text-sm text-slate-400 mt-1">You'll see alerts here when proposals are approved, payments are recorded, and more.</p>
        </div>

        @else

        @foreach($notifications as $n)
        @php
            $color  = $n->data['color'] ?? 'blue';
            $icon   = $n->data['icon']  ?? 'bell';

            $iconBg = match($color) {
                'green' => 'bg-emerald-50 text-emerald-600',
                'red'   => 'bg-red-50 text-red-600',
                'amber' => 'bg-amber-50 text-amber-600',
                default => 'bg-sky-50 text-sky-600',
            };

            $iconPath = match($icon) {
                'check-circle'      => 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
                'x-circle'          => 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z',
                'currency-pound'    => 'M14.121 15.536c-1.171 1.952-3.07 1.952-4.242 0-1.172-1.953-1.172-5.119 0-7.072 1.171-1.952 3.07-1.952 4.242 0M8 10.5h4m-4 3h4m9-1.5a9 9 0 11-18 0 9 9 0 0118 0z',
                'exclamation-circle'=> 'M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
                'clock'             => 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z',
                'user-plus'         => 'M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z',
                default             => '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',
            };
        @endphp

        <div class="flex items-start gap-4 p-4 {{ $n->read_at ? 'bg-white' : 'bg-sky-50/40' }} border-b border-slate-100 hover:bg-slate-50 transition-colors group last:border-b-0">

            {{-- Icon circle --}}
            <div class="w-9 h-9 rounded-full flex-shrink-0 flex items-center justify-center {{ $iconBg }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="{{ $iconPath }}"/>
                </svg>
            </div>

            {{-- Content --}}
            <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2">
                    <p class="text-sm font-semibold text-slate-900">{{ $n->data['title'] ?? '' }}</p>
                    @if(!$n->read_at)
                        <span class="w-1.5 h-1.5 rounded-full bg-sky-600 flex-shrink-0"></span>
                    @endif
                </div>
                <p class="text-sm text-slate-500 mt-0.5">{{ $n->data['message'] ?? '' }}</p>
                <p class="text-xs text-slate-400 mt-1">{{ $n->created_at->diffForHumans() }}</p>
            </div>

            {{-- Actions --}}
            <div class="flex items-center gap-3 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
                @if(!empty($n->data['url']))
                <form method="POST" action="{{ route('notifications.read', $n->id) }}" class="contents">
                    @csrf
                    <button type="submit"
                            class="text-xs font-medium text-sky-700 hover:underline bg-transparent border-none cursor-pointer p-0 whitespace-nowrap">
                        View &rarr;
                    </button>
                </form>
                @endif
                <form method="POST" action="{{ route('notifications.destroy', $n->id) }}">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                            class="text-slate-300 hover:text-red-400 transition-colors text-lg leading-none cursor-pointer"
                            title="Dismiss">&times;</button>
                </form>
            </div>

        </div>
        @endforeach

        @if($notifications->hasPages())
        <div class="px-5 py-4 border-t border-slate-50">
            {{ $notifications->links() }}
        </div>
        @endif

        @endif

    </div>

</div>
@endsection