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

{% block content %}


<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" title="Kembali ke Peta Perjalanan">
                    <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 self-start sm:self-auto">
                <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 transition-all duration-500" 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="flex flex-col gap-6 mb-8">
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 md:p-8 relative overflow-hidden">
            <div class="absolute top-0 left-0 w-1 h-full bg-cyan-500"></div>
            <div class="absolute -right-10 -bottom-10 opacity-5"><i class="fas fa-clipboard-list text-9xl text-cyan-500"></i></div>
            
            <div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 text-cyan-700 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-4 relative z-10">
                <i class="fas fa-tasks"></i> Node 6: Pelan Tindakan 
            </div>
            
            <div class="flex flex-col md:flex-row md:items-start justify-between gap-6 relative z-10">
                <div class="flex-1">
                    <h2 class="text-xl md:text-2xl font-black text-slate-800 mb-2">Item Tindakan Rasmi</h2>
                    <p class="text-sm text-slate-500 leading-relaxed max-w-4xl">AI telah menjana senarai tugasan terperinci bagi setiap fasa strategi. Sila berikan <strong>Cadangan KPI (Indikator Kejayaan)</strong> bagi mana-mana tugasan yang berkaitan dengan kepakaran anda.</p>
                </div>
            </div>
        </div>

        <div class="bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-slate-200">
            
            {% if strategies %}
            <div class="relative w-full overflow-x-auto custom-scrollbar pb-6 pt-2">
                
                <div class="absolute top-[28px] 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 s in strategies %}
                    {% cycle 'cyan' 'sky' 'blue' 'indigo' 'violet' as warna silent %}
                        
                        {% for task in s.action_plans.all %}
                        <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">
                                    <i class="fas fa-tasks text-{{ warna }}-600"></i>
                                </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-[480px]">
                                
                                <div class="flex justify-between items-start mb-3">
                                    <span class="bg-{{ warna }}-500 text-white font-black px-2 py-1 rounded text-[9px] uppercase shadow-sm">{{ s.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> {{ task.tahun_pelaksanaan|default:"TBA" }}</span>
                                </div>
                                
                                <h4 class="font-black text-slate-800 text-base mb-2 leading-snug">{{ task.tajuk }}</h4>
                                
                                <div class="mb-4 space-y-2">
                                    <div class="bg-{{ warna }}-50/50 p-3 rounded-xl border border-{{ warna }}-100/50 shadow-sm">
                                        <span class="text-[8px] font-black text-{{ warna }}-600 uppercase tracking-widest block mb-1">Konteks Strategi (Fasa {{ s.urutan }}):</span>
                                        <p class="text-[10px] text-slate-500 italic">"{{ s.penerangan|truncatechars:120 }}"</p>
                                        
                                        {% if s.ideas.all %}
                                        <div class="mt-2 flex flex-wrap gap-1">
                                            {% for id in s.ideas.all|slice:":2" %}
                                            <span class="text-[8px] bg-white border border-{{ warna }}-200 text-{{ warna }}-700 px-1.5 py-0.5 rounded shadow-sm"># {{ id.idea|truncatechars:30 }}</span>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>

                                <div class="text-[11px] text-slate-600 leading-relaxed mb-5 flex-1 overflow-y-auto max-h-[120px] pr-2 custom-scrollbar">
                                    <span class="font-bold text-slate-800 block mb-1">Huraian Tugasan:</span>
                                    {{ task.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-bullseye text-{{ warna }}-500 mr-1.5"></i> Cadangkan KPI (DNA):
                                    </label>
                                    <textarea id="teks-nota-{{ task.id }}" rows="2" placeholder="Contoh: 100% hospital dilengkapi sistem dalam 6 bulan..." 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="hantarNota('{{ task.id }}', '{{ warna }}')" id="btn-nota-{{ task.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 Jejak DNA (KPI)
                                    </button>
                                    
                                    <!-- 📜 RUANGAN LOG SUMBANGAN SAYA -->
                                    <div id="log-idea-box-{{ task.id }}" class="mt-4 pt-3 border-t border-slate-200 space-y-1.5 {% if not task.my_ideas %}hidden{% endif %}">
                                        <span class="text-[8px] font-black uppercase text-slate-400 tracking-widest block"><i class="fas fa-history"></i> KPI Dicadangkan Anda:</span>
                                        <div id="log-list-{{ task.id }}" class="space-y-1.5 max-h-20 overflow-y-auto custom-scrollbar pr-1">
                                            {% for idea in task.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-3 bg-white rounded-lg border border-slate-200 flex flex-col items-center justify-center">
                                        <i class="fas fa-lock text-slate-300 text-sm mb-1"></i>
                                        <span class="text-[9px] font-black text-slate-400 uppercase tracking-wider">Item Tindakan Dimuktamadkan</span>
                                    </div>
                                    {% endif %}
                                </div>
                                
                            </div>
                        </div>
                        {% endfor %}
                        
                    {% endfor %}
                </div>
            </div>
            {% else %}
            <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-cogs text-4xl"></i>
                </div>
                <p class="text-slate-400 font-bold">Pelan tindakan belum dijana oleh Penganjur.</p>
            </div>
            {% endif %}
            
        </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-cyan-600 hover:bg-cyan-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 >= 7 %}
    <button onclick="window.location.href='{% url 'bengkel:peserta_indikator' pk=bengkel.pk %}'" 
        class="bg-cyan-600 hover:bg-cyan-700 text-white font-bold px-8 py-3 rounded-xl shadow-md transition flex items-center gap-2 text-sm">
        Seterusnya: Sasaran KPI <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 7
    </button>
    {% endif %}
</div>

<script>
    function bukaNota(id) { 
        const ruang = document.getElementById(`ruang-nota-${id}`); 
        ruang.classList.contains('hidden') ? ruang.classList.remove('hidden') : ruang.classList.add('hidden'); 
    }

    async function hantarNota(actionPlanId, warna) {
        const teksArea = document.getElementById(`teks-nota-${actionPlanId}`);
        const btn = document.getElementById(`btn-nota-${actionPlanId}`);
        const idea = teksArea.value.trim();
        
        if(!idea) return alert("Sila masukkan cadangan KPI anda.");
        
        const asalTeks = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-1"></i> Memproses...'; 
        btn.disabled = true;

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

        try {
            const response = await fetch("{% url 'bengkel:simpan_idea_action_plan_ajax' pk=bengkel.pk %}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}',
                },
                body: JSON.stringify({ 'action_plan_id': actionPlanId, '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 anda ditolak oleh AI kerana ia berbentuk teks rawak atau tidak berkaitan (spam). Sila beri cadangan KPI yang profesional.");
                    btn.disabled = false;
                    btn.innerHTML = asalTeks;
                    return;
                }

                btn.innerHTML = `<i class="fas fa-check text-emerald-400 mr-1"></i> Berjaya (+${data.mata_diperoleh} pts)`; 
                teksArea.value = ''; 
                tambahSkor(data.mata_diperoleh);
                
                // 📜 SUNTIKAN LIVE LOG
                const logBox = document.getElementById(`log-idea-box-${actionPlanId}`);
                const logList = document.getElementById(`log-list-${actionPlanId}`);
                
                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.innerHTML = asalTeks; 
                    btn.disabled = false; 
                }, 1500);
            } else {
                alert("Ralat pelayan: " + data.error);
                btn.innerHTML = asalTeks; 
                btn.disabled = false;
            }
        } 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.innerHTML = asalTeks; 
            btn.disabled = false;
        }
    }

    let skorSekarang = {% kira_skor_peserta request.user bengkel %};
    function tambahSkor(mata) {
        const elemenSkor = document.getElementById('skor-peserta'); 
        elemenSkor.classList.add('text-yellow-400', 'scale-125');
        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); 
                setTimeout(() => { elemenSkor.classList.remove('text-yellow-400', 'scale-125'); }, 500); 
            } 
        }, 50);
    }
</script>
{% endblock %}