<x-app-layout>

    <x-module-hero
        title="Review Publication"
        description="Evaluate this research publication for approval"
        icon="fa-clipboard-check">

        <x-slot name="backButton">
            <a href="{{ route('research.review.index') }}"
               class="inline-flex items-center gap-1 text-sm text-[#475569] hover:text-[#1e293b] transition-colors">
                <i class="fas fa-arrow-left text-xs"></i> Back to Review Queue
            </a>
        </x-slot>

        <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="p-6">

        @if(session('success'))
        <div class="mb-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

        <div class="flex flex-col lg:flex-row gap-6">

            {{-- Main Column - Publication Content --}}
            <div class="flex-1 space-y-5">

                {{-- Publication Header --}}
                <div class="bg-white rounded-lg border border-gray-200 p-5">
                    <div class="flex items-start gap-4">
                        @if($publication->cover_image)
                        <img src="{{ Storage::url($publication->cover_image) }}"
                             alt="{{ $publication->title }}"
                             class="w-20 h-20 object-cover rounded-lg flex-shrink-0">
                        @else
                        <div class="w-20 h-20 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-file-alt text-gray-400 text-2xl"></i>
                        </div>
                        @endif
                        <div>
                            <div class="flex items-center gap-2 mb-2">
                                <span class="px-2 py-0.5 bg-blue-100 text-blue-700 text-xs font-semibold rounded-full uppercase">
                                    {{ $publication->category_label }}
                                </span>
                            </div>
                            <h2 class="text-lg font-bold text-gray-900 mb-1">{{ $publication->title }}</h2>
                            <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 Author' }}</span>
                                <span><i class="fas fa-calendar mr-1"></i> Submitted {{ $publication->submitted_at?->format('M d, Y') ?? 'N/A' }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Abstract --}}
                <div class="bg-white rounded-lg border border-gray-200 p-5">
                    <h3 class="text-sm font-semibold text-gray-800 mb-3 flex items-center gap-2">
                        <i class="fas fa-align-left text-blue-600"></i> Abstract
                    </h3>
                    <p class="text-gray-700 leading-relaxed text-sm">{{ $publication->abstract }}</p>
                </div>

                @if($publication->methodology)
                <div class="bg-white rounded-lg border border-gray-200 p-5">
                    <h3 class="text-sm font-semibold text-gray-800 mb-3 flex items-center gap-2">
                        <i class="fas fa-cogs text-blue-600"></i> Methodology
                    </h3>
                    <div class="text-gray-700 leading-relaxed whitespace-pre-line text-sm">{{ $publication->methodology }}</div>
                </div>
                @endif

                @if($publication->findings)
                <div class="bg-white rounded-lg border border-gray-200 p-5">
                    <h3 class="text-sm font-semibold text-gray-800 mb-3 flex items-center gap-2">
                        <i class="fas fa-lightbulb text-blue-600"></i> Key Findings
                    </h3>
                    <div class="text-gray-700 leading-relaxed whitespace-pre-line text-sm">{{ $publication->findings }}</div>
                </div>
                @endif

                @if($publication->references)
                <div class="bg-white rounded-lg border border-gray-200 p-5">
                    <h3 class="text-sm font-semibold text-gray-800 mb-3 flex items-center gap-2">
                        <i class="fas fa-book text-blue-600"></i> References
                    </h3>
                    <div class="text-gray-700 leading-relaxed whitespace-pre-line text-xs">{{ $publication->references }}</div>
                </div>
                @endif

                @if($publication->files->count() > 0)
                <div class="bg-white rounded-lg border border-gray-200 p-5">
                    <h3 class="text-sm font-semibold text-gray-800 mb-3 flex items-center gap-2">
                        <i class="fas fa-paperclip text-blue-600"></i> Attached Files ({{ $publication->files->count() }})
                    </h3>
                    <div class="space-y-2">
                        @foreach($publication->files as $file)
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition">
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 rounded-lg bg-blue-100 flex items-center justify-center">
                                    <i class="fas {{ $file->icon }} text-blue-600 text-sm"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-900 text-sm">{{ $file->original_name }}</p>
                                    <p class="text-xs text-gray-500">{{ $file->formatted_size }}</p>
                                </div>
                            </div>
                            <a href="{{ $file->url }}" target="_blank" class="btn-action-download">
                                <i class="fas fa-download"></i> Download
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

            </div>

            {{-- Sidebar - Review Form --}}
            <div class="w-full lg:w-96 flex-shrink-0 space-y-5">

                {{-- Review Form --}}
                <div class="bg-white rounded-lg border border-gray-200 p-5 sticky top-4">
                    <h3 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
                        <i class="fas fa-star text-blue-600"></i> Review Evaluation
                    </h3>

                    <form action="{{ route('research.review.store', $publication) }}" method="POST">
                        @csrf

                        {{-- Criteria --}}
                        <div class="mb-5">
                            <h4 class="text-xs font-semibold text-gray-700 mb-3 uppercase tracking-wide">Rate each criterion (1–5)</h4>
                            <div class="space-y-3">
                                @foreach($criteria as $key => $label)
                                <div class="border border-gray-200 rounded-lg p-3">
                                    <label class="block text-xs font-medium text-gray-700 mb-2">{{ $label }}</label>
                                    <div class="flex items-center gap-2">
                                        @for($i = 1; $i <= 5; $i++)
                                        <label class="cursor-pointer">
                                            <input type="radio" name="criteria[{{ $key }}]" value="{{ $i }}" class="hidden peer">
                                            <span class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-300 peer-checked:bg-blue-600 peer-checked:text-white peer-checked:border-blue-600 hover:bg-gray-100 transition text-xs font-medium">{{ $i }}</span>
                                        </label>
                                        @endfor
                                    </div>
                                    @error("criteria.$key")<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                                </div>
                                @endforeach
                            </div>
                        </div>

                        {{-- Decision --}}
                        <div class="mb-5">
                            <label class="block text-xs font-semibold text-gray-700 mb-2 uppercase tracking-wide">
                                Decision <span class="text-red-500">*</span>
                            </label>
                            <div class="space-y-2">
                                <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                                    <input type="radio" name="decision" value="approve" class="text-green-600 focus:ring-green-500" required>
                                    <span class="ml-3 flex items-center text-sm">
                                        <i class="fas fa-check-circle text-green-600 mr-2"></i> Approve
                                    </span>
                                </label>
                                <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                                    <input type="radio" name="decision" value="request_revision" class="text-yellow-600 focus:ring-yellow-500">
                                    <span class="ml-3 flex items-center text-sm">
                                        <i class="fas fa-edit text-yellow-600 mr-2"></i> Request Revision
                                    </span>
                                </label>
                                <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                                    <input type="radio" name="decision" value="reject" class="text-red-600 focus:ring-red-500">
                                    <span class="ml-3 flex items-center text-sm">
                                        <i class="fas fa-times-circle text-red-600 mr-2"></i> Reject
                                    </span>
                                </label>
                            </div>
                            @error('decision')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                        </div>

                        {{-- Comments --}}
                        <div class="mb-5">
                            <label for="comments" class="block text-xs font-semibold text-gray-700 mb-2 uppercase tracking-wide">
                                Comments <span class="text-red-500">*</span>
                            </label>
                            <textarea id="comments" name="comments" rows="5" required
                                      class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                                      placeholder="Provide detailed feedback for the author...">{{ old('comments') }}</textarea>
                            <p class="mt-1 text-xs text-gray-500">Your feedback will be shared with the author.</p>
                            @error('comments')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                        </div>

                        {{-- Feature Toggle (Super Manager only) --}}
                        @role('Super Manager')
                        <div class="mb-5 p-3 bg-purple-50 border border-purple-200 rounded-lg">
                            <label class="flex items-center cursor-pointer">
                                <input type="checkbox" name="feature" value="1"
                                       class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500">
                                <span class="ml-3 text-xs text-purple-800">
                                    <i class="fas fa-star mr-1"></i> Mark as Featured Publication
                                </span>
                            </label>
                        </div>
                        @endrole

                        <div class="flex gap-3">
                            <a href="{{ route('research.review.index') }}"
                               class="flex-1 px-4 py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-sm font-medium text-center">
                                Cancel
                            </a>
                            <button type="submit"
                                    class="flex-1 px-4 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-sm font-medium">
                                <i class="fas fa-paper-plane mr-2"></i> Submit Review
                            </button>
                        </div>
                    </form>
                </div>

                {{-- Previous Reviews --}}
                @if($publication->reviews->count() > 0)
                <div class="bg-white rounded-lg border border-gray-200 p-5">
                    <h3 class="text-sm font-semibold text-gray-800 mb-3 flex items-center gap-2">
                        <i class="fas fa-history text-blue-600"></i> Previous Reviews
                    </h3>
                    <div class="space-y-3">
                        @foreach($publication->reviews as $review)
                        <div class="border-l-4 {{ $review->isApproved() ? 'border-green-500' : ($review->isRevisionRequested() ? 'border-yellow-500' : 'border-red-500') }} pl-3 py-1">
                            <div class="flex items-center justify-between mb-1">
                                <span class="font-medium text-gray-900 text-xs">{{ $review->reviewer->name ?? 'Unknown' }}</span>
                                <span class="px-2 py-0.5 text-xs font-semibold rounded-full {{ $review->decision_color === 'green' ? 'bg-green-100 text-green-700' : ($review->decision_color === 'yellow' ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700') }}">
                                    {{ $review->decision_label }}
                                </span>
                            </div>
                            @if($review->comments)
                            <p class="text-gray-600 text-xs">{{ Str::limit($review->comments, 100) }}</p>
                            @endif
                            <span class="text-xs text-gray-400">{{ $review->reviewed_at?->format('M d, Y') ?? 'N/A' }}</span>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

            </div>
        </div>
    </div>

</x-app-layout>
