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

{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
    .radar-bg { background-image: radial-gradient(circle at center, #f3e8ff 0%, transparent 70%); }
</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-indigo-900 via-purple-800 to-fuchsia-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-purple-500/20 border border-purple-400/30 text-purple-200 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-2">
                            <i class="fas fa-cubes"></i> Sintesis & Formulasi
                        </div>
                        <h1 class="text-2xl md:text-3xl font-extrabold text-white leading-tight">Pernyataan Masalah Utama</h1>
                        <p class="text-white/70 text-sm mt-1">Pemetaan kognitif dan pengkategorian aduan mentah kepada penyataan masalah teras.</p>
                    </div>
                </div>
                <div class="flex flex-col md:flex-row items-end md:items-center gap-3">
                    {% if maklumbalas_pending > 0 %}
                    <div class="bg-amber-500/20 border border-amber-400/50 text-amber-100 text-xs font-bold px-4 py-2.5 rounded-xl backdrop-blur-sm flex flex-col md:flex-row items-center gap-3 shadow-inner animate-pulse">
                        <div class="flex items-center">
                            <i class="fas fa-bell text-amber-400 mr-2"></i>
                            <span>Terdapat <span class="bg-amber-500 text-amber-950 px-1.5 py-0.5 rounded">{{ maklumbalas_pending }}</span> komen baharu</span>
                        </div>
                        <button onclick="sintesisSemulaKomen()" id="btn-re-sintesis" class="bg-amber-500 hover:bg-amber-400 text-amber-950 font-black px-3 py-1.5 rounded-lg transition text-[10px] uppercase tracking-wider shadow-sm flex items-center">
                            <i class="fas fa-sync-alt mr-1"></i> Sintesis Semula
                        </button>
                    </div>
                    {% else %}
                    <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-circle text-emerald-400 mr-2"></i> Tiada Komen Baharu
                    </div>
                    {% endif %}

                    <div class="bg-purple-900/50 border border-purple-400/30 text-purple-100 text-xs font-bold px-4 py-2.5 rounded-xl backdrop-blur-sm flex items-center shadow-inner">
                        <i class="fas fa-brain text-purple-300 mr-2"></i> Sintesis LLM Selesai
                    </div>
                </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 relative overflow-hidden">
                <div class="absolute -right-4 -bottom-4 opacity-5"><i class="fas fa-layer-group text-8xl text-purple-500"></i></div>
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 relative z-10">Penyataan Disintesis</div>
                <div class="text-3xl font-black text-purple-700 relative z-10">{{ jumlah_penyataan }}</div>
                <div class="text-[10px] text-purple-500 font-bold mt-1 relative z-10">Terbitan dari {{ masalah_unik_count }} Aduan Unik</div>
            </div>
            
            <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200 relative overflow-hidden">
                <div class="absolute -right-4 -bottom-4 opacity-5"><i class="fas fa-filter text-8xl text-indigo-500"></i></div>
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 relative z-10">Kadar Pengkategorian</div>
                <div class="text-3xl font-black text-indigo-600 relative z-10">100%</div>
                <div class="text-[10px] text-slate-500 mt-1 font-medium relative z-10">Berjaya Dipadankan Oleh AI</div>
            </div>
            
            <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200 relative overflow-hidden">
                <div class="absolute -right-4 -bottom-4 opacity-5"><i class="fas fa-network-wired text-8xl text-emerald-500"></i></div>
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 relative z-10">Penjajaran Sistemik</div>
                <div class="text-3xl font-black text-emerald-600 relative z-10">Tinggi</div>
                <div class="text-[10px] text-emerald-500 mt-1 font-bold relative z-10">Kesan Merentas Jabatan</div>
            </div>
            
            <div onclick="maraKeFasaTiga()" class="bg-gradient-to-br from-fuchsia-50 to-purple-50 p-5 rounded-xl shadow-sm border border-fuchsia-200 cursor-pointer hover:shadow-md hover:border-fuchsia-400 transition group flex flex-col justify-between">
                <div>
                    <div class="text-purple-800 text-[10px] font-bold uppercase tracking-widest mb-1 flex items-center gap-1.5">
                        Status Seterusnya <i class="fas fa-lock-open text-[9px] text-emerald-500"></i>
                    </div>
                    <div class="text-3xl font-black text-purple-700">Sedia</div>
                </div>
                <div class="text-[10px] text-purple-600 mt-3 font-bold group-hover:text-purple-800 transition-colors flex items-center">
                    Buka Kunci & Alih ke Modul 3 <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">
            
            <!-- Buang 'h-full' supaya ia tidak terikut panjang kotak sebelah -->
            <div class="lg:col-span-5 flex flex-col gap-6">
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 radar-bg">
                    <div class="flex justify-between items-center mb-2 border-b border-slate-100 pb-3">
                        <h3 class="font-bold text-sm text-slate-800"><i class="fas fa-chart-pie text-purple-500 mr-2"></i> Taburan Domain Masalah</h3>
                        <span class="text-[9px] bg-purple-50 text-purple-600 border border-purple-100 font-bold px-2 py-1 rounded uppercase tracking-wider">Pemberat AI</span>
                    </div>
                    <p class="text-[10px] text-slate-400 mb-4 text-center">Jumlah aduan yang dipetakan ke setiap penyataan masalah.</p>
                    <div class="relative h-64 w-full"><canvas id="grafProblemArea"></canvas></div>
                </div>

                <!-- Buang 'flex-1 flex flex-col' dan tetapkan tinggi carta 'h-[300px]' -->
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                    <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-users text-blue-500 mr-2"></i> Kekerapan Pihak Terjejas</h3>
                        <span class="text-[9px] bg-slate-100 text-slate-500 font-bold px-2 py-1 rounded">Analisis Sasaran</span>
                    </div>
                    <div class="relative w-full h-[300px]">
                        <canvas id="grafSasaran"></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-4 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-list-ol text-purple-600 mr-2"></i> {{ jumlah_penyataan }} Penyataan Masalah Utama AI</h3>
                        <p class="text-xs text-slate-500 mt-1">Senarai pernyataan masalah teras yang telah disintesis untuk dianalisis.</p>
                    </div>
                    <div class="flex gap-2 shrink-0">
                        <button onclick="pindahMukaMaster(-1)" class="w-8 h-8 rounded-full bg-slate-100 text-slate-500 hover:bg-purple-100 hover:text-purple-600 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed shadow-sm" id="btn-prev-m"><i class="fas fa-chevron-left"></i></button>
                        <span id="page-info-m" class="text-xs font-bold text-slate-500 flex items-center px-2">1/1</span>
                        <button onclick="pindahMukaMaster(1)" class="w-8 h-8 rounded-full bg-slate-100 text-slate-500 hover:bg-purple-100 hover:text-purple-600 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed shadow-sm" id="btn-next-m"><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 ps in senarai_master %}
                    <div class="kad-master bg-white rounded-xl shadow-sm border-2 border-purple-100 p-5 hover:shadow-md hover:border-purple-300 transition flex flex-col animate-fade-up">
                        <div class="flex justify-between items-start mb-3 border-b border-slate-100 pb-3">
                            <h4 class="font-bold text-slate-800 text-sm pr-2 leading-tight">{{ ps.masalah_utama }}</h4>
                            <span class="bg-purple-100 text-purple-700 font-black px-2 py-1 rounded text-[9px] uppercase tracking-wider shrink-0">PS-0{{ forloop.counter }}</span>
                        </div>
                        
                        <!-- Papan Pemuka Analitik Mini (DIPINDAHKAN KE ATAS) -->
                        <div class="mb-4 flex items-center justify-between bg-slate-50 p-2 rounded-lg border border-slate-100">
                            {% if ps.jumlah_refine > 0 %}
                                <div class="flex items-center gap-2 w-full">
                                    <span class="bg-amber-100 text-amber-700 font-bold px-2 py-1 rounded-md text-[9px] flex items-center uppercase tracking-widest shadow-sm shrink-0">
                                        <i class="fas fa-fire text-amber-500 mr-1 animate-pulse"></i> {{ ps.jumlah_refine }} Pembaikan
                                    </span>
                                    <span class="text-[10px] text-slate-600 font-bold truncate flex-1" title="{{ ps.kata_kunci_refine }}">
                                        <i class="fas fa-tag text-slate-400 mr-1"></i> {{ ps.kata_kunci_refine }}
                                    </span>
                                </div>
                            {% else %}
                                <span class="text-slate-400 font-bold px-1 text-[9px] flex items-center uppercase tracking-widest">
                                    <i class="fas fa-check-circle mr-1.5 text-slate-300"></i> 0 Pembaikan (Tiada Bantahan)
                                </span>
                            {% endif %}
                        </div>

                        <!-- Skop dirapatkan -->
                        <div class="mb-4">
                            <span class="text-[9px] font-bold text-slate-400 uppercase tracking-widest block mb-1">Skop & Batasan:</span>
                            <p class="text-[11px] text-slate-700 leading-relaxed">{{ ps.skop }}</p>
                        </div>

                        <!-- Sasaran & Matlamat ditolak ke bawah dengan mt-auto -->
                        <div class="mt-auto flex flex-col gap-3">
                            <div>
                                <span class="text-[9px] font-bold text-slate-400 uppercase tracking-widest block mb-1"><i class="fas fa-users mr-1"></i> Pihak Terjejas (Sasaran):</span>
                                <p class="text-[11px] text-slate-700 font-medium bg-slate-50 p-1.5 rounded">{{ ps.sasaran }}</p>
                            </div>
                            
                            <div class="bg-purple-50/80 p-3 rounded-lg border border-purple-100 shadow-sm">
                                <span class="text-[9px] font-bold text-purple-600 uppercase tracking-widest block mb-1"><i class="fas fa-bullseye mr-1"></i> Matlamat Penyelesaian:</span>
                                <p class="text-[11px] text-purple-900 italic leading-relaxed">"{{ ps.matlamat }}"</p>
                            </div>
                        </div>
                    </div>
                    {% empty %}
                    <div class="col-span-1 xl:col-span-2 py-12 text-center border-2 border-dashed border-slate-300 rounded-xl bg-slate-50 kad-master hidden">
                        <i class="fas fa-exclamation-circle text-4xl text-slate-300 mb-3 block"></i>
                        <p class="text-slate-500 font-bold">Tiada Pernyataan Masalah dijumpai.</p>
                        <p class="text-xs text-slate-400">Sila kembali ke Analitik Masalah dan klik butang 'Jana Pernyataan Pukal'.</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // LOGIK PAGINASI KAD MASTER (PENGANJUR)
    let currentMPage = 0;
    const cardsPerMPage = 2; // Papar 2 kad serentak
    const allMCards = document.querySelectorAll('.kad-master:not(.hidden)');
    let totalMPages = Math.ceil(allMCards.length / cardsPerMPage);
    if (totalMPages === 0) totalMPages = 1;

    function tunjukMukaSuratMaster() {
        if(allMCards.length === 0) return;
        allMCards.forEach(c => c.style.display = 'none'); 
        
        let mula = currentMPage * cardsPerMPage;
        let tamat = mula + cardsPerMPage;
        
        for(let i=mula; i<tamat && i<allMCards.length; i++) {
            allMCards[i].style.display = 'flex'; 
        }
        
        document.getElementById('page-info-m').innerText = `${currentMPage + 1} / ${totalMPages}`;
        document.getElementById('btn-prev-m').disabled = currentMPage === 0;
        document.getElementById('btn-next-m').disabled = currentMPage === totalMPages - 1;
    }

    function pindahMukaMaster(arah) {
        currentMPage += arah;
        if(currentMPage < 0) currentMPage = 0;
        if(currentMPage >= totalMPages) currentMPage = totalMPages - 1;
        tunjukMukaSuratMaster();
    }

    // --- TAMBAHAN KOD: Jalankan paginasi secara automatik sewaktu page dibuka ---
    window.addEventListener('DOMContentLoaded', () => tunjukMukaSuratMaster());

    // FUNGSI BUTANG SINTESIS SEMULA
    function sintesisSemulaKomen() {
        if(!confirm("{% trans 'Mengarahkan AI untuk membaca dan membaiki Penyataan Masalah berdasarkan komen peserta? Proses ini akan mengunci (freeze) komen tersebut.' %}")) return;

        const btn = document.getElementById('btn-re-sintesis');
        const asalHTML = btn.innerHTML;
        
        btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Menyintesis...';
        btn.disabled = true;

        fetch("{% url 'bengkel:sintesis_semula_komen_ajax' pk=bengkel.pk %}", {
            method: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' }
        })
        .then(res => res.json())
        .then(data => {
            if(data.success) {
                alert("{% trans 'Sintesis berjaya. Penyataan masalah telah dikemas kini.' %}");
                location.reload(); 
            } else {
                alert("{% trans 'Gagal:' %} " + data.error);
                btn.innerHTML = asalHTML; btn.disabled = false;
            }
        })
        .catch(err => {
            alert("{% trans 'Ralat AI. Sila cuba lagi.' %}");
            btn.innerHTML = asalHTML; btn.disabled = false;
        });
    }

    window.onload = () => {
        // 1. Carta Polar Dinamik (Taburan Domain)
        const labelsData = JSON.parse('{{ graf_labels_json|escapejs }}');
        const countData = JSON.parse('{{ graf_data_json|escapejs }}');

        const ctxProblem = document.getElementById('grafProblemArea').getContext('2d');
        new Chart(ctxProblem, {
            type: 'polarArea',
            data: {
                labels: labelsData,
                datasets: [{
                    data: countData,
                    backgroundColor: ['rgba(168, 85, 247, 0.7)', 'rgba(99, 102, 241, 0.7)', 'rgba(59, 130, 246, 0.7)', 'rgba(16, 185, 129, 0.7)', 'rgba(244, 63, 94, 0.7)', 'rgba(245, 158, 11, 0.7)'],
                    borderWidth: 2, borderColor: '#ffffff'
                }]
            },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, font: { size: 10 } } } }, scales: { r: { display: false } } }
        });

        // 2. Carta Horizontal Bar (Kekerapan Pihak Terjejas)
        // Nota: Guna data simulasi (dummy data) untuk persembahan. Jika mahu data sebenar, panggil dari views.py
        const ctxSasaran = document.getElementById('grafSasaran').getContext('2d');
        new Chart(ctxSasaran, {
            type: 'bar',
            data: {
                labels: ['Pesakit', 'Peg. Perubatan', 'Kakitangan Farmasi', 'Pengurusan Hospital', 'Pakar IT'],
                datasets: [{
                    label: 'Kekerapan Kesan',
                    data: [15, 12, 8, 5, 3], // Boleh digantikan dengan {{ data_sasaran }} dari views kelak
                    backgroundColor: ['#3b82f6', '#60a5fa', '#93c5fd', '#bfdbfe', '#dbeafe'],
                    borderRadius: 4
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: { 
                    x: { grid: { display: false }, ticks: { precision: 0 } }, 
                    y: { grid: { display: false }, ticks: { font: { size: 10, weight: '500' } } } 
                }
            }
        });
    };

    // Fungsi Khas Gatekeeper untuk penganjur membuka Node 3 bagi pihak peserta
    window.maraKeFasaTiga = function() {
        fetch("{% url 'bengkel:unlock_spaf_step' pk=bengkel.pk %}", {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ step: 3 })
        })
        .then(() => {
            // Setelah pangkalan data dikunci ke tahap 3, bawa penganjur ke skrin analisis situasi
            window.location.href = "{% url 'bengkel:analisis_situational' pk=bengkel.pk %}";
        })
        .catch(err => console.error("Gagal mengemas kini pintu sekatan: ", err));
    };
</script>
{% endblock %}