{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Analisis Punca (RCA)" %} — {{ 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">4. Analisis Punca (RCA)</span>
{% endblock %}

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

<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-amber-900 via-orange-800 to-slate-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-amber-500/20 border border-amber-400/30 text-amber-200 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-2">
                            <i class="fas fa-sitemap"></i> Fasa 2.4: Penjanaan RCA
                        </div>
                        <h1 class="text-2xl md:text-3xl font-extrabold text-white leading-tight">Analisis Punca Masalah (Ishikawa / 5-Whys)</h1>
                        <p class="text-white/70 text-sm mt-1">AI menembusi simptom luaran untuk mencari punca sebenar (Root Cause) masalah.</p>
                    </div>
                </div>
                
                <div class="flex items-center gap-3 mt-4 md:mt-0 relative z-20">
                    <button onclick="janaKlusterAICA()" id="btn-jana-rca" class="bg-indigo-600 hover:bg-indigo-700 text-white text-[11px] font-bold px-4 py-2.5 rounded-xl shadow-md transition flex items-center gap-2 border border-indigo-400">
                        <i class="fas fa-brain text-indigo-300"></i> Klusterkan Punca (AI)
                    </button>
                    <div class="bg-amber-500/20 border border-amber-400/50 text-amber-300 text-xs font-bold px-4 py-2.5 rounded-xl flex items-center backdrop-blur-sm shadow-inner">
                        <i class="fas fa-satellite-dish text-amber-400 mr-2 animate-pulse"></i> Pemantauan Live Aktif
                    </div>
                </div>
                </div>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-6 gap-4 mb-8">
            <div onclick="showRCA('ishikawa')" class="bg-white p-4 rounded-xl shadow-sm border border-amber-400 shadow-md transition group" id="card-ishikawa">
                <div class="text-amber-500 text-[10px] font-bold uppercase tracking-widest mb-1 group-hover:text-amber-500">Ishikawa</div>
                <div class="text-3xl font-black text-amber-600" id="live-ishikawa">{{ ishikawa_count }}</div>
                <div class="text-[9px] text-slate-500 mt-1">Peserta</div>
            </div>
            <div onclick="showRCA('5whys')" class="bg-white p-4 rounded-xl shadow-sm border border-slate-200 text-center cursor-pointer hover:border-orange-400 transition group" id="card-5whys">
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 group-hover:text-orange-500">5-Whys</div>
                <div class="text-3xl font-black text-orange-600" id="live-whys">{{ whys_count }}</div>
                <div class="text-[9px] text-slate-500 mt-1">Peserta</div>
            </div>
            <div onclick="showRCA('fmea')" class="bg-white p-4 rounded-xl shadow-sm border border-slate-200 text-center cursor-pointer hover:border-indigo-400 transition group" id="card-fmea">
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 group-hover:text-indigo-500">FMEA</div>
                <div class="text-3xl font-black text-indigo-600" id="live-fmea">{{ fmea_count }}</div>
                <div class="text-[9px] text-slate-500 mt-1">Peserta</div>
            </div>
            <div onclick="showRCA('fta')" class="bg-white p-4 rounded-xl shadow-sm border border-slate-200 text-center cursor-pointer hover:border-teal-400 transition group" id="card-fta">
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 group-hover:text-teal-500">FTA</div>
                <div class="text-3xl font-black text-teal-600" id="live-fta">{{ fta_count }}</div>
                <div class="text-[9px] text-slate-500 mt-1">Peserta</div>
            </div>
            <div class="bg-rose-50 p-4 rounded-xl shadow-sm border border-rose-200 text-center cursor-pointer hover:border-rose-400 transition group relative overflow-hidden">
                <div class="absolute -right-2 -bottom-2 opacity-10"><i class="fas fa-user-times text-5xl text-rose-500"></i></div>
                <div class="text-rose-400 text-[10px] font-bold uppercase tracking-widest mb-1 group-hover:text-rose-600 relative z-10">Tiada Sumbangan</div>
                <div class="text-3xl font-black text-rose-600 relative z-10"><span id="live-tiada">{{ tiada_sumbangan_pct }}</span>%</div>
                <div class="text-[9px] text-rose-500 mt-1 font-bold relative z-10">Menjejaskan Skor</div>
            </div>
            <div onclick="maraKeFasaLima()" class="bg-gradient-to-br from-indigo-50 to-purple-50 p-4 rounded-xl shadow-sm border border-indigo-200 cursor-pointer hover:shadow-md hover:border-indigo-400 transition group flex flex-col justify-center items-center text-center">
                <div class="text-indigo-800 text-[10px] font-bold uppercase tracking-widest mb-1 flex items-center gap-1.5">
                    Seterusnya <i class="fas fa-lock-open text-[9px] text-emerald-500"></i>
                </div>
                <div class="text-xl font-black text-indigo-700">Pengesahan Punca</div>
                <div class="text-[9px] text-indigo-600 mt-1 font-bold group-hover:text-indigo-800 transition-colors flex items-center">
                    Buka Kunci & Alih ke Modul 5 <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 mb-8 items-start">
            <div class="lg:col-span-4 bg-white p-6 rounded-xl shadow-sm border border-slate-200 h-full flex flex-col">
                <h3 class="font-black text-sm text-slate-800 mb-1 flex items-center"><i class="fas fa-chart-pie text-amber-500 mr-2"></i> Pilihan Metodologi RCA</h3>
                <p class="text-[10px] text-slate-500 mb-4">Pilihan peserta merentas 4 kerangka analisis punca.</p>
                <div class="relative w-full h-[300px] mt-auto mb-auto flex items-center justify-center">
                    <canvas id="grafToolsRCA"></canvas>
                </div>
            </div>

            <div class="lg:col-span-8 bg-white p-6 rounded-xl shadow-sm border border-slate-200 h-full flex flex-col relative overflow-hidden" id="view-container">
                
                <div id="view-ishikawa" class="flex-1 flex-col flex">
                    <div class="flex justify-between items-end mb-6 border-b border-slate-100 pb-4">
                        <div>
                            <h3 class="font-black text-xl text-slate-800"><i class="fas fa-fish text-amber-500 mr-2"></i> Analitik Ishikawa (Tulang Ikan)</h3>
                            <p class="text-xs text-slate-500 mt-1">Taburan kategori makro dan punca sebenar yang tertinggi.</p>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                        <div class="w-full">
                            <h4 class="font-bold text-xs text-slate-400 uppercase tracking-widest mb-4 text-center">Taburan Kategori Makro</h4>
                            <div class="relative h-56 w-full"><canvas id="grafIshikawaPolar"></canvas></div>
                        </div>
                        <div class="w-full">
                            <h4 class="font-bold text-xs text-slate-400 uppercase tracking-widest mb-4">Punca Sebenar Tertinggi</h4>
                            <div class="space-y-4">
                                {% for item in list_ishikawa %}
                                <div>
                                    <div class="flex justify-between text-xs font-bold mb-1">
                                        <span class="text-slate-700">{{ item.cause }}</span>
                                        <span class="text-amber-600">{{ item.pct }}%</span>
                                    </div>
                                    <div class="w-full bg-slate-100 h-2 rounded-full">
                                        <div class="bg-amber-500 h-full rounded-full" style="width: {{ item.pct }}%"></div>
                                    </div>
                                </div>
                                {% empty %}
                                <div class="text-xs text-slate-500 italic">Belum ada punca direkodkan.</div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>

                <div id="view-5whys" class="flex-1 flex-col hidden">
                    <div class="flex justify-between items-end mb-6 border-b border-slate-100 pb-4">
                        <div>
                            <h3 class="font-black text-xl text-slate-800"><i class="fas fa-question-circle text-orange-500 mr-2"></i> Analitik Konvergensi 5-Whys</h3>
                            <p class="text-xs text-slate-500 mt-1">Di manakah rantaian alasan peserta akhirnya tertumpu? (Punca Mutlak)</p>
                        </div>
                    </div>
                    <div class="relative h-60 w-full mb-6"><canvas id="graf5Whys"></canvas></div>
                    <div class="bg-orange-50 p-4 rounded-xl border border-orange-100 flex items-center justify-between">
                        <div>
                            <div class="text-orange-800 font-bold text-sm">Purata Kedalaman Rantaian</div>
                            <div class="text-orange-600 text-xs mt-1">Sistem menganalisis sejauh mana peserta menggali punca masalah. Maksimum 5.</div>
                        </div>
                        <div class="text-4xl font-black text-orange-600">{{ purata_kedalaman|default:"0.0" }}</div>
                    </div>
                </div>

                <div id="view-fmea" class="flex-1 flex-col hidden">
                    <div class="flex justify-between items-end mb-6 border-b border-slate-100 pb-4">
                        <div>
                            <h3 class="font-black text-xl text-slate-800"><i class="fas fa-clipboard-list text-indigo-500 mr-2"></i> Analitik Keutamaan Risiko (FMEA)</h3>
                            <p class="text-xs text-slate-500 mt-1">Nombor Keutamaan Risiko (RPN) untuk setiap mod kegagalan.</p>
                        </div>
                    </div>
                    <div class="relative h-64 w-full mb-4"><canvas id="grafFMEA"></canvas></div>
                    <p class="text-[11px] text-slate-400 text-center italic"><span class="font-bold text-rose-500">Zon Merah (RPN > 300)</span> menunjukkan mod kegagalan kritikal yang memerlukan baik pulih segera.</p>
                </div>

                <div id="view-fta" class="flex-1 flex-col hidden">
                    <div class="flex justify-between items-end mb-6 border-b border-slate-100 pb-4">
                        <div>
                            <h3 class="font-black text-xl text-slate-800"><i class="fas fa-project-diagram text-teal-500 mr-2"></i> Analitik Fault Tree (FTA)</h3>
                            <p class="text-xs text-slate-500 mt-1">Taburan kebarangkalian "Kejadian Asas" yang menyebabkan Kejadian Utama (Sistem Lumpuh).</p>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                        <div class="relative h-56 w-full"><canvas id="grafFTA"></canvas></div>
                        <div class="space-y-4">
                            <h4 class="font-bold text-sm text-slate-700">Kejadian Kritikal Terdedah</h4>
                            {% for item in list_fta %}
                            <div class="bg-teal-50 border border-teal-100 p-4 rounded-xl shadow-sm">
                                <div class="text-xs font-bold text-teal-800 mb-1">{{ forloop.counter }}. {{ item.cause }}</div>
                                <div class="text-[10px] text-teal-600">Direkodkan sebanyak {{ item.count }} kali dalam analisis pakar.</div>
                            </div>
                            {% empty %}
                            <div class="text-xs text-slate-500 italic">Belum ada kejadian direkodkan.</div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

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

    <script>
        // FUNGSI BUTANG KLUSTER AI
        function janaKlusterAICA() {
            if(!confirm("{% trans 'Mengarahkan AI membaca dan mengelompokkan beratus input mungkin mengambil masa. Teruskan?' %}")) return;
            const btn = document.getElementById('btn-jana-rca');
            const asal = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Menyintesis Data...';
            btn.disabled = true;

            fetch("{% url 'bengkel:jana_rumusan_rca_ajax' pk=bengkel.pk %}", {
                method: 'POST',
                headers: {'X-CSRFToken': '{{ csrf_token }}'}
            })
            .then(res => res.json())
            .then(data => {
                if(data.success) {
                    alert("{% trans 'AI berjaya mengelompokkan data punca! Halaman akan dimuat semula.' %}");
                    location.reload(); // Muat semula halaman untuk guna data AI dari cache
                } else {
                    alert("{% trans 'Gagal:' %} " + data.error);
                    btn.innerHTML = asal; btn.disabled = false;
                }
            }).catch(err => {
                alert("{% trans 'Ralat AI.' %}"); btn.innerHTML = asal; btn.disabled = false;
            });
        }

        window.onload = () => {
            // Ambil data dinamis dari views.py
            const toolsData = JSON.parse('{{ graf_tools_json|escapejs }}');

            const ctxTools = document.getElementById('grafToolsRCA').getContext('2d');
            new Chart(ctxTools, {
                type: 'doughnut',
                data: {
                    labels: ['Ishikawa', '5-Whys', 'FMEA', 'FTA', 'Tiada Sumbangan'],
                    datasets: [{ 
                        data: toolsData, 
                        backgroundColor: ['#f59e0b', '#f97316', '#6366f1', '#14b8a6', '#f43f5e'], 
                        borderWidth: 2, borderColor: '#ffffff', cutout: '65%' 
                    }]
                },
                options: { 
                    responsive: true, 
                    maintainAspectRatio: false,
                    // DITAMBAH: Konfigurasi Animasi Berpusing
                    animation: {
                        animateScale: false,   // Mematikan efek "zoom in" dari tengah
                        animateRotate: true,   // Menghidupkan efek berpusing
                        duration: 1500,        // Pusingan mengambil masa 1.5 saat
                        easing: 'easeOutQuart' // Pergerakan pusingan yang lebih licin
                    },
                    plugins: { 
                        legend: { position: 'bottom', labels: { boxWidth: 10, font: { size: 10 } } } 
                    } 
                }
            });
            initCharts();
        };

        function initCharts() {
            // Ambil pembolehubah JSON dari views
            const ishiPolar = JSON.parse('{{ data_ishi_polar_json|escapejs }}');
            const whysLabels = JSON.parse('{{ data_whys_labels_json|escapejs }}');
            const whysValues = JSON.parse('{{ data_whys_values_json|escapejs }}');
            const fmeaLabels = JSON.parse('{{ data_fmea_labels_json|escapejs }}');
            const fmeaValues = JSON.parse('{{ data_fmea_values_json|escapejs }}');
            const ftaLabels = JSON.parse('{{ data_fta_labels_json|escapejs }}');
            const ftaValues = JSON.parse('{{ data_fta_values_json|escapejs }}');

            // Konfigurasi animasi seragam yang menarik
            const animasiGempak = { duration: 1200, easing: 'easeOutQuart' };

            // KITA SIMPAN GRAF KE DALAM PEMBOLEHUBAH GLOBAL (window) SUPAYA BOLEH DIKAWAL OLEH showRCA()
            window.chartIshikawa = new Chart(document.getElementById('grafIshikawaPolar').getContext('2d'), {
                type: 'polarArea',
                data: { labels: ['Proses / Dasar', 'Teknologi / Sistem', 'Manusia / Budaya', 'Alam Sekitar'], datasets: [{ data: ishiPolar, backgroundColor: ['rgba(245, 158, 11, 0.7)', 'rgba(99, 102, 241, 0.7)', 'rgba(16, 185, 129, 0.7)', 'rgba(100, 116, 139, 0.7)'], borderWidth: 2, borderColor: '#ffffff' }] },
                options: { animation: animasiGempak, responsive: true, maintainAspectRatio: false, scales: { r: { display: false } }, plugins: { legend: { position: 'bottom', labels: { boxWidth: 10, font: { size: 10 } } } } }
            });

            window.chartWhys = new Chart(document.getElementById('graf5Whys').getContext('2d'), {
                type: 'bar',
                data: { labels: whysLabels, datasets: [{ label: 'Kekerapan', data: whysValues, backgroundColor: '#f97316', borderRadius: 4, barThickness: 20 }] },
                options: { animation: animasiGempak, indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { grid: { display: true, color: '#f1f5f9' } }, y: { grid: { display: false }, ticks: { font: { size: 11, weight: 'bold' } } } } }
            });

            window.chartFMEA = new Chart(document.getElementById('grafFMEA').getContext('2d'), {
                type: 'bar',
                data: { labels: fmeaLabels, datasets: [{ label: 'Purata RPN', data: fmeaValues, backgroundColor: (ctx) => { const val = ctx.raw; return val > 300 ? '#e11d48' : val > 200 ? '#f59e0b' : '#6366f1'; }, borderRadius: 6 }] },
                options: { animation: animasiGempak, responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, title: { display: true, text: 'Nilai Keutamaan Risiko (RPN)', font: { size: 10, weight: 'bold' } } }, x: { grid: { display: false }, ticks: { font: { size: 10, weight: 'bold' } } } } }
            });

            window.chartFTA = new Chart(document.getElementById('grafFTA').getContext('2d'), {
                type: 'doughnut',
                data: { labels: ftaLabels, datasets: [{ data: ftaValues, backgroundColor: ['#0f766e', '#14b8a6', '#2dd4bf', '#5eead4', '#ccfbf1'], borderWidth: 2, borderColor: '#ffffff', cutout: '60%' }] },
                options: { animation: animasiGempak, responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'right', labels: { boxWidth: 10, font: { size: 11 } } } } }
            });
        }

        function showRCA(type) {
            // 1. Reset semua UI
            document.querySelectorAll('[id^="card-"]').forEach(card => { card.classList.remove('border-amber-400', 'border-orange-400', 'border-indigo-400', 'border-teal-400', 'shadow-md'); card.classList.add('border-slate-200'); });
            document.querySelectorAll('[id^="view-"]').forEach(view => { if(view.id !== 'view-container') { view.classList.add('hidden'); view.classList.remove('flex'); } });
            
            // 2. Paparkan UI yang dipilih
            document.getElementById(`card-${type}`).classList.remove('border-slate-200');
            document.getElementById(`view-${type}`).classList.remove('hidden'); 
            document.getElementById(`view-${type}`).classList.add('flex');
            
            // 3. Mainkan Animasi & Serlahkan Warna Kad
            if(type === 'ishikawa') {
                document.getElementById('card-ishikawa').classList.add('border-amber-400', 'shadow-md');
                if (window.chartIshikawa) { window.chartIshikawa.reset(); window.chartIshikawa.update(); }
            }
            else if(type === '5whys') {
                document.getElementById('card-5whys').classList.add('border-orange-400', 'shadow-md');
                if (window.chartWhys) { window.chartWhys.reset(); window.chartWhys.update(); }
            }
            else if(type === 'fmea') {
                document.getElementById('card-fmea').classList.add('border-indigo-400', 'shadow-md');
                if (window.chartFMEA) { window.chartFMEA.reset(); window.chartFMEA.update(); }
            }
            else if(type === 'fta') {
                document.getElementById('card-fta').classList.add('border-teal-400', 'shadow-md');
                if (window.chartFTA) { window.chartFTA.reset(); window.chartFTA.update(); }
            }
        }

        // --- FUNGSI LIVE POLLING (Setiap 5 Saat) ---
        setInterval(() => {
            fetch("{% url 'bengkel:rca_live_data_ajax' pk=bengkel.pk %}")
            .then(res => res.json())
            .then(data => {
                // Update Nombor pada Kad
                document.getElementById('live-ishikawa').innerText = data.ishikawa_count;
                document.getElementById('live-whys').innerText = data.whys_count;
                document.getElementById('live-fmea').innerText = data.fmea_count;
                document.getElementById('live-fta').innerText = data.fta_count;
                document.getElementById('live-tiada').innerText = data.tiada_sumbangan_pct;
                
                // Update Data Graf Utama (Doughnut Chart) secara Live
                const chartTools = Chart.getChart('grafToolsRCA'); 
                if(chartTools) {
                    chartTools.data.datasets[0].data = data.graf_tools_data;
                    chartTools.update('none'); // Update lembut tanpa animasi penuh
                }
            })
            .catch(err => console.log("Gagal menarik data live RCA:", err));
        }, 5000); 

        // Fungsi Gatekeeper Penganjur membuka Node 5 (Pengesahan) bagi pihak peserta
    window.maraKeFasaLima = 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: 5 })
        })
        .then(() => {
            window.location.href = "{% url 'bengkel:analisis_rca_validation' pk=bengkel.pk %}";
        })
        .catch(err => console.error("Gagal mengemas kini pintu sekatan: ", err));
    };

    </script>
</div>
{% endblock %}