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

{% block content %}
<style>
    .endorse-btn.active { background-color: #10b981; color: white; border-color: #10b981; }
    .refine-btn.active { background-color: #f59e0b; color: white; border-color: #f59e0b; }
</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-purple-500"></div>
            <div class="absolute -right-6 -bottom-6 w-32 h-32 bg-purple-500 rounded-full mix-blend-multiply filter blur-2xl opacity-10"></div>
            
            <div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 text-purple-600 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-4 relative z-10">
                <i class="fas fa-cubes"></i> Node 2B: Master Statements
            </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">Semak Formulasi Masalah AI</h2>
                    <p class="text-sm text-slate-500 leading-relaxed">AI telah menganalisis ratusan aduan dari peserta dan meringkaskannya kepada Pernyataan Masalah Utama (Master Statements). Sila semak dan sokong (endorse), atau berikan komen pembaikan jika AI tertinggal konteks penting.</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">Progres Semakan</div>
                    <div class="text-3xl font-black text-purple-600"><span id="kiraan-semakan">0</span> <span class="text-lg text-slate-400">/ {{ senarai_master|length }}</span></div>
                    <div class="text-[10px] text-slate-500 mt-1">Selesai Disemak</div>
                </div>
            </div>
        </div>

        <div class="flex justify-between items-center mb-1 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">Halaman Semakan</h3>
            <div class="flex gap-2">
                <button onclick="pindahMukaPeserta(-1)" class="w-9 h-9 rounded-xl bg-slate-100 text-slate-500 hover:bg-purple-100 hover:text-purple-600 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed shadow-sm" id="btn-prev-p"><i class="fas fa-chevron-left"></i></button>
                <span id="page-info-p" class="text-sm font-bold text-purple-600 flex items-center px-2 bg-purple-50 rounded-xl border border-purple-100">1/1</span>
                <button onclick="pindahMukaPeserta(1)" class="w-9 h-9 rounded-xl bg-slate-100 text-slate-500 hover:bg-purple-100 hover:text-purple-600 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed shadow-sm" id="btn-next-p"><i class="fas fa-chevron-right"></i></button>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-stretch min-h-[350px]">
            {% if senarai_master %}
                {% for statement in senarai_master %}
                <div class="kad-peserta bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden transition-all duration-300 animate-fade-up" id="kad-ps{{ forloop.counter }}">
                    <div class="border-l-4 border-purple-500 p-6 h-full flex flex-col">
                        <div class="flex justify-between items-start mb-3">
                            <span class="bg-purple-100 text-purple-700 font-black px-2 py-1 rounded text-xs border border-purple-200">PS-0{{ forloop.counter }}: {{ statement.skop|truncatechars:25 }}</span>
                            <span class="text-[10px] font-bold text-slate-400 bg-slate-50 px-2 py-1 rounded-full border border-slate-200"><i class="fas fa-layer-group text-purple-400 mr-1"></i> Formulasi AI</span>
                        </div>
                        <h3 class="font-black text-lg text-slate-800 leading-tight mb-2">{{ statement.masalah_utama }}</h3>
                        
                        <div class="bg-slate-50 border border-slate-100 rounded-lg p-3 mb-5">
                            <p class="text-xs text-slate-600 mb-1"><strong><i class="fas fa-bullseye text-slate-400"></i> Sasaran/Kesan:</strong> {{ statement.sasaran }}</p>
                            <p class="text-xs text-slate-600"><strong><i class="fas fa-flag-checkered text-slate-400"></i> Matlamat:</strong> {{ statement.matlamat }}</p>
                        </div>
                        
                        <div class="flex flex-col sm:flex-row gap-3">
                            {% if not bengkel.is_locked %}
                            <button id="btn-endorse-{{ forloop.counter }}" onclick="buatTindakan({{ forloop.counter }}, 'endorse', {{ statement.id }})" class="endorse-btn flex-1 bg-white border-2 border-slate-200 text-slate-600 font-bold py-2.5 rounded-xl hover:border-emerald-500 hover:text-emerald-600 transition flex items-center justify-center">
                                <i class="fas fa-check-circle mr-2"></i> Sokong Penuh
                            </button>
                            <button id="btn-refine-{{ forloop.counter }}" onclick="bukaRuangKomen({{ forloop.counter }})" class="refine-btn flex-1 bg-white border-2 border-slate-200 text-slate-600 font-bold py-2.5 rounded-xl hover:border-amber-500 hover:text-amber-600 transition flex items-center justify-center">
                                <i class="fas fa-edit mr-2"></i> Mohon Pembaikan
                            </button>
                            {% else %}
                            <div class="w-full text-center py-2 bg-slate-100 rounded-xl text-slate-400 font-bold text-xs">
                                <i class="fas fa-lock"></i> Keputusan Master Telah Dimuktamadkan
                            </div>
                            {% endif %}
                        </div>

                        <div id="komen-ruang-{{ forloop.counter }}" class="hidden mt-4 pt-4 border-t border-slate-100">
                            <textarea id="komen-teks-{{ forloop.counter }}" rows="2" placeholder="Beritahu AI apa yang tertinggal..." class="w-full bg-amber-50/50 border border-amber-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-amber-500 focus:ring-1 focus:ring-amber-500 text-slate-700 resize-none mb-3"></textarea>
                            <div class="flex justify-end gap-2">
                                <button onclick="tutupRuangKomen({{ forloop.counter }})" class="text-xs font-bold text-slate-400 hover:text-slate-600 px-3 py-1.5">Batal</button>
                                <button onclick="buatTindakan({{ forloop.counter }}, 'refine', {{ statement.id }})" class="bg-amber-500 hover:bg-amber-600 text-white text-xs font-bold px-4 py-1.5 rounded-lg shadow-sm transition">Hantar Pembaikan</button>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="col-span-1 md:col-span-2 bg-white rounded-xl shadow-sm border border-slate-200 p-10 text-center kad-peserta hidden">
                    <i class="fas fa-hourglass-half text-4xl text-slate-300 mb-3"></i>
                    <h3 class="text-lg font-bold text-slate-600">Menunggu AI Penganjur</h3>
                    <p class="text-sm text-slate-400 mt-1">Penganjur masih belum merumuskan aduan. Sila kembali sebentar lagi.</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
    // LOGIK PAGINASI KAD (PESERTA)
    let currentPPage = 0;
    const cardsPerPPage = 2; // Papar 2 kad selari untuk problem statements
    const allPCards = document.querySelectorAll('.kad-peserta:not(.hidden)');
    let totalPPages = Math.ceil(allPCards.length / cardsPerPPage);
    if (totalPPages === 0) totalPPages = 1;

    function tunjukMukaSuratPeserta() {
        if(allPCards.length === 0) return;
        allPCards.forEach(c => c.style.display = 'none'); 
        
        let mula = currentPPage * cardsPerPPage;
        let tamat = mula + cardsPerPPage;
        
        for(let i=mula; i<tamat && i<allPCards.length; i++) {
            allPCards[i].style.display = 'block'; 
        }
        
        document.getElementById('page-info-p').innerText = `${currentPPage + 1} / ${totalPPages}`;
        document.getElementById('btn-prev-p').disabled = currentPPage === 0;
        document.getElementById('btn-next-p').disabled = currentPPage === totalPPages - 1;
    }

    function pindahMukaPeserta(arah) {
        currentPPage += arah;
        if(currentPPage < 0) currentPPage = 0;
        if(currentPPage >= totalPPages) currentPPage = totalPPages - 1;
        tunjukMukaSuratPeserta();
    }

    window.addEventListener('DOMContentLoaded', () => tunjukMukaSuratPeserta());
</script>

<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_painpoint' pk=bengkel.pk %}" class="bg-purple-600 hover:bg-purple-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: Pain Point
        </a>
        
        <button id="btn-next-step" onclick="window.location.href='{% url 'bengkel:peserta_situational' pk=bengkel.pk %}'" 
            class="bg-purple-600 hover:bg-purple-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" 
            {% if not senarai_master and not bengkel.is_locked %}disabled{% endif %}>
            Seterusnya: Analisis Situasi <i class="fas fa-arrow-right"></i>
        </button>
    </div>

<script>
    let statusSemakan = {}; 
    let skorSekarang = {% kira_skor_peserta request.user bengkel %};

    function bukaRuangKomen(idKad) { document.getElementById(`komen-ruang-${idKad}`).classList.remove('hidden'); }
    function tutupRuangKomen(idKad) { document.getElementById(`komen-ruang-${idKad}`).classList.add('hidden'); document.getElementById(`komen-teks-${idKad}`).value = ""; }

    // FUNGSI 1: Butang Sokong & Mohon Pembaikan (Kalis Hang & Reset)
    function buatTindakan(idKad, jenis, dbId) {
        const btnEndorse = document.getElementById(`btn-endorse-${idKad}`);
        const btnRefine = document.getElementById(`btn-refine-${idKad}`);
        const kadContainer = document.getElementById(`kad-ps${idKad}`);
        
        if(btnEndorse.innerHTML.includes('fa-spinner') || btnRefine.innerHTML.includes('fa-spinner')) return;

        const asalEndorseHTML = '<i class="fas fa-check-circle mr-2"></i> Sokong Penuh';
        const asalRefineHTML = '<i class="fas fa-edit mr-2"></i> Mohon Pembaikan';

        if(jenis === 'endorse') {
            if(statusSemakan[idKad] !== 'endorse') {
                btnEndorse.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Merekod...';
                setTimeout(() => {
                    btnRefine.classList.remove('active'); btnRefine.innerHTML = asalRefineHTML; tutupRuangKomen(idKad);
                    btnEndorse.classList.add('active'); btnEndorse.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Disokong';
                    kadContainer.classList.add('border-emerald-300', 'bg-emerald-50/20');
                    kadContainer.classList.remove('border-amber-300', 'bg-amber-50/20', 'border-slate-200');
                    kemaskiniKiraan(idKad, 'endorse');
                }, 800);
            } else {
                btnEndorse.classList.remove('active'); btnEndorse.innerHTML = asalEndorseHTML;
                kadContainer.classList.remove('border-emerald-300', 'bg-emerald-50/20'); kadContainer.classList.add('border-slate-200');
                kemaskiniKiraan(idKad, null);
            }
        } 
        else if (jenis === 'refine') {
            const komenText = document.getElementById(`komen-teks-${idKad}`).value.trim();
            if(komenText === "") return alert("Sila berikan komen pembaikan.");
            
            // Selector selamat untuk target butang hantar huraian
            const submitBtn = document.querySelector(`#komen-ruang-${idKad} button[onclick*="refine"]`); 
            const asalSubmitText = submitBtn.innerHTML;
            
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Menyimpan...';
            submitBtn.disabled = true;

            // 🎯 TAMBAHAN: Pengawal masa (Timeout) 25 saat supaya tak pusing sampai kiamat
            const controller = new AbortController();
            const timeoutId = setTimeout(() => controller.abort(), 25000);

            fetch("{% url 'bengkel:simpan_komen_pembaikan_ajax' pk=bengkel.pk %}", {
                method: 'POST',
                headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' },
                body: JSON.stringify({ statement_id: dbId, komen: komenText }),
                signal: controller.signal
            })
            .then(res => {
                if (!res.ok) throw new Error("Ralat pelayan (HTTP " + res.status + ")");
                return res.json();
            })
            .then(data => {
                clearTimeout(timeoutId); // Hentikan pemasa jika berjaya
                submitBtn.innerHTML = asalSubmitText; submitBtn.disabled = false;
                
                if(data.success) {
                    if(data.status === "spam") {
                        alert("Komen anda ditolak oleh AI kerana ia berbentuk teks rawak (spam).");
                        return;
                    }

                    tutupRuangKomen(idKad);
                    
                    btnEndorse.classList.remove('active'); btnEndorse.innerHTML = asalEndorseHTML;
                    btnEndorse.disabled = true; // Kunci butang sokong
                    
                    btnRefine.classList.add('active'); 
                    // UX Baharu: Teks penumpuan kejayaan (Tugasan Selesai)
                    btnRefine.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Ulasan Direkodkan';
                    btnRefine.disabled = true; 
                    
                    kadContainer.classList.add('border-amber-300', 'bg-amber-50/20');
                    kadContainer.classList.remove('border-emerald-300', 'bg-emerald-50/20', 'border-slate-200');
                    
                    const bannerPenantian = document.createElement('div');
                    bannerPenantian.className = "bg-amber-100 text-amber-800 text-[10px] font-bold p-2 text-center border-b border-amber-200 animate-fade-up";
                    bannerPenantian.innerHTML = `<i class="fas fa-check-circle mr-1"></i> Maklum balas diterima! <strong class="ml-1 text-emerald-600">+${data.mata_diperoleh} pts</strong>`;
                    kadContainer.insertBefore(bannerPenantian, kadContainer.firstChild);

                    kemaskiniKiraan(idKad, 'refine', data.mata_diperoleh);
                } else { 
                    alert("Gagal menyimpan komen: " + data.error); 
                }
            })
            .catch(err => {
                clearTimeout(timeoutId);
                submitBtn.innerHTML = asalSubmitText; submitBtn.disabled = false;
                
                if (err.name === 'AbortError') {
                    alert("Ralat: Pelayan OpenAI mengambil masa terlalu lama untuk merespons (Lebih 25 saat). Sila periksa sambungan internet atau cuba lagi.");
                } else {
                    alert("Ralat Sistem: " + err.message + ". Sila semak terminal server anda.");
                }
                console.error("Ralat Fetch Refine:", err);
            });
        }
    }

    // FUNGSI 2: Menyimpan data ke Backend dan mengemaskini progres bar
    function kemaskiniKiraan(idKad, statusBaru, mataKomen = 10) {
        let statusLama = statusSemakan[idKad];
        statusSemakan[idKad] = statusBaru;
        
        // Hantar simpanan secara senyap ke pelayan (AJAX)
        fetch("{% url 'bengkel:simpan_status_semakan' pk=bengkel.pk %}", {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ id_kad: idKad, status: statusBaru })
        });
        
        let jumlahSiap = 0; 
        for(let id in statusSemakan) if(statusSemakan[id] !== null) jumlahSiap++;
        
        document.getElementById('kiraan-semakan').innerText = jumlahSiap;
        
        // LOGIK PENAMBAHAN SKOR DINAMIK
        if(!statusLama && statusBaru !== null) {
            // Jika dia Endorse, bagi flat 5 mata. Jika Refine, guna mata AI (mataKomen).
            let mataDitambah = statusBaru === 'endorse' ? 5 : mataKomen;
            tambahSkor(mataDitambah);
        }
        else if (statusLama && statusBaru === null) {
            tolakSkor(5); // Hanya butang Endorse yang boleh di-batal. Refine tak boleh batal.
        }
        
        const totalKad = document.querySelectorAll('.endorse-btn').length;
        if(jumlahSiap === totalKad && totalKad > 0) {
            document.getElementById('btn-next-step').disabled = false; 
        } else {
            document.getElementById('btn-next-step').disabled = true;
        }
    }

    // FUNGSI 3: Mengecat Semula Butang Apabila Refresh / Back
    function muatStatusSemakan() {
        try {
            // BUANG escapejs, kita hanya perlukan safe untuk render JSON string dengan betul
            const rawData = '{{ status_semakan_json|safe }}';
            const savedState = rawData ? JSON.parse(rawData) : {};
            statusSemakan = savedState;
            
            let jumlahSiap = 0;
            const totalKad = document.querySelectorAll('.endorse-btn').length;

            for(let idKad in savedState) {
                const status = savedState[idKad];
                const btnEndorse = document.getElementById(`btn-endorse-${idKad}`);
                const btnRefine = document.getElementById(`btn-refine-${idKad}`);
                const kadContainer = document.getElementById(`kad-ps${idKad}`);
                
                if(!btnEndorse) continue; 
                
                if(status === 'endorse') {
                    btnEndorse.classList.add('active'); 
                    btnEndorse.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Disokong';
                    kadContainer.classList.add('border-emerald-300', 'bg-emerald-50/20');
                    kadContainer.classList.remove('border-slate-200', 'border-amber-300', 'bg-amber-50/20');
                    jumlahSiap++;
                } else if(status === 'refine') {
                    btnRefine.classList.add('active'); 
                    
                    // UX Baharu: Kekalkan status selesai walaupun selepas muat semula halaman
                    btnRefine.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Ulasan Direkodkan';
                    btnRefine.disabled = true;
                    btnEndorse.disabled = true; // Kunci butang sokong jika sudah beri komen pembaikan
                    
                    kadContainer.classList.add('border-amber-300', 'bg-amber-50/20');
                    kadContainer.classList.remove('border-slate-200', 'border-emerald-300', 'bg-emerald-50/20');
                    jumlahSiap++;
                }
            }
            
            document.getElementById('kiraan-semakan').innerText = jumlahSiap;
            if(jumlahSiap === totalKad && totalKad > 0) {
                document.getElementById('btn-next-step').disabled = false;
            }
        } catch (e) {
            console.error("Ralat memuatkan status:", e);
        }
    }

    // FUNGSI 4: Animasi Skor (Tambah)
    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); 
            }
        }, 30);
    }
    
    // FUNGSI 5: Animasi Skor (Tolak) - Anti Eksploitasi
    function tolakSkor(mata) {
        const elemenSkor = document.getElementById('skor-peserta');
        if(!elemenSkor) return;
        elemenSkor.classList.add('text-rose-400', 'scale-90');
        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-rose-400', 'scale-90'); }, 500); 
            }
        }, 30);
    }

    // JALANKAN SECARA AUTOMATIK: Apabila halaman dimuatkan ATAU butang 'Back' ditekan
    window.onload = muatStatusSemakan;
    window.addEventListener('pageshow', function(event) {
        if (event.persisted) { muatStatusSemakan(); }
    });
</script>
{% endblock %}