{% extends "admin/base_site.html" %}
{% load i18n %}

{% block title %}Upload em Massa — Galeria{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">Início</a> ›
    <a href="{% url 'admin:core_galeria_changelist' %}">Galerias</a> ›
    Upload em massa
</div>
{% endblock %}

{% block content %}
<style>
    .bulk-container { max-width: 800px; margin: 0 auto; padding: 30px 20px; }
    .bulk-title { font-size: 24px; font-weight: 700; color: #1A1A2E; margin-bottom: 8px; }
    .bulk-subtitle { color: #666; margin-bottom: 32px; font-size: 14px; }
    .gallery-select { width: 100%; padding: 10px 14px; border: 2px solid #E8336A33; border-radius: 10px; font-size: 14px; margin-bottom: 24px; background: #FDF2F5; }
    .gallery-select:focus { border-color: #E8336A; outline: none; }
    .drop-zone {
        border: 2px dashed #E8336A55; border-radius: 16px;
        padding: 48px 24px; text-align: center;
        background: linear-gradient(135deg, #FDF2F5 0%, #FBE8ED 100%);
        cursor: pointer; transition: all 0.3s ease; margin-bottom: 20px;
    }
    .drop-zone:hover, .drop-zone.dragover {
        border-color: #E8336A; background: linear-gradient(135deg, #FBE8ED 0%, #F8C8DC 100%);
        transform: translateY(-2px); box-shadow: 0 8px 30px rgba(232,51,106,0.12);
    }
    .drop-zone-icon { font-size: 48px; margin-bottom: 12px; }
    .drop-zone-text { font-size: 16px; font-weight: 600; color: #1A1A2E; margin-bottom: 4px; }
    .drop-zone-hint { font-size: 12px; color: #999; }
    .drop-zone input[type="file"] { display: none; }
    .file-section { margin-bottom: 28px; }
    .file-section h3 { font-size: 15px; font-weight: 600; color: #1A1A2E; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
    .file-section h3 .badge { background: #E8336A; color: white; padding: 2px 10px; border-radius: 20px; font-size: 12px; }
    .preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
    .preview-item {
        position: relative; border-radius: 10px; overflow: hidden;
        aspect-ratio: 1; background: #f5f5f5; border: 2px solid #eee;
    }
    .preview-item img, .preview-item video { width: 100%; height: 100%; object-fit: cover; }
    .preview-item .remove-btn {
        position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
        background: rgba(220,38,38,0.85); color: white; border: none; border-radius: 50%;
        cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center;
    }
    .preview-item .file-name {
        position: absolute; bottom: 0; left: 0; right: 0;
        background: rgba(0,0,0,0.6); color: white; font-size: 9px;
        padding: 3px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .preview-item.is-video::after {
        content: '▶'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
        width: 32px; height: 32px; background: rgba(232,51,106,0.85); border-radius: 50%;
        display: flex; align-items: center; justify-content: center; color: white;
        font-size: 14px; pointer-events: none;
    }
    .submit-bar {
        display: flex; align-items: center; justify-content: space-between;
        padding: 20px 0; border-top: 1px solid #eee; margin-top: 12px;
    }
    .submit-bar .count { color: #666; font-size: 14px; }
    .btn-upload {
        background: linear-gradient(135deg, #E8336A 0%, #c02d5a 100%);
        color: white; border: none; padding: 12px 32px; border-radius: 30px;
        font-size: 15px; font-weight: 700; cursor: pointer;
        box-shadow: 0 4px 16px rgba(232,51,106,0.3); transition: all 0.3s ease;
    }
    .btn-upload:hover { box-shadow: 0 8px 24px rgba(232,51,106,0.45); transform: translateY(-2px); }
    .btn-upload:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
</style>

<div class="bulk-container">
    <p class="bulk-title">📸 Upload em Massa</p>
    <p class="bulk-subtitle">Selecione a galeria de destino e arraste múltiplas fotos e vídeos.</p>

    <form method="post" enctype="multipart/form-data" id="bulkForm">
        {% csrf_token %}

        <label style="font-weight:600; color:#1A1A2E; font-size:14px; margin-bottom:6px; display:block;">Galeria de destino</label>
        <select name="galeria" class="gallery-select" required>
            <option value="">-- Selecione uma galeria --</option>
            {% for g in galerias %}
            <option value="{{ g.pk }}">{{ g.nombre }}</option>
            {% endfor %}
        </select>

        <div class="file-section">
            <h3>🖼️ Fotos <span class="badge" id="imgCount">0</span></h3>
            <div class="drop-zone" id="dropImages" onclick="document.getElementById('inputImages').click()">
                <input type="file" id="inputImages" name="imagenes" accept="image/*" multiple>
                <div class="drop-zone-icon">🖼️</div>
                <p class="drop-zone-text">Arraste fotos aqui ou clique</p>
                <p class="drop-zone-hint">JPG, PNG, WebP — sem limite de quantidade</p>
            </div>
            <div class="preview-grid" id="previewImages"></div>
        </div>

        <div class="file-section">
            <h3>🎬 Vídeos <span class="badge" id="vidCount">0</span></h3>
            <div class="drop-zone" id="dropVideos" onclick="document.getElementById('inputVideos').click()">
                <input type="file" id="inputVideos" name="videos" accept="video/*" multiple>
                <div class="drop-zone-icon">🎬</div>
                <p class="drop-zone-text">Arraste vídeos aqui ou clique</p>
                <p class="drop-zone-hint">MP4, WebM, MOV</p>
            </div>
            <div class="preview-grid" id="previewVideos"></div>
        </div>

        <div class="submit-bar">
            <span class="count" id="totalCount">0 ficheiros selecionados</span>
            <button type="submit" class="btn-upload" id="btnSubmit" disabled>Enviar Tudo</button>
        </div>
    </form>
</div>

<script>
(function(){
    const inputImg = document.getElementById('inputImages');
    const inputVid = document.getElementById('inputVideos');
    const previewImg = document.getElementById('previewImages');
    const previewVid = document.getElementById('previewVideos');
    let imgFiles = new DataTransfer();
    let vidFiles = new DataTransfer();

    function setupDropZone(zone, input) {
        ['dragenter','dragover'].forEach(e => zone.addEventListener(e, ev => { ev.preventDefault(); zone.classList.add('dragover'); }));
        ['dragleave','drop'].forEach(e => zone.addEventListener(e, ev => { ev.preventDefault(); zone.classList.remove('dragover'); }));
        zone.addEventListener('drop', ev => {
            const files = ev.dataTransfer.files;
            const dt = input === inputImg ? imgFiles : vidFiles;
            for (const f of files) dt.items.add(f);
            input.files = dt.files;
            input.dispatchEvent(new Event('change'));
        });
    }
    setupDropZone(document.getElementById('dropImages'), inputImg);
    setupDropZone(document.getElementById('dropVideos'), inputVid);

    inputImg.addEventListener('change', () => {
        for (const f of inputImg.files) {
            if (!Array.from(imgFiles.files).some(x => x.name === f.name && x.size === f.size))
                imgFiles.items.add(f);
        }
        inputImg.files = imgFiles.files;
        renderPreviews(imgFiles, previewImg, 'image');
        updateCounts();
    });
    inputVid.addEventListener('change', () => {
        for (const f of inputVid.files) {
            if (!Array.from(vidFiles.files).some(x => x.name === f.name && x.size === f.size))
                vidFiles.items.add(f);
        }
        inputVid.files = vidFiles.files;
        renderPreviews(vidFiles, previewVid, 'video');
        updateCounts();
    });

    function renderPreviews(dt, container, type) {
        container.innerHTML = '';
        Array.from(dt.files).forEach((f, i) => {
            const div = document.createElement('div');
            div.className = 'preview-item' + (type === 'video' ? ' is-video' : '');
            const url = URL.createObjectURL(f);
            if (type === 'image') {
                div.innerHTML = '<img src="' + url + '">';
            } else {
                div.innerHTML = '<video src="' + url + '" muted></video>';
            }
            const btn = document.createElement('button');
            btn.className = 'remove-btn'; btn.type = 'button'; btn.textContent = '×';
            btn.onclick = () => removeFile(dt, i, type === 'image' ? inputImg : inputVid, container, type);
            div.appendChild(btn);
            const name = document.createElement('div');
            name.className = 'file-name'; name.textContent = f.name;
            div.appendChild(name);
            container.appendChild(div);
        });
    }

    function removeFile(dt, index, input, container, type) {
        const newDt = new DataTransfer();
        Array.from(dt.files).forEach((f, i) => { if (i !== index) newDt.items.add(f); });
        if (type === 'image') imgFiles = newDt; else vidFiles = newDt;
        input.files = newDt.files;
        renderPreviews(newDt, container, type);
        updateCounts();
    }

    function updateCounts() {
        const ic = imgFiles.files.length, vc = vidFiles.files.length, total = ic + vc;
        document.getElementById('imgCount').textContent = ic;
        document.getElementById('vidCount').textContent = vc;
        document.getElementById('totalCount').textContent = total + ' ficheiro' + (total !== 1 ? 's' : '') + ' selecionado' + (total !== 1 ? 's' : '');
        document.getElementById('btnSubmit').disabled = total === 0;
    }
})();
</script>
{% endblock %}