@extends('layouts.app')

@section('content')
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Data Klasifikasi Arsip</h1>
</div>

<div class="card shadow mb-4">
    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-primary">Master Data</h6>
    </div>
    <div class="card-body">
        
        <!-- Komponen Pencarian AI -->
        <div class="row mb-4">
            <div class="col-md-8 offset-md-2">
                <div class="input-group">
                    <input type="text" id="ai-search-input" class="form-control form-control-lg bg-light border-0 small" placeholder="Masukkan perihal arsip (Misal: surat perintah tugas kunker luar kota)..." aria-label="Search" aria-describedby="basic-addon2">
                    <div class="input-group-append">
                        <button class="btn btn-primary" type="button" id="btn-ai-search">
                            <i class="fas fa-brain fa-sm mr-2"></i> Cari Kode via AI
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabel Data -->
        <div class="table-responsive">
            <!-- Loading State Skeleton/Spinner -->
            <div id="loading-state" class="text-center d-none my-5">
                <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
                    <span class="sr-only">Loading...</span>
                </div>
                <h5 class="mt-3 text-gray-600">AI sedang memproses kedekatan makna semantik...</h5>
            </div>

            <table class="table table-bordered" id="klasifikasi-table" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>Kode</th>
                        <th>Nama Klasifikasi</th>
                        <th>Level</th>
                        <th>Akurasi AI</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@stack('scripts')
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Karena jQuery dimuat di app.blade.php, ini harus menggunakan delay atau di luar jika perlu,
        // namun @stack('scripts') di app.blade.php dipanggil setelah jQuery dimuat
    });
</script>

@push('scripts')
<script>
    $(document).ready(function() {
        // Inisialisasi DataTable Server-Side standard
        let table = $('#klasifikasi-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('klasifikasi.data') }}",
            columns: [
                { data: 'kode', name: 'kode' },
                { data: 'nama_klasifikasi', name: 'nama_klasifikasi' },
                { data: 'level', name: 'level' },
                { 
                    data: 'akurasi', 
                    name: 'akurasi',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        if (data === null || data === undefined) return '<span class="text-muted">-</span>';
                        
                        let badgeClass = 'badge-secondary';
                        if (data >= 80) badgeClass = 'badge-success';
                        else if (data >= 50) badgeClass = 'badge-warning';
                        else badgeClass = 'badge-danger';
                        
                        return `<span class="badge ${badgeClass} px-2 py-1" style="font-size: 0.9em;">${data}%</span>`;
                    }
                }
            ]
        });

        // Event listener untuk tombol AI Search
        $('#btn-ai-search').on('click', function() {
            let perihal = $('#ai-search-input').val();
            if (perihal.length < 3) {
                alert('Silakan masukkan minimal 3 karakter untuk pencarian AI.');
                return;
            }

            // Tampilkan loading spinner, sembunyikan tabel
            $('#klasifikasi-table_wrapper').hide();
            $('#loading-state').removeClass('d-none');
            let $btn = $(this);
            $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-2"></i> Memproses...');

            // Lakukan AJAX ke endpoint AI
            $.ajax({
                url: "{{ route('klasifikasi.ai') }}",
                type: "POST",
                data: {
                    perihal: perihal,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.status === 'success') {
                        // Hancurkan DataTable lama dan isi dengan data baru hasil AI secara statis client-side
                        $('#klasifikasi-table').DataTable().clear().destroy();
                        
                        $('#klasifikasi-table').DataTable({
                            data: response.data,
                            columns: [
                                { data: 'kode' },
                                { data: 'nama_klasifikasi' },
                                { data: 'level' },
                                { 
                                    data: 'akurasi',
                                    render: function(data, type, row) {
                                        let badgeClass = 'badge-secondary';
                                        if (data >= 80) badgeClass = 'badge-success';
                                        else if (data >= 50) badgeClass = 'badge-warning';
                                        else badgeClass = 'badge-danger';
                                        
                                        return `<span class="badge ${badgeClass} px-2 py-1" style="font-size: 0.9em;">${data}%</span>`;
                                    }
                                }
                            ]
                        });
                    }
                },
                error: function(xhr) {
                    alert('Terjadi kesalahan saat memproses AI.');
                    console.log(xhr.responseText);
                },
                complete: function() {
                    // Kembalikan UI ke normal
                    $('#loading-state').addClass('d-none');
                    $('#klasifikasi-table_wrapper').show();
                    $btn.prop('disabled', false).html('<i class="fas fa-brain fa-sm mr-2"></i> Cari Kode via AI');
                }
            });
        });
        
        // Enter key di input pencarian AI
        $('#ai-search-input').keypress(function(e) {
            if(e.which == 13) {
                $('#btn-ai-search').click();
            }
        });
    });
</script>
@endpush