@php
    $totalResponses = (int) $analysis['total'];
    $totalForPercent = max($totalResponses, 1);
    $percent = fn (int $count): string => number_format(($count / $totalForPercent) * 100, 1) . '%';

    $stressMeta = [
        'Rendah' => [
            'bar' => 'bg-emerald-500',
            'badge' => 'bg-emerald-50 text-emerald-700 ring-emerald-200',
            'description' => 'Tekanan akademik masih rendah.',
        ],
        'Sedang' => [
            'bar' => 'bg-amber-500',
            'badge' => 'bg-amber-50 text-amber-700 ring-amber-200',
            'description' => 'Perlu dipantau agar tidak meningkat.',
        ],
        'Tinggi' => [
            'bar' => 'bg-red-500',
            'badge' => 'bg-red-50 text-red-700 ring-red-200',
            'description' => 'Butuh perhatian dan pendampingan.',
        ],
    ];

    $academicMeta = [
        'Rendah' => [
            'bar' => 'bg-red-500',
            'badge' => 'bg-red-50 text-red-700 ring-red-200',
            'description' => 'Kualitas akademik perlu ditingkatkan.',
        ],
        'Sedang' => [
            'bar' => 'bg-amber-500',
            'badge' => 'bg-amber-50 text-amber-700 ring-amber-200',
            'description' => 'Cukup, tetapi masih bisa diperbaiki.',
        ],
        'Baik' => [
            'bar' => 'bg-emerald-500',
            'badge' => 'bg-emerald-50 text-emerald-700 ring-emerald-200',
            'description' => 'Performa akademik sudah baik.',
        ],
    ];

    $toneMap = [
        'red' => [
            'panel' => 'border-red-200 bg-red-50',
            'label' => 'bg-red-600 text-white',
            'heading' => 'text-red-950',
            'body' => 'text-red-800',
            'dot' => 'bg-red-600',
        ],
        'amber' => [
            'panel' => 'border-amber-200 bg-amber-50',
            'label' => 'bg-amber-500 text-white',
            'heading' => 'text-amber-950',
            'body' => 'text-amber-800',
            'dot' => 'bg-amber-500',
        ],
        'blue' => [
            'panel' => 'border-blue-200 bg-blue-50',
            'label' => 'bg-blue-600 text-white',
            'heading' => 'text-blue-950',
            'body' => 'text-blue-800',
            'dot' => 'bg-blue-600',
        ],
        'gray' => [
            'panel' => 'border-slate-200 bg-slate-50',
            'label' => 'bg-slate-900 text-white',
            'heading' => 'text-slate-950',
            'body' => 'text-slate-700',
            'dot' => 'bg-slate-500',
        ],
    ];

    $impactTone = $toneMap[$analysis['impact']['tone'] ?? 'gray'] ?? $toneMap['gray'];
    $correlationText = $analysis['correlation'] === null ? 'Belum cukup data' : 'r = ' . $analysis['correlation'];
@endphp

<x-filament-panels::page>
    <div class="mx-auto w-full max-w-7xl space-y-5">
        @if ($totalResponses === 0)
            <section class="rounded-2xl border border-amber-200 bg-amber-50 p-5 text-sm leading-6 text-amber-900 shadow-sm">
                Belum ada respons siswa. Setelah siswa mengisi kuesioner, dashboard ini akan menampilkan skor, kategori, diagram, dan rekomendasi otomatis.
            </section>
        @endif

        <section class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
            <div class="grid gap-0 lg:grid-cols-[1.08fr_0.92fr]">
                <div class="p-5 sm:p-6">
                    <span class="inline-flex rounded-full bg-blue-50 px-3 py-1 text-xs font-bold uppercase tracking-wide text-blue-700 ring-1 ring-blue-100">
                        Ringkasan utama
                    </span>
                    <h2 class="mt-3 text-2xl font-bold tracking-tight text-slate-950 sm:text-3xl">
                        Data kuesioner dibuat mudah dibaca.
                    </h2>
                    <p class="mt-3 max-w-2xl text-sm leading-6 text-slate-600">
                        Lihat status pengaruh, jumlah responden, kategori stres, kategori akademik, lalu gunakan rekomendasi untuk tindak lanjut.
                    </p>

                    <div class="mt-5 grid gap-3 sm:grid-cols-3">
                        <div class="rounded-xl border border-slate-200 bg-slate-50 p-3">
                            <p class="text-xs font-semibold text-slate-500">1. Status</p>
                            <p class="mt-1 text-sm font-bold text-slate-950">Berpengaruh atau tidak</p>
                        </div>
                        <div class="rounded-xl border border-slate-200 bg-slate-50 p-3">
                            <p class="text-xs font-semibold text-slate-500">2. Kategori</p>
                            <p class="mt-1 text-sm font-bold text-slate-950">Stres dan akademik</p>
                        </div>
                        <div class="rounded-xl border border-slate-200 bg-slate-50 p-3">
                            <p class="text-xs font-semibold text-slate-500">3. Aksi</p>
                            <p class="mt-1 text-sm font-bold text-slate-950">Rekomendasi sekolah</p>
                        </div>
                    </div>
                </div>

                <div class="border-t border-slate-200 p-5 sm:p-6 lg:border-l lg:border-t-0 {{ $impactTone['panel'] }}">
                    <div class="flex items-center justify-between gap-3">
                        <p class="text-sm font-semibold {{ $impactTone['body'] }}">Status pengaruh</p>
                        <span class="rounded-full px-3 py-1 text-xs font-bold {{ $impactTone['label'] }}">
                            {{ $correlationText }}
                        </span>
                    </div>
                    <h3 class="mt-3 text-2xl font-bold {{ $impactTone['heading'] }}">
                        {{ $analysis['impact']['label'] }}
                    </h3>
                    <p class="mt-3 text-sm leading-6 {{ $impactTone['body'] }}">
                        {{ $analysis['impact']['summary'] }}
                    </p>
                    <div class="mt-5 rounded-xl border border-white/70 bg-white/70 p-4">
                        <p class="text-xs font-bold uppercase tracking-wide text-slate-500">Catatan membaca data</p>
                        <p class="mt-2 text-sm leading-6 text-slate-700">
                            Korelasi menunjukkan hubungan antar skor, bukan penyebab tunggal. Gunakan bersama observasi guru dan kondisi siswa.
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
                <p class="text-sm font-medium text-slate-500">Total responden</p>
                <p class="mt-3 text-3xl font-bold text-slate-950">{{ $totalResponses }}</p>
                <p class="mt-2 text-sm text-slate-600">Siswa yang sudah submit.</p>
            </div>

            <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
                <p class="text-sm font-medium text-slate-500">Rata-rata stres</p>
                <p class="mt-3 text-3xl font-bold text-slate-950">{{ number_format($analysis['average_stress'], 2) }}</p>
                <p class="mt-2 text-sm text-slate-600">Skor 10 sampai 50.</p>
            </div>

            <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
                <p class="text-sm font-medium text-slate-500">Rata-rata akademik</p>
                <p class="mt-3 text-3xl font-bold text-slate-950">{{ number_format($analysis['average_academic'], 2) }}</p>
                <p class="mt-2 text-sm text-slate-600">Semakin tinggi semakin baik.</p>
            </div>

            <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
                <p class="text-sm font-medium text-slate-500">Kategori dominan</p>
                <p class="mt-3 text-lg font-bold text-slate-950">
                    {{ $analysis['dominant_stress']['category'] }} / {{ $analysis['dominant_academic']['category'] }}
                </p>
                <p class="mt-2 text-sm text-slate-600">Stres / akademik terbanyak.</p>
            </div>
        </section>

        <section class="grid gap-4 xl:grid-cols-2">
            <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <div>
                        <h3 class="text-base font-bold text-slate-950">Diagram tingkat stres</h3>
                        <p class="mt-1 text-sm text-slate-600">Jumlah siswa di setiap kategori stres.</p>
                    </div>
                    <span class="rounded-full px-3 py-1 text-xs font-bold ring-1 {{ $stressMeta[$analysis['dominant_stress']['category']]['badge'] ?? 'bg-slate-50 text-slate-700 ring-slate-200' }}">
                        Dominan: {{ $analysis['dominant_stress']['category'] }}
                    </span>
                </div>

                <div class="mt-5 space-y-4">
                    @foreach ($analysis['stress_counts'] as $category => $count)
                        <div>
                            <div class="mb-2 flex items-center justify-between gap-3">
                                <div>
                                    <p class="text-sm font-bold text-slate-950">{{ $category }}</p>
                                    <p class="text-xs text-slate-500">{{ $stressMeta[$category]['description'] }}</p>
                                </div>
                                <div class="text-right">
                                    <p class="text-sm font-bold text-slate-950">{{ $count }} siswa</p>
                                    <p class="text-xs text-slate-500">{{ $percent($count) }}</p>
                                </div>
                            </div>
                            <div class="h-2.5 overflow-hidden rounded-full bg-slate-100">
                                <div class="h-full rounded-full {{ $stressMeta[$category]['bar'] }}" style="width: {{ $percent($count) }}"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <div>
                        <h3 class="text-base font-bold text-slate-950">Diagram kualitas akademik</h3>
                        <p class="mt-1 text-sm text-slate-600">Jumlah siswa di setiap kategori akademik.</p>
                    </div>
                    <span class="rounded-full px-3 py-1 text-xs font-bold ring-1 {{ $academicMeta[$analysis['dominant_academic']['category']]['badge'] ?? 'bg-slate-50 text-slate-700 ring-slate-200' }}">
                        Dominan: {{ $analysis['dominant_academic']['category'] }}
                    </span>
                </div>

                <div class="mt-5 space-y-4">
                    @foreach ($analysis['academic_counts'] as $category => $count)
                        <div>
                            <div class="mb-2 flex items-center justify-between gap-3">
                                <div>
                                    <p class="text-sm font-bold text-slate-950">{{ $category }}</p>
                                    <p class="text-xs text-slate-500">{{ $academicMeta[$category]['description'] }}</p>
                                </div>
                                <div class="text-right">
                                    <p class="text-sm font-bold text-slate-950">{{ $count }} siswa</p>
                                    <p class="text-xs text-slate-500">{{ $percent($count) }}</p>
                                </div>
                            </div>
                            <div class="h-2.5 overflow-hidden rounded-full bg-slate-100">
                                <div class="h-full rounded-full {{ $academicMeta[$category]['bar'] }}" style="width: {{ $percent($count) }}"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <section class="grid gap-4 lg:grid-cols-[0.9fr_1.1fr]">
            <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
                <h3 class="text-base font-bold text-slate-950">Interpretasi singkat</h3>
                <div class="mt-4 space-y-3">
                    <div class="flex gap-3 rounded-xl bg-slate-50 p-3">
                        <span class="mt-2 h-2.5 w-2.5 shrink-0 rounded-full {{ $impactTone['dot'] }}"></span>
                        <p class="text-sm leading-6 text-slate-700">{{ $analysis['impact']['detail'] }}</p>
                    </div>
                    <div class="rounded-xl border border-slate-200 p-3">
                        <p class="text-xs font-bold uppercase tracking-wide text-slate-500">Skala stres</p>
                        <p class="mt-2 text-sm text-slate-700">10-23 rendah, 24-37 sedang, 38-50 tinggi.</p>
                    </div>
                    <div class="rounded-xl border border-slate-200 p-3">
                        <p class="text-xs font-bold uppercase tracking-wide text-slate-500">Skala akademik</p>
                        <p class="mt-2 text-sm text-slate-700">10-23 rendah, 24-37 sedang, 38-50 baik.</p>
                    </div>
                </div>
            </div>

            <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
                <h3 class="text-base font-bold text-slate-950">Rekomendasi tindak lanjut</h3>
                <div class="mt-4 grid gap-3">
                    @foreach ($analysis['recommendations'] as $recommendation)
                        <div class="flex gap-3 rounded-xl border border-slate-200 bg-slate-50 p-3">
                            <span class="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-blue-600"></span>
                            <p class="text-sm leading-6 text-slate-700">{{ $recommendation }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <section class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
            <div class="border-b border-slate-200 bg-slate-50 px-5 py-4">
                <h3 class="text-base font-bold text-slate-950">Tabel kombinasi kategori</h3>
                <p class="mt-1 text-sm text-slate-600">Membantu melihat berapa siswa yang stresnya rendah, sedang, atau tinggi pada tiap kategori akademik.</p>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full min-w-[680px] divide-y divide-slate-200 text-sm">
                    <thead class="bg-white">
                        <tr>
                            <th class="px-5 py-3 text-left font-semibold text-slate-600">Kategori stres</th>
                            <th class="px-5 py-3 text-left font-semibold text-slate-600">Akademik rendah</th>
                            <th class="px-5 py-3 text-left font-semibold text-slate-600">Akademik sedang</th>
                            <th class="px-5 py-3 text-left font-semibold text-slate-600">Akademik baik</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @foreach ($analysis['matrix'] as $row)
                            <tr>
                                <td class="px-5 py-3 font-bold text-slate-950">{{ $row['stress_category'] }}</td>
                                <td class="px-5 py-3 text-slate-700">{{ $row['Rendah'] }} siswa</td>
                                <td class="px-5 py-3 text-slate-700">{{ $row['Sedang'] }} siswa</td>
                                <td class="px-5 py-3 text-slate-700">{{ $row['Baik'] }} siswa</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </section>
    </div>
</x-filament-panels::page>