@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'تحليلات بنك الأسئلة' : 'Question Bank Analytics')
@section('page_heading', app()->getLocale() === 'ar' ? 'تحليلات بنك الأسئلة' : 'Question Bank Analytics')
@section('page_subtitle', app()->getLocale() === 'ar' ? 'تحليلات البنك في صفحة مستقلة بدل تكديسها مع القائمة.' : 'Question bank analytics in a separate page instead of crowding the list.')
@section('skip_page_hero', true)

@php
    $isArabic = app()->getLocale() === 'ar';
    $stats = $questionBankData['stats'];
    $typeBreakdown = $questionBankData['type_breakdown'];
    $difficultyBreakdown = $questionBankData['difficulty_breakdown'];
    $typeLabels = $questionBankData['type_labels'];
    $typeIcons = $questionBankData['type_icons'];
@endphp

@section('content')
<div class="space-y-6">
    <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
            <div class="space-y-2">
                <h2 class="text-2xl font-black tracking-tight text-surface-900 dark:text-white">{{ $isArabic ? 'تحليلات بنك الأسئلة' : 'Question bank analytics' }}</h2>
                <p class="max-w-2xl text-sm leading-7 text-surface-500 dark:text-surface-400">
                    {{ $isArabic ? 'التحليلات العامة لأنواع الأسئلة والصعوبة والوسائط والتصحيح تم فصلها هنا لتصبح القراءة أسرع وأوضح.' : 'General analytics for types, difficulty, media usage, and correction modes live here for faster and clearer review.' }}
                </p>
            </div>

            @include('admin.questions._navigation')
        </div>
    </section>

    <section class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="border-b border-surface-200 bg-surface-50/80 px-6 py-5 dark:border-surface-800 dark:bg-surface-800/30">
            <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'المؤشرات العامة' : 'General indicators' }}</h2>
        </div>
        <div class="grid gap-4 px-6 py-6 md:grid-cols-2 xl:grid-cols-5">
            <div class="rounded-2xl border border-surface-200 bg-white px-4 py-4 dark:border-surface-700 dark:bg-surface-900">
                <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'إجمالي الأسئلة' : 'Total questions' }}</p>
                <p class="mt-2 text-2xl font-black text-surface-900 dark:text-white">{{ $stats['total_questions'] }}</p>
            </div>
            <div class="rounded-2xl border border-surface-200 bg-white px-4 py-4 dark:border-surface-700 dark:bg-surface-900">
                <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'المواد المغطاة' : 'Covered subjects' }}</p>
                <p class="mt-2 text-2xl font-black text-surface-900 dark:text-white">{{ $stats['total_subjects'] }}</p>
            </div>
            <div class="rounded-2xl border border-surface-200 bg-white px-4 py-4 dark:border-surface-700 dark:bg-surface-900">
                <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'تصحيح يدوي' : 'Manual review' }}</p>
                <p class="mt-2 text-2xl font-black text-surface-900 dark:text-white">{{ $stats['manual_review_questions'] }}</p>
            </div>
            <div class="rounded-2xl border border-surface-200 bg-white px-4 py-4 dark:border-surface-700 dark:bg-surface-900">
                <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'تصحيح تلقائي' : 'Auto corrected' }}</p>
                <p class="mt-2 text-2xl font-black text-surface-900 dark:text-white">{{ $stats['auto_corrected_questions'] }}</p>
            </div>
            <div class="rounded-2xl border border-surface-200 bg-white px-4 py-4 dark:border-surface-700 dark:bg-surface-900">
                <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'أسئلة بها وسائط' : 'With media' }}</p>
                <p class="mt-2 text-2xl font-black text-surface-900 dark:text-white">{{ $stats['questions_with_media'] }}</p>
            </div>
        </div>
    </section>

    <section class="grid gap-6 xl:grid-cols-2">
        <article class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <div class="border-b border-surface-200 px-6 py-5 dark:border-surface-800">
                <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'توزيع أنواع الأسئلة' : 'Question type breakdown' }}</h2>
            </div>
            <div class="space-y-3 px-6 py-6">
                @foreach($typeLabels as $key => $label)
                    <div class="flex items-center justify-between rounded-xl border border-surface-200 px-4 py-3 dark:border-surface-800">
                        <span class="inline-flex items-center gap-2 text-sm font-bold text-surface-700 dark:text-surface-200">
                            <i class="fa-solid {{ $typeIcons[$key] ?? 'fa-circle-question' }} text-brand-500"></i>
                            <span>{{ $label }}</span>
                        </span>
                        <span class="text-lg font-black text-surface-900 dark:text-white">{{ $typeBreakdown[$key] ?? 0 }}</span>
                    </div>
                @endforeach
            </div>
        </article>

        <article class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <div class="border-b border-surface-200 px-6 py-5 dark:border-surface-800">
                <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'توزيع مستويات الصعوبة' : 'Difficulty breakdown' }}</h2>
            </div>
            <div class="space-y-3 px-6 py-6">
                @forelse($difficultyBreakdown as $difficulty => $total)
                    <div class="flex items-center justify-between rounded-xl bg-surface-50 px-4 py-3 dark:bg-surface-950">
                        <span class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ $difficulty }}</span>
                        <span class="text-lg font-black text-surface-900 dark:text-white">{{ $total }}</span>
                    </div>
                @empty
                    <div class="text-sm text-surface-500 dark:text-surface-400">{{ __('dashboard.No data found') }}</div>
                @endforelse
            </div>
        </article>
    </section>
</div>
@endsection