@extends('layouts.app')

@section('title', 'Notifications — LoreKeepers')

@section('content')
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-10">

    <h1 class="text-2xl font-bold text-white mb-6">Notifications</h1>

    @if($notifications->isEmpty())
    <div class="text-center py-20">
        <div class="w-16 h-16 rounded-full bg-[#16161d] flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-slate-600" 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>
        <h3 class="text-lg font-medium text-slate-300 mb-2">No notifications yet</h3>
        <p class="text-slate-500">You'll see notifications here when someone follows you.</p>
    </div>
    @else
    <div class="space-y-2">
        @foreach($notifications as $notification)
        <div class="bg-[#16161d] border border-white/5 rounded-xl p-4 flex items-center gap-4 {{ is_null($notification->read_at) ? 'border-purple-500/20 bg-purple-900/10' : '' }}">
            @if($notification->type === 'new_follower')
                @php $data = $notification->data ?? []; @endphp
                <div class="w-10 h-10 rounded-full bg-purple-700 flex items-center justify-center text-sm font-bold text-white flex-shrink-0">
                    {{ strtoupper(substr($data['follower_name'] ?? '?', 0, 1)) }}
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm text-slate-300">
                        @if(!empty($data['follower_slug']))
                        <a href="{{ route('users.show', $data['follower_slug']) }}"
                           class="font-semibold text-white hover:text-purple-300 transition-colors">
                            {{ $data['follower_name'] ?? $data['follower_slug'] }}
                        </a>
                        @else
                        <span class="font-semibold text-white">Someone</span>
                        @endif
                        started following you
                    </p>
                    <p class="text-xs text-slate-600 mt-0.5">{{ $notification->created_at?->diffForHumans() }}</p>
                </div>
                @if(!empty($data['follower_slug']))
                <a href="{{ route('users.show', $data['follower_slug']) }}"
                   class="text-xs text-purple-400 hover:text-purple-300 transition-colors flex-shrink-0">
                    View profile →
                </a>
                @endif
            @else
                <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-slate-400" 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"/>
                    </svg>
                </div>
                <div class="flex-1">
                    <p class="text-sm text-slate-400">{{ $notification->type }}</p>
                    <p class="text-xs text-slate-600 mt-0.5">{{ $notification->created_at?->diffForHumans() }}</p>
                </div>
            @endif
        </div>
        @endforeach
    </div>
    @endif

</div>
@endsection