{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Analitik Korpus" %} — {{ bengkel.title }}{% endblock %}

{% block breadcrumb %}
    <a href="{% url 'bengkel:list' %}" class="text-blue-600 hover:underline text-xs font-bold">Pustaka Bengkel</a> <span class="mx-2 text-slate-400">/</span>
    <a href="{% url 'bengkel:detail' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">{{ bengkel.title|truncatechars:30 }}</a> <span class="mx-2 text-slate-400">/</span>
    <a href="{% url 'bengkel:overview_map' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">Pusat Kawalan AI</a> <span class="mx-2 text-slate-400">/</span>
    <span class="text-slate-500 font-medium text-xs">Langkah 1: Rujukan (Korpus)</span>
{% endblock %}

{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="animate-fade-up pb-10">
    <div class="max-w-[1600px] w-full mx-auto">
        
        <div class="relative overflow-hidden bg-gradient-to-br from-[#0f172a] via-[#4c1d95] to-[#0f172a] rounded-2xl px-8 py-7 mb-8 shadow-lg border border-slate-800">
            <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:24px 24px;"></div>
            
            <div class="relative flex flex-wrap justify-between items-center gap-4">
                <div class="flex items-center gap-4">
                    <a href="{% url 'bengkel:overview_map' pk=bengkel.pk %}" class="text-white/70 hover:text-white bg-white/10 hover:bg-white/20 w-10 h-10 rounded-full flex items-center justify-center transition shadow-sm border border-white/20 backdrop-blur-sm" title="Kembali ke Pusat Kawalan">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <div>
                        <div class="inline-flex items-center gap-1.5 bg-purple-500/20 border border-purple-400/30 text-purple-200 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-2">
                            <i class="fas fa-brain"></i> Analitik Kognitif & Data
                        </div>
                        <h1 class="text-2xl md:text-3xl font-extrabold text-white leading-tight">Data Rujukan & Analitik Korpus</h1>
                        <p class="text-white/60 text-sm mt-1">Analisis mendalam mengenai konteks dokumen, sentimen, dan tahap kognitif daripada input peserta.</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="hidden md:flex flex-col items-end mr-4">
                        <div class="text-[10px] font-bold uppercase tracking-widest text-white/70 mb-1">Status AI Membaca Fail</div>
                        <div class="flex items-center gap-2">
                            <div class="w-24 bg-white/20 h-2 rounded-full overflow-hidden">
                                <div id="live-progress-bar" class="bg-emerald-400 h-full transition-all duration-500" style="width: {{ peratus_proses }}%"></div>
                            </div>
                            <span id="live-progress-text" class="text-xs font-black text-emerald-300">{{ dokumen_diproses }}/{{ jumlah_dokumen }} ({{ peratus_proses }}%)</span>
                        </div>
                    </div>

                    <form method="POST" action="{% url 'bengkel:trigger_ai_laporan' pk=bengkel.pk %}" class="inline" onsubmit="return confirm('{% trans "PENTING:\n\nAdakah anda pasti untuk memulakan janaan AI sekarang? Pastikan majoriti dokumen telah dibaca oleh sistem (100%)." %}');">
                        {% csrf_token %}
                        <button type="submit" id="btn-jana-laporan" class="bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 border border-emerald-400 text-white text-sm font-bold px-4 py-2.5 rounded-xl shadow-lg shadow-emerald-500/30 transition-all flex items-center active:scale-95">
                            <i class="fas fa-magic mr-2"></i> Jana Laporan AI
                        </button>
                    </form>
                    
                    <button class="bg-white/10 hover:bg-white/20 border border-white/20 text-white text-sm font-bold px-4 py-2.5 rounded-xl backdrop-blur-sm transition shadow-sm flex items-center">
                        <i class="fas fa-file-export mr-2 text-purple-300"></i> Eksport
                    </button>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <div onclick="bukaModalInsight('modal-references')" class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 cursor-pointer hover:border-blue-400 hover:shadow-md transition group relative overflow-hidden">
                <div class="absolute -right-4 -bottom-4 opacity-5 group-hover:opacity-10 transition"><i class="fas fa-file-alt text-8xl text-blue-500"></i></div>
                <div class="flex justify-between items-center relative z-10">
                    <div class="text-slate-500 text-[11px] font-bold uppercase tracking-widest mb-1.5 flex items-center"><i class="fas fa-layer-group mr-2 text-blue-500"></i>Jumlah Rujukan Dikumpul</div>
                    <span class="text-[8px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded opacity-0 group-hover:opacity-100 transition font-bold">Lihat Audit</span>
                </div>
                <div class="text-4xl font-black text-blue-600 relative z-10"><span id="live-jumlah">{{ jumlah_dokumen|default:"0" }}</span> <span class="text-sm text-slate-400 font-medium ml-1">Dokumen</span></div>
                <div class="mt-2 text-[10px] font-medium text-slate-500 relative z-10 flex items-center gap-2"><span class="text-emerald-500 font-bold"><i class="fas fa-bolt"></i> Live</span> mengemas kini...</div>
            </div>
            
            <div onclick="bukaModalInsight('modal-actionability')" class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 cursor-pointer hover:border-amber-400 hover:shadow-md transition group relative overflow-hidden">
                <div class="absolute -right-4 -bottom-4 opacity-5 group-hover:opacity-10 transition"><i class="fas fa-lightbulb text-8xl text-amber-500"></i></div>
                <div class="flex justify-between items-center relative z-10">
                    <div class="text-slate-500 text-[11px] font-bold uppercase tracking-widest mb-1.5 flex items-center"><i class="fas fa-cogs mr-2 text-amber-500"></i>Indeks Kebolehtindakan</div>
                    <span class="text-[8px] bg-amber-50 text-amber-600 px-1.5 py-0.5 rounded opacity-0 group-hover:opacity-100 transition font-bold">Lihat Analisis</span>
                </div>
                <div class="text-4xl font-black text-amber-600 relative z-10"><span id="live-action">{{ purata_actionability|default:"0" }}</span>%</div>
                <div class="w-full bg-slate-100 h-1.5 rounded-full mt-3 overflow-hidden relative z-10"><div id="live-action-bar" class="bg-amber-500 h-full rounded-full transition-all duration-1000" style="width: {{ purata_actionability|default:'0' }}%"></div></div>
                <div class="mt-1.5 text-[9px] font-bold text-slate-400 uppercase tracking-wider relative z-10">Kandungan Berorientasikan Penyelesaian</div>
            </div>
            
            <div onclick="bukaModalInsight('modal-novelty')" class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 cursor-pointer hover:border-purple-400 hover:shadow-md transition group relative overflow-hidden">
                <div class="absolute -right-4 -bottom-4 opacity-5 group-hover:opacity-10 transition"><i class="fas fa-gem text-8xl text-purple-500"></i></div>
                <div class="flex justify-between items-center relative z-10">
                    <div class="text-slate-500 text-[11px] font-bold uppercase tracking-widest mb-1.5 flex items-center"><i class="fas fa-star mr-2 text-purple-500"></i>Skor Kelainan (Novelty)</div>
                    <span class="text-[8px] bg-purple-50 text-purple-600 px-1.5 py-0.5 rounded opacity-0 group-hover:opacity-100 transition font-bold">Lihat Butiran</span>
                </div>
                <div class="text-4xl font-black text-purple-600 relative z-10"><span id="live-novelty">{{ purata_novelty|default:"0.0" }}</span><span class="text-sm text-slate-400 font-medium ml-1">/ 10</span></div>
                <div class="mt-2 text-[10px] text-purple-600 font-semibold bg-purple-50 inline-block px-2 py-0.5 rounded border border-purple-100 relative z-10">Sangat Bernilai Untuk Latihan LLM</div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
            <div class="lg:col-span-2 space-y-6">
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
                    <h3 class="font-bold text-sm mb-1 text-slate-800 flex items-center"><i class="fas fa-hashtag text-blue-500 mr-2"></i> Tema Wacana Dominan</h3>
                    <p class="text-[11px] text-slate-400 mb-6">Kata kunci dan topik utama yang diekstrak AI merentas {{ jumlah_dokumen|default:"0" }} dokumen yang diserahkan.</p>
                    <div class="relative h-64 w-full"><canvas id="grafTemaKorpus"></canvas></div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200 flex flex-col">
                        <h3 class="font-bold text-sm mb-1 text-slate-800">Pemetaan Domain</h3>
                        <p class="text-[10px] text-slate-400 mb-4">Taburan fokus bidang dokumen rujukan.</p>
                        <div class="relative flex-1 min-h-[200px] w-full"><canvas id="grafDomain"></canvas></div>
                    </div>
                    <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200 flex flex-col">
                        <h3 class="font-bold text-sm mb-1 text-slate-800">Analisis Nada Dokumen</h3>
                        <p class="text-[10px] text-slate-400 mb-4">Adakah rujukan lebih kepada aduan atau penyelesaian?</p>
                        <div class="relative flex-1 min-h-[200px] w-full flex items-center justify-center"><canvas id="grafTone"></canvas></div>
                    </div>
                </div>
            </div>

            <div class="lg:col-span-1 space-y-6">
                <div class="bg-gradient-to-b from-indigo-900 to-slate-900 rounded-xl shadow-sm border border-slate-800 p-6 text-white relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-32 h-32 bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30"></div>
                    <h3 class="font-bold text-sm mb-4 flex items-center"><i class="fas fa-brain text-emerald-400 mr-2"></i> Kompleksiti Kognitif</h3>
                    <div class="space-y-5 relative z-10">
                        <div>
                            <div class="flex justify-between text-xs font-bold mb-1.5"><span class="text-slate-300">Pemikiran Sistem (Holistik)</span><span class="text-emerald-400">{{ pct_holistik }}%</span></div>
                            <div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden"><div class="bg-emerald-500 h-full" style="width: {{ pct_holistik }}%;"></div></div>
                            <p class="text-[9px] text-slate-400 mt-1">Impak merentas jabatan.</p>
                        </div>
                        <div>
                            <div class="flex justify-between text-xs font-bold mb-1.5"><span class="text-slate-300">Pemikiran Linear (Silo)</span><span class="text-amber-400">{{ pct_silo }}%</span></div>
                            <div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden"><div class="bg-amber-500 h-full" style="width: {{ pct_silo }}%;"></div></div>
                            <p class="text-[9px] text-slate-400 mt-1">Fokus kepada masalah satu jabatan.</p>
                        </div>
                        <div>
                            <div class="flex justify-between text-xs font-bold mb-1.5"><span class="text-slate-300">Berwawasan / Konseptual</span><span class="text-blue-400">{{ pct_konseptual }}%</span></div>
                            <div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden"><div class="bg-blue-500 h-full" style="width: {{ pct_konseptual }}%;"></div></div>
                            <p class="text-[9px] text-slate-400 mt-1">Trend masa depan dan model teori.</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200">
                    <h3 class="font-bold text-sm mb-4 text-slate-800 border-b border-slate-100 pb-2">Dokumen Berimpak Tinggi</h3>
                    <ul id="live-dokumen-top" class="space-y-3">
                        {% for doc in dokumen_top %}
                        <li class="flex items-start gap-3 p-2 hover:bg-slate-50 rounded transition border border-transparent hover:border-slate-200">
                            {% if '.pdf' in doc.original_name|lower %}<i class="fas fa-file-pdf text-rose-500 text-lg mt-1"></i>
                            {% elif '.doc' in doc.original_name|lower %}<i class="fas fa-file-word text-blue-500 text-lg mt-1"></i>
                            {% else %}<i class="fas fa-file-alt text-slate-500 text-lg mt-1"></i>{% endif %}
                            
                            <div class="flex-1 min-w-0">
                                <h4 class="text-xs font-bold text-slate-700 truncate" title="{{ doc.original_name }}">{{ doc.original_name }}</h4>
                                <p class="text-[10px] text-slate-500">{{ doc.contribution.jemputan.nama|default:"Peserta" }}</p>
                            </div>
                            <span class="bg-emerald-50 text-emerald-600 border border-emerald-100 text-[9px] font-bold px-2 py-0.5 rounded">{{ doc.indeks_kebolehtindakan }}% QA</span>
                        </li>
                        {% empty %}
                        <li class="text-center text-[11px] text-slate-400 py-4 italic">Belum ada dokumen yang dianalisis oleh AI.</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div id="modal-references" class="fixed inset-0 bg-slate-900 bg-opacity-80 z-[1100] flex justify-center items-center backdrop-blur-sm p-4 opacity-0 pointer-events-none transition-opacity duration-300">
        <div class="modal-box bg-slate-50 rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col overflow-hidden transform scale-95 transition-transform duration-300">
            <div class="bg-gradient-to-r from-blue-800 to-blue-600 p-5 flex justify-between items-center text-white border-b-4 border-blue-400">
                <div>
                    <h2 class="text-xl font-black flex items-center"><i class="fas fa-file-alt mr-2 text-blue-300"></i> Audit Kemasukan Dokumen</h2>
                    <p class="text-blue-100 text-xs mt-0.5">Pecahan {{ jumlah_dokumen|default:"0" }} dokumen yang dimuat naik ke Pangkalan Pengetahuan Bahasa (LKB).</p>
                </div>
                <button onclick="tutupModalInsight('modal-references')" class="bg-white/10 hover:bg-red-500 w-8 h-8 rounded-full transition flex items-center justify-center"><i class="fas fa-times"></i></button>
            </div>
            <div class="p-6 overflow-y-auto flex-1">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm">
                        <h4 class="font-black text-slate-800 text-sm mb-3 border-b border-slate-100 pb-2">Mengikut Jenis Dokumen</h4>
                        <div class="space-y-3">
                            <div><div class="flex justify-between text-xs font-bold mb-1"><span class="text-slate-600"><i class="fas fa-file-pdf text-rose-500 mr-1"></i> Polisi & Kerangka (PDF)</span><span class="text-blue-600">{{ fail_pdf }} ({{ pct_pdf }}%)</span></div><div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden"><div class="bg-blue-500 h-full" style="width: {{ pct_pdf }}%"></div></div></div>
                            <div><div class="flex justify-between text-xs font-bold mb-1"><span class="text-slate-600"><i class="fas fa-file-word text-blue-500 mr-1"></i> Minit Mesyuarat (DOCX)</span><span class="text-indigo-600">{{ fail_docx }} ({{ pct_docx }}%)</span></div><div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden"><div class="bg-indigo-400 h-full" style="width: {{ pct_docx }}%"></div></div></div>
                            <div><div class="flex justify-between text-xs font-bold mb-1"><span class="text-slate-600"><i class="fas fa-file-excel text-emerald-500 mr-1"></i> Data Audit/Kewangan (XLSX/CSV)</span><span class="text-emerald-600">{{ fail_xlsx }} ({{ pct_xlsx }}%)</span></div><div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden"><div class="bg-emerald-500 h-full" style="width: {{ pct_xlsx }}%"></div></div></div>
                        </div>
                    </div>
                    <div class="bg-blue-50 p-5 rounded-xl border border-blue-100 flex flex-col justify-center text-center">
                        <i class="fas fa-database text-4xl text-blue-300 mb-3"></i>
                        <h4 class="font-black text-blue-900 text-base mb-2">Status Kemasukan: <span class="text-emerald-600">Sihat</span></h4>
                        <p class="text-xs text-blue-800 leading-relaxed">Saiz korpus mencukupi untuk memulakan Fasa 2. Kepelbagaian jenis dokumen memastikan AI memahami dasar, kekangan operasi, dan realiti kewangan agensi.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="modal-actionability" class="fixed inset-0 bg-slate-900 bg-opacity-80 z-[1100] flex justify-center items-center backdrop-blur-sm p-4 opacity-0 pointer-events-none transition-opacity duration-300">
        <div class="modal-box bg-slate-50 rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col overflow-hidden transform scale-95 transition-transform duration-300">
            <div class="bg-gradient-to-r from-amber-600 to-amber-500 p-5 flex justify-between items-center text-white border-b-4 border-amber-400">
                <div>
                    <h2 class="text-xl font-black flex items-center"><i class="fas fa-cogs mr-2 text-amber-200"></i> Analisis Indeks Kebolehtindakan</h2>
                </div>
                <button onclick="tutupModalInsight('modal-actionability')" class="bg-white/10 hover:bg-red-500 w-8 h-8 rounded-full transition flex items-center justify-center"><i class="fas fa-times"></i></button>
            </div>
            <div class="p-6 overflow-y-auto flex-1">
                <div class="flex gap-6 flex-col md:flex-row items-start">
                    <div class="w-full md:w-1/3 bg-white p-5 rounded-xl border border-slate-200 shadow-sm text-center">
                        <div class="text-4xl font-black text-amber-600 mb-2">{{ purata_actionability|default:"0" }}%</div>
                        <div class="text-xs font-bold text-slate-500 uppercase tracking-widest">Kandungan Konstruktif</div>
                        <p class="text-[10px] text-slate-400 mt-2">Majoriti dokumen mencadangkan penyelesaian, bukan sekadar aduan.</p>
                    </div>
                    <div class="w-full md:w-2/3 bg-white p-5 rounded-xl border border-slate-200 shadow-sm">
                        <h3 class="font-bold text-slate-800 text-sm mb-3">Pecahan Semantik AI</h3>
                        <div class="space-y-4">
                            <div class="border-l-4 border-emerald-500 pl-3">
                                <h4 class="text-xs font-bold text-emerald-700">{{ pct_positif }}% Berorientasikan Penyelesaian</h4>
                                <p class="text-[11px] text-slate-500 mt-1">Mengandungi kata kerja pelaksanaan, cadangan kerangka, dan perancangan strategik.</p>
                            </div>
                            <div class="border-l-4 border-rose-500 pl-3">
                                <h4 class="text-xs font-bold text-rose-700">{{ pct_negatif }}% Berorientasikan Masalah</h4>
                                <p class="text-[11px] text-slate-500 mt-1">Hanya memaparkan keluhan dan aduan tanpa penyelesaian (berguna untuk RCA).</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="modal-novelty" class="fixed inset-0 bg-slate-900 bg-opacity-80 z-[1100] flex justify-center items-center backdrop-blur-sm p-4 opacity-0 pointer-events-none transition-opacity duration-300">
        <div class="modal-box bg-slate-50 rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col overflow-hidden transform scale-95 transition-transform duration-300">
            <div class="bg-gradient-to-r from-purple-800 to-purple-600 p-5 flex justify-between items-center text-white border-b-4 border-purple-400">
                <div>
                    <h2 class="text-xl font-black flex items-center"><i class="fas fa-gem mr-2 text-purple-300"></i> Kedalaman Konteks & Kelainan (Novelty)</h2>
                </div>
                <button onclick="tutupModalInsight('modal-novelty')" class="bg-white/10 hover:bg-red-500 w-8 h-8 rounded-full transition flex items-center justify-center"><i class="fas fa-times"></i></button>
            </div>
            <div class="p-6 overflow-y-auto flex-1">
                 <div class="bg-purple-50 p-6 rounded-xl border border-purple-100 flex flex-col md:flex-row items-center gap-6 mb-6">
                    <div class="text-center md:text-left">
                        <div class="text-5xl font-black text-purple-700">{{ purata_novelty|default:"0.0" }}</div>
                        <div class="text-xs font-bold text-purple-500 uppercase tracking-widest mt-1">Skor Novelty</div>
                    </div>
                    <div class="flex-1">
                        <p class="text-sm text-purple-900 leading-relaxed font-medium">Skor {{ purata_novelty|default:"0.0" }}/10 menunjukkan <strong>{{ teks_novelty }}</strong></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-8 flex items-center justify-between bg-white p-4 rounded-2xl shadow-sm border border-slate-200 max-w-[1600px] w-full mx-auto">
        <div></div> <div onclick="maraKeHabSPAF()" class="bg-gradient-to-br from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-bold px-8 py-3 rounded-xl shadow-md cursor-pointer transition flex items-center gap-2">
            Seterusnya: Hab Analitikal SPAF <i class="fas fa-lock-open text-[10px] ml-1 text-emerald-300"></i> <i class="fas fa-arrow-right ml-1"></i>
        </div>
    </div>

</div>

<script>
    window.bukaModalInsight = function(modalId) {
        const modal = document.getElementById(modalId);
        if(modal) {
            const box = modal.querySelector('.modal-box');
            modal.classList.remove('pointer-events-none', 'opacity-0');
            box.classList.remove('scale-95');
        }
    };
    window.tutupModalInsight = function(modalId) {
        const modal = document.getElementById(modalId);
        if(modal) {
            const box = modal.querySelector('.modal-box');
            modal.classList.add('opacity-0');
            box.classList.add('scale-95');
            setTimeout(() => { modal.classList.add('pointer-events-none'); }, 300);
        }
    };

    // Fungsi Gatekeeper Penganjur membuka Langkah 2 (Hab SPAF) bagi pihak peserta
    window.maraKeHabSPAF = function() {
        fetch("{% url 'bengkel:unlock_blueprint_step' pk=bengkel.pk %}", {
            method: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' },
            body: JSON.stringify({ step: 2 })
        })
        .then(() => {
            window.location.href = "{% url 'bengkel:analisis_spaf' pk=bengkel.pk %}";
        })
        .catch(err => console.error("Gagal mengemas kini pintu sekatan makro: ", err));
    };

    window.onload = () => {
        // Graf 1: Tema Wacana Dominan
        new Chart(document.getElementById('grafTemaKorpus').getContext('2d'), {
            type: 'bar',
            data: {
                labels: {{ tema_labels|safe }}, // Data dari Django
                datasets: [{
                    data: {{ tema_data|safe }}, // Data dari Django
                    backgroundColor: ['#4f46e5', '#3b82f6', '#0ea5e9', '#06b6d4', '#14b8a6', '#0d9488'],
                    borderRadius: 6, barThickness: 20
                }]
            },
            options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { grid: { display: true, color: '#f1f5f9' }, beginAtZero: true }, y: { grid: { display: false }, ticks: { font: { size: 11, weight: 'bold' } } } } }
        });

        // Graf 2: Pemetaan Domain
        new Chart(document.getElementById('grafDomain').getContext('2d'), {
            type: 'radar',
            data: {
                labels: {{ domain_labels|safe }}, // Data dari Django
                datasets: [{ 
                    data: {{ domain_data|safe }}, // Data dari Django
                    backgroundColor: 'rgba(139, 92, 246, 0.2)', 
                    borderColor: '#8b5cf6', 
                    borderWidth: 2 
                }]
            },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { r: { ticks: { display: false, beginAtZero: true } } } }
        });

        // Graf 3: Analisis Nada
        new Chart(document.getElementById('grafTone').getContext('2d'), {
            type: 'doughnut',
            data: {
                labels: ['Konstruktif (Penyelesaian)', 'Aduan (Masalah)', 'Fakta / Neutral'],
                datasets: [{ 
                    data: {{ nada_data|safe }}, // Data dari Django
                    backgroundColor: ['#10b981', '#f43f5e', '#cbd5e1'], 
                    borderWidth: 2, 
                    cutout: '70%' 
                }]
            },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { font: { size: 10 } } } } }
        });

        // --- FUNGSI LIVE POLLING (Setiap 5 Saat) ---
        setInterval(() => {
            fetch("{% url 'bengkel:korpus_live_data_ajax' pk=bengkel.pk %}")
            .then(res => res.json())
            .then(data => {
                // Update Nombor Kad (Akan berubah tanpa kelip)
                document.getElementById('live-jumlah').innerText = data.jumlah_dokumen;
                document.getElementById('live-action').innerText = data.purata_actionability;
                document.getElementById('live-action-bar').style.width = data.purata_actionability + '%';
                document.getElementById('live-novelty').innerText = data.purata_novelty;
                
                // Update Data Graf Tema secara Live
                const chartTema = Chart.getChart('grafTemaKorpus'); 
                if(chartTema) {
                    chartTema.data.labels = data.tema_labels;
                    chartTema.data.datasets[0].data = data.tema_data;
                    chartTema.update('none'); 
                }

                // Update Data Graf Radar Domain secara Live (Kalis Lekat)
                const chartDomain = Chart.getChart('grafDomain');
                if(chartDomain) {
                    chartDomain.data.labels = data.domain_labels;
                    chartDomain.data.datasets[0].data = data.domain_data;
                    chartDomain.update('none'); // Update lembut tanpa kelip
                }

                // Update Progress AI Membaca Fail
                const pBar = document.getElementById('live-progress-bar');
                const pText = document.getElementById('live-progress-text');
                const btnJana = document.getElementById('btn-jana-laporan');
                
                if(pBar && pText) {
                    pBar.style.width = data.peratus_proses + '%';
                    pText.innerText = data.dokumen_diproses + "/" + data.jumlah_dokumen + " (" + data.peratus_proses + "%)";
                    
                    // Serlahkan bar jika belum siap, hijau terang bila siap
                    if(data.peratus_proses < 100 && data.jumlah_dokumen > 0) {
                        pBar.classList.add('animate-pulse');
                        btnJana.classList.remove('from-emerald-500', 'to-teal-500');
                        btnJana.classList.add('from-slate-400', 'to-slate-500');
                    } else {
                        pBar.classList.remove('animate-pulse');
                        btnJana.classList.remove('from-slate-400', 'to-slate-500');
                        btnJana.classList.add('from-emerald-500', 'to-teal-500');
                    }
                }

                // Update Senarai Dokumen Top
                const senaraiTop = document.getElementById('live-dokumen-top');
                if(senaraiTop && data.dokumen_top_list) {
                    let htmlList = "";
                    if(data.dokumen_top_list.length === 0) {
                        htmlList = '<li class="text-center text-[11px] text-slate-400 py-4 italic">Belum ada dokumen yang dianalisis oleh AI.</li>';
                    } else {
                        data.dokumen_top_list.forEach(doc => {
                            htmlList += `
                            <li class="flex items-start gap-3 p-2 hover:bg-slate-50 rounded transition border border-transparent hover:border-slate-200">
                                <i class="fas ${doc.ikon} text-lg mt-1"></i>
                                <div class="flex-1 min-w-0">
                                    <h4 class="text-xs font-bold text-slate-700 truncate" title="${doc.nama_fail}">${doc.nama_fail}</h4>
                                    <p class="text-[10px] text-slate-500">${doc.penyumbang}</p>
                                </div>
                                <span class="bg-emerald-50 text-emerald-600 border border-emerald-100 text-[9px] font-bold px-2 py-0.5 rounded shadow-sm">${doc.skor}% QA</span>
                            </li>`;
                        });
                    }
                    senaraiTop.innerHTML = htmlList;
                }

            })
            .catch(err => console.log("Gagal menarik data live:", err));
        }, 5000); 
    };
</script>


{% endblock %}