@extends('layouts.admin')

@section('title', 'Examiner Queue')
@section('header-title', 'Examiner Review Queue')

@section('content')
<div class="p-6">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold font-display text-ink-900">Examiner Review Queue</h1>
    </div>

    <div class="grid grid-cols-3 gap-4 mb-6">
        <div class="bg-amber-600/10 border border-yellow-200 rounded p-4 text-center">
            <div class="text-2xl font-bold text-yellow-600">{{ $stats['pending_ai'] }}</div>
            <div class="text-sm text-amber-600">Pending AI</div>
        </div>
        <div class="bg-orange-50 border border-orange-200 rounded p-4 text-center">
            <div class="text-2xl font-bold text-amber-600">{{ $stats['pending_review'] }}</div>
            <div class="text-sm text-orange-700">Needs Review</div>
        </div>
        <div class="bg-ledger-green-700/10 border border-green-200 rounded p-4 text-center">
            <div class="text-2xl font-bold text-ledger-green-700">{{ $stats['approved'] }}</div>
            <div class="text-sm text-ledger-green-700">Approved</div>
        </div>
    </div>

    <form method="GET" class="mb-6 flex gap-4 items-end">
        <div>
            <label class="block text-sm font-medium text-ink-600 mb-1">Subject</label>
            <select name="subject_id" class="border border-graphite-400/50 rounded px-3 py-2 text-sm">
                <option value="">All Subjects</option>
                @php
                    $subjects = \App\Models\Subject::orderBy('name')->get();
                @endphp
                @foreach($subjects as $subject)
                    <option value="{{ $subject->id }}" {{ request('subject_id') == $subject->id ? 'selected' : '' }}>{{ $subject->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium text-ink-600 mb-1">Status</label>
            <select name="status_filter" class="border border-graphite-400/50 rounded px-3 py-2 text-sm">
                <option value="">All Pending</option>
                <option value="pending_review" {{ request('status_filter') == 'pending_review' ? 'selected' : '' }}>Needs Review</option>
                <option value="pending_ai" {{ request('status_filter') == 'pending_ai' ? 'selected' : '' }}>Pending AI</option>
            </select>
        </div>
        <button type="submit" class="bg-ink-600 text-white px-4 py-2 rounded hover:bg-ink-900 text-sm">Filter</button>
        <a href="{{ route('admin.examiner.queue') }}" class="text-graphite-400 hover:text-ink-600 text-sm py-2">Clear</a>
    </form>

    <div class="bg-white border border-graphite-400/30 rounded overflow-hidden">
        <table class="min-w-full divide-y divide-graphite-400/30">
            <thead class="bg-paper-50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Student</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Subject</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Question #</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-graphite-400 uppercase">AI Score</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Confidence</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Status</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Action</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-graphite-400/30">
                @forelse($answers as $answer)
                    <tr>
                        <td class="px-4 py-3 text-sm text-ink-900">
                            {{ $answer->answerSheet->student->name ?? '-' }}
                            <span class="text-graphite-400">({{ $answer->answerSheet->student->roll_number ?? '' }})</span>
                        </td>
                        <td class="px-4 py-3 text-sm text-ink-900">{{ $answer->answerSheet->subject->name ?? '-' }}</td>
                        <td class="px-4 py-3 text-sm text-ink-900">{{ $answer->question->question_number ?? '-' }}</td>
                        <td class="px-4 py-3 text-sm text-ink-900">{{ $answer->ai_score ?? '-' }}</td>
                        <td class="px-4 py-3 text-sm text-ink-900">{{ $answer->ai_confidence ? number_format($answer->ai_confidence * 100, 1) . '%' : '-' }}</td>
                        <td class="px-4 py-3 text-sm">
                            @if($answer->status === 'pending_review')
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-orange-100 text-orange-800">Needs Review</span>
                            @elseif($answer->status === 'pending_ai')
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800">Pending AI</span>
                            @else
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-paper-100 text-ink-900">{{ ucfirst($answer->status) }}</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-sm">
                            <a href="{{ route('admin.examiner.review', $answer) }}" class="text-seal-blue-700 hover:text-blue-800 font-medium">Review</a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="px-4 py-4 text-sm text-graphite-400 text-center">No answers pending review.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-4">
        {{ $answers->links() }}
    </div>
</div>
@endsection