{% extends "base.html" %}
{% block title %}Pelan Tindakan Berfasa — {{ 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 6: Pelan Tindakan</span>
{% endblock %}

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

<style>
    .radar-bg { background-image: radial-gradient(circle at center, #ecfeff 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-cyan-900 via-sky-800 to-slate-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-cyan-500/20 border border-cyan-400/30 text-cyan-200 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-3">
                            <i class="fas fa-tasks"></i> Operational Execution
                        </div>
                        <h1 class="text-2xl md:text-3xl font-extrabold text-white leading-tight">Phased Action Plan (Year-by-Year)</h1>
                        <p class="text-white/70 text-sm mt-1">LKB granular breakdown of strategic pillars into actionable yearly tasks.</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="bg-cyan-500/20 border border-cyan-400/30 text-cyan-100 text-xs font-bold px-4 py-2.5 rounded-xl backdrop-blur-sm flex items-center shadow-inner">
                        <i class="fas fa-clipboard-list text-cyan-400 mr-2"></i> Action Plan Active
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div id="btn-jana-action" onclick="janaActionPlanAI()" class="bg-cyan-50 p-5 rounded-xl shadow-sm border-2 border-cyan-200 cursor-pointer hover:border-cyan-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-cogs text-8xl text-cyan-500"></i></div>
                <div class="text-cyan-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-cyan-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-cyan-800 relative z-10 mt-2">Jana Action Plan AI</div>
                <div class="text-[10px] text-cyan-600 font-bold mt-1 relative z-10">Pecahkan Strategi kepada Tugas</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-flag-checkered text-8xl text-sky-500"></i></div>
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 relative z-10">Total Action Items</div>
                <div class="text-3xl font-black text-sky-600 relative z-10">{{ jumlah_tindakan }}</div>
                <div class="text-[10px] text-slate-500 mt-1 font-medium relative z-10">Tugasan Operasi Dijana 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-lightbulb text-8xl text-emerald-500"></i></div>
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 relative z-10">Participant KPI Ideas</div>
                <div class="text-3xl font-black text-emerald-600 relative z-10">{{ jumlah_idea_kpi }}</div>
                <div class="text-[10px] text-emerald-500 mt-1 font-bold relative z-10">Idea Pengukuran (DNA SME)</div>
            </div>
            
            <div class="bg-gradient-to-br from-cyan-50 to-sky-50 p-5 rounded-xl shadow-sm border border-cyan-100 cursor-pointer hover:shadow-md transition" onclick="maraKeFasaTujuh()">
                <div class="text-cyan-800 text-[10px] font-bold uppercase tracking-widest mb-1 flex items-center gap-1.5">
                    Next: Indicators <i class="fas fa-lock-open text-[9px] text-emerald-500"></i>
                </div>
                <div class="text-3xl font-black text-cyan-700">M&E</div>
                <div class="text-[10px] text-cyan-500 mt-1 font-bold"><i class="fas fa-arrow-right"></i> Proceed to KPIs / Indicators</div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8 mb-8">
            
            <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 radar-bg flex flex-col">
                <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-bar text-cyan-500 mr-2"></i> Action Item Workload Distribution</h3>
                    <span class="text-[9px] bg-sky-50 text-sky-600 border border-sky-100 font-bold px-2 py-1 rounded uppercase tracking-wider">Live</span>
                </div>
                <p class="text-[10px] text-slate-400 mb-4 text-center">Volume of actionable tasks assigned to each phase.</p>
                <div class="relative flex-1 min-h-[250px] w-full">
                    <canvas id="grafActionPlan"></canvas>
                </div>
            </div>

            <div class="bg-slate-800 rounded-xl shadow-sm border border-slate-700 overflow-hidden flex flex-col text-white">
                <div class="bg-slate-900 p-4 border-b border-slate-700">
                    <h3 class="font-bold text-sm text-slate-200"><i class="fas fa-cogs text-cyan-400 mr-2"></i> LKB Action Translation Engine</h3>
                    <p class="text-[10px] text-slate-400 mt-1">How AI translates macro-pillars into micro-tasks.</p>
                </div>
                <div class="p-6 space-y-6 flex-1 flex flex-col justify-center">
                    <div class="border-l-2 border-cyan-400 pl-4">
                        <h4 class="text-sm font-black text-cyan-300 uppercase tracking-widest mb-2">Yearly Granularity</h4>
                        <p class="text-xs text-slate-300 leading-relaxed">The AI breaks down 5-year macro strategies into step-by-step yearly objectives (e.g., Year 1-2) to prevent project stagnation.</p>
                    </div>
                    <div class="border-l-2 border-emerald-400 pl-4">
                        <h4 class="text-sm font-black text-emerald-300 uppercase tracking-widest mb-2">Human-In-The-Loop (HITL)</h4>
                        <p class="text-xs text-slate-300 leading-relaxed">SMEs menyuntik {{ jumlah_idea_kpi }} cadangan KPI ke dalam tugasan ini. Maklumat ini sangat penting untuk fasa M&E seterusnya.</p>
                    </div>
                </div>
            </div>

        </div>

        <div class="bg-white p-6 md:p-8 rounded-xl shadow-sm border border-slate-200 w-full mb-8">
            <h3 class="font-black text-xl text-slate-800 flex items-center mb-6 pb-4 border-b border-slate-100"><i class="fas fa-clipboard-list text-cyan-600 mr-3"></i> Phased Action Plan (AI Generated)</h3>
            
            {% if jumlah_tindakan > 0 %}
            <div class="relative w-full overflow-x-auto custom-scrollbar pb-8 pt-4">
                <div class="absolute top-[36px] left-0 w-[3000px] h-2 bg-slate-100 rounded-full z-0"></div>
                
                <div class="flex gap-6 relative z-10 w-max px-2">
                    {% for strategi in senarai_strategi %}
                    {% cycle 'cyan' 'sky' 'blue' 'indigo' 'violet' as warna silent %}
                        
                        {% for ap in strategi.action_plans.all %}
                        <div class="w-[350px] flex flex-col shrink-0 group">
                            
                            <div class="flex items-center mb-6 relative">
                                <div class="w-12 h-12 bg-white border-4 border-{{ warna }}-500 rounded-full flex items-center justify-center shadow-lg group-hover:scale-125 transition-transform duration-300 relative z-10">
                                    <i class="fas fa-check text-{{ warna }}-600"></i>
                                </div>
                                <div class="absolute top-1/2 left-6 h-2 w-[350px] bg-gradient-to-r from-{{ warna }}-500 to-transparent scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-700 rounded-full -translate-y-1/2 z-0 opacity-40"></div>
                            </div>
                            
                            <div class="bg-white border-2 border-{{ warna }}-100 rounded-2xl p-6 shadow-sm group-hover:shadow-2xl group-hover:border-{{ warna }}-400 group-hover:-translate-y-3 transition-all duration-500 relative overflow-hidden flex flex-col h-full min-h-[380px]">
                                
                                <div class="absolute -right-6 -top-6 opacity-5 group-hover:opacity-10 transition-opacity duration-500 transform group-hover:rotate-12">
                                    <i class="fas fa-cogs text-9xl text-{{ warna }}-500"></i>
                                </div>
                                
                                <div class="flex justify-between items-start mb-4 relative z-10">
                                    <span class="bg-{{ warna }}-500 text-white font-black px-2 py-1 rounded-md text-[9px] uppercase shadow-md">{{ strategi.fasa }}</span>
                                    <span class="text-[10px] bg-slate-100 text-slate-600 px-2 py-1 rounded font-bold"><i class="far fa-clock mr-1"></i> {{ ap.tahun_pelaksanaan|default:"TBA" }}</span>
                                </div>
                                
                                <h4 class="font-black text-slate-800 text-sm mb-3 relative z-10 leading-snug">{{ ap.tajuk }}</h4>
                                
                                <div class="mb-4 bg-white/60 p-2.5 rounded-lg border border-{{ warna }}-200 relative z-10 shadow-sm">
                                    <span class="text-[8px] font-black text-{{ warna }}-600 uppercase tracking-widest block mb-1.5">Objektif Strategi Asal:</span>
                                    <div class="flex items-start gap-2 text-[10px] text-slate-600 leading-tight italic">
                                        <i class="fas fa-quote-left text-{{ warna }}-400 mt-0.5"></i>
                                        <p>{{ strategi.penerangan|truncatechars:100 }}</p>
                                    </div>
                                </div>

                                <p class="text-[11px] text-slate-500 leading-relaxed mb-5 relative z-10 flex-1">{{ ap.penerangan }}</p>

                                {% if ap.ideas.all %}
                                <div class="bg-{{ warna }}-50 p-4 rounded-xl border border-{{ warna }}-200 text-[10px] relative z-10 mt-auto">
                                    <strong class="text-{{ warna }}-800 uppercase tracking-widest text-[8px] font-black mb-2 block"><i class="fas fa-bullseye mr-1 text-{{ warna }}-500"></i> {{ ap.ideas.count }} Cadangan KPI:</strong>
                                    <ul class="space-y-2 text-{{ warna }}-700">
                                        {% for idea in ap.ideas.all|slice:":3" %}
                                        <li class="text-[10px] leading-snug flex items-start gap-2">
                                            <i class="fas fa-check-circle text-{{ warna }}-400 mt-0.5"></i>
                                            <span class="italic font-medium">"{{ idea.idea|truncatechars:65 }}"</span>
                                        </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                {% else %}
                                <div class="bg-slate-50 p-4 rounded-xl border border-dashed border-slate-200 text-[10px] text-slate-400 italic mt-auto relative z-10 text-center">
                                    <i class="fas fa-hourglass-half mb-2 text-lg opacity-50 block"></i>
                                    Menunggu suntikan KPI dari peserta...
                                </div>
                                {% endif %}
                                
                            </div>
                        </div>
                        {% endfor %}
                        
                    {% endfor %}
                </div>
            </div>
            {% else %}
            <div class="py-12 text-center w-full">
                <i class="fas fa-robot text-4xl text-slate-300 mb-3 block"></i>
                <p class="text-slate-500 font-bold">Tiada Pelan Tindakan Dijana.</p>
                <p class="text-xs text-slate-400">Sila tekan butang 'Jana Action Plan AI' di atas.</p>
            </div>
            {% endif %}
            
        </div>
    </div>
</div>

<script>
    async function janaActionPlanAI() {
        const btn = document.getElementById('btn-jana-action');
        if(!confirm("Arahkan AI memecahkan Strategi 30 Tahun kepada Pelan Tindakan terperinci 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-cyan-500 mb-2"></i><br><span class="text-xs font-bold text-cyan-800">AI Menjana Tindakan...</span></div>`;
        btn.style.pointerEvents = "none";

        try {
            const response = await fetch("{% url 'bengkel:jana_action_plan_penganjur_ajax' pk=bengkel.pk %}", {
                method: 'POST',
                headers: { 
                    'X-CSRFToken': '{{ csrf_token }}',
                    'Content-Type': 'application/json'
                }
            });
            const data = await response.json();
            
            if(data.success) {
                alert("Berjaya! " + data.mesej);
                location.reload(); 
            } else {
                alert("Ralat AI: " + data.error);
                btn.innerHTML = originalContent;
                btn.style.pointerEvents = "auto";
            }
        } catch (error) {
            alert("Ralat rangkaian.");
            btn.innerHTML = originalContent;
            btn.style.pointerEvents = "auto";
        }
    }

    window.addEventListener('DOMContentLoaded', () => {
        const grafLabels = JSON.parse('{{ graf_labels_json|escapejs }}');
        const grafData = JSON.parse('{{ graf_data_json|escapejs }}');
        
        // Memendekkan label untuk graf (cth: "FASA 1 (2026-2030)" jadi "FASA 1")
        const labelPendek = grafLabels.map(label => label.split(' ')[0] + ' ' + label.split(' ')[1]);

        const canvasAction = document.getElementById('grafActionPlan');
        if (canvasAction) {
            const ctxAction = canvasAction.getContext('2d');
            new Chart(ctxAction, {
                type: 'bar',
                data: {
                    labels: labelPendek,
                    datasets: [{
                        label: 'Total Action Items',
                        data: grafData,
                        backgroundColor: [
                            'rgba(6, 182, 212, 0.8)',   
                            'rgba(14, 165, 233, 0.8)',  
                            'rgba(56, 188, 248, 0.8)',  
                            'rgba(56, 188, 248, 0.6)',  
                            'rgba(56, 188, 248, 0.4)',  
                            'rgba(56, 188, 248, 0.2)'
                        ],
                        borderColor: '#06b6d4',
                        borderWidth: 1,
                        borderRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { 
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                title: function(context) { return grafLabels[context[0].dataIndex]; }
                            }
                        }
                    },
                    scales: {
                        y: { beginAtZero: true, grid: { color: '#f1f5f9' }, title: { display: true, text: 'Volume of Tasks', font: {size: 9} }, ticks: {stepSize: 1} },
                        x: { grid: { display: false }, ticks: { font: { size: 10, weight: 'bold' } } }
                    }
                }
            });
        }
    });

    // Fungsi Gatekeeper Penganjur membuka Langkah 7 (Indikator KPI) bagi pihak peserta
    window.maraKeFasaTujuh = function() {
        fetch("{% url 'bengkel:unlock_blueprint_step' pk=bengkel.pk %}", {
            method: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' },
            body: JSON.stringify({ step: 7 })
        })
        .then(() => {
            window.location.href = "{% url 'bengkel:analisis_indikator' pk=bengkel.pk %}";
        })
        .catch(err => console.error("Gagal mengemas kini pintu sekatan makro fasa 7: ", err));
    };
</script>
{% endblock %}