{% extends "admin/layout.html" %}

{% block content %}
<nav class="flex mb-6" aria-label="Breadcrumb">
    <ol role="list" class="flex items-center gap-x-2">
        <li><a href="{{ prefix }}/" class="text-gray-400 hover:text-gray-300"><svg class="size-5 shrink-0" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z" clip-rule="evenodd"/></svg><span class="sr-only">Dashboard</span></a></li>
        <li class="flex items-center gap-x-2"><svg class="size-5 shrink-0 text-gray-600" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"/></svg><span class="text-sm font-medium text-gray-400">Media</span></li>
    </ol>
</nav>

<div class="sm:flex sm:items-center mb-8">
    <div class="sm:flex-auto">
        <h1 class="text-base font-semibold text-white">Media Manager</h1>
        <p class="mt-1 text-sm text-gray-400">Upload and manage media files. Click any image to copy its URL.</p>
    </div>
    <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none flex items-center gap-x-3">
        <label id="upload-btn" for="media-file-input" class="cursor-pointer inline-flex items-center gap-x-1.5 rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400">
            <svg class="-ml-0.5 size-5" viewBox="0 0 20 20" fill="currentColor"><path d="M9.25 13.25a.75.75 0 001.5 0V4.636l2.955 3.129a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-1.09 0l-4.25 4.5a.75.75 0 101.09 1.03L9.25 4.636v8.614z"/><path d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z"/></svg>
            Upload
        </label>
        <input type="file" id="media-file-input" accept="image/jpeg,image/png,image/gif,image/webp,image/svg+xml" class="sr-only" multiple>
    </div>
</div>

<!-- Flash messages -->
<div id="media-flash" class="hidden mb-4"></div>

<!-- Upload progress -->
<div id="upload-progress" class="hidden mb-4">
    <div class="rounded-lg bg-indigo-500/10 ring-1 ring-inset ring-indigo-500/20 px-4 py-3 text-sm text-indigo-300 flex items-center gap-x-2">
        <svg class="animate-spin size-4 shrink-0" viewBox="0 0 24 24" fill="none"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
        <span id="upload-progress-text">Uploading…</span>
    </div>
</div>

<!-- Media grid -->
<div id="media-grid" class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
    <div id="media-empty" class="col-span-full hidden">
        <div class="text-center py-16">
            <svg class="mx-auto size-12 text-gray-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/></svg>
            <p class="mt-3 text-sm text-gray-500">No media uploaded yet.</p>
            <label for="media-file-input" class="mt-4 cursor-pointer inline-flex items-center gap-x-1.5 rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-400">Upload your first file</label>
        </div>
    </div>
    <div id="media-loading" class="col-span-full text-center py-16">
        <svg class="mx-auto animate-spin size-8 text-gray-500" viewBox="0 0 24 24" fill="none"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
    </div>
</div>

<!-- URL copy toast -->
<div id="copy-toast" class="fixed bottom-6 right-6 z-50 hidden rounded-lg bg-gray-800 px-4 py-2 text-sm text-white shadow-lg ring-1 ring-white/10">
    URL copied to clipboard
</div>

<style>
.media-card { position: relative; aspect-ratio: 1; background: rgba(255,255,255,.05); border-radius: .5rem; overflow: hidden; ring: 1px solid rgba(255,255,255,.1); cursor: pointer; group: true; }
.media-card:hover .media-overlay { opacity: 1; }
.media-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.65); opacity: 0; transition: opacity .15s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; }
.media-delete-btn { position: absolute; top: .375rem; right: .375rem; background: rgba(239,68,68,.8); border-radius: .25rem; padding: .2rem; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; z-index: 2; }
.media-card:hover .media-delete-btn { opacity: 1; }
</style>

<script>
(function() {
    var prefix = window._huntAdmin.prefix;
    var grid = document.getElementById('media-grid');
    var emptyEl = document.getElementById('media-empty');
    var loadingEl = document.getElementById('media-loading');
    var fileInput = document.getElementById('media-file-input');
    var progressEl = document.getElementById('upload-progress');
    var progressText = document.getElementById('upload-progress-text');
    var flashEl = document.getElementById('media-flash');
    var copyToast = document.getElementById('copy-toast');
    var toastTimer;

    function showToast(msg) {
        clearTimeout(toastTimer);
        copyToast.textContent = msg;
        copyToast.classList.remove('hidden');
        toastTimer = setTimeout(function() { copyToast.classList.add('hidden'); }, 2500);
    }

    function showFlash(msg, type) {
        var cls = type === 'error'
            ? 'rounded-lg bg-red-500/10 ring-1 ring-inset ring-red-500/20 px-4 py-3 text-sm text-red-300'
            : 'rounded-lg bg-green-500/10 ring-1 ring-inset ring-green-500/20 px-4 py-3 text-sm text-green-300';
        flashEl.className = cls;
        flashEl.textContent = msg;
        flashEl.classList.remove('hidden');
        setTimeout(function() { flashEl.classList.add('hidden'); }, 4000);
    }

    function formatSize(bytes) {
        if (bytes < 1024) return bytes + ' B';
        if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
        return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
    }

    function buildCard(file) {
        var card = document.createElement('div');
        card.className = 'media-card ring-1 ring-white/10';
        card.dataset.path = file.path;
        card.dataset.url = file.url;

        var img = document.createElement('img');
        img.src = file.url;
        img.alt = file.name;
        img.className = 'w-full h-full object-cover';
        img.onerror = function() {
            img.style.display = 'none';
            var ph = document.createElement('div');
            ph.className = 'w-full h-full flex items-center justify-center text-gray-500';
            ph.innerHTML = '<svg class="size-8" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/></svg>';
            card.appendChild(ph);
        };
        card.appendChild(img);

        var overlay = document.createElement('div');
        overlay.className = 'media-overlay';
        overlay.innerHTML = '<span class="text-xs text-white font-medium text-center px-2 break-all">' + file.name + '</span>' +
            '<span class="text-xs text-gray-300">' + formatSize(file.size) + '</span>' +
            '<span class="text-xs text-indigo-300">Click to copy URL</span>';
        card.appendChild(overlay);

        var delBtn = document.createElement('button');
        delBtn.type = 'button';
        delBtn.className = 'media-delete-btn';
        delBtn.title = 'Delete';
        delBtn.innerHTML = '<svg class="size-3.5 text-white" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z" clip-rule="evenodd"/></svg>';
        delBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            deleteFile(file.path, card);
        });
        card.appendChild(delBtn);

        card.addEventListener('click', function() {
            var cb = window._huntAdmin.mediaCallback;
            if (typeof cb === 'function') {
                cb(file.url, file.name);
            } else {
                navigator.clipboard.writeText(file.url).then(function() {
                    showToast('URL copied to clipboard');
                }).catch(function() {
                    showToast(file.url);
                });
            }
        });

        return card;
    }

    function loadFiles() {
        fetch(prefix + '/media/api')
            .then(function(r) { return r.json(); })
            .then(function(data) {
                loadingEl.classList.add('hidden');
                var cards = grid.querySelectorAll('.media-card');
                cards.forEach(function(c) { c.remove(); });
                if (!data.files || !data.files.length) {
                    emptyEl.classList.remove('hidden');
                } else {
                    emptyEl.classList.add('hidden');
                    data.files.forEach(function(f) {
                        grid.insertBefore(buildCard(f), emptyEl);
                    });
                }
            })
            .catch(function() {
                loadingEl.classList.add('hidden');
                showFlash('Failed to load media.', 'error');
            });
    }

    function deleteFile(path, card) {
        if (!confirm('Delete this file?')) return;
        fetch(prefix + '/media/delete', {
            method: 'POST',
            headers: {'Content-Type': 'application/x-www-form-urlencoded', 'X-CSRF-TOKEN': window._huntAdmin.csrfToken},
            body: 'path=' + encodeURIComponent(path)
        })
        .then(function(r) { return r.json(); })
        .then(function() {
            card.remove();
            var remaining = grid.querySelectorAll('.media-card');
            if (!remaining.length) emptyEl.classList.remove('hidden');
            showFlash('File deleted.', 'success');
        })
        .catch(function() { showFlash('Failed to delete file.', 'error'); });
    }

    function uploadFiles(files) {
        var queue = Array.from(files);
        var done = 0;

        function next() {
            if (!queue.length) {
                progressEl.classList.add('hidden');
                loadFiles();
                return;
            }
            var file = queue.shift();
            progressText.textContent = 'Uploading ' + file.name + '…';
            progressEl.classList.remove('hidden');

            var fd = new FormData();
            fd.append('file', file);
            fd.append('_token', window._huntAdmin.csrfToken);
            fetch(prefix + '/media/upload', {method: 'POST', body: fd})
                .then(function(r) {
                    if (!r.ok) return r.json().then(function(e) { throw new Error(e.error || 'Upload failed'); });
                    return r.json();
                })
                .then(function() { done++; next(); })
                .catch(function(err) { showFlash(err.message || 'Upload failed.', 'error'); next(); });
        }
        next();
    }

    fileInput.addEventListener('change', function() {
        if (fileInput.files.length) uploadFiles(fileInput.files);
        fileInput.value = '';
    });

    // Drag-and-drop on the grid
    var mainArea = document.querySelector('.lg\\:pl-72') || document.body;
    mainArea.addEventListener('dragover', function(e) { e.preventDefault(); });
    mainArea.addEventListener('drop', function(e) {
        e.preventDefault();
        if (e.dataTransfer.files.length) uploadFiles(e.dataTransfer.files);
    });

    loadFiles();
})();
</script>
{% endblock %}