{% extends "base.html" %}
{% load i18n %}
{% load bengkel_tags %}
{% block title %}{% trans "Penilaian Risiko" %} — {{ bengkel.title }}{% endblock %}

{% block breadcrumb %}
    <a href="{% url 'bengkel:dashboard' %}?tab=bengkel" class="text-blue-600 hover:underline text-xs font-bold">Laman Utama Peserta</a> <span class="mx-2 text-slate-400">/</span>
    <a href="{% url 'bengkel:peserta_lobi' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">Lobi Acara</a> <span class="mx-2 text-slate-400">/</span>
    <a href="{% url 'bengkel:peserta_overview' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">Peta Perjalanan Blueprint</a> <span class="mx-2 text-slate-400">/</span>
    <a href="{% url 'bengkel:peserta_spaf' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">Hab Tugasan SPAF</a> <span class="mx-2 text-slate-400">/</span>
    <span class="text-slate-500 font-medium text-xs">6. Penilaian Risiko</span>
{% endblock %}

{% block content %}
<style>
    .evaluated-card { border-color: #10b981 !important; background-color: #ecfdf5 !important; }
    input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
    input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #ef4444; cursor: pointer; margin-top: -8px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
    input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; background: #e2e8f0; border-radius: 4px; }
</style>

<div class="animate-fade-up">
    <div class="bg-gradient-to-r from-blue-900 via-indigo-900 to-slate-900 shadow-lg relative z-20 rounded-3xl mb-8 overflow-hidden border border-slate-800">
        <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1px);background-size:20px 20px;"></div>
        <div class="px-6 py-5 relative flex flex-col sm:flex-row sm:items-center justify-between gap-6">
            <div class="flex items-center gap-4">
                <a href="{% url 'bengkel:peserta_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 class="border-l border-white/20 pl-4 flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-white text-blue-900 flex items-center justify-center font-black text-xl shadow-md border-2 border-blue-300 uppercase shrink-0">
                        {{ user.first_name|first|default:user.username|first }}
                    </div>
                    <div>
                        <h1 class="text-xl font-black text-white tracking-wide">{{ user.get_full_name|default:user.username }}</h1>
                        <p class="text-indigo-200 text-xs mt-0.5 font-medium uppercase tracking-widest">SME Workspace • {{ bengkel.title }}</p>
                    </div>
                </div>
            </div>
            <div class="flex items-center gap-6 self-start sm:self-auto">
                <div class="text-left sm:text-right">
                    <div class="text-[10px] text-emerald-300 font-bold uppercase tracking-widest mb-0.5">Skor Sumbangan</div>
                    <div class="text-2xl font-black text-emerald-400 leading-none transition-all duration-500" id="skor-peserta">{% kira_skor_peserta request.user bengkel %} <span class="text-sm text-white/50">pts</span></div>
                </div>
            </div>
        </div>
    </div>

    <div class="flex flex-col gap-6 mb-8">
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 md:p-8 relative overflow-hidden">
            <div class="absolute top-0 left-0 w-1 h-full bg-red-500"></div>
            <div class="absolute -right-10 -bottom-10 opacity-5"><i class="fas fa-radiation text-9xl text-red-500"></i></div>
            <div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 text-red-600 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-4 relative z-10">
                <i class="fas fa-shield-alt"></i> Node 6: Analisis Risiko Prediktif
            </div>
            <div class="flex flex-col md:flex-row md:items-start justify-between gap-6 relative z-10">
                <div class="flex-1">
                    <h2 class="text-xl md:text-2xl font-black text-slate-800 mb-2">Nilaikan Unjuran Risiko AI</h2>
                    <p class="text-sm text-slate-500 max-w-3xl leading-relaxed">AI telah mengunjurkan beberapa risiko kritikal berdasarkan punca masalah yang dikenal pasti. Sila nilaikan <strong>Kebarangkalian (Probability)</strong> dan tahap <strong>Impak</strong> jika risiko ini berlaku di agensi anda.</p>
                </div>
                <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 text-center min-w-[180px]">
                    <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Menunggu Penilaian</div>
                    <div class="text-3xl font-black text-red-600"><span id="kiraan-semakan">{{ findings.count }}</span></div>
                    <div class="text-[10px] text-slate-500 mt-1">Risiko Perlu Disemak</div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
            <div class="lg:col-span-5 flex flex-col h-full gap-4">
                <!-- Paginasi Peserta -->
                <div class="flex justify-between items-center bg-white p-3 rounded-2xl shadow-sm border border-slate-200">
                    <h3 class="font-bold text-sm text-slate-500 uppercase tracking-widest px-3">Senarai Unjuran Risiko AI</h3>
                    <div class="flex gap-2">
                        <button type="button" onclick="pindahMukaRisk(-1)" class="w-9 h-9 rounded-xl bg-slate-100 text-slate-500 hover:bg-red-50 hover:text-red-600 hover:border-red-200 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed shadow-sm" id="btn-prev-k"><i class="fas fa-chevron-left text-xs"></i></button>
                        <span id="page-info-k" class="text-xs font-bold text-red-600 flex items-center px-2 bg-red-50 rounded-xl border border-red-100">1/1</span>
                        <button type="button" onclick="pindahMukaRisk(1)" class="w-9 h-9 rounded-xl bg-slate-100 text-slate-500 hover:bg-red-50 hover:text-red-600 hover:border-red-200 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed shadow-sm" id="btn-next-k"><i class="fas fa-chevron-right text-xs"></i></button>
                    </div>
                </div>

                <div class="flex-1 flex flex-col gap-4 min-h-[350px] content-start" id="senarai-risk">
                {% if findings %}
                    {% for finding in findings %}
                    <div class="kad-risk-item bg-white rounded-xl shadow-sm border-2 border-slate-200 overflow-hidden transition-all duration-300 cursor-pointer hover:border-red-400 animate-fade-up" 
                         id="kad-risk-{{ finding.id }}" onclick="pilihRisk({{ finding.id }}, 'Risiko: {{ finding.punca_utama|truncatechars:30 }}')">
                        <div class="p-4 border-b border-slate-100 flex justify-between items-center bg-slate-50">
                            <span class="bg-red-100 text-red-700 font-black px-2 py-0.5 rounded text-[10px] uppercase">Unjuran Risiko AI</span>
                            <i class="fas fa-radiation text-slate-400"></i>
                        </div>
                        <div class="p-5">
                            <h3 class="font-black text-sm text-slate-800 mb-2">Risiko akibat: <br><span class="text-red-600">{{ finding.punca_utama }}</span></h3>
                            <p class="text-xs text-slate-500 leading-relaxed mb-3">Sila nilai kebarangkalian dan impak jika punca ini tidak diselesaikan segera.</p>
                            <div class="flex items-center justify-between" id="status-bar-{{ finding.id }}">
                                <span class="text-[10px] font-bold text-amber-500 uppercase tracking-widest animate-pulse"><i class="fas fa-exclamation-circle"></i> Perlu Penilaian</span>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <div class="bg-white p-10 rounded-xl border-2 border-dashed border-slate-200 text-center kad-risk-item hidden">
                        <p class="text-slate-400 text-sm">Tiada punca dikenal pasti. Sila hantar RCA di Node 4 terlebih dahulu.</p>
                    </div>
                {% endif %}
                </div>
            </div>

<script>
    // LOGIK PAGINASI KAD RISIKO (PESERTA)
    let currentKPage = 0;
    const cardsPerKPage = 2; // Papar top 2 kad risiko serentak ke bawah

    function kemaskiniPaginasiRisk() {
        const allKCards = document.querySelectorAll('.kad-risk-item:not(.hidden)');
        let totalKPages = Math.ceil(allKCards.length / cardsPerKPage);
        if (totalKPages === 0) totalKPages = 1;
        
        if (currentKPage >= totalKPages) currentKPage = totalKPages - 1;
        if (currentKPage < 0) currentKPage = 0;

        allKCards.forEach(c => c.style.display = 'none'); 
        
        let mula = currentKPage * cardsPerKPage;
        let tamat = mula + cardsPerKPage;
        
        for(let i=mula; i<tamat && i<allKCards.length; i++) {
            allKCards[i].style.display = 'block'; 
        }
        
        document.getElementById('page-info-k').innerText = `${currentKPage + 1} / ${totalKPages}`;
        document.getElementById('btn-prev-k').disabled = currentKPage === 0;
        document.getElementById('btn-next-k').disabled = currentKPage === totalKPages - 1;
    }

    function pindahMukaRisk(arah) {
        currentKPage += arah;
        kemaskiniPaginasiRisk();
    }

    window.addEventListener('DOMContentLoaded', () => {
        kemaskiniPaginasiRisk();
    });
</script>

            <div class="lg:col-span-7">
                <div id="ruang-kosong" class="bg-white rounded-2xl shadow-sm border border-slate-200 p-10 flex flex-col items-center justify-center text-center h-full min-h-[400px]">
                    <i class="fas fa-hand-pointer text-5xl text-slate-200 mb-4"></i>
                    <h3 class="font-bold text-slate-400">Pilih Unjuran Risiko</h3>
                    <p class="text-xs text-slate-400 mt-2 max-w-xs">Klik pada mana-mana kad di sebelah kiri untuk menilai kebarangkalian dan impak risiko tersebut terhadap agensi anda.</p>
                </div>

                <div id="ruang-penilaian" class="bg-white rounded-2xl shadow-sm border border-red-200 p-6 hidden flex flex-col h-full relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-24 h-24 bg-red-50 rounded-bl-full z-0"></div>
                    <h3 class="font-black text-lg text-slate-800 mb-1 relative z-10">Panel Penilaian Risiko</h3>
                    <p class="text-xs text-slate-500 mb-6 border-b border-slate-100 pb-4 relative z-10">Menilai Risiko: <span id="risk-title-label" class="font-bold text-red-600">Kelumpuhan Sistem</span></p>

                    {% if not bengkel.is_locked %}
                    <form id="form-risk" onsubmit="hantarPenilaian(event)" class="flex-1 flex flex-col relative z-10">
                        <input type="hidden" id="current-risk-id" value="">

                        <div class="mb-6 bg-slate-50 p-4 rounded-xl border border-slate-200">
                            <div class="flex justify-between items-end mb-2"><label class="block text-xs font-bold text-slate-700">Kebarangkalian (Probability)</label><span class="text-sm font-black text-red-600"><span id="val-prob">50</span>%</span></div>
                            <p class="text-[9px] text-slate-500 mb-3">Berapa peratus kemungkinan ia berlaku di agensi anda dalam masa 12 bulan?</p>
                            <input type="range" id="slider-prob" min="0" max="100" value="50" oninput="updateSlider('prob', this.value)">
                            <div class="flex justify-between text-[9px] text-slate-400 font-bold mt-2 uppercase"><span>Sukar Berlaku (0)</span><span>Pasti Berlaku (100)</span></div>
                        </div>

                        <div class="mb-6 bg-slate-50 p-4 rounded-xl border border-slate-200">
                            <div class="flex justify-between items-end mb-2"><label class="block text-xs font-bold text-slate-700">Tahap Impak</label><span class="text-sm font-black text-red-600"><span id="val-impact">50</span>/100</span></div>
                            <p class="text-[9px] text-slate-500 mb-3">Jika ini terjadi, sejauh manakah ia mengganggu operasi dan keselamatan pesakit?</p>
                            <input type="range" id="slider-impact" min="0" max="100" value="50" oninput="updateSlider('impact', this.value)">
                            <div class="flex justify-between text-[9px] text-slate-400 font-bold mt-2 uppercase"><span>Ringan (0)</span><span>Bencana (100)</span></div>
                        </div>

                        <div class="mb-6 flex-1">
                            <label class="block text-xs font-bold text-slate-600 mb-1.5">Cadangan Mitigasi / Kawalan Semasa <span class="text-red-500">*</span></label>
                            <textarea id="input-mitigasi" required rows="3" placeholder="Apa yang perlu dibuat, atau apa yang sedang dibuat untuk elak risiko ini?..." class="w-full bg-white border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500 text-slate-700 resize-none"></textarea>
                        </div>

                        <button type="submit" id="btn-submit-risk" class="w-full bg-red-600 text-white text-sm font-bold py-3 rounded-xl shadow-sm hover:bg-red-700 transition flex items-center justify-center mt-auto">
                            <i class="fas fa-save mr-2"></i> Simpan Penilaian ke dalam Matriks
                        </button>
                    </form>
                    {% else %}
                    <div class="bg-slate-50 border border-slate-200 rounded-xl p-6 text-center my-auto">
                        <i class="fas fa-lock text-slate-400 text-2xl mb-2"></i>
                        <p class="text-xs font-black text-slate-700">Matriks Risiko Dikunci</p>
                        <p class="text-[10px] text-slate-500 mt-1">Unjuran impak dan mitigasi bagi parameter ini telah dibekukan.</p>
                    </div>
                    {% endif %}
                </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">
        <a href="{% url 'bengkel:peserta_rca_validation' pk=bengkel.pk %}" class="bg-slate-600 hover:bg-slate-700 text-white font-bold px-8 py-3 rounded-xl shadow-md transition flex items-center gap-2">
            <i class="fas fa-arrow-left"></i> Kembali: Pengesahan Punca
        </a>
        
        <button id="btn-next-step" onclick="window.location.href='{% url 'bengkel:peserta_spaf' pk=bengkel.pk %}'" 
            class="bg-slate-800 hover:bg-slate-900 text-white font-bold px-8 py-3 rounded-xl shadow-md transition flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed" 
            {% if pending > 0 and not bengkel.is_locked %}disabled{% endif %}>
            Tamat Fasa Analisis <i class="fas fa-flag-checkered"></i>
        </button>
    </div>

<script>
    let statusRisiko = {}; 
    let skorSekarang = {% kira_skor_peserta request.user bengkel %}; 
    let pendingCount = parseInt("{{ findings.count|default:0 }}");

    function updateSlider(type, value) { 
        document.getElementById(`val-${type}`).innerText = value; 
    }

    function pilihRisk(id, title) {
        document.querySelectorAll('[id^="kad-risk-"]').forEach(kad => { 
            if(!kad.classList.contains('evaluated-card')) { 
                kad.classList.remove('border-red-500', 'shadow-md'); 
                kad.classList.add('border-slate-200'); 
            } 
        });
        const kadPilih = document.getElementById(`kad-risk-${id}`);
        if(!kadPilih.classList.contains('evaluated-card')) { 
            kadPilih.classList.remove('border-slate-200'); 
            kadPilih.classList.add('border-red-500', 'shadow-md'); 
        }
        document.getElementById('ruang-kosong').classList.add('hidden'); 
        document.getElementById('ruang-penilaian').classList.remove('hidden');
        document.getElementById('risk-title-label').innerText = title; 
        document.getElementById('current-risk-id').value = id;
        
        // Cek jika dah ada data lama
        if (statusRisiko[id]) {
            document.getElementById('slider-prob').value = statusRisiko[id].prob;
            document.getElementById('slider-impact').value = statusRisiko[id].impact;
            document.getElementById('input-mitigasi').value = statusRisiko[id].mitigasi;
            updateSlider('prob', statusRisiko[id].prob);
            updateSlider('impact', statusRisiko[id].impact);
        } else {
            document.getElementById('form-risk').reset(); 
            document.getElementById('slider-prob').value = 50; 
            document.getElementById('slider-impact').value = 50; 
            updateSlider('prob', 50); 
            updateSlider('impact', 50);
        }
    }

    function hantarPenilaian(event) {
        event.preventDefault();
        const btn = document.getElementById('btn-submit-risk'); 
        const riskId = document.getElementById('current-risk-id').value; 
        const probVal = document.getElementById('slider-prob').value; 
        const impactVal = document.getElementById('slider-impact').value;
        const mitigasiVal = document.getElementById('input-mitigasi').value;

        btn.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i> {% trans "Mengemaskini Matriks Risiko..." %}'; 
        btn.disabled = true; 
        btn.classList.add('opacity-75');

        // Timeout & AbortController kalis hang (25 saat)
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 25000);

        fetch("{% url 'bengkel:simpan_risk_ajax' pk=bengkel.pk %}", {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                risk_id: riskId,
                prob: probVal,
                impact: impactVal,
                mitigasi: mitigasiVal
            }),
            signal: controller.signal
        })
        .then(res => {
            if (!res.ok) throw new Error("Ralat pelayan HTTP " + res.status);
            return res.json();
        })
        .then(data => {
            clearTimeout(timeoutId);
            if(data.success) {
                // JIKA AI KESAN SEBAGAI SAMPAH
                if(data.status === "spam") {
                    alert("Cadangan mitigasi anda ditolak oleh AI kerana berbentuk teks rawak atau sampah. Sila beri cadangan yang profesional.");
                    return;
                }

                let isFirstTime = !statusRisiko[riskId];

                statusRisiko[riskId] = { prob: probVal, impact: impactVal, mitigasi: mitigasiVal, mata: data.mata_diperoleh };
                kemaskiniPaparanKad();
                
                if(isFirstTime) {
                    tambahSkor(data.mata_diperoleh);
                }
                
                document.getElementById('ruang-kosong').classList.remove('hidden'); 
                document.getElementById('ruang-penilaian').classList.add('hidden');
            } else {
                alert("Ralat menyimpan: " + data.error);
            }
        })
        .catch(err => {
            clearTimeout(timeoutId);
            if (err.name === 'AbortError') {
                alert("Ralat: Pelayan OpenAI terlalu lambat membalas (Lebih 25 saat).");
            } else {
                alert("Ralat Sistem: Sila muat semula halaman.");
            }
            console.error("Ralat JS Risk:", err);
        })
        .finally(() => {
            btn.innerHTML = '<i class="fas fa-save mr-2"></i> {% trans "Simpan Penilaian ke dalam Matriks" %}'; 
            btn.disabled = false; 
            btn.classList.remove('opacity-75');
        });
    }

    function kemaskiniPaparanKad() {
        let jumlahSiap = 0;
        const totalKad = document.querySelectorAll('[id^="kad-risk-"]').length;

        for(let idKad in statusRisiko) {
            const data = statusRisiko[idKad];
            const kad = document.getElementById(`kad-risk-${idKad}`);
            const statusBar = document.getElementById(`status-bar-${idKad}`);
            
            if(!kad) continue;
            
            kad.classList.remove('border-red-500', 'border-slate-200', 'shadow-md', 'hover:border-red-400');
            kad.classList.add('evaluated-card');
            kad.dataset.evaluated = "true";
            
            // KUNCI KAD (Buang fungsi klik supaya peserta tak boleh Edit/Spam lagi)
            kad.onclick = null; 
            kad.classList.remove('cursor-pointer');
            
            // Lencana Mata dari AI
            let lencanaMata = data.mata ? `<strong class="ml-2 bg-white px-1.5 py-0.5 rounded shadow-sm text-emerald-600 border border-emerald-100">+${data.mata} pts</strong>` : '';
            
            statusBar.innerHTML = `<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 font-bold px-2 py-0.5 rounded text-[9px] uppercase flex items-center"><i class="fas fa-check mr-1"></i> Dinilai ${lencanaMata}</span><span class="text-[10px] text-slate-500 font-medium">Kebarangkalian: ${data.prob}% | Impak: ${data.impact}</span></div>`;
            jumlahSiap++;
        }

        const pending = totalKad - jumlahSiap;
        document.getElementById('kiraan-semakan').innerText = pending;

        if(pending === 0 && totalKad > 0) {
            document.getElementById('btn-next-step').disabled = false;
        } else {
            document.getElementById('btn-next-step').disabled = true;
        }
    }

    function muatStatusRisiko() {
        try {
            const rawData = '{{ status_risiko_json|safe|escapejs }}';
            statusRisiko = rawData ? JSON.parse(rawData) : {};
            kemaskiniPaparanKad();
        } catch (e) {
            console.error("Ralat memuatkan status:", e);
        }
    }

    function tambahSkor(mata) {
        const elemenSkor = document.getElementById('skor-peserta');
        if(!elemenSkor) return;
        elemenSkor.classList.add('text-yellow-400', 'scale-125');
        let skorTarget = skorSekarang + mata;
        let interval = setInterval(() => {
            skorSekarang++; elemenSkor.innerHTML = skorSekarang + ' <span class="text-sm text-white/50">pts</span>';
            if(skorSekarang >= skorTarget) { clearInterval(interval); setTimeout(() => { elemenSkor.classList.remove('text-yellow-400', 'scale-125'); }, 500); }
        }, 50);
    }

    window.onload = muatStatusRisiko;
    window.addEventListener('pageshow', function(event) {
        if (event.persisted) { muatStatusRisiko(); }
    });
</script>
{% endblock %}