@extends('admin.layout')

@section('content')
<div class="mb-6">
    <h1 class="text-3xl font-bold text-gray-800">Research Papers Analytics</h1>
    <p class="text-gray-600">Comprehensive analytics and insights about research papers</p>
</div>

<!-- Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <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-file-pdf text-xl"></i>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-semibold text-gray-600">Total Papers</h3>
                <p class="text-3xl font-bold text-gray-800">{{ $totalPapers }}</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-check-circle text-xl"></i>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-semibold text-gray-600">Published</h3>
                <p class="text-3xl font-bold text-gray-800">{{ $publishedPapers }}</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-clock text-xl"></i>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-semibold text-gray-600">Pending Review</h3>
                <p class="text-3xl font-bold text-gray-800">{{ $pendingReview }}</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-chart-line text-xl"></i>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-semibold text-gray-600">Avg Score</h3>
                <p class="text-3xl font-bold text-gray-800">{{ number_format($avgScore, 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-red-100 text-red-600">
                <i class="fas fa-download text-xl"></i>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-semibold text-gray-600">Total Downloads</h3>
                <p class="text-3xl font-bold text-gray-800">{{ $totalDownloads }}</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-indigo-100 text-indigo-600">
                <i class="fas fa-quote-right text-xl"></i>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-semibold text-gray-600">Total Citations</h3>
                <p class="text-3xl font-bold text-gray-800">{{ $totalCitations }}</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-pink-100 text-pink-600">
                <i class="fas fa-eye text-xl"></i>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-semibold text-gray-600">Under Review</h3>
                <p class="text-3xl font-bold text-gray-800">{{ $underReview }}</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-teal-100 text-teal-600">
                <i class="fas fa-star text-xl"></i>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-semibold text-gray-600">Featured Papers</h3>
                <p class="text-3xl font-bold text-gray-800">{{ \App\Models\ResearchPaper::where('is_featured', true)->count() }}</p>
            </div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <!-- Papers by Status -->
    <div class="bg-white rounded-lg shadow">
        <div class="p-4 border-b">
            <h2 class="text-lg font-semibold text-gray-800">Papers by Status</h2>
        </div>
        <div class="p-4">
            <div class="space-y-4">
                @foreach($papersByStatus as $status)
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="w-3 h-3 rounded-full mr-3 
                            {{ $status->status === 'published' ? 'bg-green-500' : 
                               ($status->status === 'under_review' ? 'bg-yellow-500' : 
                               ($status->status === 'pending' ? 'bg-blue-500' : 
                               ($status->status === 'approved' ? 'bg-teal-500' : 
                               ($status->status === 'rejected' ? 'bg-red-500' : 'bg-purple-500')))) }}"></div>
                        <span class="text-sm font-medium text-gray-700 capitalize">
                            {{ str_replace('_', ' ', $status->status) }}
                        </span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="text-sm font-bold text-gray-900">{{ $status->count }}</span>
                        <span class="text-xs text-gray-500">
                            ({{ number_format(($status->count / $totalPapers) * 100, 1) }}%)
                        </span>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Top Research Fields -->
    <div class="bg-white rounded-lg shadow">
        <div class="p-4 border-b">
            <h2 class="text-lg font-semibold text-gray-800">Top Research Fields</h2>
        </div>
        <div class="p-4">
            <div class="space-y-4">
                @foreach($papersByField as $field)
                <div class="flex justify-between items-center">
                    <span class="text-sm font-medium text-gray-700">{{ $field->research_field }}</span>
                    <div class="flex items-center space-x-2">
                        <span class="text-sm font-bold text-gray-900">{{ $field->count }}</span>
                        <span class="text-xs text-gray-500">
                            ({{ number_format(($field->count / $totalPapers) * 100, 1) }}%)
                        </span>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<!-- Monthly Submissions Chart -->
<div class="bg-white rounded-lg shadow mb-6">
    <div class="p-4 border-b">
        <h2 class="text-lg font-semibold text-gray-800">Monthly Submissions (Last 12 Months)</h2>
    </div>
    <div class="p-4">
        @if($monthlySubmissions->count() > 0)
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Month</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Submissions</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($monthlySubmissions->reverse() as $submission)
                    @php
                        $maxSubmissions = $monthlySubmissions->max('count');
                        $percentage = $maxSubmissions > 0 ? ($submission->count / $maxSubmissions) * 100 : 0;
                    @endphp
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            {{ DateTime::createFromFormat('!m', $submission->month)->format('F') }} {{ $submission->year }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            {{ $submission->count }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-blue-600 h-2 rounded-full" style="width: {{ $percentage }}%"></div>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
        <p class="text-gray-500 text-center py-4">No submission data available.</p>
        @endif
    </div>
</div>

<!-- Recent Activity -->
<div class="bg-white rounded-lg shadow">
    <div class="p-4 border-b">
        <h2 class="text-lg font-semibold text-gray-800">Recent Activity</h2>
    </div>
    <div class="p-4">
        <div class="space-y-4">
            <!-- Recent Published Papers -->
            <div>
                <h3 class="text-md font-semibold text-gray-700 mb-3">Recently Published</h3>
                <div class="space-y-2">
                    @php $recentPublished = \App\Models\ResearchPaper::published()->latest('published_at')->take(3)->get(); @endphp
                    @forelse($recentPublished as $paper)
                    <div class="flex justify-between items-center py-2 border-b">
                        <div>
                            <p class="font-medium text-gray-800 text-sm">{{ Str::limit($paper->title, 60) }}</p>
                            <p class="text-xs text-gray-500">{{ $paper->user->first_name }} {{ $paper->user->last_name }} • {{ $paper->published_at->format('M j, Y') }}</p>
                        </div>
                        <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Published</span>
                    </div>
                    @empty
                    <p class="text-gray-500 text-sm">No recently published papers.</p>
                    @endforelse
                </div>
            </div>

            <!-- Papers Needing Review -->
            <div>
                <h3 class="text-md font-semibold text-gray-700 mb-3">Awaiting Review</h3>
                <div class="space-y-2">
                    @php $awaitingReview = \App\Models\ResearchPaper::whereIn('status', ['pending', 'under_review'])->latest()->take(3)->get(); @endphp
                    @forelse($awaitingReview as $paper)
                    <div class="flex justify-between items-center py-2 border-b">
                        <div>
                            <p class="font-medium text-gray-800 text-sm">{{ Str::limit($paper->title, 60) }}</p>
                            <p class="text-xs text-gray-500">{{ $paper->user->first_name }} {{ $paper->user->last_name }} • {{ $paper->submitted_at->format('M j, Y') }}</p>
                        </div>
                        <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">
                            {{ ucfirst(str_replace('_', ' ', $paper->status)) }}
                        </span>
                    </div>
                    @empty
                    <p class="text-gray-500 text-sm">No papers awaiting review.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Export Options -->
<div class="mt-6 bg-white rounded-lg shadow p-6">
    <h3 class="text-lg font-semibold text-gray-800 mb-4">Export Analytics</h3>
    <div class="flex space-x-4">
        <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
            <i class="fas fa-file-excel mr-2"></i> Export to Excel
        </button>
        <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center">
            <i class="fas fa-file-pdf mr-2"></i> Export to PDF
        </button>
        <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg flex items-center">
            <i class="fas fa-chart-bar mr-2"></i> Generate Report
        </button>
    </div>
</div>

<style>
.progress-bar {
    transition: width 0.5s ease-in-out;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Animate progress bars
    const progressBars = document.querySelectorAll('.bg-blue-600');
    progressBars.forEach(bar => {
        const width = bar.style.width;
        bar.style.width = '0';
        setTimeout(() => {
            bar.style.width = width;
        }, 100);
    });
});
</script>
@endsection