{% extends "base.html" %}
{% load i18n %}
{% load bengkel_tags %}

{% block title %}{% trans "SPAF Task Hub" %} — {{ 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">Hab Tugasan SPAF</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 items-center justify-between">
            <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-lg font-black text-white tracking-wide">{{ user.get_full_name|default:user.username }}</h1>
                        <p class="text-indigo-200 text-[10px] font-medium uppercase tracking-widest">SME Workspace • {{ bengkel.title }}</p>
                    </div>
                </div>
            </div>
            <div class="flex items-center gap-6">
                <div class="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">{% kira_skor_peserta request.user bengkel %} <span class="text-sm text-white/50">pts</span></div>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white border border-slate-200 rounded-2xl px-8 py-7 mb-8 shadow-sm">
        <div class="flex flex-wrap justify-between items-center gap-4">
            <div>
                <div class="inline-flex items-center gap-1.5 bg-rose-50 border border-rose-200 text-rose-600 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-3">
                    <i class="fas fa-exclamation-triangle"></i> Node 2: Rangka Kerja Analitikal
                </div>
                <h2 class="text-2xl md:text-3xl font-black text-slate-800 leading-tight">Hab Tugasan SPAF</h2>
                <p class="text-slate-500 text-sm mt-1">Berikan input operasi anda di sini. AI akan memproses data anda untuk merangka strategi teras.</p>
            </div>
            <div class="bg-slate-50 border border-slate-200 text-slate-600 text-xs font-bold px-4 py-2.5 rounded-xl flex items-center">
                {% if not bengkel.is_locked %}
                Kadar Penyelesaian: <span class="text-emerald-600 ml-2">0 / 6 Tugasan</span>
                {% else %}
                Status Hab SPAF: <span class="text-rose-600 ml-2"><i class="fas fa-archive"></i> Diarkibkan (View Only)</span>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-10 relative">
        
        <div class="relative step-connector group cursor-pointer" onclick="window.location.href='{% url 'bengkel:peserta_painpoint' pk=bengkel.pk %}'">
            <div class="bg-white border-2 border-rose-200 rounded-2xl p-6 shadow-sm hover:shadow-xl hover:-translate-y-1 hover:border-rose-400 transition-all duration-300 h-full flex flex-col">
                <div class="flex justify-between items-start mb-4">
                    <div class="w-12 h-12 bg-rose-100 text-rose-600 rounded-full flex items-center justify-center text-xl font-black shadow-inner group-hover:bg-rose-500 group-hover:text-white transition-colors">1</div>
                    {% if not bengkel.is_locked %}
                    <span class="bg-emerald-100 text-emerald-700 border border-emerald-200 text-[9px] font-bold px-2 py-1 rounded uppercase tracking-wider animate-pulse"><i class="fas fa-unlock mr-1"></i> Dibuka</span>
                    {% else %}
                    <span class="bg-rose-100 text-rose-700 border border-rose-200 text-[9px] font-bold px-2 py-1 rounded uppercase tracking-wider"><i class="fas fa-lock mr-1"></i> Mod Bacaan</span>
                    {% endif %}
                </div>
                <h3 class="font-black text-lg text-slate-800 mb-2">Input Masalah (Pain Points)</h3>
                <p class="text-xs text-slate-500 leading-relaxed mb-4 flex-1">Logkan kekecewaan operasi harian dan halangan aliran kerja anda di sini.</p>
                <button class="w-full bg-rose-600 text-white text-xs font-bold py-2.5 rounded-xl shadow-sm hover:bg-rose-700 transition-colors">Mula Tugasan <i class="fas fa-arrow-right ml-1"></i></button>
            </div>
        </div>

        <div class="relative step-connector group {% if bengkel.spaf_current_step >= 2 %}cursor-pointer{% else %}cursor-not-allowed opacity-70{% endif %}" 
             {% if bengkel.spaf_current_step >= 2 %}onclick="window.location.href='{% url 'bengkel:peserta_problem' pk=bengkel.pk %}'"{% endif %}>
            <div class="bg-white border-2 {% if bengkel.spaf_current_step >= 2 %}border-purple-200 hover:shadow-xl hover:-translate-y-1 hover:border-purple-400{% else %}border-slate-200{% endif %} rounded-2xl p-6 shadow-sm transition-all duration-300 h-full flex flex-col">
                <div class="flex justify-between items-start mb-4">
                    <div class="w-12 h-12 {% if bengkel.spaf_current_step >= 2 %}bg-purple-100 text-purple-600 group-hover:bg-purple-500 group-hover:text-white{% else %}bg-slate-100 text-slate-400{% endif %} rounded-full flex items-center justify-center text-xl font-black shadow-inner transition-colors">2</div>
                    {% if bengkel.spaf_current_step >= 2 %}
                        <span class="bg-emerald-100 text-emerald-700 border border-emerald-200 text-[9px] font-bold px-2 py-1 rounded uppercase tracking-wider animate-pulse"><i class="fas fa-unlock mr-1"></i> Dibuka</span>
                    {% else %}
                        <span class="bg-slate-100 text-slate-500 border border-slate-200 text-[9px] font-bold px-2 py-1 rounded uppercase tracking-wider"><i class="fas fa-lock mr-1"></i> Terkunci</span>
                    {% endif %}
                </div>
                <h3 class="font-black text-lg {% if bengkel.spaf_current_step >= 2 %}text-slate-800{% else %}text-slate-500{% endif %} mb-2">Pernyataan Masalah</h3>
                <p class="text-xs text-slate-500 leading-relaxed mb-4 flex-1">Semak dan sokong pernyataan masalah utama yang dirangka oleh AI.</p>
                {% if bengkel.spaf_current_step >= 2 %}
                    <button class="w-full bg-purple-600 text-white text-xs font-bold py-2.5 rounded-xl shadow-sm hover:bg-purple-700 transition-colors">Mula Tugasan <i class="fas fa-arrow-right ml-1"></i></button>
                {% else %}
                    <button disabled class="w-full bg-slate-100 text-slate-400 text-xs font-bold py-2.5 rounded-xl border border-slate-200 cursor-not-allowed"><i class="fas fa-lock mr-1"></i> Menunggu Penganjur</button>
                {% endif %}
            </div>
        </div>

        <div class="relative step-connector group {% if bengkel.spaf_current_step >= 3 %}cursor-pointer{% else %}cursor-not-allowed opacity-70{% endif %}" 
             {% if bengkel.spaf_current_step >= 3 %}onclick="window.location.href='{% url 'bengkel:peserta_situational' pk=bengkel.pk %}'"{% endif %}>
            <div class="bg-white border-2 {% if bengkel.spaf_current_step >= 3 %}border-blue-200 hover:shadow-xl hover:-translate-y-1 hover:border-blue-400{% else %}border-slate-200{% endif %} rounded-2xl p-6 shadow-sm transition-all duration-300 h-full flex flex-col">
                <div class="flex justify-between items-start mb-4">
                    <div class="w-12 h-12 {% if bengkel.spaf_current_step >= 3 %}bg-blue-100 text-blue-600 group-hover:bg-blue-500 group-hover:text-white{% else %}bg-slate-100 text-slate-400{% endif %} rounded-full flex items-center justify-center text-xl font-black shadow-inner transition-colors">3</div>
                    {% if bengkel.spaf_current_step >= 3 %}
                        {% if not bengkel.is_locked %}
                        <span class="bg-emerald-100 text-emerald-700 border border-emerald-200 text-[9px] font-bold px-2 py-1 rounded uppercase tracking-wider animate-pulse"><i class="fas fa-unlock mr-1"></i> Dibuka</span>
                        {% else %}
                        <span class="bg-rose-100 text-rose-700 border border-rose-200 text-[9px] font-bold px-2 py-1 rounded uppercase tracking-wider"><i class="fas fa-lock mr-1"></i> Mod Bacaan</span>
                        {% endif %}
                    {% else %}
                        <span class="bg-slate-100 text-slate-500 border border-slate-200 text-[9px] font-bold px-2 py-1 rounded uppercase tracking-wider"><i class="fas fa-lock mr-1"></i> Terkunci</span>
                    {% endif %}
                </div>
                <h3 class="font-black text-lg {% if bengkel.spaf_current_step >= 3 %}text-slate-800{% else %}text-slate-500{% endif %} mb-2">Analisis Situasi</h3>
                <p class="text-xs text-slate-500 leading-relaxed mb-4 flex-1">Lakukan imbasan persekitaran menggunakan SWOT untuk agensi anda.</p>
                {% if bengkel.spaf_current_step >= 3 %}
                    <button class="w-full bg-blue-600 text-white text-xs font-bold py-2.5 rounded-xl shadow-sm hover:bg-blue-700 transition-colors">Mula Tugasan <i class="fas fa-arrow-right ml-1"></i></button>
                {% else %}
                    <button disabled class="w-full bg-slate-100 text-slate-400 text-xs font-bold py-2.5 rounded-xl border border-slate-200 cursor-not-allowed"><i class="fas fa-lock mr-1"></i> Menunggu Penganjur</button>
                {% endif %}
            </div>
        </div>

        <div class="relative step-connector group {% if bengkel.spaf_current_step >= 4 %}cursor-pointer{% else %}cursor-not-allowed opacity-70{% endif %}" 
             {% if bengkel.spaf_current_step >= 4 %}onclick="window.location.href='{% url 'bengkel:peserta_rca' pk=bengkel.pk %}'"{% endif %}>
            <div class="bg-white border-2 {% if bengkel.spaf_current_step >= 4 %}border-amber-200 hover:shadow-xl hover:-translate-y-1 hover:border-amber-400{% else %}border-slate-200{% endif %} rounded-2xl p-6 shadow-sm transition-all duration-300 h-full flex flex-col ">
                <div class="flex justify-between items-start mb-4">
                    <div class="w-12 h-12 {% if bengkel.spaf_current_step >= 4 %}bg-amber-100 text-amber-600 group-hover:bg-amber-500 group-hover:text-white{% else %}bg-slate-100 text-slate-400{% endif %} rounded-full flex items-center justify-center text-xl font-black shadow-inner transition-colors">4</div>
                    {% if bengkel.spaf_current_step >= 4 %}
                        <span class="bg-emerald-100 text-emerald-700 border border-emerald-200 text-[9px] font-bold px-2 py-1 rounded uppercase tracking-wider animate-pulse"><i class="fas fa-unlock mr-1"></i> Dibuka</span>
                    {% else %}
                        <span class="bg-slate-100 text-slate-500 border border-slate-200 text-[9px] font-bold px-2 py-1 rounded uppercase tracking-wider"><i class="fas fa-lock mr-1"></i> Terkunci</span>
                    {% endif %}
                </div>
                <h3 class="font-black text-lg {% if bengkel.spaf_current_step >= 4 %}text-slate-800{% else %}text-slate-500{% endif %} mb-2">Analisis Punca (RCA)</h3>
                <p class="text-xs text-slate-500 leading-relaxed mb-4 flex-1">Gunakan kaedah 5-Why untuk mengesan punca masalah.</p>
                {% if bengkel.spaf_current_step >= 4 %}
                    <button class="w-full bg-amber-600 text-white text-xs font-bold py-2.5 rounded-xl shadow-sm hover:bg-amber-700 transition-colors">Mula Tugasan <i class="fas fa-arrow-right ml-1"></i></button>
                {% else %}
                    <button disabled class="w-full bg-slate-100 text-slate-400 text-xs font-bold py-2.5 rounded-xl border border-slate-200 cursor-not-allowed"><i class="fas fa-lock mr-1"></i> Menunggu Penganjur</button>
                {% endif %}
            </div>
        </div>

        <div class="relative step-connector group {% if bengkel.spaf_current_step >= 5 %}cursor-pointer{% else %}cursor-not-allowed opacity-70{% endif %}" 
             {% if bengkel.spaf_current_step >= 5 %}onclick="window.location.href='{% url 'bengkel:peserta_rca_validation' pk=bengkel.pk %}'"{% endif %}>
            <div class="bg-white border-2 {% if bengkel.spaf_current_step >= 5 %}border-emerald-200 hover:shadow-xl hover:-translate-y-1 hover:border-emerald-400{% else %}border-slate-200{% endif %} rounded-2xl p-6 shadow-sm transition-all duration-300 h-full flex flex-col ">
                <div class="flex justify-between items-start mb-4">
                    <div class="w-12 h-12 {% if bengkel.spaf_current_step >= 5 %}bg-emerald-100 text-emerald-600 group-hover:bg-emerald-500 group-hover:text-white{% else %}bg-slate-100 text-slate-400{% endif %} rounded-full flex items-center justify-center text-xl font-black shadow-inner transition-colors">5</div>
                    {% if bengkel.spaf_current_step >= 5 %}
                        <span class="bg-emerald-100 text-emerald-700 border border-emerald-200 text-[9px] font-bold px-2 py-1 rounded uppercase tracking-wider animate-pulse"><i class="fas fa-unlock mr-1"></i> Dibuka</span>
                    {% else %}
                        <span class="bg-slate-100 text-slate-500 border border-slate-200 text-[9px] font-bold px-2 py-1 rounded uppercase tracking-wider"><i class="fas fa-lock mr-1"></i> Terkunci</span>
                    {% endif %}
                </div>
                <h3 class="font-black text-lg {% if bengkel.spaf_current_step >= 5 %}text-slate-800{% else %}text-slate-500{% endif %} mb-2 leading-tight">Pengesahan Punca</h3>
                <p class="text-xs text-slate-500 leading-relaxed mb-4 flex-1">Semak keputusan AI dan sahkan ketepatannya berdasarkan realiti.</p>
                {% if bengkel.spaf_current_step >= 5 %}
                    <button class="w-full bg-emerald-600 text-white text-xs font-bold py-2.5 rounded-xl shadow-sm hover:bg-emerald-700 transition-colors">Mula Tugasan <i class="fas fa-arrow-right ml-1"></i></button>
                {% else %}
                    <button disabled class="w-full bg-slate-100 text-slate-400 text-xs font-bold py-2.5 rounded-xl border border-slate-200 cursor-not-allowed"><i class="fas fa-lock mr-1"></i> Menunggu Penganjur</button>
                {% endif %}
            </div>
        </div>

        <div class="relative group {% if bengkel.spaf_current_step >= 6 %}cursor-pointer{% else %}cursor-not-allowed opacity-70{% endif %}" 
             {% if bengkel.spaf_current_step >= 6 %}onclick="window.location.href='{% url 'bengkel:peserta_risk' pk=bengkel.pk %}'"{% endif %}>
            <div class="bg-white border-2 {% if bengkel.spaf_current_step >= 6 %}border-red-200 hover:shadow-xl hover:-translate-y-1 hover:border-red-400{% else %}border-slate-200{% endif %} rounded-2xl p-6 shadow-sm transition-all duration-300 h-full flex flex-col ">
                <div class="flex justify-between items-start mb-4">
                    <div class="w-12 h-12 {% if bengkel.spaf_current_step >= 6 %}bg-red-100 text-red-600 group-hover:bg-red-500 group-hover:text-white{% else %}bg-slate-100 text-slate-400{% endif %} rounded-full flex items-center justify-center text-xl font-black shadow-inner transition-colors">6</div>
                    {% if bengkel.spaf_current_step >= 6 %}
                        <span class="bg-emerald-100 text-emerald-700 border border-emerald-200 text-[9px] font-bold px-2 py-1 rounded uppercase tracking-wider animate-pulse"><i class="fas fa-unlock mr-1"></i> Dibuka</span>
                    {% else %}
                        <span class="bg-slate-100 text-slate-500 border border-slate-200 text-[9px] font-bold px-2 py-1 rounded uppercase tracking-wider"><i class="fas fa-lock mr-1"></i> Terkunci</span>
                    {% endif %}
                </div>
                <h3 class="font-black text-lg {% if bengkel.spaf_current_step >= 6 %}text-slate-800{% else %}text-slate-500{% endif %} mb-2">Penilaian Risiko</h3>
                <p class="text-xs text-slate-500 leading-relaxed mb-4 flex-1">Nilai risiko yang diunjur AI dan cadang strategi mitigasi.</p>
                {% if bengkel.spaf_current_step >= 6 %}
                    <button class="w-full bg-red-600 text-white text-xs font-bold py-2.5 rounded-xl shadow-sm hover:bg-red-700 transition-colors">Mula Tugasan <i class="fas fa-arrow-right ml-1"></i></button>
                {% else %}
                    <button disabled class="w-full bg-slate-100 text-slate-400 text-xs font-bold py-2.5 rounded-xl border border-slate-200 cursor-not-allowed"><i class="fas fa-lock mr-1"></i> Menunggu Penganjur</button>
                {% endif %}
            </div>
        </div>

    </div>
</div>
{% endblock %}