{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    {# Header #}
    <div class="mb-6">
        <a href="{{ path('user_media_index') }}" class="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 mb-4">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
            Retour à mes médias
        </a>
        <h1 class="text-3xl font-bold text-gray-900">{{ page_title }}</h1>
        <p class="mt-2 text-sm text-gray-600">
            Téléversez vos fichiers (images, documents, audio, vidéo). Maximum 10 fichiers de 50MB chacun.
        </p>
    </div>

    {# Upload Form #}
    <div class="bg-white rounded-lg shadow p-6">
        {{ form_start(uploadForm, {'attr': {'id': 'uploadForm'}}) }}

        {# File Upload Zone #}
        <div class="mb-6">
            {{ form_label(uploadForm.files, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'}}) }}

            <div id="dropZone" class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-blue-400 transition cursor-pointer">
                <div class="space-y-1 text-center">
                    <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                        <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 text-sm text-gray-600 justify-center">
                        <label for="{{ uploadForm.files.vars.id }}" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
                            <span>Cliquez pour parcourir</span>
                            {{ form_widget(uploadForm.files, {'attr': {'class': 'sr-only'}}) }}
                        </label>
                        <p class="pl-1">ou glissez-déposez vos fichiers</p>
                    </div>
                    <p class="text-xs text-gray-500">
                        Images, PDF, vidéos, audio - Max 50MB par fichier
                    </p>
                </div>
            </div>
            {{ form_errors(uploadForm.files) }}
        </div>

        {# File Preview Zone (Hidden initially) #}
        <div id="previewZone" class="hidden mb-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-900">
                    Fichiers sélectionnés (<span id="fileCount">0</span>)
                </h3>
                <button type="button" id="clearAll" class="text-sm text-red-600 hover:text-red-800 font-medium">
                    Tout supprimer
                </button>
            </div>
            <div id="fileList" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                {# Files will be dynamically added here #}
            </div>
        </div>

        {# Options Grid #}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                {{ form_row(uploadForm.type, {
                    'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'},
                    'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500'}
                }) }}
            </div>
            <div>
                {{ form_row(uploadForm.visibility, {
                    'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'},
                    'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500'}
                }) }}
            </div>
        </div>

        {# Description #}
        <div class="mb-6">
            {{ form_row(uploadForm.description, {
                'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'},
                'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500', 'rows': 3}
            }) }}
        </div>

        {# Action Buttons #}
        <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200">
            <a href="{{ path('user_media_index') }}" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium rounded-lg transition">
                Annuler
            </a>
            <button type="submit" id="submitBtn" class="inline-flex items-center px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                </svg>
                <span id="submitText">Uploader</span>
            </button>
        </div>

        {{ form_end(uploadForm) }}
    </div>

    {# Tips Card #}
    <div class="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
        <h3 class="text-sm font-medium text-blue-900 mb-2 flex items-center">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            Conseils d'utilisation
        </h3>
        <ul class="text-sm text-blue-800 space-y-1 ml-7">
            <li>• Prévisualisez vos fichiers avant l'upload et supprimez ceux que vous ne voulez pas</li>
            <li>• Choisissez "Protégé" pour les fichiers sensibles que vous partagerez uniquement avec certaines personnes</li>
            <li>• Utilisez des noms de fichiers descriptifs pour retrouver facilement vos médias</li>
            <li>• Les images seront automatiquement optimisées pour l'affichage web</li>
            <li>• Vous pouvez partager vos médias après l'upload depuis la page de détails</li>
        </ul>
    </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Use Symfony's generated ID for the file input
    const fileInput = document.querySelector('input[type="file"][multiple]');
    const dropZone = document.getElementById('dropZone');
    const previewZone = document.getElementById('previewZone');
    const fileList = document.getElementById('fileList');
    const fileCount = document.getElementById('fileCount');
    const clearAll = document.getElementById('clearAll');
    const submitBtn = document.getElementById('submitBtn');
    const submitText = document.getElementById('submitText');

    // Check if all required elements exist
    if (!fileInput || !dropZone || !previewZone || !fileList || !fileCount || !clearAll || !submitBtn || !submitText) {
        console.error('Required elements not found for file upload', {
            fileInput: !!fileInput,
            dropZone: !!dropZone,
            previewZone: !!previewZone,
            fileList: !!fileList,
            fileCount: !!fileCount,
            clearAll: !!clearAll,
            submitBtn: !!submitBtn,
            submitText: !!submitText
        });
        return;
    }

    let selectedFiles = new DataTransfer();

    // Click on drop zone to open file picker
    dropZone.addEventListener('click', (e) => {
        if (e.target.tagName !== 'LABEL' && e.target !== fileInput) {
            fileInput.click();
        }
    });

    // Handle file selection
    fileInput.addEventListener('change', handleFiles);

    // Drag & Drop handlers
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('border-blue-500', 'bg-blue-50');
    });

    dropZone.addEventListener('dragleave', (e) => {
        e.preventDefault();
        dropZone.classList.remove('border-blue-500', 'bg-blue-50');
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('border-blue-500', 'bg-blue-50');

        const files = e.dataTransfer.files;
        addFilesToSelection(files);
    });

    // Clear all files
    clearAll.addEventListener('click', () => {
        selectedFiles = new DataTransfer();
        fileInput.files = selectedFiles.files;
        updatePreview();
    });

    function handleFiles(e) {
        addFilesToSelection(e.target.files);
    }

    function addFilesToSelection(files) {
        for (let file of files) {
            // Check if file already exists
            let exists = false;
            for (let i = 0; i < selectedFiles.files.length; i++) {
                if (selectedFiles.files[i].name === file.name &&
                    selectedFiles.files[i].size === file.size) {
                    exists = true;
                    break;
                }
            }

            if (!exists) {
                selectedFiles.items.add(file);
            }
        }

        fileInput.files = selectedFiles.files;
        updatePreview();
    }

    function updatePreview() {
        const files = selectedFiles.files;

        if (files.length === 0) {
            previewZone.classList.add('hidden');
            submitBtn.disabled = true;
            return;
        }

        previewZone.classList.remove('hidden');
        submitBtn.disabled = false;
        fileCount.textContent = files.length;
        fileList.innerHTML = '';

        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            const fileCard = createFileCard(file, i);
            fileList.appendChild(fileCard);
        }

        submitText.textContent = `Uploader ${files.length} fichier${files.length > 1 ? 's' : ''}`;
    }

    function createFileCard(file, index) {
        const div = document.createElement('div');
        div.className = 'relative bg-white border-2 border-gray-200 rounded-lg overflow-hidden hover:border-blue-400 transition group';

        const isImage = file.type.startsWith('image/');
        const isVideo = file.type.startsWith('video/');
        const isAudio = file.type.startsWith('audio/');
        const isPDF = file.type === 'application/pdf';

        let previewContent = '';

        if (isImage) {
            const reader = new FileReader();
            reader.onload = (e) => {
                div.querySelector('.file-preview').innerHTML = `
                    <img src="${e.target.result}" alt="${file.name}" class="w-full h-full object-cover">
                `;
            };
            reader.readAsDataURL(file);
            previewContent = '<div class="w-full h-full bg-gray-100 animate-pulse"></div>';
        } else if (isVideo) {
            previewContent = `
                <div class="flex items-center justify-center h-full bg-gray-100">
                    <svg class="w-12 h-12 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                    </svg>
                </div>
            `;
        } else if (isAudio) {
            previewContent = `
                <div class="flex items-center justify-center h-full bg-gray-100">
                    <svg class="w-12 h-12 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"></path>
                    </svg>
                </div>
            `;
        } else if (isPDF) {
            previewContent = `
                <div class="flex items-center justify-center h-full bg-red-50">
                    <svg class="w-12 h-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                    </svg>
                </div>
            `;
        } else {
            previewContent = `
                <div class="flex items-center justify-center h-full bg-gray-100">
                    <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                </div>
            `;
        }

        const fileSize = formatFileSize(file.size);

        div.innerHTML = `
            <div class="file-preview aspect-square">
                ${previewContent}
            </div>
            <div class="p-2 bg-white">
                <p class="text-xs font-medium text-gray-900 truncate" title="${file.name}">${file.name}</p>
                <p class="text-xs text-gray-500">${fileSize}</p>
            </div>
            <button type="button" class="remove-file absolute top-2 right-2 bg-red-500 hover:bg-red-600 text-white rounded-full p-1.5 opacity-0 group-hover:opacity-100 transition shadow-lg" data-index="${index}">
                <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="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        `;

        div.querySelector('.remove-file').addEventListener('click', () => removeFile(index));

        return div;
    }

    function removeFile(index) {
        const dt = new DataTransfer();

        for (let i = 0; i < selectedFiles.files.length; i++) {
            if (i !== index) {
                dt.items.add(selectedFiles.files[i]);
            }
        }

        selectedFiles = dt;
        fileInput.files = selectedFiles.files;
        updatePreview();
    }

    function formatFileSize(bytes) {
        if (bytes === 0) return '0 B';
        const k = 1024;
        const sizes = ['B', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
    }
});
</script>
{% endblock %}