<x-app-layout>
    <div class="py-12 px-6 lg:px-12 bg-slate-950 min-h-screen relative overflow-hidden">
        <div class="max-w-4xl mx-auto relative z-10">
            <!-- Header Section -->
            <header class="mb-16 flex flex-col md:flex-row md:items-end justify-between gap-8 animate-premium">
                <div class="space-y-2">
                    <h2 class="font-display text-4xl font-black text-white tracking-tight italic uppercase">Pusat Notifikasi</h2>
                    <p class="text-slate-400 text-[11px] font-bold uppercase tracking-[0.2em] italic">Log Aktivitas & Transmisi Sistem — Real-time Feed</p>
                </div>
                @if(auth()->user()->unreadNotifications->count() > 0)
                    <form action="{{ route('notifications.mark-all-as-read') }}" method="POST">
                        @csrf
                        <button type="submit" class="text-primary-400 font-black text-[10px] uppercase tracking-widest hover:text-white transition-colors italic border-b-2 border-primary-900/30 hover:border-primary-500">Tandai Semua Selesai</button>
                    </form>
                @endif
            </header>

            <div class="space-y-6">
                @forelse($notifications as $notification)
                    @php $data = is_array($notification->data) ? $notification->data : json_decode($notification->data, true); @endphp
                    <div class="bg-slate-900/80 backdrop-blur-xl rounded-[40px] border border-white/10 p-10 flex gap-10 items-start transition-all duration-500 hover:border-primary-500/50 group relative animate-premium {{ $notification->unread() ? 'shadow-2xl shadow-primary-900/20' : 'opacity-60 grayscale-[0.5]' }}">
                        <div class="relative">
                            <div class="w-16 h-16 rounded-[24px] flex items-center justify-center shrink-0 transition-all duration-700 {{ $notification->unread() ? 'bg-primary-600 text-white shadow-2xl shadow-primary-500/40 group-hover:rotate-12' : 'bg-white/5 text-slate-500' }}">
                                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.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"></path></svg>
                            </div>
                            @if($notification->unread())
                                <div class="absolute -top-1 -right-1 w-4 h-4 bg-slate-950 rounded-full p-1 shadow-sm">
                                    <div class="w-full h-full bg-primary-500 rounded-full animate-ping"></div>
                                </div>
                            @endif
                        </div>

                        <div class="flex-1 space-y-4">
                            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                                <h4 class="font-display font-black text-slate-50 uppercase italic tracking-tight text-xl group-hover:text-primary-400 transition-colors leading-none">{{ $data['title'] ?? 'Transmisi Sistem' }}</h4>
                                <span class="text-[10px] font-black text-slate-500 uppercase tracking-widest italic flex items-center gap-2">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                    {{ $notification->created_at->diffForHumans() }}
                                </span>
                            </div>
                            <p class="text-slate-300 font-medium text-[14px] leading-relaxed max-w-2xl italic">{{ $data['message'] ?? 'Tidak ada deskripsi detail.' }}</p>
                            
                            @if($data['link'] ?? null)
                                <div class="pt-4">
                                    <a href="{{ $data['link'] }}" class="inline-flex items-center gap-4 px-8 py-3 bg-white/10 border border-white/10 rounded-2xl text-white font-black text-[10px] uppercase tracking-widest hover:bg-primary-600 hover:border-primary-500 transition-all shadow-sm italic group/btn">
                                        Eksplorasi Detail <span class="group-hover/btn:translate-x-1 transition-transform">→</span>
                                    </a>
                                </div>
                            @endif
                        </div>

                        @if($notification->unread())
                            <form action="{{ route('notifications.mark-as-read', $notification->id) }}" method="POST" class="absolute top-10 right-10">
                                @csrf
                                <button type="submit" class="w-2.5 h-2.5 rounded-full bg-primary-500 hover:scale-150 transition-transform shadow-lg shadow-primary-500/50" title="Arsip Notifikasi"></button>
                            </form>
                        @endif
                    </div>
                @empty
                    <div class="py-32 text-center bg-slate-900 rounded-[40px] border border-dashed border-white/10 flex flex-col items-center gap-8 animate-premium">
                        <div class="w-20 h-20 bg-white/5 rounded-[32px] flex items-center justify-center text-slate-700 shadow-sm border border-white/10">
                            <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        </div>
                        <div class="space-y-2">
                            <h4 class="text-xl font-display font-black uppercase text-slate-100 italic tracking-widest opacity-50">Feed Senyap</h4>
                            <p class="text-slate-300 text-[10px] font-black uppercase tracking-[0.2em] italic opacity-30">Tidak ada notifikasi baru dalam radar transmisi Anda.</p>
                        </div>
                    </div>
                @endforelse

                @if($notifications->hasPages())
                    <div class="pt-12">
                        {{ $notifications->links() }}
                    </div>
                @endif
            </div>

            <!-- Footer Meta -->
            <div class="mt-20 flex flex-col items-center gap-4 opacity-30 animate-premium">
                <div class="w-12 h-px bg-white/10"></div>
                <p class="text-[9px] font-black text-slate-400 uppercase tracking-[0.4em] italic leading-none">Intelligence Hub v1.0.4.5 — Leasing Pro</p>
            </div>
        </div>
    </div>
</x-app-layout>
