@if ($qualityEvaluation)
    @php($dashboard = $qualityEvaluation['dashboard'])

    <section class="mt-6 rounded-[1.75rem] border border-slate-200 bg-white p-5 shadow-sm">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
            <div>
                <p class="text-sm font-semibold text-slate-900">Authoring Quality Dashboard</p>
                <p class="mt-1 text-sm leading-6 text-slate-500">
                    Panel operasional untuk mengecek kesiapan paket sebelum dikirim review atau dipublish.
                </p>
            </div>
            <span class="inline-flex w-fit rounded-full px-3 py-1 text-xs font-semibold {{ $qualityEvaluation['canPublish'] ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700' }}">
                {{ $qualityEvaluation['canPublish'] ? 'Ready' : $qualityEvaluation['summary']['blocking'] . ' blocker' }}
            </span>
        </div>

        <div class="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
            <div class="rounded-2xl bg-rose-50 px-4 py-3">
                <p class="text-xs font-semibold uppercase tracking-[0.16em] text-rose-700">Tanpa Kunci</p>
                <p class="mt-2 text-2xl font-semibold text-rose-800">{{ $dashboard['issue_counts']['without_correct_answer'] }}</p>
            </div>
            <div class="rounded-2xl bg-amber-50 px-4 py-3">
                <p class="text-xs font-semibold uppercase tracking-[0.16em] text-amber-700">Opsi Tidak Lengkap</p>
                <p class="mt-2 text-2xl font-semibold text-amber-800">{{ $dashboard['issue_counts']['without_four_options'] }}</p>
            </div>
            <div class="rounded-2xl bg-sky-50 px-4 py-3">
                <p class="text-xs font-semibold uppercase tracking-[0.16em] text-sky-700">Soal Audio Tanpa Cue</p>
                <p class="mt-2 text-2xl font-semibold text-sky-800">{{ $dashboard['issue_counts']['listening_questions_without_cue'] }}</p>
            </div>
            <div class="rounded-2xl bg-indigo-50 px-4 py-3">
                <p class="text-xs font-semibold uppercase tracking-[0.16em] text-indigo-700">Group Tanpa Cue</p>
                <p class="mt-2 text-2xl font-semibold text-sky-800">{{ $dashboard['issue_counts']['listening_groups_without_cue'] }}</p>
            </div>
        </div>

        <div class="mt-6 grid gap-5 xl:grid-cols-3">
            <article class="rounded-2xl border border-slate-200 bg-slate-50/80 p-4">
                <p class="text-sm font-semibold text-slate-900">Jumlah Soal per Section</p>
                <div class="mt-4 space-y-3">
                    @foreach ($dashboard['sections'] as $sectionMetric)
                        <div class="rounded-xl bg-white px-4 py-3">
                            <div class="flex items-center justify-between gap-3">
                                <p class="text-sm font-semibold text-slate-800">{{ $sectionMetric['name'] }}</p>
                                <span class="rounded-full px-2 py-1 text-[11px] font-semibold {{ $sectionMetric['status'] === 'pass' ? 'bg-emerald-100 text-emerald-700' : ($sectionMetric['status'] === 'warning' ? 'bg-amber-100 text-amber-700' : 'bg-rose-100 text-rose-700') }}">
                                    {{ $sectionMetric['actual'] }}/{{ $sectionMetric['expected'] }}
                                </span>
                            </div>
                            <p class="mt-1 text-xs leading-5 text-slate-500">{{ $sectionMetric['note'] }}</p>
                        </div>
                    @endforeach
                </div>
            </article>

            <article class="rounded-2xl border border-slate-200 bg-slate-50/80 p-4">
                <p class="text-sm font-semibold text-slate-900">Listening Part A/B/C</p>
                <div class="mt-4 space-y-3">
                    @foreach ($dashboard['listening_parts'] as $partMetric)
                        <div class="rounded-xl bg-white px-4 py-3">
                            <div class="flex items-center justify-between gap-3">
                                <p class="text-sm font-semibold text-slate-800">{{ $partMetric['part'] }}</p>
                                <span class="rounded-full px-2 py-1 text-[11px] font-semibold {{ $partMetric['status'] === 'pass' ? 'bg-emerald-100 text-emerald-700' : ($partMetric['status'] === 'warning' ? 'bg-amber-100 text-amber-700' : 'bg-rose-100 text-rose-700') }}">
                                    {{ $partMetric['actual'] }}/{{ $partMetric['expected'] }}
                                </span>
                            </div>
                            <p class="mt-1 text-xs leading-5 text-slate-500">
                                {{ $partMetric['groups'] }} audio group, {{ $partMetric['groups_without_cue'] }} group dan {{ $partMetric['questions_without_cue'] }} soal belum punya cue lengkap.
                            </p>
                        </div>
                    @endforeach
                </div>
            </article>

            <article class="rounded-2xl border border-slate-200 bg-slate-50/80 p-4">
                <p class="text-sm font-semibold text-slate-900">Duplicate Order</p>
                <div class="mt-4 space-y-3">
                    @forelse ($dashboard['duplicate_orders'] as $duplicate)
                        <div class="rounded-xl border border-rose-100 bg-rose-50 px-4 py-3">
                            <p class="text-sm font-semibold text-rose-900">{{ $duplicate['section'] }}</p>
                            <p class="mt-1 text-xs leading-5 text-rose-700">
                                Nomor {{ $duplicate['order'] }} dipakai {{ $duplicate['count'] }} kali.
                            </p>
                        </div>
                    @empty
                        <div class="rounded-xl border border-emerald-100 bg-emerald-50 px-4 py-3">
                            <p class="text-sm font-semibold text-emerald-900">Nomor soal aman</p>
                            <p class="mt-1 text-xs leading-5 text-emerald-700">Tidak ada nomor ganda dalam section.</p>
                        </div>
                    @endforelse
                </div>
            </article>
        </div>

        <article class="mt-5 rounded-2xl border border-slate-200 bg-slate-50/80 p-4">
            <div class="flex items-center justify-between gap-4">
                <p class="text-sm font-semibold text-slate-900">Reading Passage Coverage</p>
                <span class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-400">
                    {{ $dashboard['reading_passages']->count() }} passage
                </span>
            </div>
            <div class="mt-4 grid gap-3 lg:grid-cols-2">
                @forelse ($dashboard['reading_passages'] as $passageMetric)
                    <div class="rounded-xl bg-white px-4 py-3">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <p class="text-sm font-semibold text-slate-800">{{ $passageMetric['title'] }}</p>
                                <p class="mt-1 text-xs text-slate-500">{{ $passageMetric['questions'] }} soal terkait passage ini.</p>
                            </div>
                            <span class="rounded-full px-2 py-1 text-[11px] font-semibold {{ $passageMetric['status'] === 'pass' ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700' }}">
                                {{ str($passageMetric['status'])->title() }}
                            </span>
                        </div>
                        <div class="mt-3 flex flex-wrap gap-2">
                            @foreach ($passageMetric['distribution'] as $label => $count)
                                <span class="rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-600">
                                    {{ $label }}: {{ $count }}
                                </span>
                            @endforeach
                        </div>
                        @if ($passageMetric['missing_core']->isNotEmpty())
                            <p class="mt-3 text-xs leading-5 text-amber-700">
                                Belum ada: {{ $passageMetric['missing_core']->implode(', ') }}.
                            </p>
                        @endif
                    </div>
                @empty
                    <div class="rounded-xl border border-dashed border-slate-300 bg-white px-4 py-6 text-center text-sm text-slate-500 lg:col-span-2">
                        Belum ada passage reading pada paket ini.
                    </div>
                @endforelse
            </div>
        </article>
    </section>
@endif