@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.Questions') . ' | ' . __('dashboard.View Question'))

@section('content')
@php
    $teacherName = trim(($question->user->first_name ?? '') . ' ' . ($question->user->last_name ?? ''));
    $groupA = is_array($question->match?->group_a) ? $question->match->group_a : (json_decode($question->match->group_a ?? '[]', true) ?? []);
    $groupB = is_array($question->match?->group_b) ? $question->match->group_b : (json_decode($question->match->group_b ?? '[]', true) ?? []);
    $matchMap = is_array($question->match?->match) ? $question->match->match : (json_decode($question->match->match ?? '[]', true) ?? []);
    $fillBlankPreview = preg_replace('/\[blank\]/', '________', $question->fillBlank->template_text ?? '');
@endphp

<div class="space-y-8">
    <section class="flex flex-col gap-5 rounded-xl p-6 lg:flex-row lg:items-center lg:justify-between">
        <div>
            <p class="text-xs font-black uppercase tracking-[0.28em]">{{ __('dashboard.Question Bank') }}</p>
            <h1 class="mt-3 text-3xl font-black">{{ __('dashboard.View Question') }}</h1>
            <p class="mt-3 max-w-3xl text-sm leading-7">{{ $question->question_text }}</p>
        </div>

        <div class="flex flex-wrap gap-3">
            <a href="{{ route('admin.questions.edit', $question->id) }}" class="inline-flex items-center gap-2 rounded-2xl bg-white px-4 py-2 text-sm font-bold text-brand-700 transition hover:bg-brand-50">
                <i class="fa-solid fa-pen-to-square"></i>
                <span>{{ __('dashboard.Edit') }}</span>
            </a>
            <a href="{{ route('admin.questions.index') }}" class="inline-flex items-center gap-2 rounded-2xl border border-white/20 bg-white/10 px-4 py-2 text-sm font-bold text-white transition hover:bg-white/20">
                <i class="fa-solid fa-list"></i>
                <span>{{ __('dashboard.View All Questions') }}</span>
            </a>
        </div>
    </section>

    <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-sm font-bold text-surface-500 dark:text-surface-400">{{ __('dashboard.Subject') }}</p>
            <p class="mt-3 text-lg font-black text-surface-900 dark:text-white">{{ $question->subject->name ?? '-' }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-sm font-bold text-surface-500 dark:text-surface-400">{{ __('dashboard.Lesson') }}</p>
            <p class="mt-3 text-lg font-black text-surface-900 dark:text-white">{{ $question->lesson->title ?? '-' }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-sm font-bold text-surface-500 dark:text-surface-400">{{ __('dashboard.Type') }}</p>
            <p class="mt-3 text-lg font-black text-surface-900 dark:text-white">{{ ucwords(str_replace('_', ' ', $question->type)) }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-sm font-bold text-surface-500 dark:text-surface-400">{{ __('dashboard.Score') }}</p>
            <p class="mt-3 text-lg font-black text-surface-900 dark:text-white">{{ $question->score ?? '-' }}</p>
        </article>
    </section>

    <section class="grid gap-6 xl:grid-cols-[1.3fr_.7fr]">
        <article class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <div class="flex items-center justify-between gap-3">
                <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ __('dashboard.Question Details') }}</h2>
                @if($question->difficultyLevel)
                    <span class="rounded-full bg-brand-50 px-3 py-1 text-xs font-bold text-brand-700 dark:bg-brand-500/10 dark:text-brand-300">{{ $question->difficultyLevel->name }}</span>
                @endif
            </div>

            <div class="mt-6 space-y-6 text-sm text-surface-700 dark:text-surface-300">
                <div>
                    <p class="font-black text-surface-900 dark:text-white">{{ __('dashboard.Question Text') }}</p>
                    <p class="mt-2 leading-7">{{ $question->question_text }}</p>
                </div>

                @if($question->type === 'true_false')
                    <div>
                        <p class="font-black text-surface-900 dark:text-white">{{ __('dashboard.Correct Answer') }}</p>
                        <div class="mt-3 inline-flex rounded-2xl bg-emerald-50 px-4 py-3 text-sm font-bold text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300">
                            {{ ($question->trueFalse->correct_answer ?? false) ? __('dashboard.True') : __('dashboard.False') }}
                        </div>
                    </div>
                @elseif($question->type === 'mcq')
                    <div>
                        <p class="font-black text-surface-900 dark:text-white">{{ __('dashboard.Choices') }}</p>
                        <div class="mt-3 space-y-2">
                            @foreach(json_decode($question->mcq->choices ?? '[]', true) ?? [] as $index => $choice)
                                <div class="rounded-2xl border px-4 py-3 {{ (string) $index === (string) ($question->mcq->correct_choice ?? '') ? 'border-emerald-300 bg-emerald-50 text-emerald-700 dark:border-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300' : 'border-surface-200 bg-surface-50 text-surface-700 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-200' }}">
                                    {{ $choice }}
                                </div>
                            @endforeach
                        </div>
                    </div>
                @elseif($question->type === 'essay')
                    <div>
                        <p class="font-black text-surface-900 dark:text-white">{{ __('dashboard.Essay Text') }}</p>
                        <div class="mt-3 rounded-xl border border-surface-200 bg-surface-50 px-4 py-4 leading-7 dark:border-surface-700 dark:bg-surface-950">{{ $question->essay->essay_text ?? '' }}</div>
                    </div>
                @elseif($question->type === 'paragraph')
                    <div>
                        <p class="font-black text-surface-900 dark:text-white">{{ __('dashboard.Paragraph Text') }}</p>
                        <div class="mt-3 rounded-xl border border-surface-200 bg-surface-50 px-4 py-4 leading-7 dark:border-surface-700 dark:bg-surface-950">{{ $question->paragraph->paragraph_text ?? '' }}</div>
                    </div>
                @elseif($question->type === 'match')
                    <div class="grid gap-4 md:grid-cols-2">
                        <div>
                            <p class="font-black text-surface-900 dark:text-white">{{ __('dashboard.Group A') }}</p>
                            <div class="mt-3 space-y-2">
                                @foreach($groupA as $item)
                                    <div class="rounded-2xl border border-surface-200 bg-surface-50 px-4 py-3 dark:border-surface-700 dark:bg-surface-950">{{ $item }}</div>
                                @endforeach
                            </div>
                        </div>
                        <div>
                            <p class="font-black text-surface-900 dark:text-white">{{ __('dashboard.Matching Answers') }}</p>
                            <div class="mt-3 space-y-2">
                                @foreach($groupB as $item)
                                    <div class="rounded-2xl border border-surface-200 bg-surface-50 px-4 py-3 dark:border-surface-700 dark:bg-surface-950">
                                        <span class="font-bold">{{ $item }}</span>
                                        <span class="mx-2 text-surface-400">-></span>
                                        <span>{{ $matchMap[$item] ?? '-' }}</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @elseif($question->type === 'audio_text')
                    <div class="space-y-4">
                        <div>
                            <p class="font-black text-surface-900 dark:text-white">{{ app()->getLocale() === 'ar' ? 'نوع الإجابة' : 'Answer Mode' }}</p>
                            <div class="mt-3 inline-flex rounded-2xl bg-sky-50 px-4 py-3 text-sm font-bold text-sky-700 dark:bg-sky-950/30 dark:text-sky-300">
                                {{ app()->getLocale() === 'ar' ? 'الطالب يستمع ثم يكتب الإجابة نصاً' : 'Student listens then answers in text' }}
                            </div>
                        </div>
                        <div>
                            <p class="font-black text-surface-900 dark:text-white">{{ app()->getLocale() === 'ar' ? 'الإجابة المرجعية' : 'Reference Answer' }}</p>
                            <div class="mt-3 rounded-xl border border-surface-200 bg-surface-50 px-4 py-4 leading-7 dark:border-surface-700 dark:bg-surface-950">{{ $question->audioText->reference_answer ?? '—' }}</div>
                        </div>
                    </div>
                @elseif($question->type === 'text_audio')
                    <div class="space-y-4">
                        <div>
                            <p class="font-black text-surface-900 dark:text-white">{{ app()->getLocale() === 'ar' ? 'نوع الإجابة' : 'Answer Mode' }}</p>
                            <div class="mt-3 inline-flex rounded-2xl bg-amber-50 px-4 py-3 text-sm font-bold text-amber-700 dark:bg-amber-950/30 dark:text-amber-300">
                                {{ app()->getLocale() === 'ar' ? 'الطالب يقرأ السؤال ثم يرفع إجابة صوتية' : 'Student reads the prompt then uploads an audio answer' }}
                            </div>
                        </div>
                        <div>
                            <p class="font-black text-surface-900 dark:text-white">{{ app()->getLocale() === 'ar' ? 'الإجابة المرجعية' : 'Reference Answer' }}</p>
                            <div class="mt-3 rounded-xl border border-surface-200 bg-surface-50 px-4 py-4 leading-7 dark:border-surface-700 dark:bg-surface-950">{{ $question->textAudio->reference_answer ?? '—' }}</div>
                        </div>
                    </div>
                @elseif($question->type === 'fill_blank')
                    <div class="space-y-4">
                        <div>
                            <p class="font-black text-surface-900 dark:text-white">{{ app()->getLocale() === 'ar' ? 'نص السؤال' : 'Blank Template' }}</p>
                            <div class="mt-3 rounded-xl border border-surface-200 bg-surface-50 px-4 py-4 leading-8 dark:border-surface-700 dark:bg-surface-950">{{ $fillBlankPreview }}</div>
                        </div>
                        <div>
                            <p class="font-black text-surface-900 dark:text-white">{{ app()->getLocale() === 'ar' ? 'الإجابة المرجعية' : 'Reference Answer' }}</p>
                            <div class="mt-3 rounded-xl border border-surface-200 bg-surface-50 px-4 py-4 leading-7 dark:border-surface-700 dark:bg-surface-950">{{ $question->fillBlank->reference_answer ?? '—' }}</div>
                        </div>
                    </div>
                @endif
            </div>
        </article>

        <aside class="space-y-6">
            <article class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
                <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ __('dashboard.Academic Path') }}</h2>
                <div class="mt-5 space-y-4 text-sm">
                    <div>
                        <p class="font-bold text-surface-500 dark:text-surface-400">{{ __('dashboard.Year') }}</p>
                        <p class="mt-1 text-surface-900 dark:text-white">{{ $question->subject->grade->stage->term->year->name ?? '-' }}</p>
                    </div>
                    <div>
                        <p class="font-bold text-surface-500 dark:text-surface-400">{{ __('dashboard.Term') }}</p>
                        <p class="mt-1 text-surface-900 dark:text-white">{{ $question->subject->grade->stage->term->name ?? '-' }}</p>
                    </div>
                    <div>
                        <p class="font-bold text-surface-500 dark:text-surface-400">{{ __('dashboard.Stage') }}</p>
                        <p class="mt-1 text-surface-900 dark:text-white">{{ $question->subject->grade->stage->name ?? '-' }}</p>
                    </div>
                    <div>
                        <p class="font-bold text-surface-500 dark:text-surface-400">{{ __('dashboard.Grade') }}</p>
                        <p class="mt-1 text-surface-900 dark:text-white">{{ $question->subject->grade->name ?? '-' }}</p>
                    </div>
                    <div>
                        <p class="font-bold text-surface-500 dark:text-surface-400">{{ __('dashboard.Teacher') }}</p>
                        <p class="mt-1 text-surface-900 dark:text-white">{{ $teacherName ?: '-' }}</p>
                    </div>
                </div>
            </article>

            @if($question->media_path)
                <article class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
                    <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ __('dashboard.Media') }}</h2>
                    <p class="mt-2 text-sm text-surface-500 dark:text-surface-400">{{ $question->media_type ?: __('dashboard.Attachment') }}</p>
                    <a href="{{ asset('storage/' . $question->media_path) }}" target="_blank" class="mt-5 inline-flex items-center gap-2 rounded-2xl border border-surface-200 px-4 py-2.5 text-sm font-bold text-surface-700 transition hover:border-brand-300 hover:text-brand-600 dark:border-surface-700 dark:text-surface-200">
                        <i class="fa-solid fa-arrow-up-right-from-square"></i>
                        <span>{{ __('dashboard.Open') }}</span>
                    </a>
                </article>
            @endif
        </aside>
    </section>
</div>
@endsection