@php
    $impactToneClasses = [
        'gray' => 'border-slate-200 bg-slate-50 text-slate-700',
        'amber' => 'border-amber-200 bg-amber-50 text-amber-800',
        'red' => 'border-red-200 bg-red-50 text-red-700',
        'blue' => 'border-blue-200 bg-blue-50 text-blue-700',
    ];

    $impactClasses = $impactToneClasses[$analysis['impact']['tone']] ?? $impactToneClasses['gray'];
@endphp

<x-filament-widgets::widget>
    <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm ring-1 ring-slate-950/5 dark:border-white/10 dark:bg-slate-900">
        <div class="relative overflow-hidden bg-slate-950 px-6 py-7 text-white sm:px-8">
            <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_left,#2563eb_0,transparent_34%),radial-gradient(circle_at_bottom_right,#14b8a6_0,transparent_30%)] opacity-80"></div>
            <div class="relative grid gap-6 lg:grid-cols-[1.2fr_0.8fr] lg:items-center">
                <div>
                    <p class="text-xs font-bold uppercase tracking-[0.18em] text-blue-200">Dashboard analisis</p>
                    <h2 class="mt-3 max-w-4xl text-2xl font-bold tracking-tight sm:text-3xl">
                        Pengaruh Tingkat Stres Siswa terhadap Kualitas Akademik
                    </h2>
                    <p class="mt-3 max-w-3xl text-sm leading-6 text-slate-200">
                        Tampilan ini merangkum korelasi, distribusi kategori, rekomendasi, dan pola hubungan skor agar hasil kuesioner lebih cepat dibaca.
                    </p>
                </div>

                <div class="rounded-2xl border border-white/15 bg-white/10 p-4 backdrop-blur">
                    <p class="text-sm font-semibold text-slate-200">Status analisis</p>
                    <div class="mt-3 inline-flex rounded-full bg-white px-3 py-1 text-sm font-bold text-slate-950">
                        {{ $analysis['impact']['label'] }}
                    </div>
                    <p class="mt-3 text-sm leading-6 text-slate-200">{{ $analysis['impact']['summary'] }}</p>
                </div>
            </div>
        </div>

        <div class="space-y-6 p-5 sm:p-6">
            <div class="grid gap-4 md:grid-cols-3">
                <div class="rounded-2xl border border-slate-200 bg-slate-50 p-5 dark:border-white/10 dark:bg-white/5">
                    <p class="text-xs font-bold uppercase tracking-wider text-slate-500">Koefisien korelasi</p>
                    <p class="mt-4 text-4xl font-black tracking-tight text-slate-950 dark:text-white">
                        {{ $analysis['correlation'] === null ? '-' : $analysis['correlation'] }}
                    </p>
                    <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">Nilai r mendekati -1 atau 1 berarti hubungan semakin kuat.</p>
                </div>

                <div class="rounded-2xl border border-slate-200 bg-slate-50 p-5 dark:border-white/10 dark:bg-white/5">
                    <p class="text-xs font-bold uppercase tracking-wider text-slate-500">Stres dominan</p>
                    <p class="mt-4 text-4xl font-black tracking-tight text-slate-950 dark:text-white">{{ $analysis['dominant_stress']['category'] }}</p>
                    <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">
                        {{ $analysis['dominant_stress']['count'] }} siswa atau {{ $analysis['dominant_stress']['percentage'] }} dari responden.
                    </p>
                </div>

                <div class="rounded-2xl border border-slate-200 bg-slate-50 p-5 dark:border-white/10 dark:bg-white/5">
                    <p class="text-xs font-bold uppercase tracking-wider text-slate-500">Akademik dominan</p>
                    <p class="mt-4 text-4xl font-black tracking-tight text-slate-950 dark:text-white">{{ $analysis['dominant_academic']['category'] }}</p>
                    <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">
                        {{ $analysis['dominant_academic']['count'] }} siswa atau {{ $analysis['dominant_academic']['percentage'] }} dari responden.
                    </p>
                </div>
            </div>

            <div class="grid gap-4 lg:grid-cols-[1.2fr_0.8fr]">
                <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-white/5">
                    <div class="flex items-start justify-between gap-4">
                        <div>
                            <h3 class="text-base font-bold text-slate-950 dark:text-white">Deskripsi hasil</h3>
                            <p class="mt-2 text-sm leading-6 text-slate-700 dark:text-slate-300">{{ $analysis['impact']['detail'] }}</p>
                        </div>
                        <div class="hidden rounded-xl border px-3 py-2 text-xs font-bold shadow-sm sm:block {{ $impactClasses }}">
                            {{ $analysis['impact']['label'] }}
                        </div>
                    </div>
                </div>

                <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-white/5">
                    <h3 class="text-base font-bold text-slate-950 dark:text-white">Rekomendasi</h3>
                    <ul class="mt-3 space-y-2 text-sm leading-6 text-slate-700 dark:text-slate-300">
                        @foreach ($analysis['recommendations'] as $recommendation)
                            <li class="flex gap-2">
                                <span class="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-blue-600"></span>
                                <span>{{ $recommendation }}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>

            <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/5">
                <div class="border-b border-slate-200 bg-slate-50 px-4 py-3 dark:border-white/10 dark:bg-white/5">
                    <h3 class="text-base font-bold text-slate-950 dark:text-white">Matriks kategori stres dan akademik</h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-[680px] w-full divide-y divide-slate-200 text-sm dark:divide-white/10">
                        <thead class="bg-white dark:bg-transparent">
                            <tr>
                                <th class="px-4 py-3 text-left font-bold text-slate-600 dark:text-slate-200">Kategori stres</th>
                                <th class="px-4 py-3 text-left font-bold text-slate-600 dark:text-slate-200">Akademik rendah</th>
                                <th class="px-4 py-3 text-left font-bold text-slate-600 dark:text-slate-200">Akademik sedang</th>
                                <th class="px-4 py-3 text-left font-bold text-slate-600 dark:text-slate-200">Akademik baik</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-white/10">
                            @foreach ($analysis['matrix'] as $row)
                                <tr>
                                    <td class="px-4 py-3 font-semibold text-slate-950 dark:text-white">{{ $row['stress_category'] }}</td>
                                    <td class="px-4 py-3 text-slate-700 dark:text-slate-300">{{ $row['Rendah'] }}</td>
                                    <td class="px-4 py-3 text-slate-700 dark:text-slate-300">{{ $row['Sedang'] }}</td>
                                    <td class="px-4 py-3 text-slate-700 dark:text-slate-300">{{ $row['Baik'] }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</x-filament-widgets::widget>