{% extends "base.html" %}
{% load i18n %}
{% block title %}Analisis Tema AI — {{ bengkel.title }}{% endblock %}

{% block breadcrumb %}
    <a href="{% url 'bengkel:list' %}" class="text-blue-600 hover:underline text-xs font-bold">Pustaka Bengkel</a> <span class="mx-2 text-slate-400">/</span>
    <a href="{% url 'bengkel:detail' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">{{ bengkel.title|truncatechars:30 }}</a> <span class="mx-2 text-slate-400">/</span>
    <a href="{% url 'bengkel:overview_map' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">Pusat Kawalan AI</a> <span class="mx-2 text-slate-400">/</span>
    <span class="text-slate-500 font-medium text-xs">Langkah 3: Tema Utama</span>
{% endblock %}

{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
    .radar-bg { background-image: radial-gradient(circle at center, #eff6ff 0%, transparent 70%); }
</style>

<div class="animate-fade-up min-h-screen pb-10">
    <div class="max-w-[1600px] w-full mx-auto">
        
        <div class="relative overflow-hidden bg-gradient-to-br from-blue-900 via-indigo-800 to-cyan-900 rounded-2xl px-8 py-7 mb-8 shadow-lg">
            <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(rgba(255,255,255,.15) 1px,transparent 1px);background-size:24px 24px;"></div>
            
            <div class="relative flex flex-wrap justify-between items-center gap-4">
                <div class="flex items-center gap-4">
                    <a href="{% url 'bengkel:overview_map' 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 Pusat Kawalan">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <div>
                        <div class="inline-flex items-center gap-1.5 bg-blue-500/20 border border-blue-400/30 text-blue-200 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-3">
                            <i class="fas fa-tags"></i> Synthesis & Formulation
                        </div>
                        <h1 class="text-2xl md:text-3xl font-extrabold text-white leading-tight">Master Themes & Participant Endorsement</h1>
                        <p class="text-white/70 text-sm mt-1">AI-driven themes refined through continuous Human-in-the-Loop (HITL) learning and voting.</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="bg-emerald-500/20 border border-emerald-400/30 text-emerald-100 text-xs font-bold px-4 py-2.5 rounded-xl backdrop-blur-sm flex items-center shadow-inner">
                        <i class="fas fa-check-double text-emerald-400 mr-2"></i> Endorsement Phase Active
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div id="btn-jana-tema" onclick="janaTemaAI()" class="bg-blue-50 p-5 rounded-xl shadow-sm border-2 border-blue-200 cursor-pointer hover:border-blue-500 hover:shadow-md transition group relative overflow-hidden">
                <div class="absolute -right-4 -bottom-4 opacity-10 group-hover:opacity-20 transition"><i class="fas fa-robot text-8xl text-blue-500"></i></div>
                <div class="text-blue-600 text-[10px] font-black uppercase tracking-widest mb-1 flex justify-between items-center relative z-10">
                    Tindakan Penganjur
                    <span class="text-[8px] bg-blue-500 text-white px-1.5 py-0.5 rounded opacity-100 transition"><i class="fas fa-bolt"></i> Live AI</span>
                </div>
                <div class="text-2xl font-black text-blue-800 relative z-10 mt-2">Jana Tema AI</div>
                <div class="text-[10px] text-blue-600 font-bold mt-1 relative z-10">Sintesis masalah semua peserta</div>
            </div>
            
            <div onclick="bukaModalInsight('modal-ideas')" class="bg-white p-5 rounded-xl shadow-sm border border-slate-200 cursor-pointer hover:border-indigo-400 hover:shadow-md transition group relative overflow-hidden">
                <div class="absolute -right-4 -bottom-4 opacity-5 group-hover:opacity-10 transition"><i class="fas fa-lightbulb text-8xl text-indigo-500"></i></div>
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 flex justify-between items-center relative z-10">
                    Participant Ideas (DNA)
                    <span class="text-[8px] bg-indigo-50 text-indigo-600 px-1.5 py-0.5 rounded transition animate-pulse"><i class="fas fa-bolt"></i> Live</span>
                </div>
                <div class="text-3xl font-black text-indigo-600 relative z-10" id="live-jumlah-idea">{{ jumlah_idea }}</div>
                <div class="text-[10px] text-slate-500 mt-1 font-medium relative z-10">Re-learned by LLM Base</div>
            </div>
            
            <div onclick="bukaModalInsight('modal-votes')" class="bg-white p-5 rounded-xl shadow-sm border border-slate-200 cursor-pointer hover:border-emerald-400 hover:shadow-md transition group relative overflow-hidden">
                <div class="absolute -right-4 -bottom-4 opacity-5 group-hover:opacity-10 transition"><i class="fas fa-vote-yea text-8xl text-emerald-500"></i></div>
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 flex justify-between items-center relative z-10">
                    Total Votes Cast
                    <span class="text-[8px] bg-emerald-50 text-emerald-600 px-1.5 py-0.5 rounded transition animate-pulse"><i class="fas fa-bolt"></i> Live</span>
                </div>
                <div class="text-3xl font-black text-emerald-600 relative z-10" id="live-jumlah-undi">{{ jumlah_undi }}</div>
                <div class="text-[10px] text-emerald-500 mt-1 font-bold relative z-10">Keputusan Disahkan Peserta</div>
            </div>
            
            <div class="bg-gradient-to-br from-cyan-50 to-blue-50 p-5 rounded-xl shadow-sm border border-cyan-100 cursor-pointer hover:shadow-md transition" onclick="maraKeFasaEmpat()">
                <div class="text-blue-800 text-[10px] font-bold uppercase tracking-widest mb-1 flex items-center gap-1.5">
                    Ready for Pillar Conversion <i class="fas fa-lock-open text-[9px] text-emerald-500"></i>
                </div>
                <div class="text-3xl font-black text-blue-700">Top {{ jumlah_tema }}</div>
                <div class="text-[10px] text-blue-500 mt-1 font-bold"><i class="fas fa-arrow-right"></i> Proceed to Pillar Generation</div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            
            <div class="lg:col-span-4 flex flex-col gap-6">
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 radar-bg h-full">
                    <div class="flex justify-between items-center mb-4 border-b border-slate-100 pb-3">
                        <h3 class="font-bold text-sm text-slate-800"><i class="fas fa-chart-bar text-blue-600 mr-2"></i> Status Persetujuan Tema</h3>
                        <span class="text-[9px] bg-emerald-50 text-emerald-600 border border-emerald-100 font-bold px-2 py-1 rounded uppercase tracking-wider">Live</span>
                    </div>
                    <div class="relative h-[300px] w-full">
                        <canvas id="grafVoting"></canvas>
                    </div>
                    
                    <div class="mt-6 pt-4 border-t border-slate-100 space-y-3">
                        <div class="flex items-start gap-3">
                            <div class="w-1.5 h-10 bg-blue-500 rounded-full shrink-0"></div>
                            <p class="text-[10px] text-slate-500 leading-tight"><strong class="text-slate-700 block mb-1">Human-In-The-Loop (HITL)</strong> AI telah menyerap <strong>{{ jumlah_idea }} idea baharu</strong> daripada pakar domain untuk memurnikan bahasa tema ini.</p>
                        </div>
                        <div class="flex items-start gap-3">
                            <div class="w-1.5 h-10 bg-emerald-500 rounded-full shrink-0"></div>
                            <p class="text-[10px] text-slate-500 leading-tight"><strong class="text-slate-700 block mb-1">Consensus Building</strong> Sebanyak <strong>{{ jumlah_undi }} undian</strong> telah direkodkan bagi mengesahkan keutamaan strategik.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="lg:col-span-8">
                <div class="flex justify-between items-center mb-5">
                    <h3 class="font-black text-xl text-slate-800 flex items-center"><i class="fas fa-tags text-blue-600 mr-2"></i> {{ jumlah_tema }} Tema Utama Yang Disahkan</h3>
                    <div class="flex gap-2">
                        <button onclick="pindahMuka(-1)" class="w-8 h-8 rounded-full 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"><i class="fas fa-chevron-left"></i></button>
                        <span id="page-info" class="text-xs font-bold text-slate-500 flex items-center px-2">1/1</span>
                        <button onclick="pindahMuka(1)" class="w-8 h-8 rounded-full 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"><i class="fas fa-chevron-right"></i></button>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 xl:grid-cols-2 gap-4 pb-6 min-h-[400px]" id="bekas-kad-tema">
                    {% for item in tema_data %}
                    <div class="kad-penganjur bg-white rounded-xl shadow-sm border border-slate-200 border-l-4 border-l-blue-500 p-5 hover:shadow-md hover:border-blue-300 transition flex flex-col h-full animate-fade-up">
                        <div class="flex justify-between items-start mb-3 border-b border-slate-100 pb-3">
                            <span class="bg-blue-50 text-blue-700 font-black px-2 py-1 rounded text-[10px] uppercase">TEMA-0{{ item.obj.urutan }}</span>
                            <span class="bg-emerald-50 text-emerald-700 text-[10px] font-bold px-2 py-1 rounded-full border border-emerald-100"><i class="fas fa-vote-yea mr-1"></i> <span id="live-theme-vote-{{ item.obj.id }}">{{ item.undi }}</span> Undian</span>
                        </div>
                        <h4 class="font-bold text-slate-800 text-sm leading-snug mb-2">{{ item.obj.tema }}</h4>
                        <p class="text-[11px] text-slate-500 leading-relaxed mb-4 flex-1">{{ item.obj.penerangan }}</p>
                        
                        {% if item.ideas %}
                        <div class="bg-slate-50 p-3 rounded-lg border border-slate-100 mt-auto relative">
                            <div class="flex justify-between items-start mb-2">
                                <strong class="text-blue-800 uppercase tracking-widest text-[8px] font-black"><i class="fas fa-dna mr-1"></i> {{ item.ideas.count }} Idea/DNA Disuntik:</strong>
                                <button onclick="murnikanTema(this, '{{ item.obj.id }}')" class="bg-indigo-100 hover:bg-indigo-200 text-indigo-700 text-[9px] font-bold px-2 py-1 rounded transition flex items-center shadow-sm">
                                    <i class="fas fa-magic mr-1"></i> Refine AI
                                </button>
                            </div>
                            <ul class="space-y-1.5 mt-1">
                                {% for idea in item.ideas|slice:":2" %}
                                <li class="text-[10px] text-slate-600 flex gap-2">
                                    <i class="fas fa-comment-dots text-blue-300 mt-0.5"></i>
                                    <span class="italic">"{{ idea.idea|truncatechars:60 }}"</span>
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% endif %}
                    </div>
                    {% empty %}
                    <div class="col-span-full py-12 text-center border-2 border-dashed border-slate-300 rounded-xl bg-slate-50 kad-penganjur hidden">
                        <i class="fas fa-robot text-4xl text-slate-300 mb-3 block"></i>
                        <p class="text-slate-500 font-bold">Tiada Tema AI Dijana.</p>
                        <p class="text-xs text-slate-400">Sila tekan butang 'Jana Tema AI' di atas.</p>
                    </div>
                    {% endfor %}
                </div>
            </div>

<script>
    // LOGIK PAGINASI KAD (PENGANJUR)
    let currentTPage = 0;
    const cardsPerPage = 2; // Papar 2 kad serentak (kiri dan kanan)
    const allCards = document.querySelectorAll('.kad-penganjur:not(.hidden)');
    const totalPages = Math.ceil(allCards.length / cardsPerPage);

    function tunjukMukaSurat() {
        if(allCards.length === 0) return;
        allCards.forEach(c => c.style.display = 'none'); // Sorok semua
        
        let mula = currentTPage * cardsPerPage;
        let tamat = mula + cardsPerPage;
        
        for(let i=mula; i<tamat && i<allCards.length; i++) {
            allCards[i].style.display = 'flex'; // Tunjuk kad yang sepatutnya sahaja
        }
        
        // Kemas kini UI butang
        document.getElementById('page-info').innerText = `${currentTPage + 1} / ${totalPages}`;
        document.getElementById('btn-prev').disabled = currentTPage === 0;
        document.getElementById('btn-next').disabled = currentTPage === totalPages - 1;
    }

    function pindahMuka(arah) {
        currentTPage += arah;
        if(currentTPage < 0) currentTPage = 0;
        if(currentTPage >= totalPages) currentTPage = totalPages - 1;
        tunjukMukaSurat();
    }

    // Jalankan semasa muka surat di-load
    window.addEventListener('DOMContentLoaded', () => tunjukMukaSurat());
</script>

        </div>
    </div>
</div>

<div id="modal-ideas" class="fixed inset-0 bg-slate-900 bg-opacity-80 z-[1100] flex justify-center items-center backdrop-blur-sm p-4 opacity-0 pointer-events-none transition-opacity duration-300">
    <div class="modal-box bg-slate-50 rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col overflow-hidden transform scale-95 transition-transform duration-300">
        
        <div class="bg-gradient-to-r from-indigo-900 to-indigo-700 p-5 flex justify-between items-center text-white border-b-4 border-indigo-500">
            <div>
                <h2 class="text-xl font-black flex items-center"><i class="fas fa-comments text-indigo-300 mr-2"></i> LKB Learning Log</h2>
                <p class="text-indigo-200 text-xs mt-0.5">Audit trail of the {{ jumlah_idea }} new ideas ingested by the AI.</p>
            </div>
            <button onclick="tutupModalInsight('modal-ideas')" class="bg-white/10 hover:bg-red-500 w-8 h-8 rounded-full transition flex items-center justify-center"><i class="fas fa-times"></i></button>
        </div>

        <div class="p-6 overflow-y-auto flex-1 bg-white">
            <table class="w-full text-left border-collapse text-xs">
                <thead class="bg-slate-100 text-slate-500 uppercase font-black tracking-widest text-[9px]">
                    <tr>
                        <th class="p-3 border-b border-slate-200">Timestamp</th>
                        <th class="p-3 border-b border-slate-200">Participant / SME</th>
                        <th class="p-3 border-b border-slate-200">Idea Ingested (Raw Text)</th>
                        <th class="p-3 border-b border-slate-200 text-center">AI Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for idea in semua_idea %}
                    <tr class="border-b border-slate-100 transition {% if '[BANTAHAN STRATEGIK]' in idea.idea %}bg-rose-50 hover:bg-rose-100{% else %}hover:bg-indigo-50{% endif %}">
                        <td class="p-3 text-slate-400">{{ idea.created_at|date:"M d, h:i A" }}</td>
                        <td class="p-3 font-bold text-slate-700">{{ idea.user.get_full_name|default:idea.user.username }}</td>
                        <td class="p-3 italic text-slate-600">
                            {% if '[BANTAHAN STRATEGIK]' in idea.idea %}
                                <span class="bg-rose-200 text-rose-800 text-[8px] font-black px-1.5 py-0.5 rounded uppercase mr-1"><i class="fas fa-exclamation-triangle"></i> BANTAHAN</span>
                                <span class="text-rose-700">"{{ idea.idea|slice:'21:' }}"</span>
                            {% else %}
                                <span class="bg-blue-100 text-blue-700 text-[8px] font-black px-1.5 py-0.5 rounded uppercase mr-1"><i class="fas fa-lightbulb"></i> IDEA</span>
                                "{{ idea.idea|slice:'20:' }}"
                            {% endif %}
                        </td>
                        <td class="p-3 text-center"><span class="bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded-full font-bold text-[8px]">TEMA-0{{ idea.tema.urutan }}</span></td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="4" class="p-5 text-center text-slate-400">Tiada input direkodkan.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    let chartVotingObj = null;

    window.addEventListener('DOMContentLoaded', () => {
        // Graf Bar Undian Tema (Dinamik)
        const grafLabels = JSON.parse('{{ graf_labels_json|escapejs }}');
        const grafData = JSON.parse('{{ graf_data_json|escapejs }}');

        const canvasVoting = document.getElementById('grafVoting');
        if (canvasVoting) {
            const ctxVoting = canvasVoting.getContext('2d');
            chartVotingObj = new Chart(ctxVoting, {
                type: 'bar',
                data: {
                    labels: grafLabels,
                    datasets: [{
                        label: 'Total Votes Cast',
                        data: grafData,
                        backgroundColor: ['rgba(59, 130, 246, 0.8)', 'rgba(99, 102, 241, 0.8)', 'rgba(6, 182, 212, 0.8)', 'rgba(16, 185, 129, 0.8)'],
                        borderRadius: 8,
                        barThickness: 40
                    }]
                },
                options: {
                    responsive: true, maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { stepSize: 1 } },
                        x: { grid: { display: false } }
                    }
                }
            });
        }

        // --- FUNGSI LIVE POLLING (Setiap 5 Saat) ---
        setInterval(() => {
            fetch("{% url 'bengkel:tema_live_data_ajax' pk=bengkel.pk %}")
            .then(res => res.json())
            .then(data => {
                // Update Jumlah Keseluruhan
                const elIdea = document.getElementById('live-jumlah-idea');
                if(elIdea) elIdea.innerText = data.jumlah_idea;
                
                const elUndi = document.getElementById('live-jumlah-undi');
                if(elUndi) elUndi.innerText = data.jumlah_undi;
                
                // Update Graf Bar
                if(chartVotingObj) {
                    chartVotingObj.data.labels = data.graf_labels;
                    chartVotingObj.data.datasets[0].data = data.graf_data;
                    chartVotingObj.update('none'); // Update tanpa kelip
                }

                // Update Undi pada setiap kad
                for (const [temaId, undiCount] of Object.entries(data.tema_votes)) {
                    const elTemaVote = document.getElementById(`live-theme-vote-${temaId}`);
                    if(elTemaVote) {
                        elTemaVote.innerText = undiCount;
                    }
                }
            })
            .catch(err => console.log("Gagal menarik data live Tema:", err));
        }, 5000);
    });

    // FUNGSI MODAL INSIGHTS
    window.bukaModalInsight = function(modalId) {
        const modal = document.getElementById(modalId);
        if (modal) {
            const box = modal.querySelector('.modal-box');
            modal.classList.remove('pointer-events-none', 'opacity-0');
            box.classList.remove('scale-95');
        }
    };

    window.tutupModalInsight = function(modalId) {
        const modal = document.getElementById(modalId);
        if (modal) {
            const box = modal.querySelector('.modal-box');
            modal.classList.add('opacity-0');
            box.classList.add('scale-95');
            setTimeout(() => { modal.classList.add('pointer-events-none'); }, 300);
        }
    };

    async function janaTemaAI() {
        const btn = document.getElementById('btn-jana-tema');
        if(!confirm("{% trans 'Arahkan AI untuk membaca semua masalah peserta dan menjana Tema Nasional sekarang?' %}")) return;
        
        const originalContent = btn.innerHTML;
        btn.innerHTML = `<div class="text-center pt-2"><i class="fas fa-circle-notch fa-spin text-3xl text-blue-500 mb-2"></i><br><span class="text-xs font-bold text-blue-800">AI Sedang Berfikir...</span></div>`;
        btn.style.pointerEvents = "none";

        try {
            const response = await fetch("{% url 'bengkel:jana_tema_penganjur_ajax' pk=bengkel.pk %}", {
                method: 'POST',
                // SUNTIKAN TERUS: Lebih kebal dari ralat 403 CSRF
                headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' }
            });
            const data = await response.json();
            
            if(data.success) {
                alert("{% trans 'Berjaya!' %} " + data.mesej);
                location.reload(); 
            } else {
                alert("{% trans 'Ralat AI:' %} " + data.error);
                btn.innerHTML = originalContent;
                btn.style.pointerEvents = "auto";
            }
        } catch (error) {
            alert("{% trans 'Ralat rangkaian.' %}");
            btn.innerHTML = originalContent;
            btn.style.pointerEvents = "auto";
        }
    }
    async function murnikanTema(btn, temaId) {
        if(!confirm("{% trans 'Arahkan AI untuk menyerap kesemua idea peserta dan menulis semula Tema ini menjadi Versi 2.0?' %}")) return;
        
        const originalHTML = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Upg...';
        btn.disabled = true;

        try {
            const response = await fetch("{% url 'bengkel:murnikan_tema_ai_ajax' pk=bengkel.pk %}", {
                method: 'POST',
                headers: { 
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}' // SUNTIKAN TERUS
                },
                body: JSON.stringify({ 'tema_id': temaId })
            });
            const data = await response.json();
            
            if(data.success) {
                alert("{% trans 'Tema berjaya dimurnikan (Versi 2.0)!' %}");
                location.reload(); 
            } else {
                alert("{% trans 'Info:' %} " + data.error);
                btn.innerHTML = originalHTML;
                btn.disabled = false;
            }
        } catch (error) {
            alert("{% trans 'Ralat rangkaian.' %}");
            btn.innerHTML = originalHTML;
            btn.disabled = false;
        }
    }

    // Fungsi Gatekeeper Penganjur membuka Langkah 4 (Teras Strategik) bagi pihak peserta
    window.maraKeFasaEmpat = function() {
        fetch("{% url 'bengkel:unlock_blueprint_step' pk=bengkel.pk %}", {
            method: 'POST',
            // Gunakan tag rasmi Django untuk CSRF Token
            headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' },
            body: JSON.stringify({ step: 4 })
        })
        .then(() => {
            window.location.href = "{% url 'bengkel:analisis_pillar' pk=bengkel.pk %}";
        })
        .catch(err => console.error("Gagal mengemas kini pintu sekatan makro fasa 4: ", err));
    };
</script>
{% endblock %}