{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Analitik Masalah (Pain Points)" %} — {{ 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>
    <a href="{% url 'bengkel:analisis_spaf' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">Hab SPAF</a> <span class="mx-2 text-slate-400">/</span>
    <span class="text-slate-500 font-medium text-xs">1. Analitik Masalah</span>
{% endblock %}

{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
    .ai-processing-bg { background: linear-gradient(270deg, #1e1b4b, #312e81, #1e1b4b); 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%} }
    .typing-effect::after { content: '|'; animation: blink 1s step-end infinite; }
    @keyframes blink { 50% { opacity: 0; } }
</style>

<div class="animate-fade-up pb-10">
    <div class="max-w-[1600px] w-full mx-auto">
        
        <div class="relative overflow-hidden bg-gradient-to-br from-rose-900 via-rose-800 to-indigo-900 rounded-2xl px-8 py-7 mb-8 shadow-lg border border-slate-800">
            <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:analisis_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>
                        <div class="inline-flex items-center gap-1.5 bg-rose-500/20 border border-rose-400/30 text-rose-200 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-2">
                            <i class="fas fa-exclamation-triangle"></i> Enjin Analisis Masalah
                        </div>
                        <h1 class="text-2xl md:text-3xl font-extrabold text-white leading-tight">Analitik Masalah (Pain Points)</h1>
                        <p class="text-white/70 text-sm mt-1">Pemprosesan dan pengelompokan aduan mentah peserta oleh AI Tempatan.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-8 relative overflow-hidden">
            <div class="absolute top-0 left-0 w-1 h-full bg-rose-500"></div>
            <h3 class="text-[10px] font-black text-rose-600 uppercase tracking-widest mb-3"><i class="fas fa-robot mr-1"></i> Misi Utama Enjin</h3>
            <div class="flex flex-col md:flex-row md:items-center gap-4 justify-between">
                <p class="text-slate-700 font-medium italic md:text-base flex-1">Enjin NLP mengumpul keluhan dari lapangan, membuang data bertindih, dan merumuskannya menjadi beberapa Pernyataan Masalah berstruktur tinggi.</p>
                
                <div class="flex items-center gap-3 relative z-20">
                    <div id="status-enjin" class="bg-slate-100 border border-slate-200 text-slate-500 text-[10px] font-bold px-3 py-2.5 rounded-xl flex items-center shadow-inner">
                        <i class="fas fa-circle text-emerald-500 mr-2 animate-pulse"></i> Sedia
                    </div>
                    <button id="btn-jana-pukal" onclick="janaPernyataanPukal()" class="bg-rose-600 hover:bg-rose-700 text-white text-xs font-bold px-5 py-2.5 rounded-xl shadow-md border border-rose-500 transition-all flex items-center gap-2 cursor-pointer">
                        <i class="fas fa-magic"></i> Tutup & Jana Pernyataan Masalah
                    </button>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200">
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1">Aduan Mentah Diserahkan</div>
                <div class="text-3xl font-black text-slate-700">{{ aduan_mentah_count }}</div>
                <div class="text-[10px] text-emerald-500 font-bold mt-1"><i class="fas fa-database"></i> Dalam Pangkalan Data</div>
            </div>
            <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200">
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 flex justify-between">Isu Berulang Digabungkan <i class="fas fa-compress-arrows-alt text-indigo-400"></i></div>
                <div class="text-3xl font-black text-indigo-600">{{ isu_berulang_count }}</div>
                <div class="text-[10px] text-slate-500 mt-1">Deduplikasi Berjaya</div>
            </div>
            <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200">
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1">Masalah Unik Ditapis</div>
                <div class="text-3xl font-black text-rose-600">{{ masalah_unik_count }}</div>
                <div class="text-[10px] text-rose-400 mt-1 font-bold">Aduan Teras Sebenar</div>
            </div>
            <div onclick="window.location.href='{% url 'bengkel:analisis_problem' pk=bengkel.pk %}'" class="bg-gradient-to-br from-indigo-50 to-purple-50 p-5 rounded-xl shadow-sm border border-indigo-100 cursor-pointer hover:shadow-md hover:border-indigo-300 transition group relative overflow-hidden flex flex-col justify-between">
                <div>
                    <div class="text-indigo-800 text-[10px] font-bold uppercase tracking-widest mb-1 flex justify-between items-center">
                        Kategori Masalah AI
                        <span class="text-[8px] bg-indigo-200 text-indigo-700 px-1.5 py-0.5 rounded opacity-0 group-hover:opacity-100 transition">Sedia</span>
                    </div>
                    <div class="text-3xl font-black text-indigo-700">{{ kluster_count }}</div>
                </div>
                <div class="text-[10px] text-indigo-600 mt-3 font-bold flex items-center group-hover:text-indigo-800 transition-colors">
                    Teruskan ke Problem Statement <i class="fas fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8 items-start">
            
            <div class="lg:col-span-5 flex flex-col gap-6 h-full">
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
                    <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-rose-500 mr-2"></i> Kekerapan Domain Aduan</h3>
                        <span class="text-[9px] bg-slate-100 text-slate-500 font-bold px-2 py-1 rounded">Data Sebenar Livedata</span>
                    </div>
                    <div class="relative h-60 w-full"><canvas id="grafPainPoints"></canvas></div>
                </div>

                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 flex-1 flex flex-col">
                    <div class="flex justify-between items-center mb-4 border-b border-slate-100 pb-3 shrink-0">
                        <h3 class="font-bold text-sm text-slate-800"><i class="fas fa-exclamation-circle text-amber-500 mr-2"></i> Taburan Tahap Keseriusan</h3>
                        <span class="text-[9px] bg-slate-100 text-slate-500 font-bold px-2 py-1 rounded">Data Sebenar</span>
                    </div>
                    <div class="relative w-full flex-1 min-h-[200px] flex items-center justify-center">
                        <canvas id="grafKeseriusan"></canvas>
                    </div>
                </div>
            </div>

            <div class="lg:col-span-7 bg-white rounded-xl shadow-sm border border-slate-200 p-6 flex flex-col h-full">
                <div class="mb-6 border-b border-slate-100 pb-4 shrink-0 flex flex-col md:flex-row md:justify-between md:items-end gap-4">
                    <div>
                        <h3 class="font-black text-xl text-slate-800 flex items-center"><i class="fas fa-layer-group text-indigo-600 mr-2"></i> Sintesis Pernyataan Masalah Master</h3>
                        <p class="text-xs text-slate-500 mt-1">Enjin AI telah merumuskan {{ masalah_unik_count }} aduan unik ke dalam {{ kluster_count }} masalah teras.</p>
                    </div>
                    <!-- Butang Paginasi -->
                    <div class="flex gap-2 shrink-0">
                        <button onclick="pindahMukaKluster(-1)" class="w-8 h-8 rounded-full bg-slate-100 text-slate-500 hover:bg-indigo-100 hover:text-indigo-600 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed shadow-sm" id="btn-prev-k"><i class="fas fa-chevron-left"></i></button>
                        <span id="page-info-k" class="text-xs font-bold text-slate-500 flex items-center px-2">1/1</span>
                        <button onclick="pindahMukaKluster(1)" class="w-8 h-8 rounded-full bg-slate-100 text-slate-500 hover:bg-indigo-100 hover:text-indigo-600 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed shadow-sm" id="btn-next-k"><i class="fas fa-chevron-right"></i></button>
                    </div>
                </div>

                <div class="grid grid-cols-1 xl:grid-cols-2 gap-4 pb-4 flex-1 content-start min-h-[400px]">
                    
                    {% for kluster in senarai_kluster %}
                    <div class="kad-kluster border border-indigo-100 rounded-xl p-5 hover:shadow-md transition hover:border-indigo-300 flex flex-col bg-slate-50/50 animate-fade-up">
                        <div class="flex justify-between items-start mb-3 border-b border-slate-100 pb-3">
                            <h4 class="font-bold text-indigo-900 text-sm pr-2 leading-tight">{{ kluster.masalah_utama }}</h4>
                            <span class="text-[9px] font-black tracking-widest uppercase bg-indigo-50 text-indigo-600 px-2 py-1 rounded border border-indigo-100 shrink-0">Kluster #{{ forloop.counter }}</span>
                        </div>
                        
                        <div class="grid grid-cols-2 gap-4 mb-3 flex-1">
                            <div>
                                <span class="block text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-0.5">Skop & Batasan:</span>
                                <p class="text-[11px] text-slate-700 leading-snug">{{ kluster.skop }}</p>
                            </div>
                            <div>
                                <span class="block text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-0.5">Pihak Terjejas:</span>
                                <p class="text-[11px] text-slate-700 leading-snug">{{ kluster.sasaran }}</p>
                            </div>
                        </div>
                        
                        <div class="bg-white border border-slate-100 p-3 rounded-lg mt-auto shadow-sm">
                            <span class="block text-[9px] font-bold text-blue-500 uppercase tracking-widest mb-1 flex items-center">
                                <i class="fas fa-bullseye mr-1"></i> Matlamat Penyelesaian:
                            </span>
                            <p class="text-[11px] text-slate-600 italic leading-relaxed">"{{ kluster.matlamat }}"</p>
                        </div>
                    </div>
                    {% empty %}
                    <div class="col-span-1 xl:col-span-2 py-12 text-center border-2 border-dashed border-slate-200 rounded-xl kad-kluster hidden">
                        <i class="fas fa-robot text-4xl text-slate-300 mb-3"></i>
                        <p class="text-slate-500 font-bold">Tiada kluster dijumpai.</p>
                        <p class="text-xs text-slate-400 mt-1">Sila pastikan peserta telah menghantar aduan dan tekan butang "Jana Pernyataan" di atas.</p>
                    </div>
                    {% endfor %}

                </div>
            </div>

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

<script>
    // LOGIK PAGINASI KAD KLUSTER (PENGANJUR)
    let currentKPage = 0;
    const cardsPerKPage = 2; // Papar 2 kluster serentak
    const allKCards = document.querySelectorAll('.kad-kluster:not(.hidden)');
    let totalKPages = Math.ceil(allKCards.length / cardsPerKPage);
    if (totalKPages === 0) totalKPages = 1;

    function tunjukMukaSuratKluster() {
        if(allKCards.length === 0) return;
        allKCards.forEach(c => c.style.display = 'none'); 
        
        let mula = currentKPage * cardsPerKPage;
        let tamat = mula + cardsPerKPage;
        
        for(let i=mula; i<tamat && i<allKCards.length; i++) {
            allKCards[i].style.display = 'flex'; 
        }
        
        document.getElementById('page-info-k').innerText = `${currentKPage + 1} / ${totalKPages}`;
        document.getElementById('btn-prev-k').disabled = currentKPage === 0;
        document.getElementById('btn-next-k').disabled = currentKPage === totalKPages - 1;
    }

    function pindahMukaKluster(arah) {
        currentKPage += arah;
        if(currentKPage < 0) currentKPage = 0;
        if(currentKPage >= totalKPages) currentKPage = totalKPages - 1;
        tunjukMukaSuratKluster();
    }

    window.addEventListener('DOMContentLoaded', () => tunjukMukaSuratKluster());
    // FUNGSI BUTANG AI PUKAL BARU (DENGAN NAMA URL YANG BETUL)
    function janaPernyataanPukal() {
        if(!confirm("{% trans 'Adakah anda pasti untuk menutup pengumpulan aduan dan mengarahkan AI mula memproses data? Ini mungkin mengambil masa 1-3 minit.' %}")) return;

        const btn = document.getElementById('btn-jana-pukal');
        const status = document.getElementById('status-enjin');
        
        // Setup UI untuk fasa "Memproses"
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sedang Memproses...';
        btn.classList.replace('bg-rose-600', 'bg-slate-500');
        btn.classList.replace('hover:bg-rose-700', 'hover:bg-slate-500');
        btn.classList.replace('border-rose-500', 'border-slate-500');
        
        // Masukkan pemasa terus ke dalam kotak status
        let saat = 0;
        status.innerHTML = '<i class="fas fa-brain text-amber-500 mr-2 animate-bounce"></i> AI Berfikir... <span id="masa-berlalu" class="ml-1 font-black text-amber-600">0s</span>';
        
        // Mula kiraan masa
        let timerInterval = setInterval(() => {
            saat++;
            const spanMasa = document.getElementById('masa-berlalu');
            if(spanMasa) spanMasa.innerText = saat + 's';
        }, 1000);

        // --- FETCH AI (Backend) ---
        fetch("{% url 'bengkel:jana_master_problem_statement' pk=bengkel.pk %}", {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
                'Content-Type': 'application/json'
            }
        })
        .then(res => res.json())
        .then(data => {
            if(data.success) {
                // Sentuhan Sistemik: Buka kunci Fasa 2 secara senyap untuk peserta
                fetch("{% url 'bengkel:unlock_spaf_step' pk=bengkel.pk %}", {
                    method: 'POST',
                    headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' },
                    body: JSON.stringify({ step: 2 })
                })
                .then(() => {
                    clearInterval(timerInterval); // BERHENTIKAN PEMASA
                    status.innerHTML = `<i class="fas fa-check-circle text-emerald-500 mr-2"></i> Siap dalam <span class="font-black ml-1">${saat}s</span>!`;
                    btn.innerHTML = '<i class="fas fa-check"></i> Modul 2 Dibuka (Refresh...)';
                    btn.classList.replace('bg-slate-500', 'bg-emerald-600');
                    
                    setTimeout(() => { location.reload(); }, 3000);
                });

            } else {
                alert("{% trans 'Gagal:' %} " + data.error);
                resetUI(timerInterval);
            }
        })
        .catch(err => {
            alert("{% trans 'Ralat Rangkaian. Pastikan sistem AI berjalan di latar belakang.' %}");
            resetUI(timerInterval);
        });
        
        // Fungsi pembantu untuk reset UI jika berlaku ralat
        function resetUI(interval) {
            clearInterval(interval);
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-magic"></i> Tutup & Jana Pernyataan Masalah';
            btn.classList.replace('bg-slate-500', 'bg-rose-600');
            btn.classList.replace('hover:bg-slate-500', 'hover:bg-rose-700');
            btn.classList.replace('border-slate-500', 'border-rose-500');
            status.innerHTML = '<i class="fas fa-exclamation-triangle text-rose-500 mr-2"></i> Ralat';
        }
    }

    // CARTA DIJANA MENGGUNAKAN DATA SEBENAR DARI VIEWS.PY
    window.onload = () => {
        const labelsData = JSON.parse('{{ graf_labels_json|escapejs }}');
        const countData = JSON.parse('{{ graf_data_json|escapejs }}');

        // 1. Carta Palang (Kekerapan Domain)
        const ctxPain = document.getElementById('grafPainPoints').getContext('2d');
        new Chart(ctxPain, {
            type: 'bar',
            data: {
                labels: labelsData,
                datasets: [{
                    label: 'Kekerapan Domain Aduan',
                    data: countData,
                    backgroundColor: ['#e11d48', '#f43f5e', '#fb7185', '#fbcfe8', '#ffe4e6', '#fff1f2'],
                    borderRadius: 4, barThickness: 16
                }]
            },
            options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { grid: { display: true, color: '#f1f5f9' }, ticks: { precision: 0 } }, y: { grid: { display: false }, ticks: { font: { size: 10, weight: 'bold' } } } } }
        });

        // 2. Carta Donut (Tahap Keseriusan)
        // Nota: Jika views.py tiada pembolehubah ini lagi, ia akan papar nombor statik sementara untuk Pilot Test
        const dataKritikal = {{ count_kritikal|default:12 }};
        const dataTinggi = {{ count_tinggi|default:18 }};
        const dataSederhana = {{ count_sederhana|default:5 }};

        const ctxKeseriusan = document.getElementById('grafKeseriusan').getContext('2d');
        new Chart(ctxKeseriusan, {
            type: 'doughnut',
            data: {
                labels: ['Kritikal', 'Tinggi', 'Sederhana'],
                datasets: [{
                    data: [dataKritikal, dataTinggi, dataSederhana],
                    backgroundColor: ['#e11d48', '#f97316', '#f59e0b'], // Rose, Orange, Amber
                    borderWidth: 2,
                    borderColor: '#ffffff',
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '65%',
                plugins: {
                    legend: { 
                        position: 'bottom', 
                        labels: { boxWidth: 12, padding: 15, font: { size: 10, family: "'Inter', sans-serif", weight: 'bold' } } 
                    }
                }
            }
        });
    };
</script>
{% endblock %}