{% extends "base.html" %}
{% block title %}Dépôt de documents{% endblock %}

{% block extra_css %}
<style>
    .file-upload-area {
        border: 2px dashed #ced4da;
        border-radius: 0.375rem;
        padding: 1rem;
        text-align: center;
        margin-bottom: 1rem;
        transition: all 0.2s;
        background-color: #f8f9fa;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    .file-upload-area.drag-over {
        border-color: #3b82f6;
        background-color: rgba(59, 130, 246, 0.05);
    }
    #preview-container {
        display: none;
        margin-top: 20px;
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 5px;
        background: #f8f9fa;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    #preview-content {
        max-height: 200px;
        overflow-y: auto;
        border: 1px solid #eee;
        padding: 10px;
        margin-top: 10px;
    }
    .file-info {
        margin-top: 10px;
        padding: 10px;
        background: #e9ecef;
        border-radius: 5px;
    }
    .file-input-label {
        cursor: pointer;
        color: #3b82f6;
        text-decoration: none;
        font-weight: 500;
    }
    .file-input-label:hover {
        color: #2563eb;
    }
    .upload-instructions {
        font-size: 0.875rem;
        color: #6b7280;
        margin-top: 0.5rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
    <h1 class="text-2xl font-semibold text-gray-900 mb-6 text-center">Dépôt de document(s)</h1>

    <form method="POST" enctype="multipart/form-data" id="upload-form" class="space-y-4">
        <div>
            <label for="file" class="block text-sm font-medium text-gray-700 mb-2 text-center">Fichier(s)</label>
            <div class="file-upload-area py-4" id="drop-area">
                <div class="space-y-1 text-center">
                    <svg class="mx-auto h-8 w-8 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <div class="flex justify-center">
                        <label for="file" class="file-input-label">
                            <span>Choisir un ou plusieurs fichiers</span>
                        </label>
                    </div>
                    <p class="upload-instructions">ou glissez-déposez vos fichiers ici</p>
                    <p class="upload-instructions">Formats autorisés: txt, pdf, docx, pptx, xlsx, md, html, odt, ods, odp</p>
                </div>
                <input type="file" class="sr-only" name="file" id="file" multiple required>
            </div>
        </div>

        <div>
            <label for="description" class="block text-sm font-medium text-gray-700 mb-2">Description (optionnelle mais recommandée)</label>
            <textarea class="form-control mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" name="description" id="description" rows="3" placeholder="Ajoutez une description pour ce document..."></textarea>
        </div>

        <div id="preview-container">
            <h3 class="text-sm font-medium text-gray-700">Aperçu du fichier</h3>
            <div id="preview-content"></div>
        </div>

        <div class="flex justify-center">
            <button type="submit" class="btn btn-primary py-2 px-6">
                <i class="bi bi-upload"></i> Télécharger
            </button>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.getElementById('file');
    const previewContainer = document.getElementById('preview-container');
    const previewContent = document.getElementById('preview-content');
    const form = document.getElementById('upload-form');
    const dropArea = document.getElementById('drop-area');

    // Empêche le comportement par défaut pour les événements de glisser-déposer
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false);
    });

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

    // Ajoute des styles visuels lors du survol de la zone de dépôt
    ['dragenter', 'dragover'].forEach(eventName => {
        dropArea.addEventListener(eventName, () => {
            dropArea.classList.add('drag-over');
        }, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, () => {
            dropArea.classList.remove('drag-over');
        }, false);
    });

    // Gère le dépôt de fichiers
    dropArea.addEventListener('drop', handleDrop, false);

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

    // Gère les fichiers sélectionnés via le bouton ou le glisser-déposer
    fileInput.addEventListener('change', function(e) {
        const files = e.target.files;
        handleFiles(files);
    });

    function handleFiles(files) {
        if (!files || files.length === 0) return;

        previewContainer.style.display = 'block';

        const fileNames = Array.from(files).map(file => file.name).join(', ');
        previewContent.innerHTML = `
            <div class="file-info">
                <p><strong>Fichier(s) sélectionné(s) :</strong> ${fileNames}</p>
            </div>
        `;

        // Vérification de la taille totale des fichiers
        let totalSize = 0;
        for (let i = 0; i < files.length; i++) {
            totalSize += files[i].size;
        }

        const maxSize = 100 * 1024 * 1024; // 100 Mo
        if (totalSize > maxSize) {
            previewContent.innerHTML += `<div class="alert alert-danger mt-2">La taille totale des fichiers dépasse la limite autorisée (100 Mo).</div>`;
            form.querySelector('button[type="submit"]').disabled = true;
        } else {
            form.querySelector('button[type="submit"]').disabled = false;
        }

        // Ajoute les fichiers à l'input file
        fileInput.files = files;
    }

    // Optimisation: Soumission du formulaire sans rechargement complet
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        const submitBtn = form.querySelector('button[type="submit"]');
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Téléchargement en cours...';

        const formData = new FormData(form);
        fetch(form.action, {
            method: 'POST',
            body: formData
        })
        .then(response => {
            if (response.redirected) {
                window.location.href = response.url;
            } else {
                return response.json();
            }
        })
        .then(data => {
            if (data && data.error) {
                previewContent.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="bi bi-upload"></i> Télécharger';
            } else {
                window.location.href = "{{ url_for('main.admin_documents') }}";
            }
        })
        .catch(error => {
            previewContent.innerHTML = `<div class="alert alert-danger">Erreur lors du téléchargement</div>`;
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="bi bi-upload"></i> Télécharger';
            console.error('Error:', error);
        });
    });
});
</script>
{% endblock %}