<x-filament-panels::page>
    <div class="space-y-6">

        {{-- HEADER KETERANGAN --}}
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-6 shadow-sm">
            <div class="flex items-center gap-3">
                <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 dark:bg-primary-900">
                    <x-heroicon-o-cpu-chip class="h-6 w-6 text-primary-600 dark:text-primary-400" />
                </div>
                <div>
                    <h2 class="text-lg font-bold text-gray-900 dark:text-white">Evaluasi Model: TF-IDF & Naive Bayes</h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        Kecamatan Wonosalam &mdash; SILAPOR | Data dihitung menggunakan pembagian 80% data latih dan 20% data uji.
                    </p>
                </div>
            </div>
        </div>

        {{-- ERROR STATE --}}
        @if ($error)
            <div class="rounded-xl border border-red-200 bg-red-50 dark:bg-red-900/20 dark:border-red-700 p-6 text-red-700 dark:text-red-400">
                <div class="flex items-center gap-2 font-semibold mb-1">
                    <x-heroicon-o-exclamation-triangle class="h-5 w-5" />
                    Koneksi Flask ML API Gagal
                </div>
                <p class="text-sm">{{ $error }}</p>
                <button
                    wire:click="refresh"
                    class="mt-3 inline-flex items-center gap-1.5 rounded-lg bg-red-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-red-700 transition-colors"
                >
                    <x-heroicon-o-arrow-path class="h-3.5 w-3.5" />
                    Coba Lagi
                </button>
            </div>

        @elseif ($evaluasiData)

            {{-- AKURASI UTAMA --}}
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="rounded-xl border border-green-200 bg-green-50 dark:bg-green-900/20 dark:border-green-700 p-6 text-center shadow-sm">
                    <p class="text-sm font-medium text-green-700 dark:text-green-400 mb-1">Akurasi Model</p>
                    <p class="text-5xl font-extrabold text-green-600 dark:text-green-400">{{ $evaluasiData['accuracy'] ?? '?' }}%</p>
                    <p class="text-xs text-green-600 dark:text-green-500 mt-1">Kategori Naive Bayes (split 80:20)</p>
                </div>
                <div class="rounded-xl border border-blue-200 bg-blue-50 dark:bg-blue-900/20 dark:border-blue-700 p-6 text-center shadow-sm">
                    <p class="text-sm font-medium text-blue-700 dark:text-blue-400 mb-1">Jumlah Kategori</p>
                    <p class="text-5xl font-extrabold text-blue-600 dark:text-blue-400">{{ count($evaluasiData['classes'] ?? []) }}</p>
                    <p class="text-xs text-blue-600 dark:text-blue-500 mt-1">Kelas dalam dataset latih</p>
                </div>
                <div class="rounded-xl border border-purple-200 bg-purple-50 dark:bg-purple-900/20 dark:border-purple-700 p-6 text-center shadow-sm">
                    <p class="text-sm font-medium text-purple-700 dark:text-purple-400 mb-1">Total Dataset</p>
                    <p class="text-5xl font-extrabold text-purple-600 dark:text-purple-400">120</p>
                    <p class="text-xs text-purple-600 dark:text-purple-500 mt-1">Data aduan latih Kec. Wonosalam</p>
                </div>
            </div>

            {{-- CLASSIFICATION REPORT --}}
            @if(isset($evaluasiData['report']))
                <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm overflow-hidden">
                    <div class="border-b border-gray-200 dark:border-gray-700 px-6 py-4">
                        <h3 class="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                            <x-heroicon-o-table-cells class="h-5 w-5 text-primary-500" />
                            Precision, Recall & F1-Score per Kategori
                        </h3>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                            Metrik evaluasi per kelas berdasarkan data uji (20%)
                        </p>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead class="bg-gray-50 dark:bg-gray-800">
                                <tr>
                                    <th class="px-6 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">Kategori</th>
                                    <th class="px-4 py-3 text-center font-semibold text-gray-600 dark:text-gray-300">Precision</th>
                                    <th class="px-4 py-3 text-center font-semibold text-gray-600 dark:text-gray-300">Recall</th>
                                    <th class="px-4 py-3 text-center font-semibold text-gray-600 dark:text-gray-300">F1-Score</th>
                                    <th class="px-4 py-3 text-center font-semibold text-gray-600 dark:text-gray-300">Support</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                @foreach($evaluasiData['report'] as $label => $metrics)
                                    @if(is_array($metrics) && !in_array($label, ['accuracy', 'macro avg', 'weighted avg']))
                                        @php
                                            $precision = round($metrics['precision'] * 100, 1);
                                            $recall    = round($metrics['recall'] * 100, 1);
                                            $f1        = round($metrics['f1-score'] * 100, 1);
                                            $support   = $metrics['support'];
                                            $labelDisplay = ucwords(str_replace(['_', '-'], ' ', $label));
                                        @endphp
                                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                                            <td class="px-6 py-3 font-medium text-gray-900 dark:text-white">{{ $labelDisplay }}</td>
                                            <td class="px-4 py-3 text-center">
                                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium
                                                    {{ $precision >= 80 ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : ($precision >= 60 ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400') }}">
                                                    {{ $precision }}%
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-center">
                                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium
                                                    {{ $recall >= 80 ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : ($recall >= 60 ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400') }}">
                                                    {{ $recall }}%
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-center">
                                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium
                                                    {{ $f1 >= 80 ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : ($f1 >= 60 ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400') }}">
                                                    {{ $f1 }}%
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-center text-gray-500 dark:text-gray-400 font-mono">{{ $support }}</td>
                                        </tr>
                                    @endif
                                @endforeach

                                {{-- Weighted Avg --}}
                                @if(isset($evaluasiData['report']['weighted avg']))
                                    @php
                                        $wa = $evaluasiData['report']['weighted avg'];
                                    @endphp
                                    <tr class="bg-gray-50 dark:bg-gray-800 font-semibold border-t-2 border-gray-300 dark:border-gray-600">
                                        <td class="px-6 py-3 text-gray-700 dark:text-gray-300">Weighted Average</td>
                                        <td class="px-4 py-3 text-center text-gray-700 dark:text-gray-300">{{ round($wa['precision'] * 100, 1) }}%</td>
                                        <td class="px-4 py-3 text-center text-gray-700 dark:text-gray-300">{{ round($wa['recall'] * 100, 1) }}%</td>
                                        <td class="px-4 py-3 text-center text-gray-700 dark:text-gray-300">{{ round($wa['f1-score'] * 100, 1) }}%</td>
                                        <td class="px-4 py-3 text-center text-gray-700 dark:text-gray-300">{{ $wa['support'] }}</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif

            {{-- CONFUSION MATRIX --}}
            @if(isset($evaluasiData['matrix']) && isset($evaluasiData['classes']))
                <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm overflow-hidden">
                    <div class="border-b border-gray-200 dark:border-gray-700 px-6 py-4">
                        <h3 class="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                            <x-heroicon-o-squares-2x2 class="h-5 w-5 text-primary-500" />
                            Confusion Matrix
                        </h3>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                            Baris = Label Aktual, Kolom = Label Prediksi
                        </p>
                    </div>
                    <div class="p-6 overflow-x-auto">
                        <table class="text-xs">
                            <thead>
                                <tr>
                                    <th class="px-2 py-1 text-left text-gray-500 dark:text-gray-400 max-w-[100px]">Aktual \ Prediksi</th>
                                    @foreach($evaluasiData['classes'] as $cls)
                                        <th class="px-2 py-1 text-center font-semibold text-gray-700 dark:text-gray-300 max-w-[80px]">
                                            {{ ucfirst(explode('_', $cls)[0]) }}
                                        </th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($evaluasiData['matrix'] as $rowIdx => $row)
                                    <tr>
                                        <td class="px-2 py-2 font-semibold text-gray-700 dark:text-gray-300 whitespace-nowrap">
                                            {{ ucfirst(explode('_', $evaluasiData['classes'][$rowIdx])[0]) }}
                                        </td>
                                        @foreach($row as $colIdx => $val)
                                            <td class="px-2 py-2 text-center rounded font-mono text-sm
                                                {{ $rowIdx === $colIdx
                                                    ? ($val > 0 ? 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300 font-bold' : 'bg-gray-100 dark:bg-gray-800 text-gray-400')
                                                    : ($val > 0 ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400' : 'text-gray-300 dark:text-gray-600') }}">
                                                {{ $val }}
                                            </td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <div class="mt-4 flex gap-4 text-xs text-gray-500 dark:text-gray-400">
                            <span class="flex items-center gap-1.5">
                                <span class="inline-block h-3 w-3 rounded bg-green-200 dark:bg-green-900/60"></span>
                                Prediksi Benar (True Positive)
                            </span>
                            <span class="flex items-center gap-1.5">
                                <span class="inline-block h-3 w-3 rounded bg-red-200 dark:bg-red-900/60"></span>
                                Prediksi Salah (False Positive / Negative)
                            </span>
                        </div>
                    </div>
                </div>
            @endif

            {{-- TOMBOL REFRESH --}}
            <div class="flex justify-end">
                <button
                    wire:click="refresh"
                    class="inline-flex items-center gap-2 rounded-xl bg-primary-600 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-700 transition-colors shadow-sm"
                >
                    <x-heroicon-o-arrow-path class="h-4 w-4" />
                    Hitung Ulang Evaluasi
                </button>
            </div>

        @else
            <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-12 text-center text-gray-500 dark:text-gray-400">
                <x-heroicon-o-cpu-chip class="mx-auto h-12 w-12 mb-3 text-gray-300" />
                <p class="text-sm">Memuat data evaluasi dari Flask ML API...</p>
            </div>
        @endif

    </div>
</x-filament-panels::page>
