<x-app-layout>

    <x-module-hero
        title="Publication Review Queue"
        description="Review and approve research publications submitted for publication"
        icon="fa-clipboard-check">

        <x-slot name="tabs">
            @can('view own publications')
            <a href="{{ route('research.index') }}"
               class="module-hero-tab {{ request()->routeIs('research.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-list text-sm"></i> My Publications
            </a>
            @endcan
            @can('create publications')
            <a href="{{ route('research.create') }}"
               class="module-hero-tab {{ request()->routeIs('research.create') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-plus text-sm"></i> New Publication
            </a>
            @endcan
            @can('review publications')
            <a href="{{ route('research.review.index') }}"
               class="module-hero-tab {{ request()->routeIs('research.review.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-clipboard-check text-sm"></i> Review Queue
            </a>
            @endcan
        </x-slot>

    </x-module-hero>

    <div class="w-full">

        @if(session('success'))
        <div class="mx-6 mt-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center text-sm">
            <i class="fas fa-check-circle mr-3"></i> {{ session('success') }}
        </div>
        @endif

        {{-- Stats Cards --}}
        @can('view statistics')
        <div class="p-4 grid grid-cols-2 md:grid-cols-4 gap-4 bg-gray-50 border-b border-gray-200">
            <div class="bg-white rounded-lg border border-gray-200 p-4">
                <p class="text-xs text-gray-500 font-semibold uppercase tracking-wide">Pending Review</p>
                <p class="text-2xl font-bold text-gray-900 mt-1">{{ $stats['pending'] ?? 0 }}</p>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-4">
                <p class="text-xs text-gray-500 font-semibold uppercase tracking-wide">My Reviews</p>
                <p class="text-2xl font-bold text-gray-900 mt-1">{{ $stats['my_reviews'] ?? 0 }}</p>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-4">
                <p class="text-xs text-gray-500 font-semibold uppercase tracking-wide">Approved Today</p>
                <p class="text-2xl font-bold text-gray-900 mt-1">{{ $stats['approved_today'] ?? 0 }}</p>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-4">
                <p class="text-xs text-gray-500 font-semibold uppercase tracking-wide">Total Reviewed</p>
                <p class="text-2xl font-bold text-gray-900 mt-1">{{ $stats['total_reviewed'] ?? 0 }}</p>
            </div>
        </div>
        @endcan

        {{-- Filter Bar --}}
        <div class="p-4 bg-white border-b border-gray-200">
            <form action="{{ route('research.review.index') }}" method="GET" class="flex flex-wrap gap-3 items-end">
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">Category</label>
                    <select name="category" class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                        <option value="">All Categories</option>
                        <option value="clinical" {{ ($filters['category'] ?? '') === 'clinical' ? 'selected' : '' }}>Clinical Research</option>
                        <option value="tech"     {{ ($filters['category'] ?? '') === 'tech'     ? 'selected' : '' }}>Technology & Innovation</option>
                        <option value="social"   {{ ($filters['category'] ?? '') === 'social'   ? 'selected' : '' }}>Social Sciences</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">Submitted From</label>
                    <input type="date" name="submitted_from" value="{{ $filters['submitted_from'] ?? '' }}"
                           class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">Submitted To</label>
                    <input type="date" name="submitted_to" value="{{ $filters['submitted_to'] ?? '' }}"
                           class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="flex gap-2">
                    <button type="submit" class="px-4 py-2 bg-blue-700 text-white text-sm rounded-lg hover:bg-blue-800 transition">
                        <i class="fas fa-filter mr-1"></i> Filter
                    </button>
                    @if(!empty($filters['category']) || !empty($filters['submitted_from']))
                    <a href="{{ route('research.review.index') }}" class="px-4 py-2 bg-gray-100 text-gray-700 text-sm rounded-lg hover:bg-gray-200 transition">
                        Clear
                    </a>
                    @endif
                </div>
            </form>
        </div>

        {{-- Queue List --}}
        <div class="p-4 space-y-4">
            @forelse($queue as $publication)
            <div class="bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-md transition-shadow">
                <div class="flex flex-col md:flex-row">
                    <div class="w-full md:w-40 h-28 md:h-auto flex-shrink-0">
                        @if($publication->cover_image)
                        <img src="{{ Storage::url($publication->cover_image) }}"
                             alt="{{ $publication->title }}"
                             class="w-full h-full object-cover">
                        @else
                        <div class="w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center">
                            <i class="fas fa-file-alt text-gray-400 text-3xl"></i>
                        </div>
                        @endif
                    </div>
                    <div class="flex-1 p-5">
                        <div class="flex items-start justify-between gap-4 mb-3">
                            <div>
                                <div class="flex items-center gap-2 mb-1">
                                    <span class="px-2 py-0.5 bg-blue-100 text-blue-700 text-xs font-semibold rounded-full uppercase">
                                        {{ $publication->category_label }}
                                    </span>
                                    <span class="text-xs text-gray-500">
                                        Submitted {{ $publication->submitted_at?->diffForHumans() ?? 'N/A' }}
                                    </span>
                                </div>
                                <h3 class="text-base font-bold text-gray-900">{{ $publication->title }}</h3>
                            </div>
                        </div>
                        <p class="text-gray-600 text-sm mb-4 line-clamp-2">{{ Str::limit($publication->abstract, 200) }}</p>
                        <div class="flex flex-wrap items-center justify-between gap-3">
                            <div class="flex items-center gap-4 text-xs text-gray-500">
                                <span><i class="fas fa-user mr-1"></i> {{ $publication->user->name ?? 'Unknown' }}</span>
                                <span><i class="fas fa-paperclip mr-1"></i> {{ $publication->files->count() }} file(s)</span>
                                <span><i class="fas fa-clock mr-1"></i> Waiting {{ $publication->submitted_at?->diffInDays() ?? 0 }} days</span>
                            </div>
                            <div class="flex items-center gap-2">
                                @role('Super Manager')
                                <button type="button" onclick="quickApprove({{ $publication->id }})"
                                        class="btn-action-approve">
                                    <i class="fas fa-check"></i> Quick Approve
                                </button>
                                @endrole
                                <a href="{{ route('research.review.show', $publication) }}" class="btn-action-view">
                                    <i class="fas fa-clipboard-check"></i> Review
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div class="text-center py-16 bg-white rounded-lg border border-gray-200">
                <i class="fas fa-inbox text-gray-300 text-5xl mb-4"></i>
                <h3 class="text-lg font-semibold text-gray-700 mb-2">Queue is empty</h3>
                <p class="text-gray-500 text-sm">
                    @if(!empty($filters['category']) || !empty($filters['submitted_from']))
                        No publications match your filter criteria.
                    @else
                        All submissions have been reviewed!
                    @endif
                </p>
                @if(!empty($filters['category']) || !empty($filters['submitted_from']))
                <a href="{{ route('research.review.index') }}" class="mt-4 inline-block text-blue-600 hover:text-blue-700 text-sm font-medium">
                    Clear all filters
                </a>
                @endif
            </div>
            @endforelse
        </div>

        @if($queue->hasPages())
        <div class="px-4 py-3 border-t border-gray-200 bg-white">
            {{ $queue->withQueryString()->links() }}
        </div>
        @endif

    </div>

</x-app-layout>

@push('scripts')
<script>
function quickApprove(publicationId) {
    if (!confirm('Quick approve this publication?')) return;
    fetch(`/dashboard/research/review/${publicationId}/quick-approve`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        }
    })
    .then(r => r.json())
    .then(data => { if (data.success) location.reload(); else alert('Failed: ' + data.message); })
    .catch(() => alert('An error occurred.'));
}
</script>
@endpush
