@extends('admin.layout')

@section('content')
<div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-3xl font-bold text-gray-800">{{ $researchPaper->title }}</h1>
            <p class="text-gray-600">By {{ $researchPaper->user->first_name }} {{ $researchPaper->user->last_name }}</p>
        </div>
        <div class="flex space-x-3">
            <a href="{{ route('admin.research-papers.index') }}" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center">
                <i class="fas fa-arrow-left mr-2"></i> Back
            </a>
            <a href="{{ route('admin.research-papers.edit', $researchPaper) }}" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center">
                <i class="fas fa-edit mr-2"></i> Edit
            </a>
            <form action="{{ route('admin.research-papers.destroy', $researchPaper) }}" method="POST">
                @csrf
                @method('DELETE')
                <button type="submit" 
                        onclick="return confirm('Are you sure you want to delete this research paper?')"
                        class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg flex items-center">
                    <i class="fas fa-trash mr-2"></i> Delete
                </button>
            </form>
        </div>
    </div>

    <!-- Paper Stats -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-blue-100 text-blue-600">
                    <i class="fas fa-star text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-600">Average Score</h3>
                    <p class="text-3xl font-bold text-gray-800">{{ number_format($stats['average_score'] ?? 0, 1) }}</p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 text-green-600">
                    <i class="fas fa-file-alt text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-600">Total Reviews</h3>
                    <p class="text-3xl font-bold text-gray-800">{{ $stats['total_reviews'] }}</p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-purple-100 text-purple-600">
                    <i class="fas fa-quote-right text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-600">Citations</h3>
                    <p class="text-3xl font-bold text-gray-800">{{ $stats['total_citations'] }}</p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
                    <i class="fas fa-download text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-600">Downloads</h3>
                    <p class="text-3xl font-bold text-gray-800">{{ $stats['total_downloads'] }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Paper Information -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Basic Information -->
            <div class="bg-white rounded-lg shadow">
                <div class="p-4 border-b">
                    <h2 class="text-lg font-semibold text-gray-800">Paper Information</h2>
                </div>
                <div class="p-4">
                    <div class="space-y-4">
                        <div>
                            <label class="text-sm font-medium text-gray-600">Title</label>
                            <p class="text-gray-900">{{ $researchPaper->title }}</p>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Author</label>
                            <p class="text-gray-900">{{ $researchPaper->user->first_name }} {{ $researchPaper->user->last_name }}</p>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Research Field</label>
                            <p class="text-gray-900">{{ $researchPaper->research_field }}</p>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Keywords</label>
                            <div class="flex flex-wrap gap-2 mt-1">
                                @if(is_array($researchPaper->keywords))
                                    @foreach($researchPaper->keywords as $keyword)
                                        <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">{{ $keyword }}</span>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="text-sm font-medium text-gray-600">Status</label>
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $researchPaper->status_badge }}">
                                    {{ ucfirst(str_replace('_', ' ', $researchPaper->status)) }}
                                </span>
                            </div>
                            <div>
                                <label class="text-sm font-medium text-gray-600">Featured</label>
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $researchPaper->is_featured ? 'bg-purple-100 text-purple-800' : 'bg-gray-100 text-gray-800' }}">
                                    {{ $researchPaper->is_featured ? 'Yes' : 'No' }}
                                </span>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="text-sm font-medium text-gray-600">Submitted</label>
                                <p class="text-gray-900">{{ $researchPaper->submitted_at->format('M j, Y') }}</p>
                            </div>
                            <div>
                                <label class="text-sm font-medium text-gray-600">File Size</label>
                                <p class="text-gray-900">{{ $researchPaper->file_size_formatted }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Abstract -->
            <div class="bg-white rounded-lg shadow">
                <div class="p-4 border-b">
                    <h2 class="text-lg font-semibold text-gray-800">Abstract</h2>
                </div>
                <div class="p-4">
                    <p class="text-gray-700 leading-relaxed">{{ $researchPaper->abstract }}</p>
                </div>
            </div>

            <!-- Reviews -->
            @if($researchPaper->reviews->count() > 0)
            <div class="bg-white rounded-lg shadow">
                <div class="p-4 border-b">
                    <h2 class="text-lg font-semibold text-gray-800">Reviews ({{ $researchPaper->reviews->count() }})</h2>
                </div>
                <div class="p-4">
                    <div class="space-y-4">
                        @foreach($researchPaper->reviews as $review)
                        <div class="border rounded-lg p-4">
                            <div class="flex justify-between items-start mb-3">
                                <div>
                                    <p class="font-medium text-gray-800">{{ $review->judge->first_name }} {{ $review->judge->last_name }}</p>
                                    <p class="text-sm text-gray-500">{{ $review->reviewed_at->format('M j, Y') }}</p>
                                </div>
                                <div class="text-right">
                                    <p class="text-lg font-bold text-blue-600">{{ number_format($review->overall_score, 1) }}/10</p>
                                    <span class="px-2 py-1 text-xs rounded-full 
                                        {{ $review->recommendation === 'approve' ? 'bg-green-100 text-green-800' : 
                                           ($review->recommendation === 'minor_revision' ? 'bg-yellow-100 text-yellow-800' : 
                                           ($review->recommendation === 'major_revision' ? 'bg-orange-100 text-orange-800' : 'bg-red-100 text-red-800')) }}">
                                        {{ $review->recommendation_text }}
                                    </span>
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-3 text-center">
                                <div>
                                    <p class="text-sm text-gray-600">Originality</p>
                                    <p class="font-semibold">{{ $review->score_originality }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600">Contribution</p>
                                    <p class="font-semibold">{{ $review->score_contribution }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600">Methodology</p>
                                    <p class="font-semibold">{{ $review->score_methodology }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600">Clarity</p>
                                    <p class="font-semibold">{{ $review->score_clarity }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600">References</p>
                                    <p class="font-semibold">{{ $review->score_references }}</p>
                                </div>
                            </div>
                            
                            <div>
                                <p class="text-sm text-gray-600 mb-1">Comments</p>
                                <p class="text-gray-700">{{ $review->comments }}</p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Actions -->
            <div class="bg-white rounded-lg shadow">
                <div class="p-4 border-b">
                    <h2 class="text-lg font-semibold text-gray-800">Actions</h2>
                </div>
                <div class="p-4 space-y-3">
                    @if($researchPaper->paper_file)
                    <a href="{{ asset('storage/' . $researchPaper->paper_file) }}" 
                       target="_blank"
                       class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center justify-center transition duration-200">
                        <i class="fas fa-eye mr-2"></i> View PDF
                    </a>
                    <a href="{{ asset('storage/' . $researchPaper->paper_file) }}" 
                       download
                       class="w-full bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center justify-center transition duration-200">
                        <i class="fas fa-download mr-2"></i> Download PDF
                    </a>
                    @endif
                    
                    <!-- Add Review Button -->
                    <button onclick="openReviewModal()"
                            class="w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg flex items-center justify-center transition duration-200">
                        <i class="fas fa-plus mr-2"></i> Add Review
                    </button>
                    
                    <!-- Assign Judge -->
                    <form action="{{ route('admin.research-papers.update', $researchPaper) }}" method="POST" class="space-y-2">
                        @csrf
                        @method('PUT')
                        <label class="block text-sm font-medium text-gray-700">Assign Judge</label>
                        <select name="judge_id" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                            <option value="">Select Judge</option>
                            @foreach($judges as $judge)
                                <option value="{{ $judge->id }}" {{ $researchPaper->judge_id == $judge->id ? 'selected' : '' }}>
                                    {{ $judge->first_name }} {{ $judge->last_name }}
                                </option>
                            @endforeach
                        </select>
                        <button type="submit" class="w-full bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm transition duration-200">
                            Update Judge
                        </button>
                    </form>
                </div>
            </div>

            <!-- Citations -->
            @if($researchPaper->citations->count() > 0)
            <div class="bg-white rounded-lg shadow">
                <div class="p-4 border-b">
                    <h2 class="text-lg font-semibold text-gray-800">Citations ({{ $researchPaper->citations->count() }})</h2>
                </div>
                <div class="p-4">
                    <div class="space-y-3">
                        @foreach($researchPaper->citations as $citation)
                        <div class="py-2 border-b last:border-b-0">
                            <p class="font-medium text-gray-800 text-sm">{{ $citation->citedPaper->title ?? 'Unknown Paper' }}</p>
                            <p class="text-xs text-gray-500 mt-1">{{ Str::limit($citation->citation_context, 80) }}</p>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif

            <!-- Video Sessions -->
            @if($researchPaper->videoSessions->count() > 0)
            <div class="bg-white rounded-lg shadow">
                <div class="p-4 border-b">
                    <h2 class="text-lg font-semibold text-gray-800">Video Sessions</h2>
                </div>
                <div class="p-4">
                    <div class="space-y-3">
                        @foreach($researchPaper->videoSessions as $session)
                        <div class="py-2 border-b last:border-b-0">
                            <p class="font-medium text-gray-800 text-sm">Session with {{ $session->judge->first_name }}</p>
                            <p class="text-xs text-gray-500">{{ $session->scheduled_time->format('M j, Y H:i') }}</p>
                            <span class="px-2 py-1 text-xs rounded-full 
                                {{ $session->status === 'scheduled' ? 'bg-blue-100 text-blue-800' : 
                                   ($session->status === 'completed' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800') }}">
                                {{ ucfirst($session->status) }}
                            </span>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

<!-- Review Modal -->
<div id="reviewModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center p-4 border-b">
            <h3 class="text-lg font-semibold">Add Review</h3>
            <button onclick="closeReviewModal()" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="p-4">
            <form action="{{ route('admin.research-papers.reviews.store', $researchPaper) }}" method="POST">
                @csrf
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Judge *</label>
                        <select name="judge_id" class="w-full border border-gray-300 rounded-lg px-3 py-2" required>
                            <option value="">Select Judge</option>
                            @foreach($judges as $judge)
                                <option value="{{ $judge->id }}">{{ $judge->first_name }} {{ $judge->last_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Originality</label>
                            <input type="number" name="score_originality" min="0" max="10" step="0.1" 
                                   class="w-full border border-gray-300 rounded-lg px-3 py-2" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Contribution</label>
                            <input type="number" name="score_contribution" min="0" max="10" step="0.1" 
                                   class="w-full border border-gray-300 rounded-lg px-3 py-2" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Methodology</label>
                            <input type="number" name="score_methodology" min="0" max="10" step="0.1" 
                                   class="w-full border border-gray-300 rounded-lg px-3 py-2" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Clarity</label>
                            <input type="number" name="score_clarity" min="0" max="10" step="0.1" 
                                   class="w-full border border-gray-300 rounded-lg px-3 py-2" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">References</label>
                            <input type="number" name="score_references" min="0" max="10" step="0.1" 
                                   class="w-full border border-gray-300 rounded-lg px-3 py-2" required>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Recommendation *</label>
                        <select name="recommendation" class="w-full border border-gray-300 rounded-lg px-3 py-2" required>
                            <option value="approve">Approve</option>
                            <option value="minor_revision">Minor Revision</option>
                            <option value="major_revision">Major Revision</option>
                            <option value="reject">Reject</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Comments *</label>
                        <textarea name="comments" rows="4" class="w-full border border-gray-300 rounded-lg px-3 py-2" required></textarea>
                    </div>
                </div>
                
                <div class="flex justify-end space-x-4 mt-6">
                    <button type="button" onclick="closeReviewModal()" 
                            class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg">
                        Cancel
                    </button>
                    <button type="submit" 
                            class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg">
                        Submit Review
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function openReviewModal() {
    document.getElementById('reviewModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeReviewModal() {
    document.getElementById('reviewModal').classList.add('hidden');
    document.body.style.overflow = 'auto';
}

// Close modal on ESC key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeReviewModal();
    }
});

// Close modal on background click
document.getElementById('reviewModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeReviewModal();
    }
});
</script>
@endsection