@extends('student.layouts.app')
@section('title', app()->getLocale() === 'ar' ? 'نتيجة الاختبار' : 'Exam Result')
@section('content')
@php
    $isArabic = app()->getLocale() === 'ar';
    $pct = $attempt->max_score > 0 ? round(($attempt->final_score / $attempt->max_score) * 100) : 0;
    $passed = $pct >= 50;
@endphp

<div class="flex flex-col gap-6">

    {{-- Score card --}}
    <div class="rounded-[2rem] border {{ $passed ? 'border-emerald-200 bg-emerald-50 dark:border-emerald-500/20 dark:bg-emerald-500/10' : 'border-red-200 bg-red-50 dark:border-red-500/20 dark:bg-red-500/10' }} p-8 text-center shadow-sm">
        <p class="text-xs font-black uppercase tracking-[0.24em] {{ $passed ? 'text-emerald-600' : 'text-red-600' }}">
            {{ $passed ? ($isArabic ? 'ناجح' : 'Passed') : ($isArabic ? 'راسب' : 'Failed') }}
        </p>
        <p class="mt-4 text-6xl font-black {{ $passed ? 'text-emerald-700 dark:text-emerald-400' : 'text-red-700 dark:text-red-400' }}">{{ $pct }}%</p>
        <p class="mt-2 text-sm text-zinc-500">
            {{ $attempt->final_score }} / {{ $attempt->max_score }} {{ $isArabic ? 'درجة' : 'pts' }}
        </p>
        @if($attempt->status === 'submitted')
            <p class="mt-3 text-xs text-amber-600 dark:text-amber-400">
                <i class="fa-solid fa-hourglass-half me-1"></i>
                {{ $isArabic ? 'بعض الأسئلة تنتظر مراجعة المعلم' : 'Some answers pending teacher review' }}
            </p>
        @endif
    </div>

    {{-- Stats --}}
    <div class="grid gap-4 sm:grid-cols-3">
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 text-center shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <p class="text-2xl font-black text-zinc-900 dark:text-white">{{ $attempt->auto_score }}</p>
            <p class="mt-1 text-xs font-bold text-zinc-400">{{ $isArabic ? 'درجات تلقائية' : 'Auto Score' }}</p>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 text-center shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <p class="text-2xl font-black text-zinc-900 dark:text-white">
                {{ $attempt->time_spent_seconds ? gmdate('i:s', $attempt->time_spent_seconds) : '—' }}
            </p>
            <p class="mt-1 text-xs font-bold text-zinc-400">{{ $isArabic ? 'الوقت المستغرق' : 'Time Spent' }}</p>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 text-center shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <p class="text-2xl font-black text-zinc-900 dark:text-white">{{ $responses->count() }}</p>
            <p class="mt-1 text-xs font-bold text-zinc-400">{{ $isArabic ? 'أسئلة أجبت عنها' : 'Answered' }}</p>
        </div>
    </div>

    {{-- Per-question review (only for auto_graded/graded) --}}
    @if(in_array($attempt->status, ['auto_graded','graded']) && $attempt->exam->result_visibility !== 'hidden')
    @foreach($attempt->exam->sections as $section)
    <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <h2 class="mb-4 font-black text-zinc-900 dark:text-white">{{ $section->title }}</h2>
        @foreach($section->questions as $sq)
        @php
            $resp = $responses[$sq->id] ?? null;
            $q    = $sq->question;
            $correct = $resp && $resp->auto_score > 0;
        @endphp
        <div class="mb-4 rounded-2xl border {{ $resp ? ($correct ? 'border-emerald-200 bg-emerald-50/50 dark:border-emerald-500/20' : 'border-red-200 bg-red-50/50 dark:border-red-500/20') : 'border-zinc-200 dark:border-zinc-700' }} p-4 last:mb-0">
            <div class="flex items-start justify-between gap-3">
                <p class="text-sm font-bold text-zinc-900 dark:text-white">{{ $q->prompt }}</p>
                @if($resp)
                    <span class="shrink-0 rounded-full px-2 py-0.5 text-xs font-black {{ $correct ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700' }}">
                        {{ $resp->final_score }}/{{ $sq->points }}
                    </span>
                @endif
            </div>
            @if($q->model_answer && !$correct)
                <p class="mt-2 text-xs text-zinc-500">
                    <span class="font-bold">{{ $isArabic ? 'الإجابة الصحيحة:' : 'Correct:' }}</span>
                    {{ $q->model_answer }}
                </p>
            @endif
            @if($resp?->teacher_feedback)
                <p class="mt-2 text-xs text-sky-600 dark:text-sky-400">
                    <i class="fa-solid fa-comment me-1"></i>{{ $resp->teacher_feedback }}
                </p>
            @endif
        </div>
        @endforeach
    </div>
    @endforeach
    @endif

    <div class="text-center">
        <a href="{{ url()->previous() }}"
           class="inline-flex items-center gap-2 rounded-2xl border border-zinc-200 bg-white px-6 py-3 text-sm font-bold text-zinc-700 transition hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200">
            <i class="fa-solid fa-arrow-{{ $isArabic ? 'right' : 'left' }} text-xs"></i>
            {{ $isArabic ? 'رجوع' : 'Back' }}
        </a>
    </div>

</div>
@endsection