@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">{{ $user->first_name }} {{ $user->last_name }}</h1>
            <p class="text-gray-600">{{ $user->email }}</p>
        </div>
        <div class="flex space-x-3">
            <a href="{{ route('admin.users.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.users.edit', $user) }}" 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.users.toggle-status', $user) }}" method="POST">
                @csrf
                @method('PATCH')
                <button type="submit" 
                        class="bg-{{ $user->is_active ? 'orange' : 'blue' }}-600 hover:bg-{{ $user->is_active ? 'orange' : 'blue' }}-700 text-white px-4 py-2 rounded-lg flex items-center">
                    <i class="fas {{ $user->is_active ? 'fa-user-slash' : 'fa-user-check' }} mr-2"></i>
                    {{ $user->is_active ? 'Deactivate' : 'Activate' }}
                </button>
            </form>
            @if($user->id !== auth()->id())
            <form action="{{ route('admin.users.destroy', $user) }}" method="POST">
                @csrf
                @method('DELETE')
                <button type="submit" 
                        onclick="return confirm('Are you sure you want to delete this user?')"
                        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>
            @endif
        </div>
    </div>

    <!-- User 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-file-alt text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-600">Test Sessions</h3>
                    <p class="text-3xl font-bold text-gray-800">{{ $testStats['total_sessions'] }}</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">Completed</h3>
                    <p class="text-3xl font-bold text-gray-800">{{ $testStats['completed_sessions'] }}</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($testStats['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-yellow-100 text-yellow-600">
                    <i class="fas fa-file-pdf text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-600">Research Papers</h3>
                    <p class="text-3xl font-bold text-gray-800">{{ $testStats['total_research_papers'] }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- User 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">Basic Information</h2>
                </div>
                <div class="p-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="text-sm font-medium text-gray-600">Full Name</label>
                            <p class="text-gray-900">{{ $user->first_name }} {{ $user->last_name }}</p>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Email</label>
                            <p class="text-gray-900">{{ $user->email }}</p>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Date of Birth</label>
                            <p class="text-gray-900">{{ $user->date_of_birth->format('M j, Y') }}</p>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Role</label>
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                {{ $user->role === 'admin' ? 'bg-red-100 text-red-800' : 
                                   ($user->role === 'judge' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800') }}">
                                {{ ucfirst($user->role) }}
                            </span>
                        </div>
                        <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 
                                {{ $user->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                {{ $user->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Member Since</label>
                            <p class="text-gray-900">{{ $user->created_at->format('M j, Y') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Location Information -->
            <div class="bg-white rounded-lg shadow">
                <div class="p-4 border-b">
                    <h2 class="text-lg font-semibold text-gray-800">Location Information</h2>
                </div>
                <div class="p-4">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="text-sm font-medium text-gray-600">School</label>
                            <p class="text-gray-900">{{ $user->school }}</p>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Country</label>
                            <p class="text-gray-900">{{ $user->country }}</p>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">City</label>
                            <p class="text-gray-900">{{ $user->city }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Subject Registrations -->
            @if($user->subjectRegistrations->count() > 0)
            <div class="bg-white rounded-lg shadow">
                <div class="p-4 border-b">
                    <h2 class="text-lg font-semibold text-gray-800">Subject Registrations</h2>
                </div>
                <div class="p-4">
                    <div class="space-y-3">
                        @foreach($user->subjectRegistrations as $registration)
                        <div class="flex justify-between items-center py-2 border-b last:border-b-0">
                            <div>
                                <p class="font-medium text-gray-800">{{ $registration->subject->name }}</p>
                                <p class="text-sm text-gray-600">Level: {{ $registration->competitionLevel->name ?? 'N/A' }}</p>
                            </div>
                            <span class="px-2 py-1 text-xs rounded-full 
                                {{ $registration->payment_status === 'completed' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                                {{ ucfirst($registration->payment_status) }}
                            </span>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Student ID Card -->
            <div class="bg-white rounded-lg shadow">
                <div class="p-4 border-b">
                    <h2 class="text-lg font-semibold text-gray-800 flex items-center">
                        <i class="fas fa-id-card text-blue-600 mr-2"></i>
                        Student ID Card
                    </h2>
                </div>
                <div class="p-4">
                    @if($user->student_id_image)
                    <div class="text-center">
                        <div class="relative inline-block">
                            <img src="{{ asset('storage/' . $user->student_id_image) }}" 
                                 alt="Student ID" 
                                 class="h-40 w-auto rounded-lg border-2 border-blue-200 shadow-md cursor-pointer transform hover:scale-105 transition duration-200"
                                 onclick="openImageModal('{{ asset('storage/' . $user->student_id_image) }}')">
                            <div class="absolute top-2 right-2 bg-blue-100 text-blue-800 rounded-full p-1">
                                <i class="fas fa-check text-xs"></i>
                            </div>
                        </div>
                        <p class="text-sm text-gray-600 mt-3">Verified Student ID</p>
                        <div class="flex justify-center space-x-2 mt-3">
                            <button onclick="openImageModal('{{ asset('storage/' . $user->student_id_image) }}')" 
                                    class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-lg text-sm flex items-center transition duration-200">
                                <i class="fas fa-eye mr-1"></i> View
                            </button>
                            <a href="{{ asset('storage/' . $user->student_id_image) }}" 
                               download 
                               class="bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded-lg text-sm flex items-center transition duration-200">
                                <i class="fas fa-download mr-1"></i> Download
                            </a>
                        </div>
                        <p class="text-xs text-gray-500 mt-2">Uploaded: {{ $user->created_at->format('M j, Y') }}</p>
                    </div>
                    @else
                    <div class="text-center py-6">
                        <div class="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-3">
                            <i class="fas fa-id-card text-gray-400 text-2xl"></i>
                        </div>
                        <p class="text-gray-500 font-medium mb-2">No Student ID Uploaded</p>
                        <p class="text-sm text-gray-400 mb-4">Student has not uploaded their ID card yet</p>
                        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
                            <div class="flex items-center">
                                <i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i>
                                <span class="text-sm text-yellow-700">Verification pending</span>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Recent Test Sessions -->
            <div class="bg-white rounded-lg shadow">
                <div class="p-4 border-b">
                    <h2 class="text-lg font-semibold text-gray-800">Recent Test Sessions</h2>
                </div>
                <div class="p-4">
                    @if($user->testSessions->count() > 0)
                    <div class="space-y-3">
                        @foreach($user->testSessions->take(5) as $session)
                        <div class="py-2 border-b last:border-b-0">
                            <p class="font-medium text-gray-800 text-sm">{{ $session->test->title ?? 'N/A' }}</p>
                            <div class="flex justify-between items-center mt-1">
                                <span class="px-2 py-1 text-xs rounded-full 
                                    {{ $session->status === 'completed' ? 'bg-green-100 text-green-800' : 
                                       ($session->status === 'in_progress' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800') }}">
                                    {{ ucfirst(str_replace('_', ' ', $session->status)) }}
                                </span>
                                @if($session->total_score)
                                <span class="text-sm font-medium text-gray-700">{{ $session->total_score }} pts</span>
                                @endif
                            </div>
                            <p class="text-xs text-gray-500 mt-1">{{ $session->created_at->format('M j, Y') }}</p>
                        </div>
                        @endforeach
                    </div>
                    @else
                    <p class="text-gray-500 text-center py-4">No test sessions yet</p>
                    @endif
                </div>
            </div>

            <!-- Research Papers -->
            @if($user->researchPapers->count() > 0)
            <div class="bg-white rounded-lg shadow">
                <div class="p-4 border-b">
                    <h2 class="text-lg font-semibold text-gray-800">Research Papers</h2>
                </div>
                <div class="p-4">
                    <div class="space-y-3">
                        @foreach($user->researchPapers->take(3) as $paper)
                        <div class="py-2 border-b last:border-b-0">
                            <p class="font-medium text-gray-800 text-sm">{{ Str::limit($paper->title, 50) }}</p>
                            <p class="text-xs text-gray-500 mt-1">{{ $paper->created_at->format('M j, Y') }}</p>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif

            <!-- Judge Sessions -->
            @if($user->videoSessionsAsJudge->count() > 0)
            <div class="bg-white rounded-lg shadow">
                <div class="p-4 border-b">
                    <h2 class="text-lg font-semibold text-gray-800">Judge Sessions</h2>
                </div>
                <div class="p-4">
                    <div class="space-y-3">
                        @foreach($user->videoSessionsAsJudge->take(3) as $session)
                        <div class="py-2 border-b last:border-b-0">
                            <p class="font-medium text-gray-800 text-sm">Research Paper Review</p>
                            <p class="text-xs text-gray-500 mt-1">{{ $session->scheduled_time->format('M j, Y H:i') }}</p>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

<!-- Image Modal -->
<div id="imageModal" 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-4xl max-h-full overflow-auto">
        <div class="flex justify-between items-center p-4 border-b">
            <h3 class="text-lg font-semibold">Student ID Photo</h3>
            <button onclick="closeImageModal()" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="p-4">
            <img id="modalImage" src="" alt="Student ID" class="max-w-full h-auto">
        </div>
    </div>
</div>

<script>
function openImageModal(imageUrl) {
    document.getElementById('modalImage').src = imageUrl;
    document.getElementById('imageModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

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

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

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

<style>
#imageModal {
    backdrop-filter: blur(4px);
}
</style>
@endsection