{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Analisis Risiko" %} — {{ 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">6. Analisis Risiko</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-red-900 via-rose-900 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-red-500/20 border border-red-400/30 text-red-200 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-2">
                            <i class="fas fa-radiation"></i> Fasa 2.6: Penjanaan Matriks Risiko
                        </div>
                        <h1 class="text-2xl md:text-3xl font-extrabold text-white leading-tight">Analisis Risiko Prediktif</h1>
                        <p class="text-white/70 text-sm mt-1">Unjuran AI mengenai kegagalan sistemik jika Punca Masalah dibiarkan tanpa mitigasi.</p>
                    </div>
                </div>
                
                <div class="flex items-center gap-3 mt-4 md:mt-0 relative z-20">
                    <div class="bg-red-500/20 border border-red-400/50 text-red-300 text-xs font-bold px-4 py-2.5 rounded-xl flex items-center backdrop-blur-sm shadow-inner">
                        <i class="fas fa-satellite-dish text-red-400 mr-2 animate-pulse"></i> Pemantauan Live Aktif
                    </div>
                </div>

            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start flex-1">
            
            <div class="lg:col-span-7 bg-white p-6 rounded-xl shadow-sm border border-slate-200 h-full flex flex-col">
                <h3 class="font-black text-xl text-slate-800 mb-1 flex items-center"><i class="fas fa-braille text-red-500 mr-2"></i> Matriks Penilaian Ancaman</h3>
                <p class="text-xs text-slate-500 mb-6 border-b border-slate-100 pb-4">Pemetaan Kebarangkalian vs Tahap Impak berdasarkan data lapangan peserta.</p>
                <div class="relative flex-1 min-h-[400px] w-full">
                    <canvas id="grafRisk"></canvas>
                </div>
            </div>

            <div class="lg:col-span-5 flex flex-col gap-4 h-full">
                <div class="flex justify-between items-center mb-1">
                    <h3 class="font-black text-lg text-slate-800"><i class="fas fa-exclamation-triangle text-rose-500 mr-2"></i> Ancaman Dikenal Pasti</h3>
                    <div class="flex items-center gap-2">
                        <span class="text-xs font-bold bg-slate-100 text-slate-500 px-2 py-1 rounded"><span id="live-jumlah-risiko">{{ jumlah_risiko }}</span> Risiko</span>
                        <button onclick="sintesisMitigasiAI()" id="btn-sintesis-mitigasi" class="bg-indigo-100 text-indigo-700 hover:bg-indigo-200 border border-indigo-200 px-2 py-1 rounded text-[10px] font-bold uppercase tracking-widest transition flex items-center shadow-sm">
                            <i class="fas fa-robot mr-1"></i> Rumus Idea
                        </button>
                    </div>
                </div>
                
                <div id="ruang-senarai-risiko">
                {% for r in top_risiko %}
                <div class="bg-white border-l-4 border-{{ r.ui_color }}-500 rounded-xl p-5 shadow-sm hover:shadow-md transition">
                    <div class="flex justify-between items-start mb-2">
                        <h4 id="tajuk-risiko-{{ forloop.counter }}" class="font-bold text-slate-800 text-sm line-clamp-2 pr-2">{{ r.risiko }}</h4>
                        <span class="bg-{{ r.ui_color }}-100 text-{{ r.ui_color }}-700 text-[9px] font-black px-2 py-0.5 rounded uppercase shrink-0">Impak {{ r.impak }}</span>
                    </div>
                    <p class="text-[11px] text-slate-500 mb-3"><span class="font-bold text-slate-600">Mitigasi Cadangan:</span> <span id="teks-mitigasi-{{ forloop.counter }}">{{ r.mitigasi|truncatechars:120 }}</span></p>
                    <div class="flex items-center justify-between text-[10px] font-bold border-t border-slate-50 pt-2">
                        <span class="text-slate-400">Kebarangkalian: <span class="text-{{ r.ui_color }}-500">{{ r.kemungkinan|title }} ({{ r.x_val }}%)</span></span>
                        <span class="text-slate-400">Tahap Impak: <span class="text-{{ r.ui_color }}-500">{{ r.y_val }}/100</span></span>
                    </div>
                </div>
                {% empty %}
                <div class="bg-slate-50 p-8 rounded-xl border border-dashed border-slate-300 text-center flex-1 flex flex-col justify-center items-center">
                    <i class="fas fa-shield-alt text-4xl text-slate-300 mb-3"></i>
                    <p class="text-sm text-slate-500 font-bold">Tiada risiko direkodkan lagi.</p>
                </div>
                {% endfor %}
                </div>

                <button onclick="bukaLangkahTema()" class="w-full mt-auto bg-gradient-to-r from-rose-600 to-red-600 text-white rounded-xl p-4 text-center font-bold text-sm shadow-md hover:shadow-lg hover:from-rose-500 hover:to-red-500 transition-all flex items-center justify-center gap-2">
                    Teruskan Ke Fasa Blueprint (Janaan Tema) <i class="fas fa-lock-open text-[10px] ml-1 text-rose-200"></i> <i class="fas fa-arrow-right ml-1"></i>
                </button>

            </div>

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

<script>
    let chartRiskObj = null;

    window.onload = () => {
        const chartDatasets = JSON.parse('{{ chart_datasets_json|escapejs }}');
        const ctx = document.getElementById('grafRisk').getContext('2d');
        
        chartRiskObj = new Chart(ctx, {
            type: 'bubble',
            data: { datasets: chartDatasets },
            options: {
                responsive: true, maintainAspectRatio: false,
                plugins: { 
                    legend: { position: 'top', labels: { boxWidth: 10, font: { size: 10 } } },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `${context.dataset.label}: Kebarangkalian ${context.raw.x}%, Impak ${context.raw.y}/100`;
                            }
                        }
                    }
                },
                scales: {
                    x: { title: { display: true, text: 'Kebarangkalian Terjadi (%)', font: { weight: 'bold' } }, min: 0, max: 100, grid: { color: '#f1f5f9' } },
                    y: { title: { display: true, text: 'Tahap Impak Kerosakan (1-100)', font: { weight: 'bold' } }, min: 0, max: 100, grid: { color: '#f1f5f9' } }
                }
            }
        });

        // --- FUNGSI LIVE POLLING (Setiap 5 Saat) ---
        setInterval(() => {
            fetch("{% url 'bengkel:risk_live_data_ajax' pk=bengkel.pk %}")
            .then(res => res.json())
            .then(data => {
                // Update Jumlah Risiko
                document.getElementById('live-jumlah-risiko').innerText = data.jumlah_risiko;
                
                // Update Graf Buih (Bubble Chart)
                if(chartRiskObj) {
                    chartRiskObj.data.datasets = data.chart_datasets;
                    chartRiskObj.update('none'); // Update lembut tanpa kelip
                }

                // Update Senarai Kad Ancaman (Sebelah Kanan)
                const ruangSenarai = document.getElementById('ruang-senarai-risiko');
                // Syarat: Kita hanya kemas kini jika AI belum merumuskan teks (tiada kelas text-indigo-600)
                if (ruangSenarai && !ruangSenarai.innerHTML.includes('text-indigo-600')) {
                    if (data.top_risiko.length > 0) {
                        let htmlRisiko = '';
                        let counter = 1;
                        data.top_risiko.forEach(r => {
                            htmlRisiko += `
                            <div class="bg-white border-l-4 border-${r.ui_color}-500 rounded-xl p-5 shadow-sm hover:shadow-md transition mb-4 animate-fade-up">
                                <div class="flex justify-between items-start mb-2">
                                    <h4 id="tajuk-risiko-${counter}" class="font-bold text-slate-800 text-sm line-clamp-2 pr-2">${r.risiko}</h4>
                                    <span class="bg-${r.ui_color}-100 text-${r.ui_color}-700 text-[9px] font-black px-2 py-0.5 rounded uppercase shrink-0">Impak ${r.impak}</span>
                                </div>
                                <p class="text-[11px] text-slate-500 mb-3"><span class="font-bold text-slate-600">Mitigasi Cadangan:</span> <span id="teks-mitigasi-${counter}">${r.mitigasi}</span></p>
                                <div class="flex items-center justify-between text-[10px] font-bold border-t border-slate-50 pt-2">
                                    <span class="text-slate-400">Kebarangkalian: <span class="text-${r.ui_color}-500">${r.kemungkinan.charAt(0).toUpperCase() + r.kemungkinan.slice(1)} (${r.x_val}%)</span></span>
                                    <span class="text-slate-400">Tahap Impak: <span class="text-${r.ui_color}-500">${r.y_val}/100</span></span>
                                </div>
                            </div>`;
                            counter++;
                        });
                        ruangSenarai.innerHTML = htmlRisiko;
                    }
                }
            })
            .catch(err => console.log("Gagal menarik data live Risk:", err));
        }, 5000);
    };

    // FUNGSI BUTANG AI (SINTESIS MITIGASI PUKAL)
    function sintesisMitigasiAI() {
        if(!confirm("{% trans 'Arahkan AI membaca kesemua idea mitigasi peserta yang panjang dan merumuskannya kepada satu ayat padat?' %}")) return;
        
        const btn = document.getElementById('btn-sintesis-mitigasi');
        const asalHTML = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Merumus...';
        btn.disabled = true;

        fetch("{% url 'bengkel:sintesis_mitigasi_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) {
                // Berapa banyak risiko di skrin sekarang?
                const totals = {{ top_risiko|length|default:0 }};
                
                for(let i=1; i<=totals; i++) {
                    const tajukEl = document.getElementById('tajuk-risiko-' + i);
                    const mitigasiEl = document.getElementById('teks-mitigasi-' + i);
                    
                    if(!tajukEl || !mitigasiEl) continue;
                    
                    const tajuk = tajukEl.innerText.trim();
                    
                    // Padankan jawapan AI dengan tajuk di skrin (Guna Padanan Substring Kabur)
                    const match = data.data.find(item => item.risiko && tajuk.includes(item.risiko.substring(0, 15)));
                    
                    if(match) {
                        // Teks berubah warna menjadi Indigo (Tanda ia diproses AI)
                        mitigasiEl.innerHTML = `<span class="text-indigo-600 font-bold italic"><i class="fas fa-magic mr-1 text-indigo-400"></i> ${match.rumusan_mitigasi}</span>`;
                    }
                }
                
                btn.innerHTML = '<i class="fas fa-check mr-1"></i> Selesai';
                btn.classList.replace('bg-indigo-100', 'bg-emerald-100');
                btn.classList.replace('text-indigo-700', 'text-emerald-700');
                btn.classList.replace('border-indigo-200', 'border-emerald-200');
            } else {
                alert("{% trans 'Gagal:' %} " + data.error);
                btn.innerHTML = asalHTML; btn.disabled = false;
            }
        })
        .catch(err => {
            alert("{% trans 'Ralat Rangkaian AI. Sila cuba lagi.' %}");
            btn.innerHTML = asalHTML; btn.disabled = false;
        });
    }

    // Fungsi Gatekeeper Penganjur membuka Langkah 3 (Tema Utama) bagi pihak peserta
    window.bukaLangkahTema = 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: 3 })
        })
        .then(() => {
            window.location.href = "{% url 'bengkel:analisis_tema' pk=bengkel.pk %}";
        })
        .catch(err => console.error("Gagal mengemas kini pintu sekatan makro: ", err));
    };
</script>
{% endblock %}