{% extends "base.html" %}
{% load i18n %}
{% load bengkel_tags %}

{% block title %}{% trans "Input Masalah (Pain Points)" %} — {{ 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">1. Input Masalah (Pain Points)</span>
{% endblock %}

{% block content %}
<style>
    .ai-processing-bg { background: linear-gradient(270deg, #fff1f2, #ffe4e6, #fff1f2); background-size: 200% 200%; animation: AIProcessing 3s ease infinite; }
    @keyframes AIProcessing { 0% {background-position: 0% 50%} 50% {background-position: 100% 50%} 100% {background-position: 0% 50%} }
</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-rose-500"></div>
            
            <div class="inline-flex items-center gap-1.5 bg-rose-50 border border-rose-200 text-rose-600 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-4">
                <i class="fas fa-exclamation-triangle"></i> Node 2: Rangka Kerja Analitikal
            </div>
            
            <h2 class="text-xl md:text-2xl font-black text-slate-800 mb-2">Kenal Pasti Masalah Teras Anda</h2>
            
            <div class="bg-rose-50/50 border border-rose-100 rounded-xl p-5 mt-4 relative overflow-hidden" id="kotak-cetusan">
                <div class="absolute -right-4 -bottom-4 opacity-10"><i class="fas fa-robot text-8xl text-rose-500"></i></div>
                
                <div class="flex items-center justify-between mb-3 relative z-10">
                    <h3 class="text-[10px] font-black text-rose-500 uppercase tracking-widest"><i class="fas fa-comment-dots mr-1"></i> Cetusan Enjin AI</h3>
                    {% if not bengkel.is_locked %}
                    <button id="btn-jana-cetusan" onclick="janaCetusanOllama()" class="bg-white border border-rose-200 text-rose-600 hover:bg-rose-600 hover:text-white text-[10px] font-bold px-3 py-1.5 rounded-lg shadow-sm transition-all flex items-center gap-1.5">
                        <i class="fas fa-bolt"></i> Jana Cetusan Sekarang
                    </button>
                    {% else %}
                    <span class="text-rose-400 text-[10px] font-bold"><i class="fas fa-lock"></i> Fungsi AI Ditutup</span>
                    {% endif %}
                </div>
                
                <div id="cetusan-content" class="relative z-10 min-h-[60px] flex items-center">
                    {% if cetusan_simpanan %}
                        <p class="text-slate-800 font-bold italic leading-relaxed text-sm lg:text-base">"{{ cetusan_simpanan }}"</p>
                    {% else %}
                        <p class="text-slate-500 font-medium italic text-sm">Sila klik butang <strong>"Jana Cetusan Sekarang"</strong> untuk AI membaca fail rujukan anda.</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
            
            <div class="lg:col-span-5 bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
                <h3 class="font-bold text-sm text-slate-800 mb-4 border-b border-slate-100 pb-3 flex items-center"><i class="fas fa-pen text-indigo-500 mr-2"></i> Hantar Aduan / Masalah Baharu</h3>
                
                {% if not bengkel.is_locked %}
                <form id="form-painpoint" onsubmit="hantarPainPoint(event)" class="space-y-5">
                    
                    <div>
                        <label class="block text-xs font-bold text-slate-600 mb-1.5">Domain Utama <span class="text-rose-500">*</span></label>
                        <select id="input-domain" onchange="semakDomainLain()" required class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-rose-500 focus:ring-1 focus:ring-rose-500 text-slate-700 transition-all duration-300">
                            <option value="" disabled selected>Pilih satu domain...</option>
                            <option value="Integrasi IT / Sistem Berasingan">Integrasi IT / Sistem Berasingan</option>
                            <option value="Infrastruktur Lapuk">Infrastruktur Lapuk (Hardware/Network)</option>
                            <option value="Modal Insan & Latihan">Modal Insan & Latihan</option>
                            <option value="Keselamatan Data & Privasi">Keselamatan Data & Privasi</option>
                            <option value="Dasar & Pentadbiran">Dasar & Pentadbiran</option>
                            <option value="Lain-lain" class="font-bold text-rose-600 bg-rose-50">➕ Lain-lain (Sila Nyatakan)</option>
                        </select>
                        
                        <div id="kotak_domain_lain" class="mt-3 hidden transition-all duration-300 transform translate-y-1 opacity-0">
                            <input type="text" id="domain_lain_teks" placeholder="Contoh: Kewangan & Perolehan Klinik" class="w-full bg-white border-2 border-rose-200 rounded-lg px-4 py-2.5 text-sm focus:border-rose-500 outline-none text-slate-700 shadow-sm placeholder-slate-300">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-600 mb-1.5">Tahap Keseriusan Impak <span class="text-rose-500">*</span></label>
                        <div class="flex gap-4">
                            <label class="flex-1 cursor-pointer">
                                <input type="radio" name="severity" value="Sederhana" class="peer sr-only" required>
                                <div class="text-center py-2 px-3 text-xs font-bold rounded-lg border border-slate-200 text-slate-400 peer-checked:bg-amber-50 peer-checked:border-amber-400 peer-checked:text-amber-700 transition">Sederhana</div>
                            </label>
                            <label class="flex-1 cursor-pointer">
                                <input type="radio" name="severity" value="Tinggi" class="peer sr-only">
                                <div class="text-center py-2 px-3 text-xs font-bold rounded-lg border border-slate-200 text-slate-400 peer-checked:bg-orange-50 peer-checked:border-orange-400 peer-checked:text-orange-700 transition">Tinggi</div>
                            </label>
                            <label class="flex-1 cursor-pointer">
                                <input type="radio" name="severity" value="Kritikal" class="peer sr-only">
                                <div class="text-center py-2 px-3 text-xs font-bold rounded-lg border border-slate-200 text-slate-400 peer-checked:bg-rose-50 peer-checked:border-rose-400 peer-checked:text-rose-700 transition">Kritikal</div>
                            </label>
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-600 mb-1.5">Huraikan Isu Tersebut <span class="text-rose-500">*</span></label>
                        <textarea id="input-desc" required rows="4" placeholder="Contoh: Saya terpaksa log masuk ke 3 sistem berbeza hanya untuk mendaftar keluar seorang pesakit..." class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-rose-500 focus:ring-1 focus:ring-rose-500 text-slate-700 resize-none"></textarea>
                        <p class="text-[9px] text-slate-400 mt-1">Sila berikan butiran spesifik. AI akan mengumpulkan aduan yang serupa kelak.</p>
                    </div>

                    <button type="submit" id="btn-submit" class="w-full bg-rose-600 text-white text-sm font-bold py-3 rounded-xl shadow-sm hover:bg-rose-700 transition flex items-center justify-center">
                        <i class="fas fa-paper-plane mr-2"></i> Hantar ke Enjin AI
                    </button>
                </form>
                {% else %}
                <div class="bg-rose-50/50 border border-rose-100 rounded-xl p-5 text-center mt-5">
                    <i class="fas fa-lock text-rose-500 text-2xl mb-2"></i>
                    <p class="text-xs font-black text-rose-800">Mod Baca Sahaja Aktif</p>
                    <p class="text-[10px] text-rose-600 mt-1">Acara telah ditamatkan. Anda tidak boleh menambah aduan baharu.</p>
                </div>
                {% endif %}
            </div>

            <div class="lg:col-span-7 bg-white rounded-2xl shadow-sm border border-slate-200 flex flex-col h-full overflow-hidden">
                <div class="p-6 border-b border-slate-100 flex flex-col md:flex-row md:justify-between md:items-center gap-4 bg-slate-50/50 shrink-0">
                    <div class="flex items-center gap-3">
                        <h3 class="font-bold text-sm text-slate-800 flex items-center"><i class="fas fa-list-ul text-rose-500 mr-2"></i> Rekod Masalah Saya</h3>
                        <span class="text-[10px] bg-slate-200 text-slate-600 px-2 py-1 rounded font-bold uppercase tracking-wider"><span id="kiraan-aduan">{{ senarai_aduan|length }}</span> Rekod</span>
                    </div>
                    <!-- Paginasi Peserta -->
                    <div class="flex gap-2">
                        <button type="button" onclick="pindahMukaAduan(-1)" class="w-8 h-8 rounded-xl bg-white border border-slate-200 text-slate-500 hover:bg-rose-50 hover:text-rose-600 hover:border-rose-200 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed shadow-sm" id="btn-prev-a"><i class="fas fa-chevron-left text-xs"></i></button>
                        <span id="page-info-a" class="text-xs font-bold text-rose-600 flex items-center px-2 bg-rose-50 rounded-xl border border-rose-100">1/1</span>
                        <button type="button" onclick="pindahMukaAduan(1)" class="w-8 h-8 rounded-xl bg-white border border-slate-200 text-slate-500 hover:bg-rose-50 hover:text-rose-600 hover:border-rose-200 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed shadow-sm" id="btn-next-a"><i class="fas fa-chevron-right text-xs"></i></button>
                    </div>
                </div>
                
                <div class="flex-1 p-6 grid grid-cols-1 xl:grid-cols-2 gap-4 content-start min-h-[350px]" id="senarai-aduan">
                    {% if senarai_aduan %}
                        {% for aduan in senarai_aduan %}
                        <div class="kad-aduan-item bg-white border border-slate-200 rounded-xl p-4 relative shadow-sm hover:shadow-md transition group animate-fade-up" id="kad-aduan-{{ aduan.id }}">
                            <div class="absolute top-3 right-3 flex items-center gap-2">
                                {% if not bengkel.is_locked %}
                                <button onclick="padamPainPoint({{ aduan.id }})" class="opacity-0 group-hover:opacity-100 transition-opacity bg-rose-100 hover:bg-rose-600 text-rose-600 hover:text-white w-6 h-6 rounded flex items-center justify-center text-[10px]" title="Padam Rekod">
                                    <i class="fas fa-trash"></i>
                                </button>
                                {% endif %}
                                <div class="text-[9px] font-black uppercase px-2 py-0.5 rounded {% if aduan.kesan == 'Kritikal' %}bg-rose-50 text-rose-600 border-rose-100{% elif aduan.kesan == 'Tinggi' %}bg-orange-50 text-orange-600 border-orange-100{% else %}bg-amber-50 text-amber-600 border-amber-100{% endif %}">
                                    {{ aduan.kesan|default:"Sederhana" }}
                                </div>
                            </div>
                            <div class="flex gap-2 items-center mb-2 pr-24">
                                <span class="bg-indigo-100 text-indigo-700 text-[9px] font-bold px-2 py-0.5 rounded">{{ aduan.tajuk }}</span>
                            </div>
                            <p class="text-xs text-slate-700 leading-relaxed font-medium">"{{ aduan.keterangan }}"</p>
                        </div>
                        {% endfor %}
                    {% else %}
                        <div class="col-span-1 xl:col-span-2 text-center text-slate-400 text-xs py-12 border-2 border-dashed border-slate-200 rounded-xl kad-aduan-item hidden" id="mesej-kosong">
                            <i class="fas fa-inbox text-3xl mb-3 opacity-50"></i><br>Belum ada aduan direkodkan.<br>Hantar masalah pertama anda!
                        </div>
                    {% endif %}
                </div>
            </div>

<script>
    // LOGIK PAGINASI DINAMIK KAD ADUAN (PESERTA)
    let currentAPage = 0;
    const cardsPerAPage = 4; // Papar 4 aduan serentak (2x2 grid)

    function kemaskiniPaginasiAduan() {
        const allACards = document.querySelectorAll('.kad-aduan-item:not(#mesej-kosong)');
        let totalAPages = Math.ceil(allACards.length / cardsPerAPage);
        if (totalAPages === 0) totalAPages = 1;
        
        if (currentAPage >= totalAPages) currentAPage = totalAPages - 1;
        if (currentAPage < 0) currentAPage = 0;

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

    function pindahMukaAduan(arah) {
        const allACards = document.querySelectorAll('.kad-aduan-item:not(#mesej-kosong)');
        let totalAPages = Math.ceil(allACards.length / cardsPerAPage);
        if (totalAPages === 0) totalAPages = 1;

        currentAPage += arah;
        if(currentAPage < 0) currentAPage = 0;
        if(currentAPage >= totalAPages) currentAPage = totalAPages - 1;
        kemaskiniPaginasiAduan();
    }

    window.addEventListener('DOMContentLoaded', () => {
        const mesejKosong = document.getElementById('mesej-kosong');
        const allACards = document.querySelectorAll('.kad-aduan-item:not(#mesej-kosong)');
        
        if(allACards.length === 0 && mesejKosong) {
            mesejKosong.style.display = 'block';
            document.getElementById('page-info-a').innerText = `1 / 1`;
            document.getElementById('btn-prev-a').disabled = true;
            document.getElementById('btn-next-a').disabled = true;
        } else {
            kemaskiniPaginasiAduan();
        }
    });
</script>

        </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_spaf' 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>
        
        <button id="btn-next-step" onclick="window.location.href='{% url 'bengkel:peserta_problem' 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 disabled:opacity-50 disabled:cursor-not-allowed" 
            {% if not senarai_aduan and not bengkel.is_locked %}disabled{% endif %}>
            Seterusnya: Pernyataan Masalah <i class="fas fa-arrow-right"></i>
        </button>
    </div>

<script>
    let aduanCount = {{ senarai_aduan|length }};
    let skorSekarang = {% kira_skor_peserta request.user bengkel %};

    // Tunjuk atau sorok kotak 'Lain-lain' dengan animasi
    function semakDomainLain() {
        const domainSelect = document.getElementById('input-domain');
        const kotakLain = document.getElementById('kotak_domain_lain');
        
        if (domainSelect.value === 'Lain-lain') {
            kotakLain.classList.remove('hidden');
            // Sedikit delay untuk animasi tailwind berfungsi
            setTimeout(() => {
                kotakLain.classList.remove('translate-y-1', 'opacity-0');
                document.getElementById('domain_lain_teks').focus();
            }, 10);
        } else {
            kotakLain.classList.add('translate-y-1', 'opacity-0');
            setTimeout(() => { kotakLain.classList.add('hidden'); }, 300);
        }
    }

    // FUNGSI 1: MENGHANTAR DATA PAIN POINT KE DATABASE
    function hantarPainPoint(event) {
        event.preventDefault(); // Halang form dari reload page

        let domain = document.getElementById('input-domain').value;
        const severity = document.querySelector('input[name="severity"]:checked').value;
        const desc = document.getElementById('input-desc').value;
        const btn = document.getElementById('btn-submit');

        // Jika pilih "Lain-lain", ambil teks dari kotak input
        if (domain === 'Lain-lain') {
            const domainLainTeks = document.getElementById('domain_lain_teks').value.trim();
            if (!domainLainTeks) {
                document.getElementById('domain_lain_teks').focus();
                return alert("{% trans 'Sila nyatakan domain spesifik anda di ruangan yang disediakan.' %}");
            }
            domain = domainLainTeks; 
        }
        
        const mesejKosong = document.getElementById('mesej-kosong');
        if (mesejKosong) mesejKosong.remove();

        // Tunjuk State Processing
        btn.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i> Menyimpan...';
        btn.disabled = true;
        btn.classList.replace('bg-rose-600', 'bg-slate-400');
        btn.classList.replace('hover:bg-rose-700', 'hover:bg-slate-400');

        // Hantar ke Database Django (AJAX)
        fetch("{% url 'bengkel:simpan_painpoint_ajax' pk=bengkel.pk %}", {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                domain: domain,
                severity: severity,
                desc: desc
            })
        })
        .then(res => res.json())
        .then(data => {
            if(data.success) {
                aduanCount++;

                // BUKA KUNCI BUTANG SETERUSNYA
                document.getElementById('btn-next-step').disabled = false;
                
                // Set warna badge severity
                let sevWarna = '';
                if(severity === 'Kritikal') sevWarna = 'bg-rose-50 text-rose-600 border-rose-100';
                else if(severity === 'Tinggi') sevWarna = 'bg-orange-50 text-orange-600 border-orange-100';
                else sevWarna = 'bg-amber-50 text-amber-600 border-amber-100';

                // Tentukan Lencana Gred AI
                let badgeAI = '';
                if(data.mata_diperoleh === 0) {
                    badgeAI = `<span class="bg-slate-100 text-slate-500 border border-slate-200 text-[9px] font-bold px-2 py-0.5 rounded shadow-sm"><i class="fas fa-trash-alt"></i> Spam: 0 pts</span>`;
                } else {
                    badgeAI = `<span class="bg-emerald-50 text-emerald-600 border border-emerald-200 text-[9px] font-bold px-2 py-0.5 rounded shadow-sm"><i class="fas fa-robot"></i> AI Gred: ${data.mata_diperoleh} pts</span>`;
                }

                // Bina Kad Input Baharu di Skrin
                const senarai = document.getElementById('senarai-aduan');
                const kadBaru = document.createElement('div');
                kadBaru.className = "kad-aduan-item bg-white border border-slate-200 rounded-xl p-4 relative shadow-sm hover:shadow-md transition animate-fade-up";
                
                kadBaru.innerHTML = `
                    <div class="absolute top-3 right-3 text-[9px] font-bold uppercase flex gap-1 items-center">
                        ${badgeAI}
                        <div class="px-2 py-0.5 rounded ${sevWarna}">${severity}</div>
                    </div>
                    <div class="flex gap-2 items-center mb-2 pr-16">
                        <span class="bg-indigo-100 text-indigo-700 text-[9px] font-bold px-2 py-0.5 rounded">${domain}</span>
                    </div>
                    <p class="text-xs text-slate-700 leading-relaxed font-medium">"${desc}"</p>
                    <div class="mt-3 pt-2 border-t border-slate-100 flex items-center gap-2">
                        <i class="fas fa-check-circle text-emerald-500 text-xs"></i>
                        <span class="text-[9px] text-emerald-600 font-bold uppercase tracking-widest">Disimpan</span>
                    </div>
                `;
                
                senarai.insertBefore(kadBaru, senarai.firstChild);
                document.getElementById('kiraan-aduan').innerText = aduanCount;
                document.getElementById('form-painpoint').reset();
                
                // Kemaskini Paginasi selepas tambah aduan
                currentAPage = 0; 
                if (typeof kemaskiniPaginasiAduan === "function") kemaskiniPaginasiAduan();

                // Simulasi Gamifikasi (Hanya tambah skor jika AI luluskan)
                if(data.mata_diperoleh > 0) {
                    const elemenSkor = document.getElementById('skor-peserta');
                    elemenSkor.classList.add('text-yellow-400', 'scale-125');
                    let skorTarget = skorSekarang + data.mata_diperoleh;
                    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);
                } else {
                    // Beri pop-up amaran jika aduan dikesan sebagai sampah
                    alert("Aduan anda telah disimpan, tetapi AI menilainya sebagai tidak relevan/sampah (0 mata diberikan).");
                }

            } else {
                alert("{% trans 'Gagal menyimpan:' %} " + data.error);
            }
        })
        .catch(err => {
            alert("{% trans 'Ralat sistem. Sila periksa sambungan internet anda.' %}");
        })
        .finally(() => {
            // Kembalikan Butang ke asal
            btn.innerHTML = '<i class="fas fa-paper-plane mr-2"></i> Hantar ke Enjin AI';
            btn.disabled = false;
            btn.classList.replace('bg-slate-400', 'bg-rose-600');
            btn.classList.replace('hover:bg-slate-400', 'hover:bg-rose-700');
        });
    }

    // FUNGSI 2: PADAM REKOD (AJAX)
    function padamPainPoint(id) {
        if(!confirm("{% trans 'Adakah anda pasti mahu memadam rekod masalah ini? Ia tidak dapat dikembalikan.' %}")) return;

        // Panggil endpoint delete (URL dibetulkan mengikut urls.py)
        fetch(`/bengkel/analisis/spaf/pain-point/${id}/del/`, {
            method: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}' }
        })
        .then(res => {
            if(res.ok) {
                // Buang kad dari skrin dengan animasi
                const kad = document.getElementById(`kad-aduan-${id}`);
                kad.style.opacity = '0';
                setTimeout(() => { 
                    kad.remove(); 
                    if (typeof kemaskiniPaginasiAduan === "function") kemaskiniPaginasiAduan();
                    
                    if(aduanCount <= 0) {
                        const mesejKosong = document.getElementById('mesej-kosong');
                        if(mesejKosong) mesejKosong.style.display = 'block';
                    }
                }, 300);
                
                // Kurangkan jumlah kiraan & skor
                aduanCount--;
                document.getElementById('kiraan-aduan').innerText = aduanCount;
                
                // Jika tiada aduan langsung, kunci butang Seterusnya
                if(aduanCount <= 0) document.getElementById('btn-next-step').disabled = true;

                // Animasi tolak skor
                const elemenSkor = document.getElementById('skor-peserta');
                elemenSkor.classList.add('text-rose-400', 'scale-90');
                let skorTarget = skorSekarang - 10;
                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);
            } else {
                alert("{% trans 'Gagal memadam rekod. Sila muat semula halaman.' %}");
            }
        });
    }

    // FUNGSI 2: JANA CETUSAN OLLAMA
    function janaCetusanOllama() {
        const btn = document.getElementById('btn-jana-cetusan');
        const content = document.getElementById('cetusan-content');
        
        // 1. Kunci butang dan tunjuk pemasa loading
        btn.disabled = true;
        btn.classList.add('opacity-50', 'cursor-not-allowed');
        
        let seconds = 0;
        content.innerHTML = `
            <div class="w-full flex flex-col items-center justify-center py-2">
                <i class="fas fa-circle-notch fa-spin text-rose-500 text-2xl mb-2"></i>
                <p class="text-rose-600 font-bold text-xs uppercase tracking-widest animate-pulse">LKB Sedang Membaca & Memproses...</p>
                <p class="text-slate-400 text-[10px] mt-1 font-mono">Masa Pemprosesan: <span id="timer-cetusan">0</span>s</p>
            </div>
        `;
        
        const timerInt = setInterval(() => {
            seconds++;
            const t = document.getElementById('timer-cetusan');
            if(t) t.innerText = seconds;
        }, 1000);
        
        // 2. Panggil Backend menggunakan AJAX
        fetch("{% url 'bengkel:jana_cetusan_ai' pk=bengkel.pk %}", {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
                'Content-Type': 'application/json'
            }
        })
        .then(res => res.json())
        .then(data => {
            clearInterval(timerInt);
            btn.disabled = false;
            btn.classList.remove('opacity-50', 'cursor-not-allowed');
            
            if(data.success) {
                // Berjaya! Tunjuk teks cetusan
                content.innerHTML = `<p class="text-slate-800 font-bold italic leading-relaxed text-sm lg:text-base">"${data.cetusan}"</p>`;
                
                // Ubah gaya butang kepada hijau
                btn.innerHTML = `<i class="fas fa-check-circle"></i> Selesai (Masa: ${seconds}s)`;
                btn.classList.replace('text-rose-600', 'text-emerald-600');
                btn.classList.replace('border-rose-200', 'border-emerald-200');
                btn.classList.replace('hover:bg-rose-600', 'hover:bg-emerald-50');
                btn.classList.replace('hover:text-white', 'hover:text-emerald-700');
            } else {
                // Gagal! Tunjuk ralat
                content.innerHTML = `
                    <div class="bg-rose-100/50 border border-rose-200 p-3 rounded-lg flex gap-3 items-start w-full">
                        <i class="fas fa-exclamation-triangle text-rose-500 mt-0.5"></i>
                        <div>
                            <div class="text-xs font-bold text-rose-700">Gagal Menjana Cetusan AI</div>
                            <div class="text-[10px] text-rose-600 mt-0.5">${data.error}</div>
                        </div>
                    </div>
                `;
                btn.innerHTML = `<i class="fas fa-redo"></i> Cuba Lagi`;
            }
        })
        .catch(err => {
            clearInterval(timerInt);
            btn.disabled = false;
            btn.classList.remove('opacity-50', 'cursor-not-allowed');
            
            content.innerHTML = `
                <div class="bg-rose-100/50 border border-rose-200 p-3 rounded-lg flex gap-3 items-start w-full">
                    <i class="fas fa-wifi text-rose-500 mt-0.5"></i>
                    <div>
                        <div class="text-xs font-bold text-rose-700">Ralat Rangkaian</div>
                        <div class="text-[10px] text-rose-600 mt-0.5">Gagal berhubung dengan pelayan tempatan.</div>
                    </div>
                </div>
            `;
            btn.innerHTML = `<i class="fas fa-redo"></i> Cuba Lagi`;
        });
    }
</script>
{% endblock %}