{% extends "base.html" %}
{% load i18n %}
{% load bengkel_tags %}
{% block title %}{% trans "Pengesahan Punca" %} — {{ 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">5. Pengesahan Punca</span>
{% endblock %}

{% block content %}
<style>
    .verified-card { border-color: #10b981 !important; background-color: #ecfdf5 !important; }
    .rejected-card { border-color: #f43f5e !important; background-color: #fff1f2 !important; }
</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-emerald-500"></div>
            <div class="absolute -right-10 -bottom-10 opacity-5"><i class="fas fa-check-double text-9xl text-emerald-500"></i></div>
            <div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 text-emerald-600 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-4 relative z-10">
                <i class="fas fa-search-plus"></i> Node 5: Pengesahan AI
            </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">Sahihkan Hasil RCA Enjin AI</h2>
                    <p class="text-sm text-slate-500 max-w-3xl leading-relaxed">AI telah mengimbas jutaan perkataan daripada Dokumen Rujukan (Korpus) untuk mengesahkan punca-punca masalah yang disumbangkan oleh peserta. Sila <strong>sahkan jika hasil penemuan AI ini tepat</strong> dan benar-benar 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 Pengesahan</div>
                    <div class="text-3xl font-black text-emerald-600"><span id="kiraan-semakan">{{ findings.count }}</span></div>
                    <div class="text-[10px] text-slate-500 mt-1">Penemuan AI Tersedia</div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
            <div class="lg:col-span-6 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 Penemuan AI</h3>
                    <div class="flex gap-2">
                        <button type="button" onclick="pindahMukaVer(-1)" class="w-9 h-9 rounded-xl bg-slate-100 text-slate-500 hover:bg-emerald-50 hover:text-emerald-600 hover:border-emerald-200 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed shadow-sm" id="btn-prev-v"><i class="fas fa-chevron-left text-xs"></i></button>
                        <span id="page-info-v" class="text-xs font-bold text-emerald-600 flex items-center px-2 bg-emerald-50 rounded-xl border border-emerald-100">1/1</span>
                        <button type="button" onclick="pindahMukaVer(1)" class="w-9 h-9 rounded-xl bg-slate-100 text-slate-500 hover:bg-emerald-50 hover:text-emerald-600 hover:border-emerald-200 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed shadow-sm" id="btn-next-v"><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-ver">
                {% if findings %}
                    {% for finding in findings %}
                    <div class="kad-ver-item bg-white rounded-xl shadow-sm border-2 border-slate-200 overflow-hidden transition-all duration-300 cursor-pointer hover:border-emerald-400 animate-fade-up" 
                         id="kad-finding-{{ finding.id }}" onclick="pilihFinding({{ finding.id }})">
                        <div class="p-5 border-b border-slate-100 flex justify-between items-center bg-slate-50">
                            <div class="flex items-center gap-2">
                                <span class="bg-indigo-100 text-indigo-700 font-black px-2 py-0.5 rounded text-[10px]">PENEMUAN-0{{ forloop.counter }}</span>
                            </div>
                            <div class="flex items-center gap-1.5 text-emerald-600 bg-emerald-50 px-2 py-1 rounded border border-emerald-100">
                                <i class="fas fa-robot text-[10px]"></i> <span class="text-[10px] font-black">Disintesis dari RCA</span>
                            </div>
                        </div>
                        <div class="p-5">
                            <h3 class="font-black text-sm text-slate-800 mb-2">Punca Utama: <span class="text-emerald-600">{{ finding.punca_utama }}</span></h3>
                            <p class="text-xs text-slate-500 leading-relaxed">{{ finding.punca_penyumbang|truncatechars:150 }}</p>
                            <div class="mt-4 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 Pengesahan Anda</span>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <div class="bg-white p-10 rounded-xl border-2 border-dashed border-slate-200 text-center kad-ver-item hidden">
                        <p class="text-slate-400 text-sm">Tiada data RCA ditemui. Sila hantar RCA di Node 4 terlebih dahulu.</p>
                    </div>
                {% endif %}
                </div>
            </div>

<script>
    // LOGIK PAGINASI KAD PENGESAHAN RCA (PESERTA)
    let currentVPage = 0;
    const cardsPerVPage = 2; // Papar top 2 kad serentak ke bawah

    function kemaskiniPaginasiVer() {
        const allVCards = document.querySelectorAll('.kad-ver-item:not(.hidden)');
        let totalVPages = Math.ceil(allVCards.length / cardsPerVPage);
        if (totalVPages === 0) totalVPages = 1;
        
        if (currentVPage >= totalVPages) currentVPage = totalVPages - 1;
        if (currentVPage < 0) currentVPage = 0;

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

    function pindahMukaVer(arah) {
        currentVPage += arah;
        kemaskiniPaginasiVer();
    }

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

            <div class="lg:col-span-6">
                <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-mouse-pointer text-5xl text-slate-200 mb-4"></i>
                    <h3 class="font-bold text-slate-400">Pilih Penemuan AI</h3>
                    <p class="text-xs text-slate-400 mt-2 max-w-xs">Klik pada mana-mana kad di sebelah kiri untuk menyemak bukti terperinci dan menghantar pengesahan anda.</p>
                </div>

                <div id="ruang-verifikasi" class="bg-white rounded-2xl shadow-sm border border-emerald-200 p-6 hidden flex flex-col h-full relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-24 h-24 bg-emerald-50 rounded-bl-full z-0"></div>
                    <h3 class="font-black text-lg text-slate-800 mb-1 relative z-10">Panel Pengesahan</h3>
                    <p class="text-xs text-slate-500 mb-6 border-b border-slate-100 pb-4 relative z-10">Anda sedang mengesahkan Penemuan <span id="ver-id-label" class="font-bold text-emerald-600">#1</span></p>

                    {% if not bengkel.is_locked %}
                    <form id="form-verify" onsubmit="hantarVerifikasi(event)" class="flex-1 flex flex-col relative z-10">
                        <input type="hidden" id="current-finding-id" value="">
                        <div class="mb-5">
                            <label class="block text-sm font-bold text-slate-700 mb-3">Berdasarkan pengalaman anda, adakah penemuan AI ini tepat?</label>
                            <div class="grid grid-cols-2 gap-4">
                                <label class="cursor-pointer group">
                                    <input type="radio" name="keputusan_ver" value="yes" class="peer sr-only" required onchange="tukarTextarea('yes')">
                                    <div class="text-center p-4 rounded-xl border-2 border-slate-200 peer-checked:bg-emerald-50 peer-checked:border-emerald-500 transition-all hover:bg-slate-50">
                                        <i class="fas fa-check-circle text-2xl mb-2 text-slate-300 peer-checked:text-emerald-500"></i>
                                        <div class="text-sm font-black text-slate-600 peer-checked:text-emerald-700">Ya, ia tepat</div>
                                    </div>
                                </label>
                                <label class="cursor-pointer group">
                                    <input type="radio" name="keputusan_ver" value="no" class="peer sr-only" onchange="tukarTextarea('no')">
                                    <div class="text-center p-4 rounded-xl border-2 border-slate-200 peer-checked:bg-rose-50 peer-checked:border-rose-500 transition-all hover:bg-slate-50">
                                        <i class="fas fa-times-circle text-2xl mb-2 text-slate-300 peer-checked:text-rose-500"></i>
                                        <div class="text-sm font-black text-slate-600 peer-checked:text-rose-700">Tidak, ia berbeza</div>
                                    </div>
                                </label>
                            </div>
                        </div>

                        <div class="mb-6 flex-1">
                            <label id="label-komen" class="block text-xs font-bold text-slate-600 mb-1.5">Konteks / Bukti Sokongan (Pilihan)</label>
                            <textarea id="input-komen" rows="4" placeholder="Kongsikan contoh spesifik atau huraikan pilihan anda..." class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 text-slate-700 resize-none"></textarea>
                        </div>

                        <button type="submit" id="btn-submit-ver" class="w-full bg-emerald-600 text-white text-sm font-bold py-3 rounded-xl shadow-sm hover:bg-emerald-700 transition flex items-center justify-center mt-auto">
                            <i class="fas fa-stamp mr-2"></i> Hantar Pengesahan
                        </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">Konsensus Telah Dikunci</p>
                        <p class="text-[10px] text-slate-500 mt-1">Keputusan verifikasi bagi penemuan ini tidak boleh diubah lagi.</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' pk=bengkel.pk %}" class="bg-red-600 hover:bg-red-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: Analisis Punca
        </a>
        
        {% if bengkel.spaf_current_step >= 6 %}
        <button id="btn-next-step" onclick="window.location.href='{% url 'bengkel:peserta_risk' pk=bengkel.pk %}'" 
            class="bg-red-600 hover:bg-red-700 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" disabled>
            Seterusnya: Penilaian Risiko <i class="fas fa-arrow-right"></i>
        </button>
        {% else %}
        <button disabled class="bg-slate-100 text-slate-400 font-bold px-8 py-3 rounded-xl border border-slate-200 cursor-not-allowed flex items-center gap-2">
            <i class="fas fa-lock"></i> Menunggu Penganjur Membuka Modul 6
        </button>
        {% endif %}
    </div>

<script>
    let statusVerifikasi = {}; 
    let skorSekarang = {% kira_skor_peserta request.user bengkel %}; 
    let pendingCount = parseInt("{{ findings.count|default:0 }}"); // Ambil jumlah sebenar dari Django

    // Fungsi klik kad
    function pilihFinding(id) {
        document.querySelectorAll('[id^="kad-finding-"]').forEach(kad => { 
            if(!kad.classList.contains('verified-card') && !kad.classList.contains('rejected-card')) { 
                kad.classList.remove('border-emerald-500', 'shadow-md'); 
                kad.classList.add('border-slate-200'); 
            } 
        });
        const kadPilih = document.getElementById(`kad-finding-${id}`);
        if(!kadPilih.classList.contains('verified-card') && !kadPilih.classList.contains('rejected-card')) { 
            kadPilih.classList.remove('border-slate-200'); 
            kadPilih.classList.add('border-emerald-500', 'shadow-md'); 
        }
        document.getElementById('ruang-kosong').classList.add('hidden'); 
        document.getElementById('ruang-verifikasi').classList.remove('hidden');
        document.getElementById('ver-id-label').innerText = `#${id}`; 
        document.getElementById('current-finding-id').value = id;
        document.getElementById('form-verify').reset(); 
        tukarTextarea('none');
    }

    // Fungsi tukar placeholder komen
    function tukarTextarea(pilihan) {
        const label = document.getElementById('label-komen'); 
        const textarea = document.getElementById('input-komen');
        if(pilihan === 'yes') { 
            label.innerHTML = 'Konteks Sokongan (Pilihan)'; 
            textarea.placeholder = "Contoh: Ya, di wad saya, kami mengalami isu ini setiap hari..."; 
            textarea.required = false; 
            textarea.classList.replace('focus:border-rose-500', 'focus:border-emerald-500'); 
            textarea.classList.replace('focus:ring-rose-500', 'focus:ring-emerald-500'); 
        } else if (pilihan === 'no') { 
            label.innerHTML = 'Mengapa ia tidak tepat untuk agensi anda? <span class="text-rose-500">*</span>'; 
            textarea.placeholder = "Contoh: Sebenarnya, hospital kami baru sahaja menaik taraf pelayan (server)..."; 
            textarea.required = true; 
            textarea.classList.replace('focus:border-emerald-500', 'focus:border-rose-500'); 
            textarea.classList.replace('focus:ring-emerald-500', 'focus:ring-rose-500'); 
        } else { 
            label.innerHTML = 'Konteks / Bukti (Pilihan)'; 
            textarea.placeholder = "Kongsikan contoh spesifik atau huraikan pilihan anda..."; 
            textarea.required = false; 
        }
    }

    // Fungsi hantar borang ke backend
    function hantarVerifikasi(event) {
        event.preventDefault();
        const btn = document.getElementById('btn-submit-ver'); 
        const findingId = document.getElementById('current-finding-id').value; 
        const keputusan = document.querySelector('input[name="keputusan_ver"]:checked').value;
        const komen = document.getElementById('input-komen').value;

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

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

        // Panggilan AJAX ke Pelayan
        fetch("{% url 'bengkel:simpan_rca_validation_ajax' pk=bengkel.pk %}", {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                id_finding: findingId,
                keputusan: keputusan,
                komen: komen
            }),
            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) {
                if(data.status === "spam") {
                    alert("Komen pengesahan anda ditolak oleh AI kerana berbentuk teks rawak atau sampah. Sila beri ulasan yang profesional.");
                    return;
                }

                // Periksa jika ini kali pertama disahkan
                let isFirstTime = !statusVerifikasi[findingId];
                
                // Simpan rekod mata yang diterima
                statusVerifikasi[findingId] = { keputusan: keputusan, mata: data.mata_diperoleh }; 
                kemaskiniPaparanKad();
                
                if(isFirstTime) {
                    tambahSkor(data.mata_diperoleh); 
                }
                
                document.getElementById('ruang-kosong').classList.remove('hidden'); 
                document.getElementById('ruang-verifikasi').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 Validasi RCV:", err);
        })
        .finally(() => {
            btn.innerHTML = '<i class="fas fa-stamp mr-2"></i> {% trans "Hantar Pengesahan" %}'; 
            btn.disabled = false; 
            btn.classList.remove('opacity-75');
        });
    }

    // Fungsi mengecat semula warna kad dan kira progres
    function kemaskiniPaparanKad() {
        let jumlahSiap = 0;
        const totalKad = document.querySelectorAll('[id^="kad-finding-"]').length;

        for(let idKad in statusVerifikasi) {
            const data = statusVerifikasi[idKad];
            const kad = document.getElementById(`kad-finding-${idKad}`);
            const statusBar = document.getElementById(`status-bar-${idKad}`);
            
            if(!kad) continue;
            
            kad.classList.remove('border-emerald-500', 'border-slate-200', 'shadow-md', 'hover:border-emerald-400', 'verified-card', 'rejected-card');
            kad.dataset.verified = "true";
            
            // KUNCI KAD (Buang fungsi klik supaya peserta tak boleh Edit/Spam lagi)
            kad.onclick = null; 
            kad.classList.remove('cursor-pointer');
            
            // LENCANA MATA GANJARAN
            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>` : '';
            
            if(data.keputusan === 'yes') { 
                kad.classList.add('verified-card'); 
                statusBar.innerHTML = `<span class="text-[10px] font-bold text-emerald-600 uppercase tracking-widest flex items-center"><i class="fas fa-check-double mr-1"></i> Disahkan Tepat ${lencanaMata}</span>`; 
            } else { 
                kad.classList.add('rejected-card'); 
                statusBar.innerHTML = `<span class="text-[10px] font-bold text-rose-600 uppercase tracking-widest flex items-center"><i class="fas fa-times-circle mr-1"></i> Ditanda Tidak Tepat ${lencanaMata}</span>`; 
            }
            jumlahSiap++;
        }

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

        // KAWALAN KESELAMATAN: Pastikan butang navigasi wujud sebelum diusik
        const btnNext = document.getElementById('btn-next-step');
        if (btnNext) {
            if((pending === 0 && totalKad > 0) || "{{ bengkel.is_locked }}" === "True") {
                btnNext.disabled = false;
            } else {
                btnNext.disabled = true;
            }
        }
    }

    // Fungsi baca memori pelayan pada mulanya
    function muatStatusVerifikasi() {
        try {
            const rawData = '{{ status_verifikasi_json|safe|escapejs }}';
            statusVerifikasi = 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 = muatStatusVerifikasi;
    window.addEventListener('pageshow', function(event) {
        if (event.persisted) { muatStatusVerifikasi(); }
    });
</script>
{% endblock %}