{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Pengesahan Punca" %} — {{ 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>
    <a href="{% url 'bengkel:analisis_spaf' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">Hab SPAF</a> <span class="mx-2 text-slate-400">/</span>
    <span class="text-slate-500 font-medium text-xs">5. Pengesahan Punca</span>
{% endblock %}

{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
    .scan-line { width: 100%; height: 2px; background: #34d399; position: absolute; box-shadow: 0 0 10px #34d399; animation: scan 2s linear infinite; }
    @keyframes scan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
</style>

<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-emerald-900 via-teal-800 to-slate-900 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,.15) 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:analisis_spaf' 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 Hab SPAF">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <div>
                        <div class="inline-flex items-center gap-1.5 bg-emerald-500/20 border border-emerald-400/30 text-emerald-200 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-2">
                            <i class="fas fa-check-double"></i> Fasa 2.5: Pengesahan AI
                        </div>
                        <h1 class="text-2xl md:text-3xl font-extrabold text-white leading-tight">Pengesahan Punca (Validasi SME)</h1>
                        <p class="text-white/70 text-sm mt-1">Menyemak silang penemuan AI dengan pandangan pakar lapangan (SME Consensus).</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200 relative overflow-hidden">
                <div class="absolute -right-4 -bottom-4 opacity-5"><i class="fas fa-microscope text-8xl text-emerald-500"></i></div>
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1">RCA Disemak</div>
                <div class="text-3xl font-black text-emerald-700" id="live-jumlah-rca">{{ jumlah_rca }}</div>
                <div class="text-[10px] text-emerald-500 font-bold mt-1"><i class="fas fa-bolt"></i> Polling Live...</div>
            </div>
            
            <div class="bg-white p-5 rounded-xl shadow-sm border border-emerald-400 shadow-md relative overflow-hidden">
                <div class="absolute -right-4 -bottom-4 opacity-5"><i class="fas fa-check-circle text-8xl text-emerald-500"></i></div>
                <div class="text-emerald-500 text-[10px] font-bold uppercase tracking-widest mb-1">Kadar Konsensus SME</div>
                <div class="text-3xl font-black text-emerald-600"><span id="live-konsensus">{{ kadar_konsensus|default:"0" }}</span>%</div>
                <div class="text-[10px] text-slate-500 mt-1 font-medium">Bersetuju AI Tepat</div>
            </div>
            
            <div class="bg-white p-5 rounded-xl shadow-sm border border-rose-200 relative overflow-hidden">
                <div class="absolute -right-4 -bottom-4 opacity-5"><i class="fas fa-times-circle text-8xl text-rose-500"></i></div>
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1">Kadar Bantahan</div>
                <div class="text-3xl font-black text-rose-600"><span id="live-bantahan">{{ kadar_bantahan|default:"0" }}</span>%</div>
                <div class="text-[10px] text-rose-500 mt-1 font-bold">Konteks Tambahan Diperlukan</div>
            </div>
            
            <div onclick="maraKeFasaEnam()" class="bg-gradient-to-br from-emerald-50 to-teal-50 p-5 rounded-xl shadow-sm border border-emerald-200 cursor-pointer hover:shadow-md hover:border-emerald-400 transition group flex flex-col justify-between">
                <div>
                    <div class="text-emerald-800 text-[10px] font-bold uppercase tracking-widest mb-1 flex items-center gap-1.5">
                        Status Seterusnya <i class="fas fa-lock-open text-[9px] text-emerald-500"></i>
                    </div>
                    <div class="text-3xl font-black text-emerald-700">Sedia</div>
                </div>
                <div class="text-[10px] text-emerald-600 mt-3 font-bold group-hover:text-emerald-800 transition-colors flex items-center">
                    Buka Kunci & Alih ke Modul 6 <i class="fas fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            
            <div class="lg:col-span-5 flex flex-col h-full gap-6">
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden flex flex-col relative h-[450px]">
                    
                    <div class="bg-slate-50 p-4 border-b border-slate-200 flex justify-between items-center">
                        <div>
                            <h3 class="font-black text-sm text-slate-800"><i class="fas fa-comments text-rose-500 mr-2"></i> Senarai Maklum Balas Kritis</h3>
                            <p class="text-[10px] text-slate-500 mt-0.5">Bantahan & pandangan berbeza dari pakar lapangan.</p>
                        </div>
                        <button onclick="sintesisBantahanAI()" id="btn-sintesis-bantahan" class="bg-rose-100 hover:bg-rose-200 text-rose-700 border border-rose-200 text-[10px] font-bold px-3 py-1.5 rounded-lg shadow-sm transition flex items-center gap-2">
                            <i class="fas fa-robot"></i> Rumus Bantahan (AI)
                        </button>
                    </div>
                    
                    <div class="p-5 space-y-4 flex-1 overflow-y-auto custom-scrollbar" id="ruang-senarai-bantahan">
                        {% if senarai_bantahan %}
                            {% for b in senarai_bantahan %}
                            <div class="bg-rose-50/50 p-4 rounded-lg border border-rose-100">
                                <h4 class="text-[11px] font-bold text-slate-700 mb-2 border-b border-rose-100 pb-2"><span class="text-rose-500">Isu AI:</span> {{ b.masalah_sumber }}</h4>
                                <div class="flex items-start gap-2 text-xs text-slate-600">
                                    <i class="fas fa-quote-left text-rose-300 mt-1"></i>
                                    <p class="italic font-medium">"{{ b.komen_peserta }}"</p>
                                </div>
                            </div>
                            {% endfor %}
                        {% else %}
                            <div class="flex flex-col items-center justify-center h-full text-slate-400">
                                <i class="fas fa-check-circle text-4xl text-emerald-200 mb-3"></i>
                                <p class="text-sm font-bold">Tiada Bantahan Direkodkan</p>
                                <p class="text-xs">Kesemua SME bersetuju dengan penemuan AI setakat ini.</p>
                            </div>
                        {% endif %}
                    </div>
                    
                </div>
            </div>

            <div class="lg:col-span-7 space-y-6">
                
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
                    <div class="flex justify-between items-center mb-6 border-b border-slate-100 pb-4">
                        <div>
                            <h3 class="font-black text-xl text-slate-800"><i class="fas fa-balance-scale text-emerald-500 mr-2"></i> Kadar Konsensus (Pakar vs AI)</h3>
                            <p class="text-xs text-slate-500 mt-1">Taburan maklum balas "Ya, Tepat" lawan "Tidak, Ia Berbeza" dari peserta.</p>
                        </div>
                    </div>
                    
                    <div class="flex flex-col md:flex-row items-center gap-8">
                        <div class="relative h-48 w-48">
                            <canvas id="grafKonsensus"></canvas>
                        </div>
                        <div class="flex-1 space-y-4 w-full">
                            <div class="bg-emerald-50 border border-emerald-100 p-4 rounded-xl">
                                <div class="text-xs font-bold text-emerald-800 mb-1"><i class="fas fa-check-circle mr-1"></i> <span id="live-setuju">{{ setuju_count }}</span> Disahkan Tepat</div>
                                <p class="text-[10px] text-emerald-600">SME bersetuju bahawa punca yang dikeluarkan oleh AI menepati realiti sebenar di jabatan mereka.</p>
                            </div>
                            <div class="bg-rose-50 border border-rose-100 p-4 rounded-xl">
                                <div class="text-xs font-bold text-rose-800 mb-1"><i class="fas fa-times-circle mr-1"></i> <span id="live-bantah">{{ bantah_count }}</span> Bantahan / Variasi</div>
                                <p class="text-[10px] text-rose-600">SME merasakan terdapat punca atau naratif lain yang lebih tepat berbanding diagnosis AI.</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>

<script>
    let chartKonsensusObj = null;

    window.onload = () => {
        const grafData = JSON.parse('{{ graf_validation_json|escapejs }}');
        const ctxKonsensus = document.getElementById('grafKonsensus').getContext('2d');
        
        chartKonsensusObj = new Chart(ctxKonsensus, {
            type: 'doughnut',
            data: {
                labels: ['Ya, Tepat', 'Tidak, Berbeza'],
                datasets: [{
                    data: grafData,
                    backgroundColor: ['#10b981', '#f43f5e'],
                    borderWidth: 2, borderColor: '#ffffff', cutout: '65%'
                }]
            },
            options: { 
                responsive: true, maintainAspectRatio: false, 
                plugins: { legend: { position: 'bottom', labels: { boxWidth: 10, font: { size: 10 } } } } 
            }
        });

        // --- FUNGSI LIVE POLLING (Setiap 5 Saat) ---
        setInterval(() => {
            fetch("{% url 'bengkel:rca_validation_live_data_ajax' pk=bengkel.pk %}")
            .then(res => res.json())
            .then(data => {
                // Update Nombor Kad Atas
                document.getElementById('live-jumlah-rca').innerText = data.jumlah_rca;
                document.getElementById('live-konsensus').innerText = data.kadar_konsensus;
                document.getElementById('live-bantahan').innerText = data.kadar_bantahan;
                
                // Update Label Sebelah Graf
                document.getElementById('live-setuju').innerText = data.graf_validation_data[0];
                document.getElementById('live-bantah').innerText = data.graf_validation_data[1];
                
                // Update Graf
                if(chartKonsensusObj) {
                    chartKonsensusObj.data.datasets[0].data = data.graf_validation_data;
                    chartKonsensusObj.update('none'); // Berubah tanpa kelip
                }

                // Update Senarai Bantahan Kritis secara Live!
                // Syarat: Kita hanya kemas kini jika AI belum di-trigger (untuk elak padam kotak AI)
                const ruangSenarai = document.getElementById('ruang-senarai-bantahan');
                if (ruangSenarai && !ruangSenarai.innerHTML.includes('Rumusan Eksekutif (AI)')) {
                    if (data.senarai_bantahan.length > 0) {
                        let htmlBantahan = '';
                        data.senarai_bantahan.forEach(b => {
                            htmlBantahan += `
                            <div class="bg-rose-50/50 p-4 rounded-lg border border-rose-100 mb-4 animate-fade-up">
                                <h4 class="text-[11px] font-bold text-slate-700 mb-2 border-b border-rose-100 pb-2"><span class="text-rose-500">Isu AI:</span> ${b.masalah_sumber}</h4>
                                <div class="flex items-start gap-2 text-xs text-slate-600">
                                    <i class="fas fa-quote-left text-rose-300 mt-1"></i>
                                    <p class="italic font-medium">"${b.komen_peserta}"</p>
                                </div>
                            </div>`;
                        });
                        ruangSenarai.innerHTML = htmlBantahan;
                    }
                }
            })
            .catch(err => console.log("Gagal menarik data live RCV:", err));
        }, 5000);
    };

    // FUNGSI BUTANG RUMUS BANTAHAN (AI)
    function sintesisBantahanAI() {
        const btn = document.getElementById('btn-sintesis-bantahan');
        const ruangSenarai = document.getElementById('ruang-senarai-bantahan');

        if(!confirm("{% trans 'Arahkan AI membaca semua maklum balas kritis peserta dan merumuskan punca perselisihan?' %}")) return;

        const asalHTML = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Merumus...';
        btn.disabled = true;

        fetch("{% url 'bengkel:sintesis_bantahan_ai_ajax' pk=bengkel.pk %}", {
            method: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' }
        })
        .then(res => res.json())
        .then(data => {
            if(data.success) {
                // Bina Kotak Visual AI di bahagian atas senarai
                const aiBox = document.createElement('div');
                aiBox.className = "bg-slate-800 text-white p-5 rounded-xl border border-slate-700 mb-5 shadow-lg animate-fade-up";
                aiBox.innerHTML = `
                    <div class="flex items-center gap-2 mb-3 border-b border-slate-600 pb-3">
                        <i class="fas fa-robot text-emerald-400 text-lg"></i>
                        <h4 class="font-black text-sm text-emerald-300">Rumusan Eksekutif (AI)</h4>
                    </div>
                    <p class="text-xs text-slate-300 leading-relaxed mb-4 italic">"${data.data.rumusan_bantahan}"</p>
                    <div class="bg-slate-900/50 p-3 rounded-lg border border-slate-700/50">
                        <span class="text-[9px] font-bold text-amber-400 uppercase tracking-widest block mb-1">Cadangan Tindakan:</span>
                        <p class="text-[11px] text-slate-400">${data.data.cadangan_tindakan}</p>
                    </div>
                `;
                
                // Letak kotak AI ini di tempat pertama (paling atas)
                ruangSenarai.insertBefore(aiBox, ruangSenarai.firstChild);

                // Tukar butang jadi hijau (Selesai)
                btn.innerHTML = '<i class="fas fa-check"></i> Disintesis';
                btn.classList.replace('bg-rose-100', 'bg-emerald-100');
                btn.classList.replace('text-rose-700', 'text-emerald-700');
                btn.classList.replace('border-rose-200', 'border-emerald-200');
            } else {
                alert("{% trans 'Gagal:' %} " + data.error);
                btn.innerHTML = asalHTML; btn.disabled = false;
            }
        })
        .catch(err => {
            alert("{% trans 'Ralat AI.' %}");
            btn.innerHTML = asalHTML; btn.disabled = false;
        });
    }

    // Fungsi Gatekeeper Penganjur membuka Node 6 (Risiko) bagi pihak peserta
    window.maraKeFasaEnam = function() {
        fetch("{% url 'bengkel:unlock_spaf_step' pk=bengkel.pk %}", {
            method: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' },
            body: JSON.stringify({ step: 6 })
        })
        .then(() => {
            window.location.href = "{% url 'bengkel:analisis_risk' pk=bengkel.pk %}";
        })
        .catch(err => console.error("Gagal mengemas kini pintu sekatan: ", err));
    };
</script>
{% endblock %}