<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <div>
                <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200 leading-tight">
                    <i class="fas fa-bell mr-2"></i>{{ __('Notificări') }}
                </h2>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                    <a href="{{ route('dashboard') }}" class="text-blue-600 dark:text-blue-400 hover:underline">Dashboard</a>
                    <span class="mx-2">/</span>
                    <span>Notificări</span>
                </p>
            </div>
            <div class="flex items-center space-x-2">
                @if($unreadCount > 0)
                    <form action="{{ route('notifications.mark-all-read') }}" method="POST" class="inline">
                        @csrf
                        <button type="submit" class="inline-flex items-center px-4 py-2 bg-green-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-green-700 focus:bg-green-700 active:bg-green-900 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
                            <i class="fas fa-check-double mr-2"></i>
                            Marchează Toate ca Citite
                        </button>
                    </form>
                @endif
                @if($notifications->total() > 0)
                    <form action="{{ route('notifications.delete-all') }}" method="POST" class="inline" onsubmit="return confirm('Sigur vrei să ștergi toate notificările?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-700 focus:bg-red-700 active:bg-red-900 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
                            <i class="fas fa-trash mr-2"></i>
                            Șterge Toate
                        </button>
                    </form>
                @endif
            </div>
        </div>
    </x-slot>

    <div class="flex-1 py-6">
        <div class="px-6 lg:px-8 h-full">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg h-full flex flex-col">
                @if($notifications->count() > 0)
                    <div class="flex-1 divide-y divide-gray-200 dark:divide-gray-700 overflow-y-auto">
                        @foreach($notifications as $notification)
                            @php
                                $icon = $notification->data['icon'] ?? 'fa-info-circle';
                                $color = $notification->data['color'] ?? 'blue';
                                $actionUrl = $notification->data['action_url'] ?? '#';
                                $isRead = $notification->read_at !== null;

                                // Background color pentru iconița circulară
                                $bgColorClass = match($color) {
                                    'red' => 'bg-red-100 dark:bg-red-900/30',
                                    'orange' => 'bg-orange-100 dark:bg-orange-900/30',
                                    'yellow' => 'bg-yellow-100 dark:bg-yellow-900/30',
                                    'green' => 'bg-green-100 dark:bg-green-900/30',
                                    'blue' => 'bg-blue-100 dark:bg-blue-900/30',
                                    default => 'bg-gray-100 dark:bg-gray-900/30',
                                };

                                // Text color pentru iconița
                                $iconColorClass = match($color) {
                                    'red' => 'text-red-600 dark:text-red-400',
                                    'orange' => 'text-orange-600 dark:text-orange-400',
                                    'yellow' => 'text-yellow-600 dark:text-yellow-400',
                                    'green' => 'text-green-600 dark:text-green-400',
                                    'blue' => 'text-blue-600 dark:text-blue-400',
                                    default => 'text-gray-600 dark:text-gray-400',
                                };
                            @endphp

                            <div class="flex items-start p-6 {{ $isRead ? 'bg-white dark:bg-gray-800' : 'bg-blue-50 dark:bg-blue-900/10' }} hover:bg-gray-50 dark:hover:bg-gray-700/30 transition">
                                <!-- Icon Circle -->
                                <div class="flex-shrink-0">
                                    <div class="w-12 h-12 rounded-full {{ $bgColorClass }} flex items-center justify-center">
                                        <i class="fas {{ $icon }} {{ $iconColorClass }} text-lg"></i>
                                    </div>
                                </div>

                                <!-- Content -->
                                <div class="ml-4 flex-1 min-w-0">
                                    <div class="flex items-start justify-between">
                                        <div class="flex-1">
                                            <p class="text-sm font-medium text-gray-900 dark:text-gray-100 {{ $isRead ? '' : 'font-semibold' }}">
                                                {{ $notification->data['message'] ?? 'Notificare nouă' }}
                                            </p>
                                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                {{ $notification->created_at->format('d M Y, H:i') }}
                                                <span class="mx-1">•</span>
                                                {{ $notification->created_at->diffForHumans() }}
                                            </p>
                                        </div>

                                        <!-- Actions -->
                                        <div class="flex items-center space-x-2 ml-4">
                                            @if(!$isRead)
                                                <form action="{{ route('notifications.mark-read', $notification->id) }}" method="POST" class="inline">
                                                    @csrf
                                                    <button type="submit" class="text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300" title="Marchează ca citit">
                                                        <i class="fas fa-check"></i>
                                                    </button>
                                                </form>
                                            @endif

                                            @if($actionUrl !== '#')
                                                <a href="{{ $actionUrl }}" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300" title="Vezi detalii">
                                                    <i class="fas fa-external-link-alt"></i>
                                                </a>
                                            @endif

                                            <form action="{{ route('notifications.destroy', $notification->id) }}" method="POST" class="inline" onsubmit="return confirm('Sigur vrei să ștergi această notificare?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300" title="Șterge">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Pagination -->
                    <div class="mt-auto px-6 py-4 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
                        {{ $notifications->links() }}
                    </div>
                @else
                    <!-- Empty State -->
                    <div class="flex-1 flex items-center justify-center px-4 py-16 text-center">
                        <div>
                            <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gray-100 dark:bg-gray-700 mb-4">
                                <i class="fas fa-bell-slash text-gray-400 dark:text-gray-500 text-3xl"></i>
                            </div>
                            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">Nu aveți notificări</h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">Veți fi notificat când apar actualizări importante</p>
                            <a href="{{ route('dashboard') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 focus:bg-blue-700 active:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
                                <i class="fas fa-arrow-left mr-2"></i>
                                Înapoi la Dashboard
                            </a>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</x-app-layout>
