{% extends "base.html" %}

{% block title %}Admin Dashboard{% endblock %}

{% block body_class %}overflow-hidden{% endblock %}

{% block content %}
<div class="flex h-[calc(100vh-80px)]">
    <!-- Sidebar -->
    <aside class="w-80 terminal-bg border-r terminal-border flex flex-col p-8 bg-opacity-50 backdrop-blur-2xl">
        <nav class="flex-1 space-y-3">
            <a href="/admin" class="flex items-center gap-4 px-6 py-4 neon-bg text-black rounded-xl font-black transition-all text-xs uppercase tracking-widest">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 6h16M4 12h16M4 18h16"></path></svg>
                ROOT_DASHBOARD
            </a>
            <a href="/" class="flex items-center gap-4 px-6 py-4 text-zinc-500 hover:neon-text hover:bg-zinc-900/40 rounded-xl font-black transition-all border border-transparent hover:border-zinc-800 text-xs uppercase tracking-widest">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                PUBLIC_EXPLORER
            </a>
        </nav>

        <div class="pt-8 border-t border-zinc-900 mt-auto">
            <p class="text-[9px] font-black text-zinc-600 uppercase tracking-[0.4em] mb-4">SYSTEM_ENCLAVE</p>
            <div class="flex items-center gap-3">
                <div class="w-2 h-2 rounded-full neon-bg animate-pulse"></div>
                <span class="text-[10px] font-black text-zinc-400">DAEMON_ACTIVE</span>
            </div>
        </div>
    </aside>

    <!-- Main Content -->
    <main class="flex-1 overflow-y-auto p-12 bg-black/20">
        <header class="flex justify-between items-end mb-12">
            <div>
                <div class="flex items-center gap-2 mb-3 text-zinc-600">
                    <span class="text-[10px] font-black uppercase tracking-widest">ENCLAVE_ROOT</span>
                    <span class="text-zinc-800">/</span>
                    <span class="text-[10px] font-black uppercase tracking-widest text-zinc-500">ANALYTICS</span>
                </div>
                <h1 class="text-4xl font-black tracking-tighter text-white">System_Overview</h1>
            </div>
            <button onclick="location.reload()" class="p-3 bg-zinc-900 border terminal-border rounded-xl text-zinc-500 hover:neon-text hover:neon-border transition-all">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
            </button>
        </header>

        <!-- Stats Grid -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
            <div class="p-8 rounded-2xl bg-zinc-900/30 border-2 terminal-border group hover:neon-border-hover transition-all duration-500">
                <p class="text-[9px] font-black text-zinc-500 uppercase tracking-[0.3em] mb-6">REGISTRY_CAPACITY</p>
                <div class="flex items-end justify-between">
                    <span class="text-5xl font-black text-white group-hover:neon-text transition-all leading-none">{{ stats.total_templates }}</span>
                    <span class="text-[10px] font-black text-zinc-700 tracking-widest">NODES</span>
                </div>
            </div>
            <div class="p-8 rounded-2xl bg-zinc-900/30 border-2 terminal-border group hover:neon-border-hover transition-all duration-500">
                <p class="text-[9px] font-black text-zinc-500 uppercase tracking-[0.3em] mb-6">INGRESS_TRAFFIC</p>
                <div class="flex items-end justify-between">
                    <span class="text-5xl font-black text-white group-hover:neon-text transition-all leading-none">{{ stats.total_clones }}</span>
                    <span class="text-[10px] font-black text-zinc-700 tracking-widest">PUSHES</span>
                </div>
            </div>
            <div class="p-8 rounded-2xl bg-zinc-900/30 border-2 terminal-border group hover:neon-border-hover transition-all duration-500">
                <p class="text-[9px] font-black text-zinc-500 uppercase tracking-[0.3em] mb-6">INTEGRITY_CHECK</p>
                <div class="flex items-end justify-between">
                    <span class="text-5xl font-black text-white group-hover:neon-text transition-all leading-none">100%</span>
                    <span class="text-[10px] font-black text-emerald-500 tracking-widest">STABLE</span>
                </div>
            </div>
        </div>

        <!-- Drag and Drop Upload Zone -->
        <div class="mb-16">
            <h2 class="text-[10px] font-black text-white uppercase tracking-[0.4em] mb-6">Direct Template Upload</h2>
            <div id="drop-zone" class="border-2 border-dashed terminal-border rounded-2xl p-16 text-center transition-all bg-zinc-900/10 cursor-pointer hover:bg-zinc-900/20 hover:border-zinc-700">
                <div class="w-16 h-16 bg-zinc-900 border-2 terminal-border rounded-2xl flex items-center justify-center mx-auto mb-6 transition-all group-hover:neon-border drop-icon-container">
                    <svg class="h-8 w-8 text-zinc-600 transition-colors drop-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                    </svg>
                </div>
                <p class="text-sm text-zinc-400 font-bold tracking-tight">Drag & Drop <span class="text-white">data.tar.gz</span> archive here</p>
                <p class="text-[10px] font-black text-zinc-700 mt-3 uppercase tracking-widest">Payload must contain a valid .nptmpl descriptor</p>
                <input type="file" id="file-input" class="hidden" accept=".tar.gz,.tgz">
            </div>
            <!-- Upload Progress -->
            <div id="upload-progress" class="hidden mt-6">
                <div class="flex justify-between text-[10px] font-black text-zinc-500 uppercase tracking-widest mb-3 px-2">
                    <span id="upload-filename">TRANSMITTING_DATA...</span>
                    <span id="upload-percentage">0%</span>
                </div>
                <div class="w-full bg-zinc-950 border-2 terminal-border rounded-full h-3 overflow-hidden">
                    <div id="progress-bar" class="neon-bg h-full rounded-full transition-all duration-300" style="width: 0%"></div>
                </div>
            </div>
        </div>

        <!-- Table -->
        <div class="bg-black/60 border-2 terminal-border rounded-2xl overflow-hidden shadow-2xl">
            <table class="w-full text-left">
                <thead>
                    <tr class="bg-zinc-900/40 border-b-2 terminal-border">
                        <th class="px-10 py-6 text-[10px] font-black text-zinc-500 uppercase tracking-[0.2em]">IDENTIFIER</th>
                        <th class="px-10 py-6 text-[10px] font-black text-zinc-500 uppercase tracking-[0.2em]">RELEASE</th>
                        <th class="px-10 py-6 text-[10px] font-black text-zinc-500 uppercase tracking-[0.2em] text-center">TRAFFIC</th>
                        <th class="px-10 py-6 text-[10px] font-black text-zinc-500 uppercase tracking-[0.2em] text-right">OPERATIONS</th>
                    </tr>
                </thead>
                <tbody class="divide-y terminal-border font-medium">
                    {% for t in templates %}
                    <tr class="hover:bg-zinc-900/30 transition-all group">
                        <td class="px-10 py-7">
                            <div class="flex items-center gap-4">
                                <span class="text-zinc-800 font-black">$</span>
                                <span class="font-black text-zinc-300 group-hover:text-white transition-colors tracking-tight">{{ t.group_name }}/{{ t.name }}</span>
                            </div>
                        </td>
                        <td class="px-10 py-7">
                            <span class="text-[10px] font-black text-white px-3 py-1 rounded-lg border-2 terminal-border group-hover:neon-border transition-all">V{{ t.version }}</span>
                        </td>
                        <td class="px-10 py-7 text-center">
                            <span class="text-xs font-black text-zinc-400 group-hover:text-{{ site_meta.theme_color }} transition-colors tracking-widest">{{ t.download_count }}↓</span>
                        </td>
                        <td class="px-10 py-7 text-right">
                            <button onclick="openDeleteModal('{{ t.group_name }}', '{{ t.name }}', '{{ t.version }}')" class="text-[10px] font-black text-red-900/60 uppercase tracking-[0.2em] hover:text-red-500 transition-all hover:glow underline-offset-8 decoration-red-900/20 hover:decoration-red-500 underline decoration-2">[PURGE_NODE]</button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </main>
</div>

<!-- Delete Modal -->
<div id="deleteModal" class="hidden fixed inset-0 z-[100] flex items-center justify-center p-6">
    <div class="absolute inset-0 bg-black/95 backdrop-blur-md" onclick="closeDeleteModal()"></div>
    <div class="relative bg-zinc-950 border-2 terminal-border rounded-3xl shadow-[0_0_50px_rgba(255,0,0,0.1)] w-full max-w-lg p-12">
        <h2 class="text-2xl font-black text-white mb-3 uppercase tracking-tighter">Confirm_Extraction_Purge</h2>
        <p class="text-[11px] text-zinc-500 mb-10 leading-relaxed font-medium uppercase tracking-widest">Authorization required to physically remove <span id="targetName" class="text-red-500 font-black"></span> and all associated dependencies from the registry node.</p>
        
        <div class="space-y-8">
            <div>
                <label class="text-[9px] font-black text-zinc-600 uppercase tracking-[0.4em] mb-4 block">IDENTITY_VERIFICATION_REQUIRED</label>
                <input type="text" id="confirmInput" oninput="checkInput()" placeholder="group/name" 
                       class="w-full bg-black border-2 terminal-border rounded-xl px-6 py-4 outline-none focus:border-red-500/60 transition-all font-black text-base text-red-500 tracking-tight">
            </div>
            
            <div class="flex gap-6 pt-4">
                <button onclick="closeDeleteModal()" class="flex-1 py-4 text-[11px] font-black text-zinc-600 hover:text-white uppercase tracking-widest transition-all">ABORT_CMD</button>
                <form id="deleteForm" method="POST" class="flex-1">
                    <button id="deleteBtn" disabled class="w-full py-4 bg-red-950/20 border-2 border-red-900/30 text-red-900/40 text-[11px] font-black opacity-30 cursor-not-allowed transition-all uppercase rounded-xl tracking-widest">COMMIT_PURGE</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Toast Notification Container -->
<div id="toast-container" class="fixed bottom-10 right-10 z-[200] flex flex-col gap-4"></div>
{% endblock %}

{% block extra_js %}
<script>
    // Delete Modal Logic
    let currentTarget = '';
    function openDeleteModal(group, name, version) {
        currentTarget = `${group}/${name}`;
        document.getElementById('targetName').textContent = currentTarget;
        document.getElementById('deleteForm').action = `/admin/delete/${group}/${name}/${version}`;
        document.getElementById('deleteModal').classList.remove('hidden');
        document.getElementById('confirmInput').focus();
    }
    function closeDeleteModal() {
        document.getElementById('deleteModal').classList.add('hidden');
        document.getElementById('confirmInput').value = '';
        document.getElementById('deleteBtn').disabled = true;
    }
    function checkInput() {
        const val = document.getElementById('confirmInput').value;
        const btn = document.getElementById('deleteBtn');
        if (val === currentTarget) {
            btn.disabled = false;
            btn.classList.remove('opacity-30', 'cursor-not-allowed', 'bg-red-950/20', 'text-red-900/40');
            btn.classList.add('bg-red-600', 'text-white', 'border-red-500', 'neon-border');
        } else {
            btn.disabled = true;
            btn.classList.add('opacity-30', 'cursor-not-allowed', 'bg-red-950/20', 'text-red-900/40');
            btn.classList.remove('bg-red-600', 'text-white', 'border-red-500', 'neon-border');
        }
    }

    // Drag and Drop Logic
    const dropZone = document.getElementById('drop-zone');
    const fileInput = document.getElementById('file-input');
    const dropIconContainer = dropZone.querySelector('.drop-icon-container');
    const progressContainer = document.getElementById('upload-progress');
    const progressBar = document.getElementById('progress-bar');
    const progressText = document.getElementById('upload-percentage');
    const filenameText = document.getElementById('upload-filename');

    // Prevent default drag behaviors
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, preventDefaults, false);
        document.body.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults (e) {
        e.preventDefault();
        e.stopPropagation();
    }

    // Highlight drop zone
    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.addEventListener(eventName, () => {
            dropZone.classList.add('dragover');
            dropIconContainer.classList.add('neon-border');
        }, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, () => {
            dropZone.classList.remove('dragover');
            dropIconContainer.classList.remove('neon-border');
        }, false);
    });

    // Handle dropped files
    dropZone.addEventListener('drop', handleDrop, false);
    dropZone.addEventListener('click', () => fileInput.click());
    fileInput.addEventListener('change', function() {
        if (this.files.length) handleFiles(this.files);
    });

    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        handleFiles(files);
    }

    function handleFiles(files) {
        if (files.length === 0) return;
        const file = files[0];
        
        if (!file.name.endsWith('.tar.gz') && !file.name.endsWith('.tgz')) {
            showToast('UNSUPPORTED_PAYLOAD_FORMAT', 'error');
            return;
        }

        uploadFile(file);
    }

    async function uploadFile(file) {
        filenameText.textContent = `TRANSMITTING: ${file.name.toUpperCase()}`;
        progressContainer.classList.remove('hidden');
        progressBar.style.width = '0%';
        progressText.textContent = '0%';

        const formData = new FormData();
        formData.append('tarball', file);

        try {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/admin/upload', true);
            
            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    const percentComplete = (e.loaded / e.total) * 100;
                    progressBar.style.width = percentComplete + '%';
                    progressText.textContent = Math.round(percentComplete) + '%';
                }
            };

            xhr.onload = function() {
                if (xhr.status === 200) {
                    showToast('TRANSMISSION_COMPLETE');
                    setTimeout(() => location.reload(), 1500);
                } else {
                    let errMsg = 'TRANSMISSION_FAILED';
                    try {
                        const res = JSON.parse(xhr.responseText);
                        errMsg = res.detail || errMsg;
                    } catch(e) {}
                    showToast(errMsg, 'error');
                    progressContainer.classList.add('hidden');
                }
            };

            xhr.onerror = function() {
                showToast('NETWORK_IO_ERROR', 'error');
                progressContainer.classList.add('hidden');
            };

            xhr.send(formData);

        } catch (error) {
            console.error(error);
            showToast('SYSTEM_FAULT', 'error');
            progressContainer.classList.add('hidden');
        }
    }
</script>
{% endblock %}