@extends('student.layouts.app')

@section('title', app()->getLocale() === 'ar' ? 'نتيجة الاختبار' : 'Quiz Result')

@section('content')
@php
    $isArabic = app()->getLocale() === 'ar';
@endphp

<div class="space-y-6">
    @include('student.courses.inc.overview', ['course' => $course])
    @include('student.courses.inc.tabs', ['course' => $course])

    <section class="grid gap-6 xl:grid-cols-[minmax(0,1.3fr)_22rem]">
        <div class="space-y-6">
            <div class="student-card overflow-hidden">
                <div class="border-b border-zinc-200 bg-zinc-50 px-6 py-5 dark:border-zinc-800 dark:bg-zinc-950">
                    <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                        <div>
                            <h2 class="text-xl font-black text-zinc-900 dark:text-white">{{ $quiz->title }}</h2>
                            <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
                                {{ $resultReleased
                                    ? ($isArabic ? 'تم تسليم الاختبار، وهذه حالة النتيجة الحالية.' : 'Quiz submitted. This is your current result status.')
                                    : ($isArabic ? 'تم تسليم الاختبار بنجاح، لكن النتيجة مخفية حالياً حتى يسمح المدرس بعرضها.' : 'Quiz submitted successfully, but the result is currently hidden until the teacher releases it.') }}
                            </p>
                        </div>
                        <span class="inline-flex items-center gap-2 rounded-full bg-primary-light px-4 py-2 text-sm font-black text-primary dark:bg-primary/10 dark:text-primary-container">
                            <i class="fa-solid fa-flag-checkered"></i>
                            {{ $summary['status_label'] }}
                        </span>
                    </div>
                </div>

                <div class="grid gap-4 p-6 md:grid-cols-2 xl:grid-cols-4">
                    <div class="rounded-[1.5rem] bg-zinc-50 px-4 py-4 dark:bg-zinc-950">
                        <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'النتيجة' : 'Score' }}</div>
                        <div class="mt-1 text-2xl font-black text-zinc-900 dark:text-white font-numbers">{{ $resultReleased ? ((int) $attempt->student_score . '/' . (int) $quiz->total_marks) : ($isArabic ? 'مخفية' : 'Hidden') }}</div>
                    </div>
                    <div class="rounded-[1.5rem] bg-zinc-50 px-4 py-4 dark:bg-zinc-950">
                        <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'النسبة' : 'Percentage' }}</div>
                        <div class="mt-1 text-2xl font-black text-zinc-900 dark:text-white font-numbers">{{ $resultReleased ? ($summary['percentage'] . '%') : ($isArabic ? 'مخفية' : 'Hidden') }}</div>
                    </div>
                    <div class="rounded-[1.5rem] bg-zinc-50 px-4 py-4 dark:bg-zinc-950">
                        <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'الأسئلة المجابة' : 'Answered' }}</div>
                        <div class="mt-1 text-2xl font-black text-zinc-900 dark:text-white font-numbers">{{ $summary['answered_questions'] }}/{{ $summary['questions_count'] }}</div>
                    </div>
                    <div class="rounded-[1.5rem] bg-zinc-50 px-4 py-4 dark:bg-zinc-950">
                        <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'صحيحة بالكامل' : 'Correct' }}</div>
                        <div class="mt-1 text-2xl font-black text-zinc-900 dark:text-white font-numbers">{{ $resultReleased ? $summary['correct_answers'] : ($isArabic ? 'مخفية' : 'Hidden') }}</div>
                    </div>
                </div>
            </div>

            <div class="student-card p-6">
                <div class="flex items-center justify-between gap-4">
                    <h3 class="text-xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'تفاصيل الأسئلة' : 'Question details' }}</h3>
                    <div class="text-xs font-bold text-zinc-500 dark:text-zinc-400">{{ $resultReleased ? ($isArabic ? 'عرض حالة كل سؤال بعد التسليم' : 'Status of each question after submission') : ($isArabic ? 'التفاصيل الكاملة مخفية حالياً' : 'Full details are currently hidden') }}</div>
                </div>

                @if ($resultReleased)
                    <div class="mt-5 space-y-4">
                        @foreach ($quiz->questions->sortBy('position')->values() as $index => $quizQuestion)
                            @php
                                $question = $quizQuestion->question;
                                $detail = $answerDetails->get($quizQuestion->id);
                                $savedAnswer = $detail?->answer;
                                $status = $detail?->answer_type ?? 'not-solved';
                                $statusText = match ($status) {
                                    'complete' => $isArabic ? 'إجابة صحيحة' : 'Correct answer',
                                    'partial' => $isArabic ? 'إجابة جزئية' : 'Partially correct',
                                    'mistake' => $isArabic ? 'إجابة غير صحيحة' : 'Incorrect answer',
                                    'pending-review' => $isArabic ? 'بانتظار التصحيح' : 'Pending review',
                                    default => $isArabic ? 'بدون إجابة' : 'No answer',
                                };
                                $savedMatchAnswer = is_array($savedAnswer) ? $savedAnswer : (json_decode($savedAnswer ?? '[]', true) ?: []);
                                $correctMatchPairs = is_array($question?->match?->match) ? $question->match->match : [];
                                $savedFillAnswers = is_array($savedAnswer) ? $savedAnswer : (json_decode($savedAnswer ?? '[]', true) ?: []);
                            @endphp
                            @if ($question)
                                <article class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
                                    <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
                                        <div>
                                            <div class="inline-flex items-center gap-2 rounded-full bg-zinc-100 px-3 py-1 text-xs font-black text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300">
                                                <span>{{ $isArabic ? 'سؤال' : 'Question' }}</span>
                                                <span class="font-numbers">{{ $index + 1 }}</span>
                                            </div>
                                            <h4 class="mt-3 text-base font-black text-zinc-900 dark:text-white">{{ $question->question_text }}</h4>
                                        </div>
                                        <span class="rounded-full bg-primary-light px-3 py-1 text-xs font-black text-primary dark:bg-primary/10 dark:text-primary-container">{{ $statusText }}</span>
                                    </div>

                                    <div class="mt-4 grid gap-3 md:grid-cols-2">
                                        <div class="rounded-2xl bg-zinc-50 px-4 py-4 dark:bg-zinc-950">
                                            <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'إجابتك' : 'Your answer' }}</div>
                                            <div class="mt-2 text-sm font-medium leading-7 text-zinc-700 dark:text-zinc-200">
                                                @if (blank($savedAnswer))
                                                    {{ $isArabic ? 'لم يتم تقديم إجابة' : 'No answer submitted' }}
                                                @elseif ($question->type === 'mcq' && $question->mcq)
                                                    {{ $question->mcq->choices[(int) $savedAnswer] ?? $savedAnswer }}
                                                @elseif ($question->type === 'true_false')
                                                    {{ $savedAnswer === '1' ? ($isArabic ? 'صح' : 'True') : ($isArabic ? 'خطأ' : 'False') }}
                                                @elseif ($question->type === 'match')
                                                    <div class="space-y-2">
                                                        @foreach ($savedMatchAnswer as $left => $right)
                                                            <div class="rounded-xl bg-white px-3 py-2 dark:bg-zinc-900">
                                                                <span class="font-black">{{ $left }}</span>
                                                                <span class="mx-2 text-zinc-400">←</span>
                                                                <span>{{ $right ?: '—' }}</span>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @elseif ($question->type === 'text_audio' && filled($savedAnswer))
                                                    <audio controls class="w-full">
                                                        <source src="{{ asset('storage/' . $savedAnswer) }}">
                                                    </audio>
                                                @elseif ($question->type === 'fill_blank')
                                                    <div class="space-y-2">
                                                        @foreach($savedFillAnswers as $blankAnswer)
                                                            <div class="rounded-xl bg-white px-3 py-2 dark:bg-zinc-900">{{ $blankAnswer ?: '—' }}</div>
                                                        @endforeach
@if(($savedFillAnswers)->isEmpty())
                                                            {{ $isArabic ? 'لم يتم تقديم إجابة' : 'No answer submitted' }}
                                                        @endif
                                                    </div>
                                                @else
                                                    {{ $savedAnswer }}
                                                @endif
                                            </div>
                                        </div>
                                        <div class="rounded-2xl bg-zinc-50 px-4 py-4 dark:bg-zinc-950">
                                            <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'الدرجة' : 'Score' }}</div>
                                            <div class="mt-2 text-sm font-black text-zinc-900 dark:text-white font-numbers">{{ (int) ($detail?->student_score ?? 0) }}/{{ $quizQuestion->score }}</div>
                                            @if ($quiz->show_answers_after_submitting)
                                                <div class="mt-3 text-[11px] font-black text-zinc-400">{{ $isArabic ? 'الإجابة الصحيحة / المرجعية' : 'Correct / reference answer' }}</div>
                                                <div class="mt-2 text-sm font-medium leading-7 text-zinc-700 dark:text-zinc-200">
                                                    @if ($question->type === 'mcq' && $question->mcq)
                                                        {{ $question->mcq->choices[$question->mcq->correct_choice] ?? '-' }}
                                                    @elseif ($question->type === 'true_false' && $question->trueFalse)
                                                        {{ $question->trueFalse->correct_answer ? ($isArabic ? 'صح' : 'True') : ($isArabic ? 'خطأ' : 'False') }}
                                                    @elseif ($question->type === 'match')
                                                        <div class="space-y-2">
                                                            @foreach ($correctMatchPairs as $left => $right)
                                                                <div class="rounded-xl bg-white px-3 py-2 dark:bg-zinc-900">
                                                                    <span class="font-black">{{ $left }}</span>
                                                                    <span class="mx-2 text-zinc-400">←</span>
                                                                    <span>{{ $right ?: '—' }}</span>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    @elseif ($question->type === 'audio_text')
                                                        {{ $question->audioText->reference_answer ?? ($isArabic ? 'بانتظار التصحيح اليدوي.' : 'Pending manual review.') }}
                                                    @elseif ($question->type === 'text_audio')
                                                        {{ $question->textAudio->reference_answer ?? ($isArabic ? 'بانتظار التصحيح اليدوي.' : 'Pending manual review.') }}
                                                    @elseif ($question->type === 'fill_blank')
                                                        {{ $question->fillBlank->reference_answer ?? ($isArabic ? 'بانتظار التصحيح اليدوي.' : 'Pending manual review.') }}
                                                    @else
                                                        {{ $isArabic ? 'يتم تحديدها بعد التصحيح أو حسب نوع السؤال.' : 'Available after review or based on question type.' }}
                                                    @endif
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </article>
                            @endif
                        @endforeach
                    </div>
                @else
                    <div class="mt-5 rounded-[1.75rem] border border-dashed border-zinc-300 p-10 text-center dark:border-zinc-700">
                        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-3xl bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-300">
                            <i class="fa-solid fa-eye-slash text-2xl"></i>
                        </div>
                        <h3 class="mt-4 text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'النتيجة غير متاحة حالياً' : 'Result is not available yet' }}</h3>
                        <p class="mt-2 text-sm leading-7 text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'تم استلام إجاباتك بنجاح، لكن تفاصيل النتيجة ستظهر لاحقاً عندما يقوم المدرس بالسماح بعرضها.' : 'Your answers were submitted successfully, but the full result will appear later when the teacher enables result visibility.' }}</p>
                    </div>
                @endif
            </div>
        </div>

        <aside class="space-y-6">
            <div class="student-card p-6">
                <h3 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'حالة النتيجة' : 'Result status' }}</h3>
                <div class="mt-4 space-y-3 text-sm">
                    <div class="rounded-2xl bg-zinc-50 px-4 py-4 dark:bg-zinc-950">
                        <div class="font-black text-zinc-900 dark:text-white">{{ $summary['status_label'] }}</div>
                        <p class="mt-2 leading-7 text-zinc-500 dark:text-zinc-400">
                            @if (! $resultReleased)
                                {{ $isArabic ? 'هذه المحاولة مسلّمة، لكن النتيجة الكاملة مخفية حالياً بحسب إعدادات الاختبار.' : 'This attempt is submitted, but the full result is hidden based on the quiz settings.' }}
                            @elseif ($summary['manual_review_items'] > 0)
                                {{ $isArabic ? 'يوجد سؤال أو أكثر يحتاج تصحيحاً يدوياً، لذلك قد تتغير النتيجة النهائية لاحقاً.' : 'One or more answers need manual review, so the final score may change later.' }}
                            @else
                                {{ $isArabic ? 'تم احتساب النتيجة الحالية مباشرة بعد التسليم.' : 'Your current result was calculated immediately after submission.' }}
                            @endif
                        </p>
                    </div>
                    <div class="rounded-2xl bg-zinc-50 px-4 py-4 dark:bg-zinc-950">
                        <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'مدة الحل' : 'Solving time' }}</div>
                        <div class="mt-1 text-xl font-black text-zinc-900 dark:text-white font-numbers">{{ gmdate('i:s', (int) ($attempt->solution_time ?? 0)) }}</div>
                    </div>
                </div>
            </div>
        </aside>
    </section>
</div>
@endsection