@extends('layouts.admin')

@section('title', 'Review Answer')
@section('header-title', 'Review Answer')

@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">Review Answer</h1>
        <a href="{{ route('admin.examiner.queue') }}" class="text-graphite-400 hover:text-ink-600">&larr; Back to Queue</a>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Left: Question & Info -->
        <div class="space-y-6">
            <div class="bg-white border border-graphite-400/30 rounded p-6">
                <h2 class="text-lg font-semibold text-ink-900 mb-4">Student Information</h2>
                <dl class="grid grid-cols-2 gap-3 text-sm">
                    <div>
                        <dt class="font-medium text-graphite-400">Name</dt>
                        <dd class="text-ink-900">{{ $answer->answerSheet->student->name ?? '-' }}</dd>
                    </div>
                    <div>
                        <dt class="font-medium text-graphite-400">Roll Number</dt>
                        <dd class="text-ink-900">{{ $answer->answerSheet->student->roll_number ?? '-' }}</dd>
                    </div>
                    <div>
                        <dt class="font-medium text-graphite-400">Subject</dt>
                        <dd class="text-ink-900">{{ $answer->answerSheet->subject->name ?? '-' }}</dd>
                    </div>
                    <div>
                        <dt class="font-medium text-graphite-400">Question #</dt>
                        <dd class="text-ink-900">{{ $answer->question->question_number ?? '-' }}</dd>
                    </div>
                </dl>
            </div>

            <div class="bg-white border border-graphite-400/30 rounded p-6">
                <h2 class="text-lg font-semibold text-ink-900 mb-4">Question</h2>
                <div class="text-sm text-ink-900 prose max-w-none">
                    {!! nl2br(e($answer->question->text ?? '')) !!}
                </div>
                <div class="mt-3 text-sm text-graphite-400">
                    Max Marks: <span class="font-semibold text-ink-900">{{ $answer->question->max_marks ?? '-' }}</span>
                    | Type: <span class="font-semibold text-ink-900">{{ ucfirst($answer->question->question_type ?? '-') }}</span>
                </div>
            </div>

            @if($answer->question->model_answer_text)
            <div class="bg-white border border-graphite-400/30 rounded p-6">
                <h2 class="text-lg font-semibold text-ink-900 mb-4">Model Answer</h2>
                <div class="text-sm text-ink-900 prose max-w-none">
                    {!! nl2br(e($answer->question->model_answer_text)) !!}
                </div>
            </div>
            @endif

            @if($answer->question->rubric_json)
            <div class="bg-white border border-graphite-400/30 rounded p-6">
                <h2 class="text-lg font-semibold text-ink-900 mb-4">Rubric</h2>
                <div class="text-sm text-ink-900">
                    @if(is_array($answer->question->rubric_json))
                        <ul class="list-disc list-inside space-y-1">
                            @foreach($answer->question->rubric_json as $key => $value)
                                <li><strong>{{ $key }}:</strong> {{ is_array($value) ? json_encode($value) : $value }}</li>
                            @endforeach
                        </ul>
                    @else
                        {{ $answer->question->rubric_json }}
                    @endif
                </div>
            </div>
            @endif
        </div>

        <!-- Right: Canvas Image & Scoring -->
        <div class="space-y-6">
            <div class="bg-white border border-graphite-400/30 rounded p-6">
                <h2 class="text-lg font-semibold text-ink-900 mb-4">Student's Answer (Canvas)</h2>
                @if($answer->canvas_image_path && file_exists(storage_path('app/private/' . $answer->canvas_image_path)))
                    <img src="{{ asset('storage/' . $answer->canvas_image_path) }}" alt="Student answer canvas"
                         class="w-full border rounded" style="max-height: 600px; object-fit: contain;">
                @elseif($answer->canvas_image_path)
                    <div class="border-2 border-dashed border-graphite-400/50 rounded p-8 text-center text-graphite-400">
                        Image stored at: {{ $answer->canvas_image_path }}
                    </div>
                @else
                    <div class="border-2 border-dashed border-graphite-400/50 rounded p-8 text-center text-graphite-400">
                        No canvas image available
                    </div>
                @endif
            </div>

            <div class="bg-white border border-graphite-400/30 rounded p-6">
                <h2 class="text-lg font-semibold text-ink-900 mb-4">AI Evaluation</h2>
                <dl class="grid grid-cols-2 gap-3 text-sm mb-4">
                    <div>
                        <dt class="font-medium text-graphite-400">AI Score</dt>
                        <dd class="text-xl font-bold text-seal-blue-700">{{ $answer->ai_score ?? '-' }} / {{ $answer->question->max_marks ?? '-' }}</dd>
                    </div>
                    <div>
                        <dt class="font-medium text-graphite-400">Confidence</dt>
                        <dd class="text-xl font-bold {{ ($answer->ai_confidence ?? 0) >= 0.75 ? 'text-ledger-green-700' : 'text-amber-600' }}">
                            {{ $answer->ai_confidence ? number_format($answer->ai_confidence * 100, 1) . '%' : '-' }}
                        </dd>
                    </div>
                </dl>

                @if($answer->examiner_score !== null)
                <div class="bg-ledger-green-700/10 border border-green-200 rounded p-3 mb-4 text-sm">
                    <strong>Current Examiner Score:</strong> {{ $answer->examiner_score }} / {{ $answer->question->max_marks ?? '-' }}
                    @if($answer->examiner)
                        (by {{ $answer->examiner->name }})
                    @endif
                </div>
                @endif
            </div>

            <div class="bg-white border border-graphite-400/30 rounded p-6">
                <h2 class="text-lg font-semibold text-ink-900 mb-4">Submit Your Score</h2>
                <form action="{{ route('admin.examiner.submit-score', $answer) }}" method="POST">
                    @csrf
                    <div class="space-y-4">
                        <div>
                            <label for="examiner_score" class="block text-sm font-medium text-ink-600 mb-1">
                                Your Score (out of {{ $answer->question->max_marks ?? 100 }})
                            </label>
                            <input type="number" name="examiner_score" id="examiner_score" required min="0" max="{{ $answer->question->max_marks ?? 100 }}"
                                   value="{{ old('examiner_score', $answer->ai_score ?? '') }}"
                                   class="border border-graphite-400/50 rounded px-3 py-2 text-sm w-full">
                            @error('examiner_score') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label for="reason" class="block text-sm font-medium text-ink-600 mb-1">Reason (optional)</label>
                            <textarea name="reason" id="reason" rows="3" class="border border-graphite-400/50 rounded px-3 py-2 text-sm w-full"
                                      placeholder="Explain why you adjusted the score...">{{ old('reason') }}</textarea>
                        </div>
                        <button type="submit" class="bg-seal-blue-700 text-white px-6 py-2 rounded hover:bg-seal-blue-700/90 text-sm font-medium">
                            Save Score
                        </button>
                    </div>
                </form>
            </div>

            @if($auditLogs->count())
            <div class="bg-white border border-graphite-400/30 rounded p-6">
                <h2 class="text-lg font-semibold text-ink-900 mb-4">Score History</h2>
                <div class="space-y-3">
                    @foreach($auditLogs as $log)
                        <div class="border-l-4 border-graphite-400/50 pl-3 text-sm">
                            <div class="flex items-center gap-2">
                                <span class="font-medium text-ink-900">{{ $log->examiner->name ?? 'Unknown' }}</span>
                                <span class="text-graphite-400">{{ $log->created_at?->format('Y-m-d H:i') }}</span>
                            </div>
                            <div class="text-ink-600">
                                @if($log->previous_score !== null)
                                    {{ $log->previous_score }} &rarr;
                                @endif
                                <strong>{{ $log->new_score }}</strong>
                            </div>
                            @if($log->reason)
                                <div class="text-graphite-400 italic">{{ $log->reason }}</div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection