@extends('layouts.app')

@section('content')
<div class="flex-1 space-y-6">
    <!-- Breadcrumb -->
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ route('dashboard') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Tất cả thông báo</span>
    </div>
    
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <h1 class="text-3xl font-bold text-slate-900">Thông báo</h1>
        
        @if($unreadCount > 0)
            <form action="{{ route('notifications.markAllRead') }}" method="POST" id="markAllReadForm">
                @csrf
                <button type="submit" class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 !text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors cursor-pointer border-none shadow-none">
                    <i data-lucide="check-check" class="w-4 h-4"></i>
                    Đánh dấu tất cả là đã đọc
                </button>
            </form>
        @endif
    </div>

    <!-- Tabs & Filters -->
    <div class="border-b border-slate-200">
        <nav class="flex gap-8">
            <a href="{{ route('notifications.index', ['filter' => 'all']) }}" 
               class="pb-4 text-sm font-medium transition-colors relative {{ $filter === 'all' ? 'text-blue-600' : 'text-slate-500 hover:text-slate-700' }}">
                Tất cả ({{ $allCount }})
                @if($filter === 'all') <span class="absolute bottom-0 left-0 w-full h-0.5 bg-blue-600"></span> @endif
            </a>
            <a href="{{ route('notifications.index', ['filter' => 'unread']) }}" 
               class="pb-4 text-sm font-medium transition-colors relative {{ $filter === 'unread' ? 'text-blue-600' : 'text-slate-500 hover:text-slate-700' }}">
                Chưa đọc ({{ $unreadCount }})
                @if($filter === 'unread') <span class="absolute bottom-0 left-0 w-full h-0.5 bg-blue-600"></span> @endif
            </a>
            <a href="{{ route('notifications.index', ['filter' => 'read']) }}" 
               class="pb-4 text-sm font-medium transition-colors relative {{ $filter === 'read' ? 'text-blue-600' : 'text-slate-500 hover:text-slate-700' }}">
                Đã đọc ({{ $readCount }})
                @if($filter === 'read') <span class="absolute bottom-0 left-0 w-full h-0.5 bg-blue-600"></span> @endif
            </a>
        </nav>
    </div>

    <!-- Layout Container (No Shadow) -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-0 border border-slate-200 rounded-xl overflow-hidden bg-white">
        
        <!-- Left: List -->
        <div class="lg:col-span-5 border-r border-slate-200 flex flex-col h-[600px]">
            <div class="flex-1 overflow-y-auto custom-scrollbar">
                @forelse($notifications as $notif)
                    <div 
                        class="p-4 border-b border-slate-100 cursor-pointer transition-colors hover:bg-slate-50 {{ !$notif->read_at ? 'bg-blue-50/40' : '' }}"
                        onclick="selectNotification('{{ $notif->id }}', this)"
                        data-id="{{ $notif->id }}"
                        data-url="{{ $notif->data['url'] ?? '#' }}"
                        data-title="{{ $notif->data['title'] ?? 'Thông báo' }}"
                        data-message="{{ $notif->data['message'] ?? '' }}"
                        data-time="{{ $notif->created_at->format('d/m/Y H:i') }}"
                    >
                        <div class="flex gap-4">
                            <div class="flex-shrink-0 w-10 h-10 rounded-full {{ !$notif->read_at ? 'bg-blue-100 text-blue-600' : 'bg-slate-100 text-slate-400' }} flex items-center justify-center">
                                <i data-lucide="{{ !$notif->read_at ? 'bell' : 'bell-off' }}" class="w-5 h-5"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center justify-between gap-2 mb-1">
                                    <h3 class="text-sm font-bold text-slate-900 truncate">{{ $notif->data['title'] ?? 'Thông báo' }}</h3>
                                    @if(!$notif->read_at)
                                        <span class="w-2 h-2 bg-blue-600 rounded-full flex-shrink-0"></span>
                                    @endif
                                </div>
                                <p class="text-xs text-slate-600 line-clamp-2 leading-relaxed">
                                    {{ $notif->data['message'] ?? '' }}
                                </p>
                                <p class="text-[10px] text-slate-400 mt-2 font-medium">
                                    {{ $notif->created_at->diffForHumans() }}
                                </p>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="flex flex-col items-center justify-center h-full text-slate-400 py-20 uppercase tracking-widest text-xs font-bold opacity-50">
                        <i data-lucide="inbox" class="w-12 h-12 mb-4"></i>
                        Trống
                    </div>
                @endforelse
            </div>

            <!-- Custom Pagination Style from Campaign Index -->
            @if($notifications->hasPages())
                <div class="p-4 border-t border-slate-200 bg-slate-50">
                    <div class="flex items-center justify-between gap-2">
                        <div class="text-[11px] text-slate-500 font-medium">
                           Trang {{ $notifications->currentPage() }}/{{ $notifications->lastPage() }}
                        </div>
                        <div class="flex items-center gap-1">
                            @if($notifications->onFirstPage())
                                <span class="p-1 text-slate-300 cursor-not-allowed"><i data-lucide="chevron-left" class="w-4 h-4"></i></span>
                            @else
                                <a href="{{ $notifications->appends(request()->all())->previousPageUrl() }}" class="p-1 text-slate-600 hover:bg-white hover:shadow-sm rounded-md transition-all"><i data-lucide="chevron-left" class="w-4 h-4"></i></a>
                            @endif

                            @if($notifications->hasMorePages())
                                <a href="{{ $notifications->appends(request()->all())->nextPageUrl() }}" class="p-1 text-slate-600 hover:bg-white hover:shadow-sm rounded-md transition-all"><i data-lucide="chevron-right" class="w-4 h-4"></i></a>
                            @else
                                <span class="p-1 text-slate-300 cursor-not-allowed"><i data-lucide="chevron-right" class="w-4 h-4"></i></span>
                            @endif
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <!-- Right: Preview Content -->
        <div class="lg:col-span-7 bg-slate-50/30 flex flex-col items-center justify-center p-8" id="notif-preview-area">
            <div id="preview-placeholder" class="text-center opacity-40">
                <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-6 border border-slate-200">
                    <i data-lucide="mouse-pointer-2" class="w-8 h-8 text-slate-400"></i>
                </div>
                <h2 class="text-lg font-bold text-slate-900">Chọn thông báo</h2>
                <p class="text-sm text-slate-500 mt-2">Chọn một mục ở danh sách bên trái để xem chi tiết.</p>
            </div>

            <div id="preview-content" class="hidden w-full h-full flex flex-col">
                <div class="bg-white border border-slate-200 rounded-xl p-8 flex-1 flex flex-col shadow-none">
                    <div class="flex items-start justify-between gap-6 mb-8">
                        <div class="flex items-center gap-4">
                            <div class="w-14 h-14 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center">
                                <i data-lucide="file-text" class="w-7 h-7"></i>
                            </div>
                            <div>
                                <h2 class="text-2xl font-bold text-slate-900 leading-tight" id="preview-title">...</h2>
                                <p class="text-xs text-slate-400 mt-1 font-bold tracking-wide uppercase" id="preview-time">...</p>
                            </div>
                        </div>
                        <a href="#" id="preview-action" class="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 !text-white rounded-xl text-sm font-bold hover:bg-blue-700 transition-all border-none cursor-pointer shadow-none">
                            Xử lý ngay (Chi tiết)
                            <i data-lucide="external-link" class="w-4 h-4"></i>
                        </a>
                    </div>

                    <div class="flex-1 bg-slate-50 rounded-2xl p-8 border border-slate-100 overflow-y-auto">
                        <p class="text-slate-700 leading-relaxed text-lg whitespace-pre-line font-medium" id="preview-message">
                            ...
                        </p>
                    </div>

                    <div class="mt-8 flex items-center gap-3 p-4 bg-amber-50 rounded-xl border border-amber-100">
                        <i data-lucide="help-circle" class="w-5 h-5 text-amber-500"></i>
                        <p class="text-xs text-amber-800 font-semibold">Tự động đánh dấu là "Đã đọc" khi bạn bấm nút xử lý.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .custom-scrollbar::-webkit-scrollbar { width: 4px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }
    
    .active-notif {
        background-color: #f8fafc !important;
        border-left: 3px solid #3b82f6 !important;
    }

    /* Override global button styles if any */
    #markAllReadForm button, #preview-action {
        text-transform: none !important;
        font-family: inherit !important;
    }
</style>

<script>
    function selectNotification(id, el) {
        // Highlight active
        document.querySelectorAll('[data-id]').forEach(item => {
            item.classList.remove('active-notif');
        });
        el.classList.add('active-notif');

        // Toggle visibility
        document.getElementById('preview-placeholder').classList.add('hidden');
        document.getElementById('notif-preview-area').classList.remove('justify-center'); // top align
        const content = document.getElementById('preview-content');
        content.classList.remove('hidden');

        // Set data
        document.getElementById('preview-title').innerText = el.dataset.title;
        document.getElementById('preview-message').innerText = el.dataset.message;
        document.getElementById('preview-time').innerText = el.dataset.time;
        
        const actionBtn = document.getElementById('preview-action');
        const readUrlTemplate = '{{ route("notifications.read", ":ID") }}';
        actionBtn.href = readUrlTemplate.replace(':ID', id);

        if (typeof lucide !== 'undefined') lucide.createIcons();
    }
</script>
@endsection