{% extends "base.html" %}
{% load i18n %}
{% load bengkel_tags %}
{% block title %}{% trans "Profil" %} — {{ target_user.get_full_name|default:target_user.username }}{% 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>
    <span class="text-slate-500 font-medium text-xs">Profil Kognitif AI</span>
{% endblock %}

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

<div class="animate-fade-up pb-12">

    <div class="w-full mx-auto mt-4">
        <div class="bg-white rounded-3xl shadow-sm border border-slate-200 mb-8 relative z-50">
            
            <div class="h-32 md:h-40 rounded-t-3xl {% if is_penganjur_profile %}bg-gradient-to-br from-slate-900 via-slate-800 to-amber-900{% else %}bg-gradient-to-br from-[#0f172a] via-[#1e3a8a] to-[#134e4a]{% endif %} relative p-5 flex justify-between items-start">
                <div class="absolute inset-0 opacity-20" style="background-image:radial-gradient(rgba(255,255,255,.15) 1px,transparent 1px);background-size:20px 20px;"></div>
                
                <a href="{{ back_url }}" class="relative z-10 inline-flex items-center justify-center w-10 h-10 bg-black/20 hover:bg-black/40 text-white/80 hover:text-white rounded-full transition-all backdrop-blur-sm border border-white/20 shadow-sm" title="Kembali">
                    <i class="fas fa-arrow-left"></i>
                </a>

                {% if request.user.id == target_user.id %}
                <a href="{% url 'bengkel:edit_profile' %}" class="relative z-10 inline-flex items-center justify-center w-10 h-10 bg-black/20 hover:bg-black/40 text-white/80 hover:text-white rounded-full transition-all backdrop-blur-sm border border-white/20 shadow-sm" title="Urus Profil Saya">
                    <i class="fas fa-user-cog"></i>
                </a>
                {% endif %}
            </div>
            
            <div class="px-6 pb-8 relative">
                <div class="absolute -top-12 md:-top-16 left-6 w-24 h-24 md:w-32 md:h-32 rounded-full border-4 border-white bg-slate-100 flex items-center justify-center shadow-lg overflow-hidden z-20">
                    <span class="text-4xl md:text-6xl font-black text-slate-400">{{ target_user.username|slice:":1"|upper }}</span>
                </div>
                
                <div class="ml-28 md:ml-40 pt-4 flex flex-col md:flex-row md:justify-between md:items-start gap-6">
                    <div class="flex-1">
                        <div class="flex items-center flex-wrap gap-2 mb-1">
                            <h2 class="text-2xl md:text-3xl font-black text-slate-800 tracking-tight">{{ target_user.get_full_name|default:target_user.username }}</h2>
                            {% if is_penganjur_profile %}
                                <span class="bg-amber-100 text-amber-700 text-[10px] font-black uppercase tracking-widest px-2.5 py-1 rounded-lg border border-amber-200 shrink-0"><i class="fas fa-crown mr-1"></i> Penganjur Berdaftar</span>
                                <span class="bg-slate-800 text-amber-400 text-[10px] font-black uppercase tracking-widest px-2.5 py-1 rounded-lg border border-slate-700 shadow-sm shrink-0 flex items-center gap-1">
                                    {{ pangkat_ikon }} {{ pangkat_penganjur }}
                                </span>
                            {% endif %}
                        </div>
                        
                        <div class="flex flex-col gap-1.5 mt-3">
                            <div class="flex flex-wrap items-center gap-2 text-sm text-slate-700 font-medium">
                                <span class="flex items-center gap-1.5"><i class="fas fa-building text-blue-500 w-4 text-center"></i> {{ profile.organisasi|default:"Agensi Tidak Dinyatakan" }}</span>
                                {% if profile.unit %}
                                    <span class="text-slate-300 hidden sm:inline">|</span>
                                    <span class="flex items-center gap-1.5"><i class="fas fa-sitemap text-indigo-400 w-4 text-center"></i> {{ profile.unit }}</span>
                                {% endif %}
                            </div>
                            
                            <div class="flex flex-wrap items-center gap-2 text-sm text-slate-600">
                                <span class="flex items-center gap-1.5 font-medium">
                                    {% if is_penganjur_profile %}
                                        <i class="fas fa-user-tie text-amber-500 w-4 text-center"></i> Pegawai Tadbir / Urusetia
                                    {% else %}
                                        <i class="fas fa-id-badge text-emerald-500 w-4 text-center"></i> {{ profile.jawatan|default:profile.jabatan|default:"Peserta (SME)" }}
                                    {% endif %}
                                </span>
                            </div>
                            
                            <div class="flex flex-wrap items-center gap-4 mt-1.5 text-xs text-slate-500">
                                <span class="flex items-center gap-1.5"><i class="fas fa-envelope text-slate-400 w-4 text-center"></i> {{ target_user.email }}</span>
                                {% if profile.telefon %}
                                    <span class="flex items-center gap-1.5"><i class="fas fa-phone-alt text-slate-400 w-4 text-center"></i> {{ profile.telefon }}</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex flex-col sm:flex-row items-end sm:items-stretch gap-4 shrink-0 mt-4 md:mt-0">
                        
                        <div class="flex items-stretch gap-3">
                            {% if is_penganjur_profile %}
                            
                            <div class="bg-white border border-amber-200 rounded-xl p-3 text-center min-w-[120px] relative group cursor-help transition hover:bg-amber-50 shadow-sm flex flex-col justify-center items-center">
                                <div class="text-[9px] font-bold text-amber-600 uppercase tracking-wider mb-1 flex items-center justify-center gap-1">Kepuasan (CSI) <i class="fas fa-star text-amber-400"></i></div>
                                <div class="text-3xl font-black text-amber-800 leading-none flex items-baseline justify-center gap-0.5 mb-1">
                                    {{ purata_rating }}<span class="text-[12px] text-slate-400 font-medium">/5</span>
                                </div>
                                <div class="text-[8px] text-slate-400 font-bold uppercase tracking-widest">{{ jumlah_penilai }} Ulasan</div>
                                
                                <div class="absolute right-0 top-full mt-2 hidden group-hover:block bg-slate-800 text-white text-[10px] p-3 rounded-lg w-60 text-left z-[1300] shadow-xl pointer-events-none before:content-[''] before:absolute before:bottom-full before:right-6 before:border-4 before:border-transparent before:border-b-slate-800">
                                    <strong class="text-amber-400 block mb-1">Indeks Kepuasan (CSI): {{ indeks_kepuasan }}%</strong>
                                    Ditapis secara telus (360-degree evaluation) berdasarkan penilaian bintang dan keselesaan logistik oleh para peserta bengkel.
                                </div>
                            </div>

                            <div class="bg-amber-50 border border-amber-200 rounded-xl p-3 text-center min-w-[120px] shadow-sm flex flex-col justify-center items-center">
                                <div class="text-[9px] font-bold text-amber-700 uppercase tracking-wider mb-1">Acara Diurus</div>
                                <div class="text-3xl font-black text-amber-800 leading-none mb-1">{{ jumlah_bengkel }}</div>
                                <div class="text-[8px] text-transparent uppercase tracking-widest select-none">Spacer</div>
                            </div>
                            
                            {% else %}
                            
                            <div class="bg-blue-50 border border-blue-100 rounded-xl p-3 text-center min-w-[120px] relative group cursor-help transition hover:bg-blue-100 shadow-sm flex flex-col justify-center items-center h-full">
                                <div class="text-[9px] font-bold text-blue-600 uppercase tracking-wider mb-1 flex items-center justify-center gap-1">Skor Kualiti <i class="fas fa-info-circle text-blue-400"></i></div>
                                <div class="text-3xl font-black text-blue-800 leading-none">{{ skor_kualiti }}</div>
                                <div class="absolute right-0 top-full mt-2 hidden group-hover:block bg-slate-800 text-white text-[10px] p-3 rounded-lg w-60 text-left z-[100] shadow-xl pointer-events-none before:content-[''] before:absolute before:bottom-full before:right-6 before:border-4 before:border-transparent before:border-b-slate-800">
                                    <strong class="text-blue-300 block mb-1">Skor Kualiti (0-100)</strong>
                                    Dinilai oleh AI berdasarkan kepadatan fakta, bilangan input aduan/idea, dan keunikan data.
                                </div>
                            </div>
                            
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8">
            
            {% if is_penganjur_profile %}
            <div class="lg:col-span-4 space-y-6">
                <div class="bg-white rounded-3xl shadow-sm border border-slate-200 p-8">
                    <h3 class="font-bold text-slate-800 border-b border-slate-100 pb-3 mb-5 flex items-center"><i class="fas fa-chart-pie text-amber-500 mr-2 text-lg"></i> Metrik Pencapaian Program</h3>
                    
                    <div class="space-y-4">
                        <div class="bg-slate-50 p-4 rounded-2xl border border-slate-100 flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center"><i class="fas fa-users"></i></div>
                                <span class="text-xs font-bold text-slate-600 uppercase tracking-widest">Peserta Diurus</span>
                            </div>
                            <span class="text-xl font-black text-slate-800">{{ total_peserta_diurus }}</span>
                        </div>
                        
                        <div class="bg-slate-50 p-4 rounded-2xl border border-slate-100 flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center"><i class="fas fa-clipboard-check"></i></div>
                                <span class="text-xs font-bold text-slate-600 uppercase tracking-widest">Kadar Kehadiran</span>
                            </div>
                            <span class="text-xl font-black text-emerald-600">{{ kadar_kehadiran }}%</span>
                        </div>
                    </div>
                </div>
            </div> 
            
            <div class="lg:col-span-8 space-y-6"> 
                <div class="bg-white rounded-3xl shadow-sm border border-slate-200 p-8">
                    <div class="mb-5">
                        <h3 class="font-black text-xl text-slate-800 flex items-center"><i class="fas fa-stream text-amber-500 mr-2"></i> Portfolio Acara (Diuruskan)</h3>
                        <p class="text-xs text-slate-500 mt-1">Senarai bengkel dan program yang telah atau akan dianjurkan oleh pegawai ini.</p>
                    </div>
                    
                    <div class="space-y-3">
                        {% for b in bengkel_dicipta %}
                        <div class="flex items-center gap-4 p-4 border border-slate-100 rounded-2xl hover:bg-slate-50 transition shadow-sm">
                            <div class="w-12 h-12 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center shrink-0">
                                <i class="fas fa-chalkboard-teacher text-xl"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h4 class="font-bold text-slate-800 truncate text-base">{{ b.title }}</h4>
                                <p class="text-xs text-slate-500 mt-0.5"><i class="far fa-calendar-alt mr-1"></i> {{ b.tarikh|date:"d M Y" }}</p>
                            </div>
                            <div class="text-right">
                                {% if request.user.id == target_user.id or request.user.is_superuser %}
                                <a href="{% url 'bengkel:detail' pk=b.pk %}" class="bg-white border border-slate-200 text-slate-600 hover:bg-slate-100 px-3 py-1.5 rounded-lg text-[10px] font-bold transition-colors shadow-sm">Urus Bengkel</a>
                                {% endif %}
                            </div>
                        </div>
                        {% empty %}
                        <div class="p-8 text-center bg-slate-50 rounded-2xl border border-dashed border-slate-200">
                            <i class="fas fa-folder-open text-3xl text-slate-300 mb-3"></i>
                            <p class="text-slate-500 text-sm font-medium">Belum ada bengkel yang dianjurkan.</p>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            {% else %}
            <div class="lg:col-span-4 space-y-6">
                <div class="bg-white rounded-3xl shadow-sm border border-slate-200 p-8 h-full flex flex-col">
                    <h3 class="font-bold text-slate-800 border-b border-slate-100 pb-3 mb-4 flex items-center"><i class="fas fa-spider text-indigo-500 mr-2 text-lg"></i> Kecenderungan Input (Persona)</h3>
                    
                    <div class="relative h-64 w-full"><canvas id="grafKecenderungan"></canvas></div>
                    
                    {% if jumlah_dokumen == 0 %}
                        <p class="text-[10px] font-bold text-rose-500 mt-5 text-center bg-rose-50 p-2 rounded-lg border border-rose-200 mb-2">Carta belum dipetakan. Sila sumbangkan data korpus.</p>
                    {% else %}
                        <p class="text-[11px] text-slate-400 mt-5 text-center italic border-b border-slate-100 pb-5">Carta menunjukkan fokus perbincangan utama peserta berdasarkan input mereka.</p>
                    {% endif %}
                    
                    <h3 class="font-bold text-slate-800 border-b border-slate-100 pb-3 mt-6 mb-4 flex items-center"><i class="fas fa-database text-emerald-500 mr-2 text-lg"></i> Sumbangan Korpus (Dokumen)</h3>
                    <div class="grid grid-cols-2 gap-3 mt-auto">
                        <div class="bg-slate-50 border border-slate-200 p-3 rounded-xl flex items-center gap-3 shadow-sm hover:shadow-md transition">
                            <div class="w-10 h-10 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center shrink-0">
                                <i class="fas fa-file-pdf"></i>
                            </div>
                            <div>
                                <div class="text-[9px] font-bold text-slate-400 uppercase tracking-widest leading-none mb-1">Jejak Fail</div>
                                <div class="font-black text-slate-700 leading-none">{{ jumlah_dokumen }} <span class="text-[9px] text-slate-400 font-medium ml-0.5">Indeks</span></div>
                            </div>
                        </div>
                        <div class="bg-slate-50 border border-slate-200 p-3 rounded-xl flex items-center gap-3 shadow-sm hover:shadow-md transition">
                            <div class="w-10 h-10 rounded-lg bg-emerald-100 text-emerald-600 flex items-center justify-center shrink-0">
                                <i class="fas fa-cogs"></i>
                            </div>
                            <div>
                                <div class="text-[9px] font-bold text-slate-400 uppercase tracking-widest leading-none mb-1">Resolusi</div>
                                <div class="font-black text-slate-700 leading-none">{{ purata_actionability }}<span class="text-xs text-slate-500 ml-0.5">%</span></div>
                            </div>
                        </div>
                        <div class="bg-slate-50 border border-slate-200 p-3 rounded-xl flex items-center gap-3 shadow-sm hover:shadow-md transition">
                            <div class="w-10 h-10 rounded-lg bg-purple-100 text-purple-600 flex items-center justify-center shrink-0">
                                <i class="fas fa-gem"></i>
                            </div>
                            <div>
                                <div class="text-[9px] font-bold text-slate-400 uppercase tracking-widest leading-none mb-1">Keunikan</div>
                                <div class="font-black text-slate-700 leading-none">{{ purata_novelty }} <span class="text-[9px] text-slate-400 font-medium ml-0.5">/ 10</span></div>
                            </div>
                        </div>
                        <div class="bg-slate-50 border border-slate-200 p-3 rounded-xl flex items-center gap-3 shadow-sm hover:shadow-md transition group relative cursor-help">
                            <div class="w-10 h-10 rounded-lg bg-amber-100 text-amber-600 flex items-center justify-center shrink-0">
                                <i class="fas fa-brain"></i>
                            </div>
                            <div class="overflow-hidden">
                                <div class="text-[9px] font-bold text-slate-400 uppercase tracking-widest leading-none mb-1">Kognitif</div>
                                <div class="font-black text-slate-700 text-[10px] leading-tight truncate" title="{{ gaya_kognitif }}">{{ gaya_kognitif }}</div>
                            </div>
                            
                            <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-slate-800 text-white text-[10px] p-2 rounded-lg w-40 text-center z-50 shadow-xl pointer-events-none before:content-[''] before:absolute before:top-full before:left-1/2 before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-slate-800">
                                Mewakili corak pemikiran yang terkandung di dalam teks rujukan pengguna ini.
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
            
            <div class="lg:col-span-8 space-y-6 flex flex-col h-full"> 
                <div class="bg-white rounded-3xl shadow-sm border border-slate-200 p-8">
                    <div class="mb-5">
                        <h3 class="font-black text-xl text-slate-800 flex items-center"><i class="fas fa-stream text-blue-500 mr-2"></i> Rekod Penglibatan (Timeline)</h3>
                        <p class="text-xs text-slate-500 mt-1">Sejarah penglibatan dan status kehadiran merentas pelbagai acara.</p>
                    </div>
                    
                    <div class="space-y-3">
                        {% for item in sejarah %}
                        <div class="flex items-center gap-4 p-4 border border-slate-100 rounded-2xl hover:bg-slate-50 transition shadow-sm">
                            <div class="w-12 h-12 rounded-xl {% if item.sudah_hadir %}bg-emerald-50 text-emerald-600{% else %}bg-amber-50 text-amber-600{% endif %} flex items-center justify-center shrink-0">
                                {% if item.sudah_hadir %}<i class="fas fa-check-circle text-xl"></i>{% else %}<i class="fas fa-clock text-xl"></i>{% endif %}
                            </div>
                            <div class="flex-1 min-w-0">
                                <h4 class="font-bold text-slate-800 truncate text-base">{{ item.bengkel.title }}</h4>
                                <p class="text-xs text-slate-500 mt-0.5"><i class="far fa-calendar-alt mr-1"></i> {{ item.bengkel.tarikh|date:"d M Y" }}</p>
                            </div>
                            <div class="text-right flex items-center gap-4 shrink-0">
                                <div class="flex flex-col items-end">
                                    <span class="text-[8px] font-black text-slate-400 uppercase tracking-widest mb-0.5">Sumbangan</span>
                                    <div class="text-xl font-black text-emerald-500 leading-none">
                                        {% kira_skor_peserta target_user item.bengkel %} <span class="text-[10px] text-emerald-500/60 font-bold">pts</span>
                                    </div>
                                </div>
                                
                                <span class="text-[10px] font-bold px-3 py-1 rounded-lg uppercase tracking-wider 
                                    {% if item.status == 'accepted' %}bg-emerald-100 text-emerald-700 border border-emerald-200
                                    {% elif item.status == 'pending' %}bg-amber-100 text-amber-700 border border-amber-200
                                    {% else %}bg-rose-100 text-rose-700 border border-rose-200{% endif %}">
                                    {{ item.get_status_display }}
                                </span>
                            </div>
                        </div>
                        {% empty %}
                        <div class="p-8 text-center bg-slate-50 rounded-2xl border border-dashed border-slate-200">
                            <i class="fas fa-folder-open text-3xl text-slate-300 mb-3"></i>
                            <p class="text-slate-500 text-sm font-medium">Peserta ini belum mempunyai rekod penglibatan bengkel.</p>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                <div class="bg-white rounded-3xl shadow-sm border border-slate-200 p-8">
                    <div class="mb-5 flex flex-col sm:flex-row justify-between sm:items-end border-b border-slate-100 pb-4 gap-4">
                        <div>
                            <h3 class="font-black text-xl text-slate-800 flex items-center"><i class="fas fa-brain text-purple-600 mr-2"></i> Penilaian Kognitif AI</h3>
                            <p class="text-xs text-slate-500 mt-1">Enjin NLP menganalisis gaya penulisan dan sumbangan untuk menjana profil psikometrik.</p>
                        </div>
                    </div>

                    <div class="mb-6 bg-gradient-to-br from-purple-50 to-indigo-50 border border-purple-100 p-6 rounded-2xl shadow-inner">
                        <h4 class="font-bold text-[10px] text-purple-600 uppercase tracking-widest mb-3 flex items-center"><i class="fas fa-robot mr-2 text-sm"></i> Cadangan Eksekutif AI</h4>
                        <div id="box-kognitif-content">
                            {% if profile.persona_ai %}
                            <p class="text-sm text-slate-700 leading-relaxed">
                                Berdasarkan data yang dikumpul, <strong>{{ target_user.get_full_name|default:target_user.username }}</strong> menunjukkan kecenderungan sebagai seorang <strong class="text-purple-700 text-base" id="text-persona-ai">{{ profile.persona_ai }}</strong>.
                            </p>
                            <p class="text-sm text-slate-600 leading-relaxed mt-2 italic border-l-4 border-purple-300 pl-3" id="text-huraian-ai">
                                "{{ profile.huraian_kognitif }}"
                            </p>
                            {% else %}
                            <div id="text-empty-ai">
                                {% if request.user.id == target_user.id or request.user.is_staff or request.user.is_superuser %}
                                    <p class="text-sm text-slate-500 italic flex items-center gap-2 font-medium">
                                        <i class="fas fa-circle-notch fa-spin text-purple-500 text-lg"></i> AI sedang menganalisis corak pemikiran...
                                    </p>
                                {% else %}
                                    <style>
                                        @keyframes swingLock {
                                            0%, 100% { transform: rotate(-12deg); }
                                            50% { transform: rotate(12deg); }
                                        }
                                        .animate-swing { animation: swingLock 2s ease-in-out infinite; display: inline-block; transform-origin: top center; }
                                    </style>
                                    <div class="flex items-center gap-4 bg-slate-50 p-4 rounded-xl border border-slate-200 mt-2">
                                        <div class="relative w-12 h-12 flex items-center justify-center shrink-0">
                                            <div class="absolute inset-0 bg-slate-200 rounded-xl rotate-3"></div>
                                            <i class="fas fa-lock text-slate-400 relative z-10 text-2xl animate-swing"></i>
                                        </div>
                                        <div>
                                            <div class="text-xs font-black text-slate-600 mb-1">Akses Profil Terkunci</div>
                                            <div class="text-[10px] text-slate-500 font-medium">Profil psikometrik AI ini belum dijana. Penjanaan pertama kali memerlukan akses pengesahan daripada pemilik akaun secara peribadi.</div>
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
            
        </div>
    </div>
</div>

<script>
    // FUNGSI CEKAP AJAX UNTUK JANA PROFIL PSIKOMETRIK AI (AUTO)
    function janaProfilKognitifAI() {
        const boxContent = document.getElementById('box-kognitif-content');

        fetch("{% url 'bengkel:jana_profil_kognitif_ajax' uid=target_user.id %}", {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
                'Content-Type': 'application/json'
            }
        })
        .then(res => res.json())
        .then(data => {
            if(data.success) {
                // Gantikan animasi loading dengan hasil AI
                boxContent.innerHTML = `
                    <p class="text-sm text-slate-700 leading-relaxed animate-fade-up">
                        Berdasarkan data yang dikumpul, <strong>{{ target_user.get_full_name|default:target_user.username }}</strong> menunjukkan kecenderungan sebagai seorang <strong class="text-purple-700 text-base">${data.persona_ai}</strong>.
                    </p>
                    <p class="text-sm text-slate-600 leading-relaxed mt-2 italic border-l-4 border-purple-300 pl-3 animate-fade-up">
                        "${data.huraian_kognitif}"
                    </p>
                `;
            } else {
                // PAPARKAN ANIMASI T-REX MELOMPAT JIKA TIADA DATA KORPUS
                boxContent.innerHTML = `
                    <style>
                        @keyframes trexJump {
                            0% { transform: translateY(0); }
                            50% { transform: translateY(-15px); }
                            100% { transform: translateY(0); }
                        }
                        .animate-trex { animation: trexJump 0.8s cubic-bezier(0.28, 0.84, 0.42, 1) infinite; }
                    </style>
                    <div class="flex flex-col items-center justify-center bg-slate-50/50 p-6 rounded-2xl border border-dashed border-slate-300 mt-2 text-center h-full">
                        <div class="text-4xl text-slate-400 mb-3 animate-trex">
                            <i class="fas fa-dragon"></i>
                        </div>
                        <div class="w-16 h-1 bg-slate-200 rounded-[50%] mx-auto mb-4 opacity-50 shadow-[0_0_5px_rgba(0,0,0,0.1)]"></div>
                        <h4 class="text-xs font-black text-slate-600 uppercase tracking-widest mb-1">Enjin Data Terputus</h4>
                        <p class="text-[10px] text-slate-500 font-medium max-w-[250px] mx-auto leading-relaxed">
                            Minda AI tidak dapat berlari jauh. Korpus dokumen peserta ini belum mencukupi untuk menjana profil Psikometrik.
                        </p>
                    </div>
                `;
            }
        })
        .catch(err => {
            boxContent.innerHTML = `<p class="text-sm text-rose-500 italic"><i class="fas fa-wifi"></i> Ralat sambungan AI.</p>`;
        });
    }

    // Hanya render graf Radar jika kanvas itu wujud (bermakna ini adalah profil Peserta)
    window.onload = () => {
        
        // --- LOGIK BARU: AUTO-JANA JIKA KOSONG ---
        {% if not profile.persona_ai and target_user.id %}
            // Hanya auto-run jika yang tengok ini adalah Tuan Punya Badan atau Penganjur
            {% if request.user.id == target_user.id or request.user.is_staff or request.user.is_superuser %}
                // Beri sikit masa (1 saat) supaya UI nampak lancar sebelum panggil AI
                setTimeout(() => {
                    janaProfilKognitifAI();
                }, 1000);
            {% endif %}
        {% endif %}

        // Render sentiasa (kosongkan data jika tiada)
        const canvasRadar = document.getElementById('grafKecenderungan');
        if (canvasRadar) {
            const ctx = canvasRadar.getContext('2d');
            
            // JIKA TIADA DATA, HANTARKAN ARRAY BERASASKAN 0 AGAR GRAF LUKIS PERSEGI KOSONG
            let labels = ['Klinikal', 'Polisi', 'Teknologi', 'Kewangan', 'Infrastruktur']; // Fallback labels
            let dataRadar = [0, 0, 0, 0, 0]; // Zero mapping
            
            {% if jumlah_dokumen > 0 and labels_radar and radar_json %}
                try {
                    labels = JSON.parse('{{ labels_radar|safe }}');
                    dataRadar = JSON.parse('{{ radar_json|safe }}');
                } catch(e) { console.error("Ralat parse JSON:", e); }
            {% endif %}

            new Chart(ctx, {
                type: 'radar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Fokus Perbincangan',
                        data: dataRadar,
                        backgroundColor: 'rgba(59, 130, 246, 0.15)', 
                        borderColor: '#3b82f6', 
                        pointBackgroundColor: '#2563eb',
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2,
                        borderWidth: 2,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        r: {
                            angleLines: { color: 'rgba(0,0,0,0.1)' },
                            grid: { color: 'rgba(0,0,0,0.1)' },
                            pointLabels: { font: { size: 10, weight: 'bold' }, color: '#475569' },
                            // TRICK PENTING: suggestedMax memaksa graf kembang ke skala min 10
                            // walaupun data yang masuk hanyalah 0 atau 1.
                            suggestedMin: 0,
                            suggestedMax: Math.max(10, ...dataRadar),
                            ticks: { display: false } 
                        }
                    }
                }
            });
        }
    };
</script>
{% endblock %}