{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Analisis Situasi" %} — {{ 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">3. Analisis Situasi</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-blue-900 via-cyan-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-blue-500/20 border border-blue-400/30 text-cyan-200 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-2">
                            <i class="fas fa-search-location"></i> Fasa 2.3: Pemetaan Situasi
                        </div>
                        <h1 class="text-2xl md:text-3xl font-extrabold text-white leading-tight">Analisis Situasi (Keadaan Semasa "As-Is")</h1>
                        <p class="text-white/70 text-sm mt-1">AI mengkontekstualisasikan landskap semasa menggunakan kerangka PESTLE & SWOT.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-6 gap-4 mb-8">
            <div onclick="showAnalysis('swot')" class="bg-white p-4 rounded-xl shadow-sm border border-slate-200 text-center cursor-pointer hover:border-blue-400 transition group" id="card-swot">
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 group-hover:text-blue-500">Analisis SWOT</div>
                <div class="text-3xl font-black text-blue-600">{{ swot_count }}</div>
                <div class="text-[9px] text-slate-500 mt-1">Sumbangan</div>
            </div>
            <div onclick="showAnalysis('pestel')" class="bg-white p-4 rounded-xl shadow-sm border border-emerald-400 shadow-md transition group" id="card-pestel">
                <div class="text-emerald-500 text-[10px] font-bold uppercase tracking-widest mb-1 group-hover:text-emerald-500">Analisis PESTEL</div>
                <div class="text-3xl font-black text-emerald-600">{{ pestel_count }}</div>
                <div class="text-[9px] text-slate-500 mt-1">Sumbangan</div>
            </div>
            <div onclick="showAnalysis('soar')" class="bg-white p-4 rounded-xl shadow-sm border border-slate-200 text-center cursor-pointer hover:border-cyan-400 transition group" id="card-soar">
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 group-hover:text-cyan-500">Analisis SOAR</div>
                <div class="text-3xl font-black text-cyan-600">{{ soar_count }}</div>
                <div class="text-[9px] text-slate-500 mt-1">Sumbangan</div>
            </div>
            <div onclick="showAnalysis('fivec')" class="bg-white p-4 rounded-xl shadow-sm border border-slate-200 text-center cursor-pointer hover:border-amber-400 transition group" id="card-fivec">
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 group-hover:text-amber-500">Analisis 5C</div>
                <div class="text-3xl font-black text-amber-600">{{ fivec_count }}</div>
                <div class="text-[9px] text-slate-500 mt-1">Sumbangan</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">{{ tiada_sumbangan_pct }}%</div>
                <div class="text-[9px] text-rose-500 mt-1 font-bold relative z-10">Menjejaskan Skor</div>
            </div>
            <div onclick="maraKeFasaEmpat()" 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">Analisis RCA</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 4 <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-2 gap-6 mb-8 items-stretch">
            <div class="bg-slate-900 rounded-xl shadow-sm border border-slate-800 p-6 text-white relative overflow-hidden flex flex-col h-full">
                <div class="absolute -right-10 -bottom-10 opacity-10"><i class="fas fa-chess-board text-[150px]"></i></div>
                <div class="flex justify-between items-center mb-4 relative z-10">
                    <h3 class="font-black text-lg text-white"><i class="fas fa-project-diagram text-blue-400 mr-2"></i> Rumusan Konteks "As-Is"</h3>
                    </div>
                <div class="space-y-4 relative z-10 flex-1">
                    <div class="bg-slate-800/80 p-4 rounded-lg border border-slate-700">
                        <h4 class="text-xs font-bold text-emerald-400 uppercase tracking-widest mb-2">Kekuatan (Asas Sedia Ada)</h4>
                        <p id="teks-kekuatan" class="text-sm text-slate-300">Memproses data peserta...</p>
                    </div>
                    <div class="bg-slate-800/80 p-4 rounded-lg border border-slate-700">
                        <h4 class="text-xs font-bold text-rose-400 uppercase tracking-widest mb-2">Kelemahan (Kekangan Semasa)</h4>
                        <p id="teks-kelemahan" class="text-sm text-slate-300">Memproses data peserta...</p>
                    </div>
                </div>
            </div>

            <div class="bg-blue-50 border border-blue-200 rounded-xl p-6 shadow-sm flex flex-col h-full">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-black text-blue-900 text-sm"><i class="fas fa-robot text-blue-600 mr-2"></i> Kesimpulan Ejen AI</h3>
                    <button onclick="janaRumusanSituasi()" id="btn-jana-situasi" class="bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-bold px-3 py-1.5 rounded-lg shadow-md transition flex items-center gap-2">
                        <i class="fas fa-magic"></i> Jana Rumusan AI
                    </button>
                </div>
                <div class="bg-white p-5 rounded-lg border border-blue-100 flex-1 flex items-center" id="kotak-kesimpulan">
                    <p class="text-sm text-slate-400 italic">Sila klik butang di atas untuk membenarkan AI merumus idea daripada {{ swot_count|add:pestel_count|add:soar_count|add:fivec_count }} sumbangan peserta.</p>
                </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-indigo-500 mr-2"></i> Pilihan Rangka Kerja</h3>
                <p class="text-[10px] text-slate-500 mb-4">Pilihan peserta merentas 4 kerangka analisis situasi.</p>
                <div class="relative flex-1 min-h-[250px] w-full flex items-center justify-center">
                    <canvas id="grafTools"></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" id="chart-container">
                <h3 id="chart-title" class="font-black text-sm text-slate-800 mb-1 flex items-center"><i class="fas fa-globe text-emerald-500 mr-2"></i> Imbasan Persekitaran PESTEL</h3>
                <p id="chart-desc" class="text-[10px] text-slate-500 mb-6">AI memetakan masalah berdasarkan faktor Politik, Ekonomi, Sosial, Teknologi, Undang-undang, & Alam Sekitar.</p>
                <div class="relative flex-1 min-h-[250px] w-full">
                    <canvas id="grafAnalysis"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Isytihar pembolehubah global supaya boleh diakses oleh fungsi showAnalysis
    let data_swot = [];
    let data_pestel = [];
    let data_soar = [];
    let data_fivec = [];

    window.onload = () => {
        // Ambil data dinamis dari views.py
        const toolsData = JSON.parse('{{ graf_tools_json|escapejs }}');
        
        data_swot = JSON.parse('{{ graf_swot_json|escapejs }}');
        data_pestel = JSON.parse('{{ graf_pestel_json|escapejs }}');
        data_soar = JSON.parse('{{ graf_soar_json|escapejs }}');
        data_fivec = JSON.parse('{{ graf_fivec_json|escapejs }}');

        const ctxTools = document.getElementById('grafTools').getContext('2d');
        new Chart(ctxTools, {
            type: 'doughnut',
            data: {
                labels: ['SWOT', 'PESTEL', 'SOAR', '5C', 'Tiada Sumbangan'],
                datasets: [{
                    data: toolsData, 
                    backgroundColor: ['#2563eb', '#10b981', '#06b6d4', '#f59e0b', '#f43f5e'],
                    borderWidth: 2, borderColor: '#ffffff', cutout: '65%'
                }]
            },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { boxWidth: 10, font: { size: 10 } } } } }
        });

        // Secara default, tunjukkan graf PESTEL
        const ctx = document.getElementById('grafAnalysis').getContext('2d');
        window.analysisChart = new Chart(ctx, {
            type: 'radar',
            data: {
                labels: ['Politikal / Dasar', 'Ekonomi / Dana', 'Sosial / Operasi', 'Teknologi', 'Undang-undang (PDPA)', 'Alam Sekitar'],
                datasets: [{
                    label: 'Intensiti Isu',
                    data: data_pestel, // <-- GUNAKAN DATA SEBENAR
                    backgroundColor: 'rgba(16, 185, 129, 0.2)', borderColor: '#10b981', pointBackgroundColor: '#059669', pointBorderColor: '#fff', borderWidth: 3
                }]
            },
            options: { responsive: true, maintainAspectRatio: false, scales: { r: { angleLines: { color: 'rgba(0,0,0,0.1)' }, grid: { color: 'rgba(0,0,0,0.1)' }, pointLabels: { font: { size: 11, weight: 'bold' } } } } }
        });
    };

    function showAnalysis(type) {
        const chartTitle = document.getElementById('chart-title'); const chartDesc = document.getElementById('chart-desc'); const chartData = window.analysisChart.data.datasets[0];
        document.querySelectorAll('[id^="card-"]').forEach(card => { card.classList.remove('border-blue-400', 'border-emerald-400', 'border-cyan-400', 'border-amber-400', 'shadow-md'); card.classList.add('border-slate-200'); });
        document.getElementById(`card-${type}`).classList.remove('border-slate-200');
        
        switch (type) {
            case 'swot':
                document.getElementById('card-swot').classList.add('border-blue-400', 'shadow-md');
                chartTitle.innerHTML = '<i class="fas fa-chart-bar text-blue-500 mr-2"></i> Analisis SWOT';
                chartDesc.innerText = 'Pemetaan Kekuatan, Kelemahan, Peluang, dan Ancaman.';
                window.analysisChart.data.labels = ['Kekuatan', 'Kelemahan', 'Peluang', 'Ancaman'];
                chartData.data = data_swot; // <-- GANTI DI SINI
                chartData.backgroundColor = 'rgba(59, 130, 246, 0.2)'; chartData.borderColor = '#3b82f6'; chartData.pointBackgroundColor = '#2563eb';
                window.analysisChart.config.type = 'bar';
                break;
            case 'pestel':
                document.getElementById('card-pestel').classList.add('border-emerald-400', 'shadow-md');
                chartTitle.innerHTML = '<i class="fas fa-globe text-emerald-500 mr-2"></i> Imbasan Persekitaran PESTEL';
                chartDesc.innerText = 'AI memetakan masalah berdasarkan faktor Politik, Ekonomi, Sosial, Teknologi, Undang-undang, & Alam Sekitar.';
                window.analysisChart.data.labels = ['Politik / Dasar', 'Ekonomi / Dana', 'Sosial / Operasi', 'Teknologi', 'Undang-undang (PDPA)', 'Alam Sekitar'];
                chartData.data = data_pestel; // <-- GANTI DI SINI
                chartData.backgroundColor = 'rgba(16, 185, 129, 0.2)'; chartData.borderColor = '#10b981'; chartData.pointBackgroundColor = '#059669';
                window.analysisChart.config.type = 'radar';
                break;
            case 'soar':
                document.getElementById('card-soar').classList.add('border-cyan-400', 'shadow-md');
                chartTitle.innerHTML = '<i class="fas fa-rocket text-cyan-500 mr-2"></i> Analisis SOAR';
                chartDesc.innerText = 'Pemetaan Kekuatan, Peluang, Aspirasi, dan Hasil (Results).';
                window.analysisChart.data.labels = ['Kekuatan', 'Peluang', 'Aspirasi', 'Hasil'];
                chartData.data = data_soar; // <-- GANTI DI SINI
                chartData.backgroundColor = 'rgba(6, 182, 212, 0.2)'; chartData.borderColor = '#06b6d4'; chartData.pointBackgroundColor = '#0891b2';
                window.analysisChart.config.type = 'bar';
                break;
            case 'fivec':
                document.getElementById('card-fivec').classList.add('border-amber-400', 'shadow-md');
                chartTitle.innerHTML = '<i class="fas fa-handshake text-amber-500 mr-2"></i> Analisis 5C';
                chartDesc.innerText = 'Pemetaan Syarikat, Pelanggan, Pesaing, Rakan Kerjasama, dan Iklim.';
                window.analysisChart.data.labels = ['Agensi', 'Pelanggan', 'Pesaing', 'Rakan Kerjasama', 'Iklim'];
                chartData.data = data_fivec; // <-- GANTI DI SINI
                chartData.backgroundColor = 'rgba(245, 158, 11, 0.2)'; chartData.borderColor = '#f59e0b'; chartData.pointBackgroundColor = '#d97706';
                window.analysisChart.config.type = 'radar';
                break;
        }
        window.analysisChart.update();
    }

    // FUNGSI JANA RUMUSAN AI (PENGANJUR)
    function janaRumusanSituasi() {
        const btn = document.getElementById('btn-jana-situasi');
        const kotakKesimpulan = document.getElementById('kotak-kesimpulan');
        const teksKekuatan = document.getElementById('teks-kekuatan');
        const teksKelemahan = document.getElementById('teks-kelemahan');

        if(!confirm("{% trans 'Adakah anda mahu AI merumuskan semua input situasi peserta sekarang?' %}")) return;

        // UI State: Loading
        const asalHTML = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Meneliti Data...';
        btn.disabled = true;
        
        teksKekuatan.innerHTML = '<span class="animate-pulse text-slate-500">Menganalisis data peserta...</span>';
        teksKelemahan.innerHTML = '<span class="animate-pulse text-slate-500">Mengenalpasti kekangan...</span>';

        fetch("{% url 'bengkel:jana_rumusan_situasi_ajax' pk=bengkel.pk %}", {
            method: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' }
        })
        .then(res => res.json())
        .then(data => {
            if(data.success) {
                // Suntik Jawapan AI ke UI
                teksKekuatan.innerText = data.data.kekuatan;
                teksKelemahan.innerText = data.data.kelemahan;
                kotakKesimpulan.innerHTML = `<p class="text-sm text-blue-800 leading-relaxed font-medium">"${data.data.kesimpulan}"</p>`;
                
                btn.innerHTML = '<i class="fas fa-check"></i> {% trans "Rumusan Siap" %}';
                btn.classList.replace('bg-blue-600', 'bg-emerald-600');
            } else {
                alert("{% trans 'Gagal:' %} " + data.error);
                btn.innerHTML = asalHTML; btn.disabled = false;
            }
        })
        .catch(err => {
            alert("{% trans 'Ralat Sistem AI.' %}");
            btn.innerHTML = asalHTML; btn.disabled = false;
        });
    }

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