{% extends 'administration/base.html.twig' %}

{% block title %}{{ 'admin.upload_media'|trans }}{% endblock %}

{% block body %}
    <div class="container-fluid">
        <!-- Header -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="admin-card p-4">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
                        <div>
                            <h2 class="gradient-text fw-bold mb-1">
                                <i class="bi bi-cloud-upload me-2"></i>
                                {{ 'admin.upload_media'|trans }}
                            </h2>
                            <p class="text-muted mb-0 small">{{ 'admin.upload_media.description'|trans }}</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ path('admin_media', currentFolderId is defined and currentFolderId ? { folder_id: currentFolderId } : {}) }}" class="btn btn-outline-secondary">
                                <i class="bi bi-arrow-left me-2"></i>
                                {{ 'admin.back'|trans }}
                            </a>
                            <button type="submit" form="upload-form" class="btn btn-primary">
                                <i class="bi bi-check-circle me-2"></i>
                                {{ 'admin.upload'|trans }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <form id="upload-form" method="post" enctype="multipart/form-data" action="{{ path('admin_media_upload') }}">
            {% if currentFolderId is defined and currentFolderId %}<input type="hidden" name="folder_id" value="{{ currentFolderId }}">{% endif %}
            <input type="file" id="file-input" name="files[]" multiple style="display: none;" accept="image/*,video/*,audio/*,application/pdf,.txt,.json,.xml,.csv,.md,.log">

            <div class="row g-4">
                <div class="col-12 col-xl-8">
                    <div class="admin-card p-4">
                        <h4 class="gradient-text fw-bold mb-4">
                            <i class="bi bi-upload me-2"></i>
                            {{ 'admin.upload_media'|trans }}
                        </h4>
                        <div class="mb-4">
                            <div id="drag-drop-zone" class="drag-drop-zone">
                                <div class="drag-drop-content">
                                    <i class="bi bi-cloud-upload drag-drop-icon"></i>
                                    <h5 class="drag-drop-title">{{ 'admin.upload_page.drag_drop_title'|trans }}</h5>
                                    <p class="drag-drop-text">{{ 'admin.upload_page.drag_drop_text_multi'|trans }}</p>
                                    <div class="drag-drop-or">{{ 'admin.upload_page.or'|trans }}</div>
                                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="document.getElementById('file-input').click()">
                                        <i class="bi bi-folder2-open me-1"></i>
                                        {{ 'admin.upload_page.select_files'|trans }}
                                    </button>
                                </div>
                            </div>
                            <div id="files-container" class="files-container mt-3" style="display: none;"></div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-xl-4">
                    <div class="admin-card p-4">
                        <h4 class="gradient-text fw-bold mb-4">
                            <i class="bi bi-info-circle me-2"></i>
                            {{ 'admin.upload_page.upload_stats'|trans }}
                        </h4>
                        <div class="upload-stats mb-4">
                            <div class="stat-item">
                                <span class="stat-label">
                                    <i class="bi bi-files me-2"></i>
                                    {{ 'admin.upload_page.selected_files'|trans }}:
                                </span>
                                <span class="stat-value badge bg-primary" id="file-count">0</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-label">
                                    <i class="bi bi-hdd me-2"></i>
                                    {{ 'admin.upload_page.total_size'|trans }}:
                                </span>
                                <span class="stat-value badge bg-info" id="total-size">0 B</span>
                            </div>
                        </div>
                        <div id="upload-progress" class="upload-progress" style="display: none;">
                            <h6 class="fw-bold mb-3 text-primary">
                                <i class="bi bi-arrow-repeat me-2"></i>
                                {{ 'admin.upload_page.upload_progress'|trans }}
                            </h6>
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="fw-semibold">{{ 'admin.upload_page.uploading_label'|trans }}</span>
                                <span id="progress-percentage" class="badge bg-primary">0%</span>
                            </div>
                            <div class="progress" style="height: 10px;">
                                <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
                            </div>
                            <div class="mt-2 text-center">
                                <small class="text-muted" id="upload-status">{{ 'admin.upload_page.preparing'|trans }}</small>
                            </div>
                        </div>
                        <div class="alert alert-info mt-4">
                            <i class="bi bi-lightbulb me-2"></i>
                            <strong>{{ 'admin.upload_page.multi_upload_title'|trans }}:</strong>
                            <ul class="mb-0 ps-3 mt-2">
                                <li>{{ 'admin.upload_page.multi_upload_drag'|trans }}</li>
                                <li>{{ 'admin.upload_page.multi_upload_ctrl'|trans }}</li>
                                <li>{{ 'admin.upload_page.multi_upload_max'|trans }}</li>
                            </ul>
                        </div>
                        <div class="d-grid gap-2 mt-3">
                            <button type="button" class="btn btn-outline-danger" id="clear-all-btn" style="display: none;" onclick="clearAllFiles()" data-confirm="{{ 'admin.upload_page.clear_all_confirm'|trans }}">
                                <i class="bi bi-trash me-2"></i>
                                {{ 'admin.upload_page.clear_all'|trans }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <style>
        .drag-drop-zone {
            border: 2px dashed #dee2e6;
            border-radius: 8px;
            padding: 2rem;
            text-align: center;
            transition: all 0.3s ease;
            background: #f8f9fa;
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .drag-drop-zone.drag-over {
            border-color: #0d6efd;
            background: #e7f1ff;
        }
        
        .drag-drop-zone.has-file {
            border-color: #198754;
            background: #f0f9ff;
        }
        
        .drag-drop-icon {
            font-size: 3rem;
            color: #6c757d;
            margin-bottom: 1rem;
        }
        
        .drag-drop-title {
            color: #495057;
            margin-bottom: 0.5rem;
        }
        
        .drag-drop-text {
            color: #6c757d;
            margin-bottom: 1rem;
        }
        
        .drag-drop-or {
            color: #6c757d;
            margin: 1rem 0;
            position: relative;
        }
        
        .drag-drop-or::before,
        .drag-drop-or::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 30%;
            height: 1px;
            background: #dee2e6;
        }
        
        .drag-drop-or::before {
            left: 0;
        }
        
        .drag-drop-or::after {
            right: 0;
        }
        
        .file-preview {
            width: 100%;
        }
        
        .file-preview-content {
            padding: 1rem;
            background: #ffffff;
            border: 1px solid #dee2e6;
            border-radius: 6px;
        }
        
        .file-preview-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }
        
        .file-preview-icon {
            font-size: 2rem;
            color: #6c757d;
        }
        
        .file-preview-info {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-grow: 1;
        }
        
        .file-preview-name {
            font-weight: 500;
            color: #495057;
            margin-bottom: 0.25rem;
        }
        
        .file-preview-size {
            font-size: 0.875rem;
            color: #6c757d;
        }
        
        .preview-area {
            border-top: 1px solid #dee2e6;
            padding-top: 1rem;
        }
        
        .preview-container {
            width: 100%;
        }
        
        .preview-image {
            max-width: 100%;
            max-height: 400px;
            width: auto;
            height: auto;
            border-radius: 6px;
            display: block;
            margin: 0 auto;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .preview-video {
            width: 100%;
            max-height: 400px;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .preview-pdf {
            width: 100%;
            height: 500px;
            border: none;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .preview-text {
            background: #f8f9fa;
            padding: 1rem;
            border-radius: 6px;
            font-size: 0.875rem;
            max-height: 400px;
            overflow-y: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
            color: #495057;
            margin: 0;
        }
        
        .preview-audio {
            width: 100%;
            margin-top: 0.5rem;
        }
        
        .upload-progress {
            background: linear-gradient(135deg, #e7f1ff 0%, #d0e7ff 100%);
            padding: 1.25rem;
            border-radius: 8px;
            border: 1px solid #0d6efd33;
            box-shadow: 0 2px 6px rgba(13, 110, 253, 0.1);
        }
        
        .progress {
            height: 10px;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
        }
        
        .file-info {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 1.25rem;
            border-radius: 8px;
            border: 1px solid #dee2e6;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .file-info-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.75rem;
            padding: 0.5rem;
            background: white;
            border-radius: 6px;
            transition: all 0.2s ease;
        }
        
        .file-info-item:hover {
            transform: translateX(2px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .file-info-item:last-child {
            margin-bottom: 0;
        }
        
        .file-info-label {
            color: #6c757d;
            font-size: 0.875rem;
            font-weight: 500;
        }
        
        .file-info-value {
            font-weight: 600;
            color: #495057;
            font-size: 0.875rem;
            background: #e7f1ff;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
        }
        
        .progress-bar {
            transition: width 0.3s ease;
        }
        
        .alert-info {
            background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
            border-color: #17a2b8;
            color: #0c5460;
        }
        
        /* Multi-Upload Styles */
        .files-container {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .file-item {
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 1rem;
            transition: all 0.3s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .file-item:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }
        
        .file-item-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.75rem;
        }
        
        .file-item-info {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex: 1;
        }
        
        .file-item-icon {
            font-size: 2rem;
            color: #0d6efd;
        }
        
        .file-item-details h6 {
            margin: 0;
            font-weight: 600;
            color: #495057;
        }
        
        .file-item-meta {
            display: flex;
            gap: 1rem;
            font-size: 0.875rem;
            color: #6c757d;
            margin-top: 0.25rem;
        }
        
        .file-item-actions {
            display: flex;
            gap: 0.5rem;
        }
        
        .file-item-preview {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid #dee2e6;
        }
        
        .file-item-preview img,
        .file-item-preview video {
            max-width: 100%;
            max-height: 200px;
            border-radius: 6px;
            display: block;
            margin: 0 auto;
        }
        
        .upload-stats {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 1rem;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }
        
        .stat-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem;
            margin-bottom: 0.5rem;
            background: white;
            border-radius: 6px;
        }
        
        .stat-item:last-child {
            margin-bottom: 0;
        }
        
        .stat-label {
            font-weight: 500;
            color: #495057;
            font-size: 0.875rem;
        }
        
        .stat-value {
            font-size: 1rem;
        }
        
        .file-name-input {
            border: 1px solid #dee2e6;
            transition: all 0.2s ease;
        }
        
        .file-name-input:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const dragZone = document.getElementById('drag-drop-zone');
            const fileInput = document.getElementById('file-input');
            const filesContainer = document.getElementById('files-container');
            const uploadProgress = document.getElementById('upload-progress');
            const form = document.getElementById('upload-form');
            const fileCountBadge = document.getElementById('file-count');
            const totalSizeBadge = document.getElementById('total-size');
            const clearAllBtn = document.getElementById('clear-all-btn');
            
            let selectedFiles = [];
            
            if (!fileInput) {
                console.error('File input not found!');
                return;
            }
            
            console.log('Multi-file upload initialized');
            
            // Drag & Drop Events
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                dragZone.addEventListener(eventName, preventDefaults, false);
            });
            
            function preventDefaults(e) {
                e.preventDefault();
                e.stopPropagation();
            }
            
            ['dragenter', 'dragover'].forEach(eventName => {
                dragZone.addEventListener(eventName, highlight, false);
            });
            
            ['dragleave', 'drop'].forEach(eventName => {
                dragZone.addEventListener(eventName, unhighlight, false);
            });
            
            function highlight(e) {
                dragZone.classList.add('drag-over');
            }
            
            function unhighlight(e) {
                dragZone.classList.remove('drag-over');
            }
            
            // Handle dropped files
            dragZone.addEventListener('drop', handleDrop, false);
            
            function handleDrop(e) {
                const dt = e.dataTransfer;
                const files = dt.files;
                handleFiles(files);
            }
            
            // Handle file input change
            fileInput.addEventListener('change', function(e) {
                handleFiles(e.target.files);
            });
            
            function handleFiles(files) {
                if (files.length === 0) return;
                
                // Add files to selectedFiles array
                Array.from(files).forEach(file => {
                    // Check if file already exists
                    const exists = selectedFiles.some(f => f.name === file.name && f.size === file.size);
                    if (!exists) {
                        const fileId = Date.now() + '_' + Math.random().toString(36).substr(2, 9);
                        selectedFiles.push({
                            id: fileId,
                            file: file
                        });
                        addFileToUI(fileId, file);
                    }
                });
                
                updateFileInput();
                updateStats();
                updateUI();
            }
            
            function addFileToUI(fileId, file) {
                const fileItem = document.createElement('div');
                fileItem.className = 'file-item';
                fileItem.id = 'file-' + fileId;
                
                const icon = getFileIcon(file.type);
                const defaultName = file.name.replace(/\.[^/.]+$/, ''); // Remove extension
                
                fileItem.innerHTML = `
                    <div class="file-item-header">
                        <div class="file-item-info">
                            <i class="${icon} file-item-icon"></i>
                            <div class="file-item-details">
                                <div class="mb-2">
                                    <label class="form-label mb-1 small fw-semibold text-primary">Dateiname:</label>
                                    <input type="text" 
                                           class="form-control form-control-sm file-name-input" 
                                           id="name-${fileId}" 
                                           value="${escapeHtml(defaultName)}"
                                           placeholder="Name für die Datei">
                                </div>
                                <div class="file-item-meta">
                                    <span><i class="bi bi-file-earmark me-1"></i>${escapeHtml(file.name)}</span>
                                    <span><i class="bi bi-hdd me-1"></i>${formatFileSize(file.size)}</span>
                                    <span><i class="bi bi-tag me-1"></i>${file.type || 'Unknown'}</span>
                                </div>
                            </div>
                        </div>
                        <div class="file-item-actions">
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="togglePreview('${fileId}')">
                                <i class="bi bi-eye"></i>
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeFile('${fileId}')">
                                <i class="bi bi-x"></i>
                            </button>
                        </div>
                    </div>
                    <div class="file-item-preview" id="preview-${fileId}" style="display: none;"></div>
                `;
                
                filesContainer.appendChild(fileItem);
            }
            
            function getFileIcon(mimeType) {
                if (mimeType.startsWith('image/')) return 'bi bi-file-earmark-image text-primary';
                if (mimeType.startsWith('video/')) return 'bi bi-file-earmark-play text-danger';
                if (mimeType.startsWith('audio/')) return 'bi bi-file-earmark-music text-info';
                if (mimeType === 'application/pdf') return 'bi bi-file-earmark-pdf text-danger';
                if (mimeType.startsWith('text/')) return 'bi bi-file-earmark-text text-success';
                return 'bi bi-file-earmark text-secondary';
            }
            
            function escapeHtml(text) {
                const div = document.createElement('div');
                div.textContent = text;
                return div.innerHTML;
            }
            
            function updateFileInput() {
                const dataTransfer = new DataTransfer();
                selectedFiles.forEach(item => {
                    dataTransfer.items.add(item.file);
                });
                fileInput.files = dataTransfer.files;
            }
            
            function updateStats() {
                const totalSize = selectedFiles.reduce((sum, item) => sum + item.file.size, 0);
                fileCountBadge.textContent = selectedFiles.length;
                totalSizeBadge.textContent = formatFileSize(totalSize);
            }
            
            function updateUI() {
                if (selectedFiles.length > 0) {
                    filesContainer.style.display = 'flex';
                    clearAllBtn.style.display = 'block';
                    dragZone.classList.add('has-file');
                } else {
                    filesContainer.style.display = 'none';
                    clearAllBtn.style.display = 'none';
                    dragZone.classList.remove('has-file');
                }
            }
            
            window.removeFile = function(fileId) {
                selectedFiles = selectedFiles.filter(item => item.id !== fileId);
                const fileElement = document.getElementById('file-' + fileId);
                if (fileElement) {
                    fileElement.remove();
                }
                updateFileInput();
                updateStats();
                updateUI();
                console.log('File removed:', fileId);
            };
            
            window.clearAllFiles = function() {
                var msg = document.getElementById('clear-all-btn').getAttribute('data-confirm') || 'Möchten Sie wirklich alle Dateien entfernen?';
                if (confirm(msg)) {
                    selectedFiles = [];
                    filesContainer.innerHTML = '';
                    updateFileInput();
                    updateStats();
                    updateUI();
                    console.log('All files cleared');
                }
            };
            
            window.togglePreview = function(fileId) {
                const previewDiv = document.getElementById('preview-' + fileId);
                const fileItem = selectedFiles.find(item => item.id === fileId);
                
                if (!fileItem) return;
                
                if (previewDiv.style.display === 'none') {
                    generatePreview(fileItem.file, previewDiv);
                    previewDiv.style.display = 'block';
                } else {
                    previewDiv.style.display = 'none';
                    previewDiv.innerHTML = '';
                }
            };
            
            function generatePreview(file, container) {
                const fileType = file.type;
                const fileURL = URL.createObjectURL(file);
                
                container.innerHTML = '';
                
                // Image Preview
                if (fileType.startsWith('image/')) {
                    const img = document.createElement('img');
                    img.src = fileURL;
                    img.style.maxWidth = '100%';
                    img.style.maxHeight = '200px';
                    img.style.borderRadius = '6px';
                    img.style.display = 'block';
                    img.style.margin = '0 auto';
                    container.appendChild(img);
                    console.log('Showing image preview');
                }
                // Video Preview
                else if (fileType.startsWith('video/')) {
                    const video = document.createElement('video');
                    video.src = fileURL;
                    video.controls = true;
                    video.style.width = '100%';
                    video.style.maxHeight = '200px';
                    video.style.borderRadius = '6px';
                    container.appendChild(video);
                    console.log('Showing video preview');
                }
                // PDF Preview
                else if (fileType === 'application/pdf') {
                    const iframe = document.createElement('iframe');
                    iframe.src = fileURL;
                    iframe.style.width = '100%';
                    iframe.style.height = '300px';
                    iframe.style.border = 'none';
                    iframe.style.borderRadius = '6px';
                    container.appendChild(iframe);
                    console.log('Showing PDF preview');
                }
                // Audio Preview
                else if (fileType.startsWith('audio/')) {
                    const audio = document.createElement('audio');
                    audio.src = fileURL;
                    audio.controls = true;
                    audio.style.width = '100%';
                    container.appendChild(audio);
                    console.log('Showing audio preview');
                }
                // Text Preview
                else if (fileType.startsWith('text/') || 
                         fileType === 'application/json' ||
                         fileType === 'application/xml' ||
                         file.name.endsWith('.txt') ||
                         file.name.endsWith('.json') ||
                         file.name.endsWith('.xml') ||
                         file.name.endsWith('.csv') ||
                         file.name.endsWith('.md') ||
                         file.name.endsWith('.log')) {
                    
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        let content = e.target.result;
                        if (content.length > 2000) {
                            content = content.substring(0, 2000) + '\n\n... (gekürzt)';
                        }
                        
                        const pre = document.createElement('pre');
                        pre.textContent = content;
                        pre.style.background = '#f8f9fa';
                        pre.style.padding = '1rem';
                        pre.style.borderRadius = '6px';
                        pre.style.fontSize = '0.875rem';
                        pre.style.maxHeight = '200px';
                        pre.style.overflowY = 'auto';
                        pre.style.margin = '0';
                        container.appendChild(pre);
                    };
                    reader.readAsText(file);
                } else {
                    const info = document.createElement('p');
                    info.textContent = 'Keine Vorschau verfügbar';
                    info.className = 'text-muted text-center';
                    container.appendChild(info);
                }
            }
            
            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 parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }
            
            // Form submit
            form.addEventListener('submit', function(e) {
                const files = fileInput.files;
                if (files.length === 0) {
                    e.preventDefault();
                    alert('Bitte wählen Sie zuerst mindestens eine Datei aus!');
                    return;
                }
                
                // Collect file names from inputs and add them as hidden fields
                const existingNameInputs = form.querySelectorAll('input[name^="file_names"]');
                existingNameInputs.forEach(input => input.remove());
                
                selectedFiles.forEach((item, index) => {
                    const nameInput = document.getElementById('name-' + item.id);
                    if (nameInput) {
                        const hiddenInput = document.createElement('input');
                        hiddenInput.type = 'hidden';
                        hiddenInput.name = 'file_names[' + index + ']';
                        hiddenInput.value = nameInput.value || '';
                        form.appendChild(hiddenInput);
                    }
                });
                
                // Show progress
                uploadProgress.style.display = 'block';
                const statusText = document.getElementById('upload-status');
                if (statusText) {
                    statusText.textContent = `${files.length} Datei(en) werden hochgeladen...`;
                }
                
                console.log('Uploading files:', files.length);
            });
        });
    </script>
{% endblock %}