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

{% block content %}
<style>
    .pledged-card { border-color: #f43f5e !important; background-color: #fff1f2 !important; }
</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 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" 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-rose-500"></div>
            <div class="absolute -right-10 -bottom-10 opacity-5"><i class="fas fa-coins text-9xl text-rose-500"></i></div>
            
            <div class="inline-flex items-center gap-1.5 bg-rose-50 border border-rose-200 text-rose-700 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-4 relative z-10">
                <i class="fas fa-box-open"></i> Node 8: Peruntukan Sumber
            </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">Peta Keperluan Sumber (Resource Mapping)</h2>
                    <p class="text-sm text-slate-500 leading-relaxed max-w-4xl">Sila semak Pelan Tindakan di bawah dan <strong>cadangkan keperluan spesifik</strong> agensi anda (contohnya: bajet RM10k, perlukan 2 Jurutera Perisian, ruang pejabat, dsb).</p>
                </div>
            </div>
        </div>

        <div class="bg-slate-900 rounded-2xl shadow-lg border border-slate-800 p-6 text-white mb-8">
            <div class="flex flex-col md:flex-row justify-between items-center gap-6">
                <div class="flex-1">
                    <h3 class="font-black text-lg flex items-center"><i class="fas fa-info-circle text-rose-400 mr-2"></i> Mandat Peruntukan Sumber</h3>
                    <p class="text-xs text-slate-400 mt-1 leading-relaxed">Penyediaan sumber adalah elemen paling kritikal. Sebarang cadangan fasiliti, kepakaran, atau bajet yang anda nyatakan akan membantu AI Penganjur menyusun peruntukan nasional dengan lebih tepat.</p>
                </div>
                <div class="shrink-0 bg-slate-800 p-4 rounded-xl border border-slate-700 text-center min-w-[200px]">
                    <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1">Status Kitaran Blueprint</div>
                    <div class="text-emerald-400 font-black text-sm uppercase tracking-tighter"><i class="fas fa-check-circle mr-1"></i> Fasa Terakhir (Node 8)</div>
                </div>
            </div>
        </div>

        <div class="bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-slate-200 w-full mb-8">
            <h2 class="text-xl md:text-2xl font-black text-slate-800 mb-6 pb-4 border-b border-slate-100 flex items-center">
                <i class="fas fa-box-open text-rose-500 mr-3"></i> Penentukuran Keperluan Sumber
            </h2>

            {% if ada_peruntukan %}
            <div class="relative w-full overflow-x-auto custom-scrollbar pb-8 pt-4">
                <div class="absolute top-[36px] left-0 w-[4000px] 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 'rose' 'pink' 'orange' 'amber' as warna silent %}
                        {% for ap in s.action_plans.all %}
                            
                            <div class="w-[420px] flex flex-col shrink-0 group" id="kad-alloc-{{ ap.id }}">
                                
                                <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-md relative z-10 transition-transform group-hover:scale-110">
                                        <i class="fas fa-coins 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-[550px]">

                                    <div class="flex justify-between items-start 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>
                                        <span class="text-[10px] bg-slate-100 text-slate-600 px-2 py-1 rounded font-bold uppercase tracking-tighter">Resource Node</span>
                                    </div>

                                    <div class="mb-4 space-y-2">
                                        <div class="bg-slate-50 p-3 rounded-xl border border-slate-100">
                                            <span class="text-[8px] font-black text-slate-400 uppercase tracking-widest block mb-1">Objektif Fasa:</span>
                                            <p class="text-[10px] text-slate-500 italic mb-2">"{{ s.penerangan|truncatechars:80 }}"</p>
                                            <span class="text-[8px] font-black text-{{ warna }}-600 uppercase tracking-widest block mb-1">Tugasan Operasi:</span>
                                            <p class="text-[10px] text-slate-700 font-bold leading-snug">{{ ap.tajuk }}</p>
                                        </div>
                                    </div>

                                    <div class="mb-4 flex-1">
                                        <h5 class="text-[10px] font-black text-rose-800 uppercase mb-3 flex items-center"><i class="fas fa-robot mr-1.5"></i> Rumusan Profil AI:</h5>
                                        {% if ap.allocations.all %}
                                            {% for alloc in ap.allocations.all %}
                                            <div class="p-3 rounded-xl bg-gradient-to-br from-white to-rose-50 border border-rose-100 shadow-sm mb-3">
                                                <div class="flex justify-between items-start mb-2">
                                                    <span class="bg-rose-100 text-rose-700 text-[8px] font-black px-2 py-0.5 rounded uppercase">{{ alloc.kategori_sumber }}</span>
                                                </div>
                                                <p class="text-sm font-black text-slate-800 leading-tight mb-1">{{ alloc.anggaran_keperluan }}</p>
                                                <p class="text-[10px] text-slate-500 italic leading-relaxed">{{ alloc.justifikasi }}</p>
                                            </div>
                                            {% endfor %}
                                        {% else %}
                                            <div class="p-4 rounded-xl border border-dashed border-slate-200 text-center text-[10px] text-slate-400 italic">
                                                Menunggu penganjur menjana profil peruntukan...
                                            </div>
                                        {% endif %}
                                    </div>

                                    <div class="bg-slate-50 border border-slate-200 rounded-xl p-4 mt-auto">
                                        <div class="space-y-3" id="panel-calibration-{{ ap.id }}">
                                            <p class="text-[9px] font-black text-slate-500 uppercase flex items-center justify-between">
                                                <span><i class="fas fa-balance-scale text-rose-500 mr-1"></i> Reality Check (Bajet/Sumber):</span>
                                            </p>
                                            
                                            {% if ap.is_calibrated %}
                                            <div class="w-full text-center py-3 bg-rose-50 border border-rose-200 rounded-xl text-rose-700 text-[10px] font-bold uppercase shadow-inner">
                                                <i class="fas fa-check-circle mr-1"></i> Telah Disahkan
                                            </div>
                                            {% else %}
                                                {% if not bengkel.is_locked %}
                                                <div class="grid grid-cols-3 gap-2">
                                                    <button type="button" onclick="pilihKalibrasiAlloc('{{ ap.id }}', 'setuju')" class="flex flex-col items-center p-2 rounded-lg border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50 transition btn-calib-alloc" data-type="setuju">
                                                        <i class="fas fa-check-circle text-slate-400 mb-1"></i><span class="text-[8px] font-bold uppercase">Sesuai</span>
                                                    </button>
                                                    <button type="button" onclick="pilihKalibrasiAlloc('{{ ap.id }}', 'over_budget')" class="flex flex-col items-center p-2 rounded-lg border border-slate-200 hover:border-rose-500 hover:bg-rose-50 transition btn-calib-alloc" data-type="over_budget">
                                                        <i class="fas fa-arrow-up text-slate-400 mb-1"></i><span class="text-[8px] font-bold uppercase">Terlalu Tinggi</span>
                                                    </button>
                                                    <button type="button" onclick="pilihKalibrasiAlloc('{{ ap.id }}', 'under_budget')" class="flex flex-col items-center p-2 rounded-lg border border-slate-200 hover:border-amber-500 hover:bg-amber-50 transition btn-calib-alloc" data-type="under_budget">
                                                        <i class="fas fa-arrow-down text-slate-400 mb-1"></i><span class="text-[8px] font-bold uppercase">Terlalu Rendah</span>
                                                    </button>
                                                </div>
                                                {% else %}
                                                <div class="w-full text-center py-3 bg-slate-100 border border-slate-200 rounded-xl text-slate-400 text-[10px] font-bold uppercase">
                                                    <i class="fas fa-lock"></i> Kitaran Kewangan Dimuktamadkan
                                                </div>
                                                {% endif %}
                                            {% endif %}
                                        </div>

                                        {% if not bengkel.is_locked and not ap.is_calibrated %}
                                        <div id="ruang-justifikasi-{{ ap.id }}" class="hidden mt-3 pt-3 border-t border-dashed border-slate-200">
                                            <textarea id="teks-justifikasi-{{ ap.id }}" rows="2" placeholder="Sila huraikan keperluan sebenar agensi anda..." class="w-full bg-white border border-slate-200 rounded-md px-3 py-2 text-xs focus:ring-1 focus:ring-rose-500 outline-none resize-none mb-2 shadow-inner"></textarea>
                                            <button type="button" onclick="hantarKalibrasiAlloc('{{ ap.id }}')" id="btn-submit-alloc-{{ ap.id }}" class="bg-slate-800 text-white text-[10px] font-bold px-4 py-2 rounded-lg shadow-sm hover:bg-slate-900 transition w-full">Sahkan Keperluan Agensi</button>
                                        </div>
                                        {% endif %}
                                        
                                        <!-- 📜 RUANGAN LOG SUMBANGAN SAYA -->
                                        <div id="log-idea-box-{{ ap.id }}" class="mt-4 pt-3 border-t border-slate-200 space-y-1.5 {% if not ap.my_ideas %}hidden{% endif %}">
                                            <span class="text-[8px] font-black uppercase text-slate-400 tracking-widest block"><i class="fas fa-history"></i> Maklum Balas Anda:</span>
                                            <div id="log-list-{{ ap.id }}" class="space-y-1.5 max-h-20 overflow-y-auto custom-scrollbar pr-1">
                                                {% for idea in ap.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_sumber }}">
                                                        <i class="fas fa-check-circle text-{{ warna }}-500 mr-1"></i> {{ idea.idea_sumber }}
                                                    </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 %}2{% endif %} pts
                                                    </span>
                                                </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                        {% endfor %}
                    {% endfor %}
                </div>
            </div>
            {% else %}
            <div class="py-12 text-center w-full bg-slate-50 border border-dashed border-slate-200 rounded-2xl">
                <i class="fas fa-robot text-4xl text-slate-300 mb-4 block"></i>
                <p class="text-slate-500 font-bold">Profil Peruntukan Belum Dijana</p>
                <p class="text-xs text-slate-400 mt-1">Sila tunggu sebentar. AI Penganjur sedang merangka anggaran keperluan sumber (bajet & manusia) untuk setiap Pelan Tindakan.</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-rose-600 hover:bg-rose-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.is_locked %}
    <button onclick="window.location.href='{% url 'bengkel:dashboard' %}'" 
        class="bg-emerald-600 hover:bg-emerald-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-check-double"></i> Pusingan Selesai (Kembali ke Profil)
    </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-hourglass-half"></i> Menunggu Penganjur Tamatkan Acara
    </button>
    {% endif %}
</div>

<script>
    let pilihanAlloc = {}; // Memori menyimpan pilihan butang

    function pilihKalibrasiAlloc(id, type) {
        pilihanAlloc[id] = type;
        const panel = document.getElementById(`panel-calibration-${id}`);
        const buttons = panel.querySelectorAll('.btn-calib-alloc');
        
        // 1. Reset warna semua butang
        buttons.forEach(b => {
            b.classList.remove('bg-emerald-50', 'border-emerald-500', 'bg-rose-50', 'border-rose-500', 'bg-amber-50', 'border-amber-500', 'scale-105', 'shadow-md');
            b.querySelector('i').classList.replace('text-emerald-500', 'text-slate-400');
            b.querySelector('i').classList.replace('text-rose-500', 'text-slate-400');
            b.querySelector('i').classList.replace('text-amber-500', 'text-slate-400');
        });

        // 2. Highlight butang aktif
        const btnAktif = panel.querySelector(`[data-type="${type}"]`);
        if(type === 'setuju') {
            btnAktif.classList.add('bg-emerald-50', 'border-emerald-500', 'scale-105', 'shadow-md');
            btnAktif.querySelector('i').classList.replace('text-slate-400', 'text-emerald-500');
        } else if(type === 'over_budget') {
            btnAktif.classList.add('bg-rose-50', 'border-rose-500', 'scale-105', 'shadow-md');
            btnAktif.querySelector('i').classList.replace('text-slate-400', 'text-rose-500');
        } else {
            btnAktif.classList.add('bg-amber-50', 'border-amber-500', 'scale-105', 'shadow-md');
            btnAktif.querySelector('i').classList.replace('text-slate-400', 'text-amber-500');
        }

        // 3. Papar kotak justifikasi
        const ruangJustifikasi = document.getElementById(`ruang-justifikasi-${id}`);
        const teksJustifikasi = document.getElementById(`teks-justifikasi-${id}`);
        ruangJustifikasi.classList.remove('hidden');
        
        if (type === 'setuju') {
            teksJustifikasi.classList.add('hidden');
            teksJustifikasi.value = ''; 
        } else {
            teksJustifikasi.classList.remove('hidden');
            teksJustifikasi.placeholder = type === 'over_budget' ? "Berapa skala atau bajet munasabah bagi anda?..." : "Berikan cadangan peruntukan yang lebih mencukupi...";
            teksJustifikasi.focus();
        }
    }

    async function hantarKalibrasiAlloc(apId) {
        const type = pilihanAlloc[apId];
        if (!type) return alert("Sila pilih penilaian realiti bajet terlebih dahulu.");

        const teksArea = document.getElementById(`teks-justifikasi-${apId}`);
        const cadangan = teksArea.value.trim();

        if (type !== 'setuju' && !cadangan) {
            return alert("Sila huraikan keperluan sumber sebenar agensi anda.");
        }

        const btn = document.getElementById(`btn-submit-alloc-${apId}`);
        const asalHTML = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Memproses...';
        btn.disabled = true;
        
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 25000);

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

                const kad = document.getElementById(`kad-alloc-${apId}`);
                btn.innerHTML = `<i class="fas fa-check-circle mr-1"></i> Disahkan (+${data.mata_diperoleh} pts)`;
                btn.classList.replace('bg-slate-800', 'bg-rose-600');
                
                teksArea.disabled = true;
                const buttons = document.getElementById(`panel-calibration-${apId}`).querySelectorAll('.btn-calib-alloc');
                buttons.forEach(b => b.disabled = true);
                
                // 📜 SUNTIKAN LIVE LOG
                const logBox = document.getElementById(`log-idea-box-${apId}`);
                const logList = document.getElementById(`log-list-${apId}`);
                
                if (logBox) logBox.classList.remove('hidden');
                
                if (logList) {
                    let tagPenilaian = "[SETUJU]";
                    if(type === 'over_budget') tagPenilaian = "[TERLALU TINGGI]";
                    else if(type === 'under_budget') tagPenilaian = "[TERLALU RENDAH]";
                    
                    const teksLabel = cadangan ? `${tagPenilaian} ${cadangan}` : tagPenilaian;
                    
                    const itemBaru = document.createElement('div');
                    itemBaru.className = `flex items-center justify-between p-1.5 bg-rose-50 border border-rose-100 rounded-lg text-[10px] text-slate-600 fade-in mb-1.5`;
                    itemBaru.innerHTML = `
                        <span class="truncate flex-1 italic text-rose-800" title="${teksLabel}">
                            <i class="fas fa-check-circle text-rose-500 mr-1"></i> ${teksLabel}
                        </span>
                        <span class="text-[9px] font-black text-rose-600 bg-white px-1.5 py-0.5 rounded ml-2 border border-rose-200 shadow-sm shrink-0">
                            +${data.mata_diperoleh} pts
                        </span>
                    `;
                    logList.insertBefore(itemBaru, logList.firstChild);
                }
                
                tambahSkor(data.mata_diperoleh);
            } else {
                // JIKA GAGAL (Backend kembalikan ralat)
                alert("{% trans 'Ralat Sistem:' %} " + data.error);
                btn.innerHTML = asalHTML;
                btn.disabled = false;
            }
        } catch (error) {
            // JIKA RANGKAIAN TERPUTUS
            alert("{% trans 'Ralat rangkaian terputus. Sila cuba lagi.' %}");
            btn.innerHTML = asalHTML;
            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 %}