{% extends "base.html" %}
{% load i18n %}
{% load bengkel_tags %}
{% block title %}{% trans "Roadmap Strategik" %} — {{ bengkel.title }}{% endblock %}

{% block breadcrumb %}
    <a href="{% url 'bengkel:dashboard' %}?tab=bengkel" class="text-blue-600 hover:underline text-xs font-bold">Laman Utama Peserta</a> <span class="mx-2 text-slate-400">/</span>
    <a href="{% url 'bengkel:peserta_lobi' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">Lobi Acara</a> <span class="mx-2 text-slate-400">/</span>
    <a href="{% url 'bengkel:peserta_overview' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">Peta Perjalanan Blueprint</a> <span class="mx-2 text-slate-400">/</span>
    <span class="text-slate-500 font-medium text-xs">Langkah 5: Semakan Strategi</span>
{% endblock %}

{% block content %}
<style>
    /* Kita buang garisan menegak lama dan biarkan kosong atau letak gaya scrollbar jika perlu */
</style>

<div class="animate-fade-up">
    <div class="bg-gradient-to-r from-blue-900 via-indigo-900 to-slate-900 shadow-lg relative z-20 rounded-3xl mb-8 overflow-hidden border border-slate-800">
        <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1px);background-size:20px 20px;"></div>
        <div class="px-6 py-5 relative flex flex-col sm:flex-row sm:items-center justify-between gap-6">
            <div class="flex items-center gap-4">
                <a href="{% url 'bengkel:peserta_overview' 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">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <div class="border-l border-white/20 pl-4 flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-white text-blue-900 flex items-center justify-center font-black text-xl shadow-md border-2 border-blue-300 uppercase shrink-0">
                        {{ user.first_name|first|default:user.username|first }}
                    </div>
                    <div>
                        <h1 class="text-xl font-black text-white tracking-wide">{{ user.get_full_name|default:user.username }}</h1>
                        <p class="text-indigo-200 text-xs mt-0.5 font-medium uppercase tracking-widest">SME Workspace • {{ bengkel.title }}</p>
                    </div>
                </div>
            </div>
            <div class="flex items-center gap-6">
                <div class="text-left sm:text-right">
                    <div class="text-[10px] text-emerald-300 font-bold uppercase tracking-widest mb-0.5">Skor Sumbangan</div>
                    <div class="text-2xl font-black text-emerald-400 leading-none" id="skor-peserta">{% kira_skor_peserta request.user bengkel %} <span class="text-sm text-white/50">pts</span></div>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 md:p-8 mb-8 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-1 h-full bg-amber-500"></div>
        <div class="flex flex-col md:flex-row md:items-start justify-between gap-6 relative z-10">
            <div class="flex-1">
                <div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 text-amber-600 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-4">
                    <i class="fas fa-chess-knight"></i> Node 5: Roadmap 30 Tahun
                </div>
                <h2 class="text-xl md:text-2xl font-black text-slate-800 mb-2">Rangkaian Strategi Berfasa</h2>
                <p class="text-sm text-slate-500 leading-relaxed">Berikut adalah pelan jangka panjang 2026-2055. Sila <strong>cadangkan inisiatif atau projek spesifik</strong> bagi mana-mana fasa untuk memperkukuhkan strategi ini.</p>
            </div>
        </div>
    </div>

    <div class="bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-slate-200">
        
        <div class="relative w-full overflow-x-auto custom-scrollbar pb-6 pt-2">
            
            <div class="absolute top-[28px] 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 s in strategies_data %}
                {% cycle 'amber' 'orange' 'rose' 'indigo' 'emerald' 'cyan' as warna silent %}
                
                <div class="w-[400px] flex flex-col shrink-0 group">
                    
                    <div class="flex items-center mb-5 relative">
                        <div class="w-12 h-12 bg-white border-4 border-{{ warna }}-500 rounded-full flex items-center justify-center shadow-md relative z-10 transition-transform group-hover:scale-110">
                            <span class="text-sm font-black text-{{ warna }}-600">{{ forloop.counter }}</span>
                        </div>
                        <div class="absolute top-1/2 left-6 h-1.5 w-full bg-{{ warna }}-100 scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-500 rounded-full -translate-y-1/2 z-0"></div>
                    </div>
                    
                    <div class="bg-white border-2 border-slate-100 hover:border-{{ warna }}-300 rounded-2xl p-6 shadow-sm hover:shadow-xl transition-all duration-300 flex flex-col h-full min-h-[450px]">
                        
                        <div class="flex items-center justify-between mb-4">
                            <span class="bg-{{ warna }}-500 text-white font-black px-3 py-1 rounded-md text-[10px] tracking-widest uppercase shadow-sm">{{ s.fasa }}</span>
                        </div>
                        
                        <h4 class="font-black text-slate-800 text-base mb-2 leading-snug">{{ s.tajuk }}</h4>
                        
                        <div class="flex gap-1.5 flex-wrap mb-4">
                            {% for teras in s.teras_list %}
                            <span class="text-[9px] font-bold bg-slate-50 text-slate-500 px-2 py-0.5 rounded border border-slate-200">{{ teras }}</span>
                            {% endfor %}
                        </div>
                        
                        <div class="text-[11px] text-slate-600 leading-relaxed mb-5 flex-1 overflow-y-auto max-h-[120px] pr-2 custom-scrollbar">
                            {{ s.penerangan }}
                        </div>

                        <div class="bg-slate-50 border border-slate-200 rounded-xl p-4 mt-auto">
                            {% if not bengkel.is_locked %}
                            <label class="block text-[9px] font-black text-slate-500 uppercase tracking-widest mb-2 flex items-center">
                                <i class="fas fa-lightbulb text-{{ warna }}-500 mr-1.5"></i> Suntik Inisiatif / Projek:
                            </label>
                            <textarea id="teks-idea-{{ s.id }}" rows="2" placeholder="Contoh: Perolehan lesen cloud nasional..." class="w-full bg-white border border-slate-200 rounded-lg px-3 py-2 text-xs focus:border-{{ warna }}-500 focus:ring-1 focus:ring-{{ warna }}-500 outline-none text-slate-700 resize-none mb-2 shadow-inner"></textarea>
                            <button onclick="hantarIdeaStrategi('{{ s.id }}', '{{ warna }}')" id="btn-idea-{{ s.id }}" class="w-full bg-slate-800 text-white text-[10px] font-bold py-2.5 rounded-lg shadow-sm hover:bg-slate-900 transition flex items-center justify-center gap-2">
                                <i class="fas fa-paper-plane"></i> Hantar Cadangan
                            </button>
                            
                            <!-- 📜 RUANGAN LOG SUMBANGAN SAYA -->
                            <div id="log-idea-box-{{ s.id }}" class="mt-4 pt-3 border-t border-slate-100 space-y-1.5 {% if not s.my_ideas %}hidden{% endif %}">
                                <span class="text-[8px] font-black uppercase text-slate-400 tracking-widest block"><i class="fas fa-history"></i> Sumbangan Anda:</span>
                                <div id="log-list-{{ s.id }}" class="space-y-1.5 max-h-20 overflow-y-auto custom-scrollbar pr-1">
                                    {% for idea in s.my_ideas %}
                                    <div class="flex items-center justify-between p-1.5 bg-{{ warna }}-50 border border-{{ warna }}-100 rounded-lg text-[10px] text-slate-600 fade-in">
                                        <span class="truncate flex-1 italic text-{{ warna }}-800" title="{{ idea.idea }}">
                                            <i class="fas fa-check-circle text-{{ warna }}-500 mr-1"></i> {{ idea.idea }}
                                        </span>
                                        <span class="text-[9px] font-black text-{{ warna }}-600 bg-white px-1.5 py-0.5 rounded ml-2 border border-{{ warna }}-200 shadow-sm shrink-0">
                                            +{% if idea.skor_relevansi > 0 %}{{ idea.skor_relevansi|floatformat:0 }}{% else %}8{% endif %} pts
                                        </span>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                            {% else %}
                            <div class="text-center py-4 bg-white rounded-lg border border-slate-200 flex flex-col items-center justify-center">
                                <i class="fas fa-history text-slate-300 text-base mb-1"></i>
                                <span class="text-[9px] font-black text-slate-400 uppercase tracking-wider">Roadmap Dibekukan</span>
                            </div>
                            {% endif %}
                        </div>
                        
                    </div>
                </div>
                {% empty %}
                <div class="py-12 text-center w-full">
                    <div class="w-20 h-20 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4 text-slate-300">
                        <i class="fas fa-clock text-4xl"></i>
                    </div>
                    <p class="text-slate-400 font-bold">Garis masa strategi belum dijana.</p>
                    <p class="text-xs text-slate-400 mt-1">Sila tunggu penganjur memproses roadmap.</p>
                </div>
                {% endfor %}
            </div>
            
        </div>
    </div>
</div>

<div class="mt-8 flex items-center justify-between bg-white p-4 rounded-2xl shadow-sm border border-slate-200 max-w-[1600px] w-full mx-auto">
    <a href="{% url 'bengkel:peserta_overview' pk=bengkel.pk %}" class="bg-amber-600 hover:bg-amber-700 text-white font-bold px-8 py-3 rounded-xl shadow-md transition flex items-center gap-2 text-sm">
        <i class="fas fa-arrow-left"></i> Kembali ke Hab
    </a>
    
    {% if bengkel.blueprint_current_step >= 6 %}
    <button onclick="window.location.href='{% url 'bengkel:peserta_action_plan' pk=bengkel.pk %}'" 
        class="bg-amber-600 hover:bg-amber-700 text-white font-bold px-8 py-3 rounded-xl shadow-md transition flex items-center gap-2 text-sm">
        Seterusnya: Pelan Tindakan <i class="fas fa-arrow-right"></i>
    </button>
    {% else %}
    <button disabled class="bg-slate-100 text-slate-400 font-bold px-8 py-3 rounded-xl border border-slate-200 cursor-not-allowed flex items-center gap-2 text-sm">
        <i class="fas fa-lock"></i> Menunggu Penganjur Membuka Langkah 6
    </button>
    {% endif %}
</div>

<script>
    async function hantarIdeaStrategi(strategiId, warna) {
        const teksArea = document.getElementById(`teks-idea-${strategiId}`);
        const btn = document.getElementById(`btn-idea-${strategiId}`);
        const idea = teksArea.value.trim();

        if(!idea) return alert("Sila masukkan cadangan inisiatif/projek anda.");

        btn.disabled = true;
        const originalHTML = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> Memproses...';

        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 25000);

        try {
            const response = await fetch("{% url 'bengkel:simpan_idea_strategi_ajax' pk=bengkel.pk %}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}',
                },
                body: JSON.stringify({ 'strategi_id': strategiId, 'idea': idea }),
                signal: controller.signal
            });

            if (!response.ok) throw new Error("HTTP " + response.status);
            const data = await response.json();
            
            clearTimeout(timeoutId);

            if(data.success) {
                if(data.status === "spam") {
                    alert("Cadangan inisiatif anda ditolak oleh AI kerana ia tidak relevan (spam). Sila beri cadangan projek yang profesional.");
                    btn.disabled = false;
                    btn.innerHTML = originalHTML;
                    return;
                }

                btn.innerHTML = `<i class="fas fa-check text-emerald-400"></i> Berjaya (+${data.mata_diperoleh} pts)`;
                teksArea.value = '';
                tambahSkor(data.mata_diperoleh);
                
                // 📜 SUNTIKAN LIVE: Masukkan rekod ke dalam log berwarna di bawah
                const logBox = document.getElementById(`log-idea-box-${strategiId}`);
                const logList = document.getElementById(`log-list-${strategiId}`);
                
                if (logBox) logBox.classList.remove('hidden');
                
                if (logList) {
                    const itemBaru = document.createElement('div');
                    itemBaru.className = `flex items-center justify-between p-1.5 bg-${warna}-50 border border-${warna}-100 rounded-lg text-[10px] text-slate-600 fade-in mb-1.5`;
                    itemBaru.innerHTML = `
                        <span class="truncate flex-1 italic text-${warna}-800" title="${idea}">
                            <i class="fas fa-check-circle text-${warna}-500 mr-1"></i> ${idea}
                        </span>
                        <span class="text-[9px] font-black text-${warna}-600 bg-white px-1.5 py-0.5 rounded ml-2 border border-${warna}-200 shadow-sm shrink-0">
                            +${data.mata_diperoleh} pts
                        </span>
                    `;
                    logList.insertBefore(itemBaru, logList.firstChild);
                }

                setTimeout(() => {
                    btn.disabled = false;
                    btn.innerHTML = originalHTML;
                }, 2000);
            } else {
                alert("Ralat pelayan: " + data.error);
                btn.disabled = false;
                btn.innerHTML = originalHTML;
            }
        } catch (error) {
            clearTimeout(timeoutId);
            if (error.name === 'AbortError') {
                alert("Ralat: Pelayan OpenAI terlalu lambat membalas (Lebih 25 saat).");
            } else {
                alert("Rangkaian terputus atau ralat sistem.");
            }
            btn.disabled = false;
            btn.innerHTML = originalHTML;
        }
    }

    let skorSekarang = {% kira_skor_peserta request.user bengkel %};
    function tambahSkor(mata) {
        const elemenSkor = document.getElementById('skor-peserta');
        let skorTarget = skorSekarang + mata;
        let interval = setInterval(() => {
            skorSekarang++;
            elemenSkor.innerHTML = skorSekarang + ' <span class="text-sm text-white/50">pts</span>';
            if(skorSekarang >= skorTarget) clearInterval(interval);
        }, 50);
    }
</script>
{% endblock %}