{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Profil AI" %} — {{ target_user.get_full_name|default:target_user.username }}{% endblock %}

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

<div class="animate-fade-up pb-12">
    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden mb-8">
        <div class="h-24 md:h-32 bg-gradient-to-br from-[#0f172a] via-[#1e3a8a] to-[#134e4a] relative">
            <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>
        </div>
        <div class="px-6 pb-6 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-blue-600 text-white flex items-center justify-center shadow-lg text-4xl md:text-6xl font-black">
                {{ target_user.username|slice:":1"|upper }}
            </div>
            <div class="ml-28 md:ml-40 pt-4 flex flex-col md:flex-row md:justify-between md:items-end gap-4">
                <div>
                    <h2 class="text-2xl md:text-3xl font-black text-slate-800">{{ target_user.get_full_name|default:target_user.username }}</h2>
                    <div class="flex flex-wrap items-center gap-3 mt-2 text-sm text-slate-600">
                        <span class="font-medium"><i class="fas fa-building text-blue-500 mr-1"></i> {{ profile.organisasi|default:"Agensi Tidak Dinyatakan" }}</span>
                        <span class="text-slate-300 hidden md:inline">|</span>
                        <span class="font-medium"><i class="fas fa-id-badge text-emerald-500 mr-1"></i> {{ profile.jawatan|default:profile.jabatan|default:"Pakar Bidang (SME)" }}</span>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="bg-blue-50 border border-blue-100 rounded-lg p-2 text-center min-w-[100px]">
                        <div class="text-[10px] font-bold text-blue-600 uppercase tracking-widest">Skor Kualiti AI</div>
                        <div class="text-2xl font-black text-blue-800">{{ skor_kualiti }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
        <div class="lg:col-span-4 space-y-6">
            <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                <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"></i> Kecenderungan Input</h3>
                <div class="relative h-64 w-full"><canvas id="grafRadar"></canvas></div>
            </div>
        </div>

        <div class="lg:col-span-8 space-y-6">
            <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                <h3 class="font-black text-xl text-slate-800 mb-4 flex items-center"><i class="fas fa-stream text-blue-500 mr-2"></i> Rekod Penglibatan (Timeline)</h3>
                <div class="space-y-4">
                    {% for item in sejarah %}
                    <div class="flex items-center gap-4 p-4 border border-slate-100 rounded-xl hover:bg-slate-50 transition">
                        <div class="w-12 h-12 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center shrink-0">
                            <i class="fas fa-calendar-check"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <h4 class="font-bold text-slate-800 truncate">{{ item.bengkel.title }}</h4>
                            <p class="text-xs text-slate-500">{{ item.bengkel.tarikh|date:"d M Y" }} — Status: <span class="capitalize font-bold">{{ item.status }}</span></p>
                        </div>
                        <a href="{% url 'bengkel:portal_detail' pk=item.bengkel.pk %}" class="text-blue-500 hover:underline text-xs font-bold">Lihat Bengkel</a>
                    </div>
                    {% empty %}
                    <p class="text-center text-slate-400 py-8 italic">Tiada rekod bengkel setakat ini.</p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    window.onload = () => {
        new Chart(document.getElementById('grafRadar').getContext('2d'), {
            type: 'radar',
            data: {
                labels: JSON.parse('{{ labels_radar|safe }}'),
                datasets: [{
                    data: JSON.parse('{{ radar_json|safe }}'),
                    backgroundColor: 'rgba(59, 130, 246, 0.2)',
                    borderColor: '#3b82f6',
                    borderWidth: 2
                }]
            },
            options: { responsive: true, maintainAspectRatio: false, scales: { r: { ticks: { display: false } } } }
        });
    };
</script>
{% endblock %}