{% extends "base.html" %}
{% load i18n %}
{% load bengkel_tags %}
{% block title %}{% trans "Undian Tema" %} — {{ 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>
    <span class="text-slate-500 font-medium text-xs">Langkah 3: Undian Tema</span>
{% endblock %}

{% block content %}
<style>
    .voted-card { border-color: #3b82f6 !important; background-color: #eff6ff !important; }
    .voted-btn { background-color: #10b981 !important; color: white !important; border-color: #10b981 !important; }
    .progress-bar-animated { transition: width 1.5s ease-in-out; }
</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_overview' 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">
                    <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">
                <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" 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="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 md:p-8 mb-8 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-1 h-full bg-blue-500"></div>
        <div class="flex flex-col md:flex-row md:items-start justify-between gap-6 relative z-10">
            <div class="flex-1">
                <div class="inline-flex items-center gap-1.5 bg-blue-50 border border-blue-200 text-blue-600 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-4">
                    <i class="fas fa-tags"></i> Node 3: Penilaian Tema Bebas
                </div>
                <h2 class="text-xl md:text-2xl font-black text-slate-800 mb-2">Nilai Tema Nasional AI</h2>
                <p class="text-sm text-slate-500 leading-relaxed">Anda <strong>bebas</strong> untuk menyokong mana-mana tema yang relevan dengan realiti jabatan anda. Jika ada tema yang tersasar atau tidak tepat, gunakan butang <strong>Bantah & Perbetul AI</strong>. Setiap tindakan kognitif anda akan diberikan ganjaran mata.</p>
            </div>
            <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 text-center min-w-[180px] shadow-sm">
                <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Tema Disokong Anda</div>
                <div class="text-3xl font-black text-blue-600"><span id="kiraan-undi">{{ baki_undi }}</span></div>
            </div>
        </div>
    </div>

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

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-stretch min-h-[350px]">
        {% for t in themes_data %}
        <div class="kad-peserta bg-white rounded-xl shadow-sm border-2 {% if t.is_voted %}voted-card{% else %}border-slate-200{% endif %} p-6 flex flex-col transition-all duration-300 relative group animate-fade-up" id="kad-tema-{{ t.id }}">
            <div class="flex justify-between items-center mb-4">
                <span class="bg-blue-100 text-blue-700 font-black px-2 py-0.5 rounded text-[10px]">TEMA-0{{ t.urutan }}</span>
                <span class="text-[10px] font-bold text-slate-400"><i class="fas fa-users mr-1"></i> <span id="undi-count-{{ t.id }}" class="text-slate-600">{{ t.total_votes }}</span> Undian</span>
            </div>
            <h3 class="font-black text-lg text-slate-800 mb-3">{{ t.tema }}</h3>
            <p class="text-xs text-slate-500 mb-6 flex-1">{{ t.penerangan }}</p>
            
            <div class="flex flex-col gap-2 mt-auto">
                <button id="btn-undi-{{ t.id }}" 
                        {% if not bengkel.is_locked %}onclick="hantarUndi('{{ t.id }}')"{% else %}disabled{% endif %} 
                        class="w-full {% if t.is_voted %}voted-btn{% else %}bg-slate-50 text-slate-500{% endif %} font-bold py-2.5 rounded-xl border border-slate-200 {% if not bengkel.is_locked %}hover:border-blue-300 hover:bg-slate-100 hover:shadow-sm{% else %}cursor-not-allowed{% endif %} transition flex items-center justify-center text-sm">
                    {% if t.is_voted %}
                        <i class="fas fa-check-circle mr-2"></i> Disokong (+2 pts)
                    {% else %}
                        {% if not bengkel.is_locked %}<i class="fas fa-thumbs-up mr-2"></i> Sokong Tema Ini{% else %}<i class="fas fa-lock mr-2"></i> Pengesahan Ditutup{% endif %}
                    {% endif %}
                </button>
                
                {% if not bengkel.is_locked %}
                    <!-- Butang input kekal terbuka untuk sumbangan idea baru tanpa had -->
                    <div class="grid grid-cols-2 gap-2 mt-1.5">
                        <button type="button" onclick="bukaRuangIdea('{{ t.id }}', false)" class="text-[10px] font-bold text-slate-500 hover:text-blue-600 bg-white border border-slate-200 py-2 rounded-lg transition shadow-sm hover:shadow flex items-center justify-center">
                            <i class="fas fa-plus mr-1"></i> Tambah Idea
                        </button>
                        <button type="button" onclick="bukaRuangIdea('{{ t.id }}', true)" class="text-[10px] font-bold text-rose-500 hover:text-white hover:bg-rose-500 hover:border-rose-500 bg-rose-50 border border-rose-200 py-2 rounded-lg transition shadow-sm hover:shadow flex items-center justify-center">
                            <i class="fas fa-hand-paper mr-1"></i> Bantah & Perbetul
                        </button>
                    </div>
                {% else %}
                <span class="w-full text-center text-[11px] text-slate-400 font-medium italic py-1 mt-1"><i class="fas fa-archive"></i> Pusingan Draf Disahkan</span>
                {% endif %}

                <!-- 📜 RUANGAN LOG SUMBANGAN SAYA (Kekal Walaupun Refresh) -->
                <div id="log-idea-box-{{ t.id }}" class="mt-4 pt-3 border-t border-slate-100 space-y-1.5 {% if not t.my_ideas %}hidden{% endif %}">
                    <span class="text-[8px] font-black uppercase text-slate-400 tracking-widest block"><i class="fas fa-history"></i> Sumbangan Saya Pada Tema Ini:</span>
                    <div id="log-list-{{ t.id }}" class="space-y-1.5 max-h-24 overflow-y-auto custom-scrollbar pr-1">
                        {% for idea in t.my_ideas %}
                        <div class="flex items-center justify-between p-1.5 bg-slate-50 border border-slate-100 rounded-lg text-[10px] text-slate-600 fade-in">
                            <span class="truncate flex-1 italic" title="{{ idea.idea }}">
                                {% if "[BANTAHAN STRATEGIK]" in idea.idea %}
                                    <strong class="text-rose-500">[BANTAH]</strong> {{ idea.idea|slice:"21:" }}
                                {% else %}
                                    <strong class="text-blue-500">[IDEA]</strong> {{ idea.idea|slice:"20:" }}
                                {% endif %}
                            </span>
                            <span class="text-[9px] font-black text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded ml-2 border border-emerald-100 shrink-0">
                                +{% if idea.skor_relevansi > 0 %}{{ idea.skor_relevansi|floatformat:0 }}{% else %}8{% endif %} pts
                            </span>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div id="ruang-idea-{{ t.id }}" class="hidden mt-4 pt-4 border-t border-slate-100">
                <div id="label-idea-{{ t.id }}" class="text-[10px] font-black uppercase tracking-widest mb-2 text-slate-500">Cadangan Penambahbaikan</div>
                <textarea id="teks-idea-{{ t.id }}" rows="3" placeholder="..." class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-xs focus:outline-none text-slate-700 resize-none mb-3 transition-colors shadow-inner"></textarea>
                
                <div class="flex gap-2">
                    <button onclick="tutupRuangIdea('{{ t.id }}')" class="px-4 py-2 bg-slate-100 border border-slate-200 text-slate-600 rounded-lg text-[10px] font-bold hover:bg-slate-200 transition">Batal</button>
                    <button id="btn-hantar-idea-{{ t.id }}" onclick="hantarIdea('{{ t.id }}')" class="flex-1 bg-slate-800 text-white text-[10px] font-bold py-2 rounded-lg shadow-sm hover:bg-slate-900 transition flex justify-center items-center">
                        Hantar Isyarat ke Enjin AI
                    </button>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-span-3 py-12 text-center bg-white rounded-2xl border border-dashed border-slate-300 kad-peserta hidden">
            <p class="text-slate-400 font-bold">Tiada tema dijana setakat ini. Sila tunggu penganjur memproses data.</p>
        </div>
        {% endfor %}
    </div>
</div>

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

    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 = 'flex'; 
        }
        
        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_overview' pk=bengkel.pk %}" class="bg-blue-600 hover:bg-blue-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 ke Hab
    </a>
    
    {% if bengkel.blueprint_current_step >= 4 %}
    <button onclick="window.location.href='{% url 'bengkel:peserta_pillar' pk=bengkel.pk %}'" 
        class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-8 py-3 rounded-xl shadow-md transition flex items-center gap-2">
        Seterusnya: Pengesahan Teras <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 Langkah 4
    </button>
    {% endif %}
</div>

<script>
    // --- FUNGSI AUTO REFRESH PINTAR (POLLING) ---
    // Hanya aktifkan polling jika peserta melihat skrin "Tiada Tema"
    const jumlahTemaDipapar = document.querySelectorAll('[id^="kad-tema-"]').length;
    
    if (jumlahTemaDipapar === 0) {
        let dotCount = 0;
        const msgElement = document.querySelector('.col-span-3.py-12 p');
        
        // Buat animasi titik (loading) pada teks supaya peserta tahu sistem sedang berfungsi
        setInterval(() => {
            if (msgElement) {
                dotCount = (dotCount + 1) % 4;
                msgElement.innerText = "Tiada tema dijana setakat ini. Sila tunggu penganjur memproses data" + ".".repeat(dotCount);
            }
        }, 1000);

        // Polling ke server setiap 5 saat untuk menyemak kehadiran Tema
        setInterval(() => {
            fetch("{% url 'bengkel:tema_live_data_ajax' pk=bengkel.pk %}")
            .then(res => res.json())
            .then(data => {
                // Jika penganjur sudah tekan jana dan tema telah wujud dalam database
                if(data.graf_labels && data.graf_labels.length > 0) {
                    if (msgElement) {
                        msgElement.innerHTML = '<span class="text-emerald-500"><i class="fas fa-check-circle animate-pulse mr-2"></i> Penganjur telah memuat naik Tema! Memuat semula halaman...</span>';
                    }
                    // Auto refresh halaman dalam masa 1.5 saat
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                }
            })
            .catch(err => console.log("Gagal menyemak data tema live:", err));
        }, 5000); // Semak setiap 5 saat
    }
    
    // Konfigurasi CSRF untuk AJAX Django
    async function hantarUndi(temaId) {
        const btn = document.getElementById(`btn-undi-${temaId}`);
        const kad = document.getElementById(`kad-tema-${temaId}`);
        const bakiElemen = document.getElementById('kiraan-undi'); // Kini menjadi Jumlah Tema Disokong
        
        btn.disabled = true;
        const originalHTML = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> {% trans "Merekod..." %}';

        try {
            const response = await fetch("{% url 'bengkel:undi_tema_ajax' pk=bengkel.pk %}", {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token }}' },
                body: JSON.stringify({ 'tema_id': temaId })
            });

            const data = await response.json();

            if (data.success) {
                let jumlahSokongSemasa = parseInt(bakiElemen.innerText) || 0;

                if (data.status === 'voted') {
                    btn.classList.add('voted-btn');
                    btn.classList.remove('bg-slate-50', 'text-slate-500', 'hover:bg-slate-100');
                    btn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Disokong (+2 pts)';
                    kad.classList.add('voted-card');
                    
                    jumlahSokongSemasa++;
                    tambahSkor(2); // Ganjaran gamifikasi (Undian)
                } else if (data.status === 'unvoted') {
                    btn.classList.remove('voted-btn');
                    btn.classList.add('bg-slate-50', 'text-slate-500', 'hover:bg-slate-100');
                    btn.innerHTML = '<i class="fas fa-thumbs-up mr-2"></i> Sokong Tema Ini';
                    kad.classList.remove('voted-card');

                    jumlahSokongSemasa = Math.max(0, jumlahSokongSemasa - 1);
                    tolakSkor(2); // Tarik balik ganjaran secara live
                }
                
                bakiElemen.innerText = jumlahSokongSemasa;
                document.getElementById(`undi-count-${temaId}`).innerText = data.total_votes;
            } else {
                alert("{% trans 'Ralat:' %} " + data.error);
                btn.innerHTML = originalHTML;
            }
        } catch (error) {
            alert("{% trans 'Ralat komunikasi pelayan.' %}");
            btn.innerHTML = originalHTML;
        } finally {
            btn.disabled = false;
        }
    }

    // Pembolehubah Global untuk memegang status (Adakah ini Bantahan atau Idea Tambahan?)
    let isModeBantahan = {};

    function bukaRuangIdea(id, isBantah) {
        isModeBantahan[id] = isBantah;
        const ruang = document.getElementById(`ruang-idea-${id}`);
        const teksArea = document.getElementById(`teks-idea-${id}`);
        const label = document.getElementById(`label-idea-${id}`);
        const btnHantar = document.getElementById(`btn-hantar-idea-${id}`);
        
        ruang.classList.remove('hidden');
        
        if(isBantah) {
            // Tukar Visual Kotak kepada Merah (Amaran/Bantahan)
            label.innerHTML = '<i class="fas fa-exclamation-triangle text-rose-500 mr-1"></i> Bantahan Kritikal & Pembetulan AI (+10 Pts)';
            label.className = 'text-[10px] font-black uppercase tracking-widest mb-2 text-rose-600';
            teksArea.classList.add('focus:border-rose-500', 'bg-rose-50/50');
            teksArea.classList.remove('focus:border-blue-500', 'bg-slate-50');
            teksArea.placeholder = "Nyatakan mengapa Tema ini tidak relevan, salah fakta, atau tidak tepat dengan realiti operasi anda...";
            btnHantar.className = 'flex-1 bg-rose-600 text-white text-[10px] font-bold py-2 rounded-lg shadow-sm hover:bg-rose-700 transition flex justify-center items-center';
        } else {
            // Tukar Visual Kotak kepada Biru (Idea Biasa)
            label.innerHTML = '<i class="fas fa-lightbulb text-blue-500 mr-1"></i> Idea Penambahbaikan (+10 Pts)';
            label.className = 'text-[10px] font-black uppercase tracking-widest mb-2 text-blue-600';
            teksArea.classList.add('focus:border-blue-500', 'bg-slate-50');
            teksArea.classList.remove('focus:border-rose-500', 'bg-rose-50/50');
            teksArea.placeholder = "Ada idea tambahan, jargon, atau istilah khusus yang tertinggal?";
            btnHantar.className = 'flex-1 bg-slate-800 text-white text-[10px] font-bold py-2 rounded-lg shadow-sm hover:bg-slate-900 transition flex justify-center items-center';
        }
        
        // Auto-fokus supaya mudah ditaip (UX yang bagus)
        setTimeout(() => teksArea.focus(), 50);
    }

    function tutupRuangIdea(id) {
        document.getElementById(`ruang-idea-${id}`).classList.add('hidden');
        document.getElementById(`teks-idea-${id}`).value = '';
    }

    async function hantarIdea(temaId) {
        const teksArea = document.getElementById(`teks-idea-${temaId}`);
        const idea = teksArea.value.trim();
        const isBantah = isModeBantahan[temaId] || false;
        
        if(!idea) return alert("Sila nyatakan huraian/alasan anda sebelum menghantar.");

        const btn = document.getElementById(`btn-hantar-idea-${temaId}`);
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i> Memproses...';

        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 25000);

        try {
            const response = await fetch("{% url 'bengkel:simpan_idea_tema_ajax' pk=bengkel.pk %}", {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token }}' },
                body: JSON.stringify({ 
                    'tema_id': temaId, 
                    'idea': idea,
                    'is_bantahan': isBantah 
                }),
                signal: controller.signal
            });

            if (!response.ok) throw new Error("HTTP " + response.status);
            const data = await response.json();
            
            clearTimeout(timeoutId);

            if(data.success) {
                if(data.status === "spam") {
                    alert("Komen anda ditolak oleh AI kerana berbentuk teks rawak atau tidak berkaitan (spam). Sila beri ulasan yang munasabah.");
                    btn.disabled = false;
                    btn.innerHTML = "Hantar Isyarat ke Enjin AI";
                    return;
                }

                btn.innerHTML = `<i class="fas fa-check-circle mr-1"></i> Berjaya (+${data.mata_diperoleh} pts)`;
                btn.classList.remove('bg-rose-600', 'bg-slate-800');
                btn.classList.add('bg-emerald-500');
                
                tambahSkor(data.mata_diperoleh); 

                // 📜 Suntik rekod baru ke dalam log di bawah kad secara live
                const logBox = document.getElementById(`log-idea-box-${temaId}`);
                const logList = document.getElementById(`log-list-${temaId}`);
                
                if (logBox) logBox.classList.remove('hidden');
                
                if (logList) {
                    const tagTeks = isBantah ? '<strong class="text-rose-500">[BANTAH]</strong>' : '<strong class="text-blue-500">[IDEA]</strong>';
                    const itemBaru = document.createElement('div');
                    itemBaru.className = "flex items-center justify-between p-1.5 bg-slate-50 border border-slate-100 rounded-lg text-[10px] text-slate-600 fade-in mb-1.5";
                    itemBaru.innerHTML = `
                        <span class="truncate flex-1 italic" title="${idea}">${tagTeks} ${idea}</span>
                        <span class="text-[9px] font-black text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded ml-2 border border-emerald-100 shrink-0">+${data.mata_diperoleh} pts</span>
                    `;
                    logList.insertBefore(itemBaru, logList.firstChild);
                }

                setTimeout(() => {
                    tutupRuangIdea(temaId);
                    btn.innerHTML = "Hantar Isyarat ke Enjin AI";
                    btn.className = isBantah ? 'flex-1 bg-rose-600 text-white text-[10px] font-bold py-2 rounded-lg shadow-sm hover:bg-rose-700 transition flex justify-center items-center' : 'flex-1 bg-slate-800 text-white text-[10px] font-bold py-2 rounded-lg shadow-sm hover:bg-slate-900 transition flex justify-center items-center';
                    btn.disabled = false;
                }, 1500);
            } else {
                alert("Ralat pelayan: " + data.error);
                btn.disabled = false;
                btn.innerHTML = "Cuba Semula";
            }
        } catch (error) {
            clearTimeout(timeoutId);
            if (error.name === 'AbortError') {
                alert("Ralat: Pelayan OpenAI terlalu lambat membalas (Lebih 25 saat).");
            } else {
                alert("Rangkaian terputus atau ralat sistem.");
            }
            btn.disabled = false;
            btn.innerHTML = "Cuba Semula";
        }
    }
 
    let skorSekarang = {% kira_skor_peserta request.user bengkel %};
    
    function tambahSkor(mata) {
        const elemenSkor = document.getElementById('skor-peserta');
        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);
    }

    function tolakSkor(mata) {
        const elemenSkor = document.getElementById('skor-peserta');
        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);
            }
        }, 50);
    }
</script>
{% endblock %}