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

{% block title %}{% trans "Muat Naik Rujukan" %} — {{ 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 1: Muat Naik Rujukan</span>
{% endblock %}

{% block content %}
<style>
    .drag-active { border-color: #3b82f6 !important; background-color: #eff6ff !important; border-style: solid !important; }
</style>

<div class="animate-fade-up pb-12">
    <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 transition-all duration-500">{% kira_skor_peserta request.user bengkel %} <span class="text-sm text-white/50">pts</span></div>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-3xl shadow-sm border border-slate-200 p-6 md:p-8 flex flex-col md:flex-row items-center justify-between gap-6 relative overflow-hidden mb-8">
        <div class="absolute -right-6 -bottom-6 w-32 h-32 bg-blue-500 rounded-full mix-blend-multiply filter blur-2xl opacity-10"></div>
        <div>
            <div class="inline-flex items-center gap-1.5 bg-blue-50 border border-blue-200 text-blue-600 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-3">
                <i class="fas fa-database"></i> Node 1: Data Rujukan
            </div>
            <h2 class="text-2xl font-black text-slate-800">Pusat Muat Naik Pengetahuan</h2>
            <p class="text-sm text-slate-500 mt-2 leading-relaxed max-w-3xl">Untuk memastikan AI menjana dasar yang tepat, ia perlu belajar dari persekitaran anda. Sila muat naik SOP, draf awal, garis panduan, atau manual operasi yang berkaitan dari agensi anda.</p>
        </div>
        <div class="bg-slate-50 p-5 rounded-2xl border border-slate-200 text-center min-w-[150px] shadow-sm">
            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Jumlah Fail Anda</div>
            <div class="text-4xl font-black text-blue-600">{{ senarai_fail.count|default:"0" }}</div>
            <div class="text-[10px] text-slate-500 mt-1">Dokumen Diindeks</div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        
        <div class="lg:col-span-4 flex flex-col gap-6">
            <div class="bg-white rounded-3xl shadow-sm border border-slate-200 p-6">
                <h3 class="font-bold text-sm text-slate-800 mb-4 flex items-center"><i class="fas fa-cloud-upload-alt text-blue-500 mr-2"></i> Muat Naik Dokumen</h3>
                
                {% if not bengkel.is_locked %}
                <form method="POST" enctype="multipart/form-data" id="upload-form">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="upload_file">
                    
                    <div id="drop-zone" class="border-2 border-dashed border-slate-300 bg-slate-50 rounded-2xl p-8 text-center transition-all hover:bg-slate-100 cursor-pointer flex flex-col items-center justify-center relative overflow-hidden group">
                        <input type="file" name="files" id="file-input" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" multiple accept=".pdf,.doc,.docx,.xls,.xlsx,.txt" onchange="handleFileSelect(this)">
                        <div id="upload-content" class="relative z-0 flex flex-col items-center">
                            <i class="fas fa-file-upload text-4xl text-blue-400 group-hover:text-blue-500 mb-3 transition-colors"></i>
                            <p class="text-sm font-bold text-slate-700">Tarik & Lepaskan fail di sini</p>
                            
                            <!-- PERUBAHAN: Teks arahan berserta Tooltip Penjelasan -->
                            <div class="flex items-center justify-center gap-1.5 mt-1 mb-4 relative group/tooltip">
                                <p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Format: PDF, DOCX, XLSX, TXT</p>
                                <i class="fas fa-question-circle text-blue-400 cursor-help text-xs"></i>
                                
                                <!-- Tooltip Penerangan (Hidden by default, muncul bila hover) -->
                                <div class="absolute bottom-full mb-2 w-72 bg-slate-800 text-white text-[10px] p-3 rounded-lg shadow-xl opacity-0 group-hover/tooltip:opacity-100 transition-opacity duration-300 pointer-events-none z-50 text-left 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">
                                    <strong class="text-blue-300 block mb-1">Nota Format Fail:</strong>
                                    Fail <strong>PDF & Word</strong> adalah sangat disyorkan kerana Enjin AI NLP dapat membaca teks naratifnya dengan tepat. <br><br>Fail <strong>Excel (XLSX)</strong> dibenarkan sebagai lampiran data jadual, manakala fail imej (JPG/PNG) ditolak kerana ia tidak mengandungi korpus teks yang boleh dianalisis.
                                </div>
                            </div>
                            
                            <button type="button" class="bg-blue-600 text-white text-xs font-bold px-5 py-2.5 rounded-lg shadow-sm group-hover:bg-blue-700 transition">
                                Pilih Fail
                            </button>
                        </div>
                    </div>
                </form>
                {% else %}
                <div class="border-2 border-slate-200 bg-rose-50/50 rounded-2xl p-8 text-center flex flex-col items-center justify-center">
                    <i class="fas fa-lock text-3xl text-rose-500 mb-3"></i>
                    <p class="text-sm font-black text-rose-800">Fungsi Muat Naik Dikunci</p>
                    <p class="text-[10px] text-rose-600 mt-1">Acara telah ditamatkan oleh penganjur. Anda hanya dibenarkan melihat dokumen sedia ada sahaja.</p>
                </div>
                {% endif %}
            </div>
        </div>
        
        <div class="lg:col-span-8 bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden flex flex-col h-full">
            <form method="POST" id="batch-delete-form" action="">
                {% csrf_token %}
                <input type="hidden" id="form-action" name="action" value="delete_multiple">
                
                <div class="px-6 py-5 border-b border-slate-100 bg-slate-50 flex justify-between items-center">
                    <h3 class="font-bold text-sm text-slate-800 flex items-center"><i class="fas fa-history text-blue-500 mr-2"></i> Sejarah Muat Naik Saya</h3>
                    
                    {% if not bengkel.is_locked %}
                    <button type="submit" id="btn-batch-delete" class="hidden bg-rose-500 hover:bg-rose-600 text-white text-xs font-bold px-4 py-2 rounded-lg shadow-sm transition-all" onclick="return confirm('{% trans "Adakah anda pasti mahu memadam semua fail yang dipilih?" %}');">
                        <i class="fas fa-trash-alt mr-1.5"></i> {% trans "Padam Dipilih" %} (<span id="delete-count">0</span>)
                    </button>
                    {% endif %}
                </div>
                
                <div class="p-0 overflow-x-auto flex-1">
                    {% if senarai_fail %}
                    <table class="w-full text-left border-collapse whitespace-nowrap">
                        <thead>
                            <tr class="text-slate-400 text-[10px] uppercase tracking-widest border-b border-slate-100 bg-white">
                                <th class="py-3 pl-6 pr-2 w-10">
                                    <input type="checkbox" id="checkbox-all" class="w-4 h-4 text-blue-600 bg-slate-100 border-slate-300 rounded cursor-pointer accent-blue-600" onchange="toggleSelectAll(this)">
                                </th>
                                <th class="py-3 px-4 font-bold">Nama Dokumen</th>
                                <th class="py-3 px-6 font-bold text-center">Tarikh Muat Naik</th>
                                <th class="py-3 px-6 font-bold text-center">Tindakan</th>
                            </tr>
                        </thead>
                        <tbody class="text-sm divide-y divide-slate-50" id="file-table-body">
                            {% for fail in senarai_fail %}
                            <tr class="hover:bg-slate-50 transition-colors">
                                <td class="py-4 pl-6 pr-2">
                                    <input type="checkbox" name="file_ids" value="{{ fail.id }}" class="file-checkbox w-4 h-4 text-blue-600 bg-slate-100 border-slate-300 rounded cursor-pointer accent-blue-600" onchange="updateDeleteButton()">
                                </td>
                                <td class="py-4 px-4">
                                    <a href="{{ fail.file.url }}" target="_blank" class="flex items-center gap-3 text-slate-700 hover:text-blue-600 transition group">
                                        <div class="w-8 h-8 rounded-lg bg-blue-50 text-blue-500 flex items-center justify-center shrink-0 group-hover:bg-blue-100">
                                            <!-- Tukar ikon dinamik mengikut format fail -->
                                            {% if '.pdf' in fail.original_name|lower %}<i class="fas fa-file-pdf text-rose-500"></i>
                                            {% elif '.doc' in fail.original_name|lower %}<i class="fas fa-file-word text-blue-500"></i>
                                            {% elif '.xls' in fail.original_name|lower %}<i class="fas fa-file-excel text-emerald-500"></i>
                                            {% else %}<i class="fas fa-file-alt text-slate-500"></i>{% endif %}
                                        </div>
                                        <div class="flex flex-col min-w-0">
                                            <span class="font-bold text-sm truncate max-w-[250px] text-slate-700 group-hover:text-blue-600 transition-colors">{{ fail.original_name }}</span>
                                            
                                            <!-- PETA STATUS INTEGRITI FAIL (ANTI-PLAGIAT & ANTI-SAMPAH) -->
                                            <div class="flex flex-wrap gap-1.5 mt-1">
                                                {% if fail.is_duplicate %}
                                                    <!-- Lencana Amaran Plagiat -->
                                                    <span class="inline-flex items-center gap-1 bg-rose-50 text-rose-700 text-[10px] font-bold px-2 py-0.5 rounded border border-rose-200">
                                                        <i class="fas fa-exclamation-triangle text-[9px]"></i> {% trans "Plagiat: 0 pts" %}
                                                    </span>
                                                {% elif fail.skor_novelty == 0.0 and fail.skor_relevansi == 0.0 %}
                                                    <!-- Lencana Menunggu Analisis AI -->
                                                    <span class="inline-flex items-center gap-1 bg-amber-50 text-amber-700 text-[10px] font-bold px-2 py-0.5 rounded border border-amber-200 animate-pulse">
                                                        <i class="fas fa-spinner fa-spin text-[9px]"></i> {% trans "Memproses AI..." %}
                                                    </span>
                                                {% elif fail.skor_relevansi == 0.0 %}
                                                    <!-- Lencana Fail Tidak Relevan / Sampah -->
                                                    <span class="inline-flex items-center gap-1 bg-slate-100 text-slate-600 text-[10px] font-bold px-2 py-0.5 rounded border border-slate-200">
                                                        <i class="fas fa-trash-alt text-[9px]"></i> {% trans "Tidak Relevan: 0 pts" %}
                                                    </span>
                                                {% else %}
                                                    <!-- Lencana Kualiti Relevansi Berjaya -->
                                                    <span class="inline-flex items-center gap-1 bg-emerald-50 text-emerald-700 text-[10px] font-bold px-2 py-0.5 rounded border border-emerald-200">
                                                        <i class="fas fa-bullseye text-[9px]"></i> {% trans "Relevansi:" %} {{ fail.skor_relevansi|floatformat:0 }}/10
                                                    </span>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </a>
                                </td>
                                <td class="py-4 px-6 text-center text-xs text-slate-500">
                                    {{ fail.uploaded_at|date:"d M Y, H:i" }}
                                </td>
                                <td class="py-4 px-6 text-center">
                                    {% if not bengkel.is_locked %}
                                    <button type="button" onclick="deleteSingleFile({{ fail.id }})" class="w-8 h-8 rounded-lg bg-white border border-rose-200 text-rose-400 hover:text-white hover:bg-rose-500 inline-flex items-center justify-center transition-all shadow-sm" title="Padam Fail">
                                        <i class="fas fa-trash-alt text-xs"></i>
                                    </button>
                                    {% else %}
                                    <span class="text-slate-400 text-xs italic"><i class="fas fa-ban"></i> Tiada Tindakan</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% else %}
                    <div class="text-center py-16 px-4">
                        <div class="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4 border border-slate-100 shadow-inner">
                            <i class="fas fa-box-open text-3xl text-slate-300"></i>
                        </div>
                        <h4 class="font-bold text-slate-700 text-base mb-1">Belum ada dokumen diindeks</h4>
                        <p class="text-xs text-slate-500">Ruangan ini akan memaparkan jadual fail yang anda muat naik.</p>
                    </div>
                    {% endif %}
                </div>
            </form>
        </div>

    </div>
</div>

<script>
    // JS Logic untuk Auto-Submit Form lepas Drag & Drop
    const dropZone = document.getElementById('drop-zone');
    const fileInput = document.getElementById('file-input');
    const formUpload = document.getElementById('upload-form');
    const uploadContent = document.getElementById('upload-content');

    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.addEventListener(eventName, (e) => {
            e.preventDefault(); dropZone.classList.add('drag-active');
        }, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, (e) => {
            e.preventDefault(); dropZone.classList.remove('drag-active');
        }, false);
    });

    function handleFileSelect(input) {
        if (input.files && input.files.length > 0) {
            uploadContent.innerHTML = `
                <i class="fas fa-spinner fa-spin text-4xl text-blue-500 mb-3"></i>
                <p class="text-sm font-bold text-blue-600">Sedang memuat naik...</p>
                <p class="text-[10px] text-slate-500 mt-1">Sila tunggu sebentar.</p>
            `;
            formUpload.submit();
        }
    }

    // JS Logic untuk Batch Delete
    function toggleSelectAll(selectAllCheckbox) {
        const checkboxes = document.querySelectorAll('.file-checkbox');
        checkboxes.forEach(checkbox => { checkbox.checked = selectAllCheckbox.checked; });
        updateDeleteButton();
    }

    function updateDeleteButton() {
        const checkboxes = document.querySelectorAll('.file-checkbox');
        const checkedCount = document.querySelectorAll('.file-checkbox:checked').length;
        const btnDelete = document.getElementById('btn-batch-delete');
        const countSpan = document.getElementById('delete-count');
        const selectAllCheckbox = document.getElementById('checkbox-all');

        if(countSpan) countSpan.innerText = checkedCount;
        if (checkedCount > 0) { btnDelete.classList.remove('hidden'); } 
        else { btnDelete.classList.add('hidden'); }

        if(selectAllCheckbox) { selectAllCheckbox.checked = (checkboxes.length > 0 && checkedCount === checkboxes.length); }
    }

    // JS Logic untuk Single Delete tanpa mengganggu form
    function deleteSingleFile(fileId) {
        if(confirm('{% trans "Adakah anda pasti mahu memadam fail ini?" %}')) {
            const form = document.getElementById('batch-delete-form');
            document.getElementById('form-action').value = 'delete_file';
            
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'file_id';
            input.value = fileId;
            form.appendChild(input);
            form.submit();
        }
    }
</script>
{% endblock %}