{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Analisis Strategi (30 Tahun)" %} — {{ 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 5: Strategi (30 Tahun)</span>
{% endblock %}

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

<style>
    .timeline-container { position: relative; }
    .timeline-container::before { content: ''; position: absolute; left: 1.25rem; top: 0; bottom: 0; width: 2px; background: #fcd34d; }
    .radar-bg { background-image: radial-gradient(circle at center, #fffbeb 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-amber-900 via-orange-800 to-amber-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-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-3">
                            <i class="fas fa-chess-knight"></i> Blueprint Roadmap
                        </div>
                        <h1 class="text-2xl md:text-3xl font-extrabold text-white leading-tight">30-Year Strategic Roadmap</h1>
                        <p class="text-white/70 text-sm mt-1">AI temporal distribution of Endorsed Pillars into execution phases.</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="bg-amber-500/20 border border-amber-400/30 text-amber-100 text-xs font-bold px-4 py-2.5 rounded-xl backdrop-blur-sm flex items-center shadow-inner">
                        <i class="fas fa-calendar-check text-amber-400 mr-2"></i> Timeline Generated
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div id="btn-jana-strategi" onclick="janaStrategiAI()" class="bg-amber-50 p-5 rounded-xl shadow-sm border-2 border-amber-200 cursor-pointer hover:border-amber-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-project-diagram text-8xl text-amber-500"></i></div>
                <div class="text-amber-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-amber-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-amber-800 relative z-10 mt-2">Jana Roadmap AI</div>
                <div class="text-[10px] text-amber-600 font-bold mt-1 relative z-10">Rangka Fasa Pelaksanaan</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-columns text-8xl text-orange-500"></i></div>
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 relative z-10">Endorsed Pillars</div>
                <div class="text-3xl font-black text-orange-600 relative z-10">{{ jumlah_pillar }}</div>
                <div class="text-[10px] text-slate-500 mt-1 font-medium relative z-10">Mapped across the timeline</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-bullseye text-8xl text-emerald-500"></i></div>
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 relative z-10">Target Initiatives (DNA)</div>
                <div class="text-3xl font-black text-emerald-600 relative z-10">{{ jumlah_idea }}</div>
                <div class="text-[10px] text-emerald-500 mt-1 font-bold relative z-10">Projek Disuntik Peserta</div>
            </div>
            
            <div class="bg-gradient-to-br from-orange-50 to-amber-50 p-5 rounded-xl shadow-sm border border-orange-100 cursor-pointer hover:shadow-md transition" onclick="maraKeFasaEnam()">
                <div class="text-orange-800 text-[10px] font-bold uppercase tracking-widest mb-1 flex items-center gap-1.5">
                    Ready for Action Plan <i class="fas fa-lock-open text-[9px] text-emerald-500"></i>
                </div>
                <div class="text-3xl font-black text-orange-600">Sedia</div>
                <div class="text-[10px] text-orange-500 mt-1 font-bold"><i class="fas fa-arrow-right"></i> Proceed to Action Plans</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-area text-amber-500 mr-2"></i> Strategic Implementation Curve</h3>
                    <span class="text-[9px] bg-orange-50 text-orange-600 border border-orange-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">Intensity based on volume of participant initiatives injected per phase.</p>
                <div class="relative flex-1 min-h-[250px] w-full">
                    <canvas id="grafStrategy"></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-project-diagram text-amber-400 mr-2"></i> LLM Temporal Mapping Logic</h3>
                    <p class="text-[10px] text-slate-400 mt-1">How AI distributed Pillars into chronological phases.</p>
                </div>
                <div class="p-6 space-y-6 flex-1 flex flex-col justify-center">
                    <div class="border-l-2 border-orange-400 pl-4">
                        <h4 class="text-sm font-black text-orange-300 uppercase tracking-widest mb-2">Dependency Sequencing</h4>
                        <p class="text-xs text-slate-300 leading-relaxed">AI menyusun fasa secara kronologi; Asas dan Polisi sentiasa didahulukan sebelum Pemindahan Data atau Kematangan Sistem.</p>
                    </div>
                    <div class="border-l-2 border-amber-400 pl-4">
                        <h4 class="text-sm font-black text-amber-300 uppercase tracking-widest mb-2">Human-In-The-Loop (HITL)</h4>
                        <p class="text-xs text-slate-300 leading-relaxed">Peserta menambah {{ jumlah_idea }} inisiatif projek secara langsung. AI menganalisis penumpuan cadangan ini untuk menentukan di mana usaha maksimum dikerahkan.</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-map-signs text-amber-600 mr-3"></i> 30-Year Roadmap (AI Generated)</h3>
            
            <div class="relative w-full overflow-x-auto custom-scrollbar pb-8 pt-4">
                
                <div class="absolute top-[36px] left-0 w-[2500px] h-2 bg-slate-100 rounded-full z-0"></div>
                
                <div class="flex gap-6 relative z-10 w-max px-2">
                    {% for item in strategi_data %}
                    {% cycle 'amber' 'orange' 'rose' 'indigo' 'emerald' 'cyan' as warna silent %}
                    
                    <div class="w-[340px] 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">
                                <span class="text-sm font-black text-{{ warna }}-600">{{ forloop.counter }}</span>
                            </div>
                            <div class="absolute top-1/2 left-6 h-2 w-[340px] 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-[350px]">
                            
                            <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-map-marker-alt 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-3 py-1.5 rounded-lg text-[10px] tracking-widest uppercase shadow-md">{{ item.obj.fasa }}</span>
                            </div>
                            
                            <h4 class="font-black text-slate-800 text-sm mb-3 relative z-10 leading-snug">{{ item.obj.tajuk }}</h4>
                            <p class="text-[11px] text-slate-500 leading-relaxed mb-5 relative z-10 flex-1">{{ item.obj.penerangan }}</p>
                            
                            <div class="flex gap-1.5 flex-wrap mb-5 relative z-10">
                                {% for teras in item.teras_list %}
                                    {% if teras %}
                                    <span class="text-[8px] font-black bg-slate-50 border border-slate-200 text-slate-400 uppercase tracking-widest px-2 py-1 rounded shadow-sm">{{ teras }}</span>
                                    {% endif %}
                                {% endfor %}
                            </div>

                            {% if item.ideas %}
                            <div class="bg-{{ warna }}-50 p-4 rounded-xl border border-{{ warna }}-200 text-[10px] relative z-10 mt-auto">
                                <div class="flex justify-between items-start mb-3 border-b border-{{ warna }}-100 pb-2">
                                    <strong class="text-{{ warna }}-800 uppercase tracking-widest text-[8px] font-black mt-1"><i class="fas fa-dna mr-1 text-{{ warna }}-500"></i> {{ item.ideas.count }} Projek Peserta:</strong>
                                    <button onclick="murnikanStrategi(this, '{{ item.obj.id }}')" class="bg-{{ warna }}-600 hover:bg-{{ warna }}-700 text-white text-[9px] font-bold px-2 py-1 rounded transition flex items-center shadow-md">
                                        <i class="fas fa-magic mr-1"></i> Refine AI
                                    </button>
                                </div>
                                <ul class="space-y-2 text-{{ warna }}-700">
                                    {% for idea in item.ideas|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 flex flex-col items-center justify-center">
                                <i class="fas fa-hourglass-half mb-2 text-lg opacity-50"></i>
                                Menunggu suntikan inisiatif dari peserta...
                            </div>
                            {% endif %}
                            
                        </div>
                    </div>
                    {% empty %}
                    <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 Roadmap Dijana.</p>
                        <p class="text-xs text-slate-400">Sila tekan butang 'Jana Roadmap AI' untuk memulakan pemetaan.</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    async function janaStrategiAI() {
        const btn = document.getElementById('btn-jana-strategi');
        if(!confirm("{% trans 'Arahkan AI merangka Roadmap 30 Tahun (6 Fasa) berdasarkan Teras yang disokong 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-amber-500 mb-2"></i><br><span class="text-xs font-bold text-amber-800">AI Merangka Garis Masa...</span></div>`;
        btn.style.pointerEvents = "none";

        try {
            const response = await fetch("{% url 'bengkel:jana_strategi_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("{% trans 'Berjaya!' %} " + data.mesej);
                location.reload(); 
            } else {
                alert("{% trans 'Ralat AI:' %} " + data.error);
                btn.innerHTML = originalContent;
                btn.style.pointerEvents = "auto";
            }
        } catch (error) {
            alert("{% trans 'Ralat rangkaian.' %}");
            btn.innerHTML = originalContent;
            btn.style.pointerEvents = "auto";
        }
    }

    window.addEventListener('DOMContentLoaded', () => {
        // Carta Lengkung Pelaksanaan (Implementation Curve)
        const grafLabelsAsal = JSON.parse('{{ graf_labels_json|escapejs }}');
        const grafData = JSON.parse('{{ graf_data_json|escapejs }}');

        // Gantikan label yang panjang senget kepada label pendek untuk paksi-X (P1, P2, P3...)
        const labelPendek = grafLabelsAsal.map((label, index) => `Fasa ${index + 1}`);

        const canvasStrategy = document.getElementById('grafStrategy');
        if (canvasStrategy) {
            const ctxStrategy = canvasStrategy.getContext('2d');
            let gradient = ctxStrategy.createLinearGradient(0, 0, 0, 400);
            gradient.addColorStop(0, 'rgba(245, 158, 11, 0.5)'); // Amber
            gradient.addColorStop(1, 'rgba(245, 158, 11, 0.05)');

            new Chart(ctxStrategy, {
                type: 'line',
                data: {
                    labels: labelPendek, // Guna label yang dah dipendekkan
                    datasets: [{
                        label: 'Intensiti Usaha (Jumlah Inisiatif)',
                        data: grafData,
                        backgroundColor: gradient,
                        borderColor: '#f59e0b',
                        borderWidth: 3,
                        pointBackgroundColor: '#ffffff',
                        pointBorderColor: '#f59e0b',
                        pointBorderWidth: 2,
                        pointRadius: 5,
                        pointHoverRadius: 7,
                        fill: true,
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { 
                        legend: { 
                            display: true, // Hidupkan legend
                            position: 'bottom', // Letak di bawah graf
                            labels: {
                                font: { size: 11, family: 'Inter' },
                                color: '#64748b',
                                usePointStyle: true, // Guna bulatan, bukan kotak
                                boxWidth: 8
                            }
                        },
                        tooltip: {
                            callbacks: {
                                // Tunjukkan nama fasa penuh bila mouse hover pada titik graf
                                title: function(context) {
                                    return grafLabelsAsal[context[0].dataIndex];
                                }
                            }
                        }
                    },
                    scales: {
                        x: { 
                            grid: { display: false }, 
                            ticks: { 
                                font: { size: 10, weight: 'bold' },
                                maxRotation: 0, // Paksa label supaya tidak senget (0 darjah)
                                minRotation: 0
                            } 
                        },
                        y: { 
                            beginAtZero: true, 
                            max: Math.max(...grafData) + 20, 
                            grid: { color: '#f1f5f9', borderDash: [5, 5] }, 
                            ticks: { display: false } 
                        }
                    }
                }
            });
        }
    });
async function murnikanStrategi(btn, strategiId) {
        if(!confirm("{% trans 'Arahkan AI untuk menyerap kesemua inisiatif projek dari peserta dan menulis semula Penerangan Fasa ini (Versi 2.0)?' %}")) return;
        
        const originalHTML = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Upg...';
        btn.disabled = true;

        try {
            const response = await fetch("{% url 'bengkel:murnikan_strategi_ai_ajax' pk=bengkel.pk %}", {
                method: 'POST',
                headers: { 
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}' 
                },
                body: JSON.stringify({ 'strategi_id': strategiId })
            });
            const data = await response.json();
            
            if(data.success) {
                alert("{% trans 'Fasa Strategi berjaya dimurnikan dengan menyerap inisiatif peserta!' %}");
                location.reload(); 
            } else {
                alert("{% trans 'Info:' %} " + data.error);
                btn.innerHTML = originalHTML;
                btn.disabled = false;
            }
        } catch (error) {
            alert("{% trans 'Ralat rangkaian.' %}");
            btn.innerHTML = originalHTML;
            btn.disabled = false;
        }
    }

    // Fungsi Gatekeeper Penganjur membuka Langkah 6 (Pelan Tindakan) bagi pihak peserta
    window.maraKeFasaEnam = 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: 6 })
        })
        .then(() => {
            window.location.href = "{% url 'bengkel:analisis_action_plan' pk=bengkel.pk %}";
        })
        .catch(err => console.error("Gagal mengemas kini pintu sekatan makro fasa 6: ", err));
    };
</script>
{% endblock %}