{% extends "base.html" %}

{% block title %}Upload Media - DigiServer v2{% endblock %}

{% block content %}
<style>
    .upload-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .upload-zone {
        border: 2px dashed #ced4da;
        border-radius: 8px;
        padding: 25px 20px;
        text-align: center;
        background: #f8f9fa;
        transition: all 0.3s;
        cursor: pointer;
    }
    
    body.dark-mode .upload-zone {
        background: #1a202c;
        border-color: #4a5568;
    }
    
    .upload-zone:hover {
        border-color: #667eea;
        background: #f0f2ff;
    }
    
    body.dark-mode .upload-zone:hover {
        border-color: #7c3aed;
        background: #2d3748;
    }
    
    .upload-zone.dragover {
        border-color: #667eea;
        background: #e8ebff;
        transform: scale(1.02);
    }
    
    body.dark-mode .upload-zone.dragover {
        border-color: #7c3aed;
        background: #2d3748;
    }
    
    .file-input-wrapper {
        margin: 20px 0;
    }
    
    .file-input-wrapper input[type="file"] {
        display: none;
    }
    
    .file-list {
        margin-top: 15px;
        max-height: 200px;
        overflow-y: auto;
    }
    
    .file-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        margin-bottom: 6px;
        font-size: 13px;
    }
    
    body.dark-mode .file-item {
        background: #2d3748;
        border-color: #4a5568;
    }
    
    .file-info {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .file-icon {
        font-size: 20px;
    }
    
    .remove-file {
        cursor: pointer;
        color: #dc3545;
        font-weight: bold;
        padding: 5px 10px;
    }
    
    .remove-file:hover {
        background: #dc3545;
        color: white;
        border-radius: 4px;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #333;
    }
    
    body.dark-mode .form-group label {
        color: #e2e8f0;
    }
    
    .form-control {
        width: 100%;
        padding: 12px;
        border: 1px solid #ced4da;
        border-radius: 6px;
        font-size: 14px;
    }
    
    body.dark-mode .form-control {
        background: #1a202c;
        border-color: #4a5568;
        color: #e2e8f0;
    }
    
    .form-control:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
    
    body.dark-mode .form-control:focus {
        border-color: #7c3aed;
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
    }
    
    .btn-upload {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 15px 40px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s;
        width: 100%;
    }
    
    .btn-upload:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }
    
    .btn-upload:disabled {
        background: #6c757d;
        cursor: not-allowed;
        transform: none;
    }
    
    /* Dark mode text colors */
    body.dark-mode h1,
    body.dark-mode h2,
    body.dark-mode h3 {
        color: #e2e8f0;
    }
    
    body.dark-mode p,
    body.dark-mode small {
        color: #a0aec0;
    }
    
    body.dark-mode .file-info > div > div {
        color: #e2e8f0;
    }
    
    body.dark-mode .file-info > div > div:last-child {
        color: #718096;
    }
    
    .playlist-selector {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 30px;
        border: 2px solid #dee2e6;
    }
    
    body.dark-mode .playlist-selector {
        background: #1a202c;
        border-color: #4a5568;
    }
    
    .playlist-selector.selected {
        border-color: #667eea;
        background: #f0f2ff;
    }
    
    body.dark-mode .playlist-selector.selected {
        border-color: #7c3aed;
        background: #2d3748;
    }
</style>

<div class="upload-container">
    <div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;">
        <h1 style="display: flex; align-items: center; gap: 0.5rem; font-size: 24px; margin: 0;">
            <img src="{{ url_for('static', filename='icons/upload.svg') }}" alt="" style="width: 28px; height: 28px;">
            Upload Media
        </h1>
        <a href="{{ url_for('content.content_list') }}" class="btn" style="display: flex; align-items: center; gap: 0.5rem; padding: 8px 16px;">
            <img src="{{ url_for('static', filename='icons/playlist.svg') }}" alt="" style="width: 16px; height: 16px; filter: brightness(0) invert(1);">
            Back to Playlists
        </a>
    </div>
    
    <form id="upload-form" method="POST" action="{{ url_for('content.upload_media') }}" enctype="multipart/form-data">
        
        <!-- Compact Two-Column Layout -->
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
            
            <!-- Left Column: Upload Zone -->
            <div class="card">
                <h2 style="margin-bottom: 15px; font-size: 18px; display: flex; align-items: center; gap: 0.5rem;">
                    <img src="{{ url_for('static', filename='icons/upload.svg') }}" alt="" style="width: 20px; height: 20px;">
                    Select Files
                </h2>
                
                <div class="upload-zone" id="upload-zone">
                    <img src="{{ url_for('static', filename='icons/upload.svg') }}" alt="" style="width: 48px; height: 48px; opacity: 0.3; margin-bottom: 10px;">
                    <h3 style="margin-bottom: 8px; font-size: 16px;">Drag & Drop</h3>
                    <p style="color: #6c757d; margin: 8px 0; font-size: 13px;">or</p>
                    <div class="file-input-wrapper">
                        <label for="file-input" class="btn btn-primary" style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 8px 16px; font-size: 14px;">
                            <img src="{{ url_for('static', filename='icons/upload.svg') }}" alt="" style="width: 16px; height: 16px; filter: brightness(0) invert(1);">
                            Browse
                        </label>
                        <input type="file" id="file-input" name="files" multiple 
                               accept="image/*,video/*,.pdf,.ppt,.pptx">
                    </div>
                    <p style="font-size: 11px; color: #999; margin-top: 12px; line-height: 1.4;">
                        <strong>Supported:</strong> JPG, PNG, GIF, MP4, AVI, MOV, PDF, PPT
                    </p>
                </div>
                
                <div id="file-list" class="file-list"></div>
            </div>
            
            <!-- Right Column: Settings -->
            <div class="card">
                <h2 style="margin-bottom: 15px; font-size: 18px; display: flex; align-items: center; gap: 0.5rem;">
                    <img src="{{ url_for('static', filename='icons/info.svg') }}" alt="" style="width: 20px; height: 20px;">
                    Upload Settings
                </h2>
                
                <div class="form-group">
                    <label for="playlist_id">Target Playlist (Optional)</label>
                    <select name="playlist_id" id="playlist_id" class="form-control">
                        <option value="">-- Media Library Only --</option>
                        {% for playlist in playlists %}
                            <option value="{{ playlist.id }}">
                                {{ playlist.name }} ({{ playlist.orientation }}) - {{ playlist.content_count }} items
                            </option>
                        {% endfor %}
                    </select>
                    <small style="color: #6c757d; display: block; margin-top: 4px; font-size: 11px;">
                        💡 Add to playlists later if needed
                    </small>
                </div>
                
                <div class="form-group">
                    <label for="content_type">Media Type</label>
                    <select name="content_type" id="content_type" class="form-control">
                        <option value="image">Image</option>
                        <option value="video">Video</option>
                        <option value="pdf">PDF</option>
                        <option value="pptx">PPTX</option>
                    </select>
                    <small style="color: #6c757d; display: block; margin-top: 4px; font-size: 11px;">
                        Auto-detected from file extension
                    </small>
                </div>
                
                <div class="form-group">
                    <label for="duration">Default Duration (seconds)</label>
                    <input type="number" name="duration" id="duration" class="form-control" 
                           value="10" min="1" max="300">
                    <small style="color: #6c757d; display: block; margin-top: 4px; font-size: 11px;">
                        Display time for images and PDFs
                    </small>
                </div>
                
                <!-- Upload Button -->
                <button type="submit" class="btn-upload" id="upload-btn" disabled style="display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 20px; padding: 12px 30px;">
                    <img src="{{ url_for('static', filename='icons/upload.svg') }}" alt="" style="width: 18px; height: 18px; filter: brightness(0) invert(1);">
                    Upload Files
                </button>
            </div>
        </div>
    </form>
</div>

<script>
    const uploadZone = document.getElementById('upload-zone');
    const fileInput = document.getElementById('file-input');
    const fileList = document.getElementById('file-list');
    const uploadBtn = document.getElementById('upload-btn');
    const uploadForm = document.getElementById('upload-form');
    
    let selectedFiles = [];
    
    // Prevent default drag behaviors
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        uploadZone.addEventListener(eventName, preventDefaults, false);
        document.body.addEventListener(eventName, preventDefaults, false);
    });
    
    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }
    
    // Highlight drop zone when item is dragged over it
    ['dragenter', 'dragover'].forEach(eventName => {
        uploadZone.addEventListener(eventName, () => {
            uploadZone.classList.add('dragover');
        });
    });
    
    ['dragleave', 'drop'].forEach(eventName => {
        uploadZone.addEventListener(eventName, () => {
            uploadZone.classList.remove('dragover');
        });
    });
    
    // Handle dropped files
    uploadZone.addEventListener('drop', (e) => {
        const dt = e.dataTransfer;
        const files = dt.files;
        handleFiles(files);
    });
    
    // Handle file input
    fileInput.addEventListener('change', (e) => {
        console.log('File input changed, files:', e.target.files.length);
        if (e.target.files.length > 0) {
            handleFiles(e.target.files);
        }
    });
    
    // Click upload zone to trigger file input (but not if clicking on the label)
    uploadZone.addEventListener('click', (e) => {
        // Don't trigger if clicking on the label or button
        if (e.target.tagName === 'LABEL' || e.target.closest('label') || e.target.tagName === 'INPUT') {
            return;
        }
        fileInput.click();
    });
    
    function handleFiles(files) {
        console.log('handleFiles called with', files.length, 'file(s)');
        selectedFiles = Array.from(files);
        displayFiles();
        uploadBtn.disabled = selectedFiles.length === 0;
        
        // Auto-detect media type and duration from first file
        if (selectedFiles.length > 0) {
            console.log('Auto-detecting for first file:', selectedFiles[0].name);
            autoDetectMediaType(selectedFiles[0]);
            autoDetectDuration(selectedFiles[0]);
        }
    }
    
    function autoDetectMediaType(file) {
        const ext = file.name.split('.').pop().toLowerCase();
        const contentTypeSelect = document.getElementById('content_type');
        
        console.log('Auto-detecting media type for:', file.name, 'Extension:', ext);
        
        if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)) {
            contentTypeSelect.value = 'image';
            console.log('Set type to: image');
        } else if (['mp4', 'avi', 'mov', 'mkv', 'webm', 'flv', 'wmv'].includes(ext)) {
            contentTypeSelect.value = 'video';
            console.log('Set type to: video');
        } else if (ext === 'pdf') {
            contentTypeSelect.value = 'pdf';
            console.log('Set type to: pdf');
        } else if (['ppt', 'pptx'].includes(ext)) {
            contentTypeSelect.value = 'pptx';
            console.log('Set type to: pptx');
        }
    }
    
    function autoDetectDuration(file) {
        const ext = file.name.split('.').pop().toLowerCase();
        const durationInput = document.getElementById('duration');
        
        console.log('Auto-detecting duration for:', file.name, 'Extension:', ext);
        
        // For videos, try to get actual duration
        if (['mp4', 'avi', 'mov', 'mkv', 'webm', 'flv', 'wmv'].includes(ext)) {
            console.log('Processing as video...');
            const video = document.createElement('video');
            video.preload = 'metadata';
            
            video.onloadedmetadata = function() {
                window.URL.revokeObjectURL(video.src);
                const duration = Math.ceil(video.duration);
                console.log('Video duration detected:', duration, 'seconds');
                if (duration && duration > 0) {
                    durationInput.value = duration;
                }
            };
            
            video.onerror = function() {
                console.log('Video loading error, using default 30s');
                window.URL.revokeObjectURL(video.src);
                durationInput.value = 30; // Default for videos if can't read duration
            };
            
            video.src = URL.createObjectURL(file);
        } else if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)) {
            // Images: default 10 seconds
            console.log('Setting image duration: 10s');
            durationInput.value = 10;
        } else if (ext === 'pdf') {
            // PDFs: default 15 seconds per page (estimate)
            console.log('Setting PDF duration: 15s');
            durationInput.value = 15;
        } else if (['ppt', 'pptx'].includes(ext)) {
            // Presentations: default 20 seconds per slide (estimate)
            console.log('Setting presentation duration: 20s');
            durationInput.value = 20;
        }
    }
    
    function displayFiles() {
        fileList.innerHTML = '';
        
        if (selectedFiles.length === 0) {
            return;
        }
        
        selectedFiles.forEach((file, index) => {
            const fileItem = document.createElement('div');
            fileItem.className = 'file-item';
            
            const ext = file.name.split('.').pop().toLowerCase();
            let icon = '📁';
            if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(ext)) icon = '📷';
            else if (['mp4', 'avi', 'mov', 'mkv', 'webm'].includes(ext)) icon = '🎥';
            else if (ext === 'pdf') icon = '📄';
            else if (['ppt', 'pptx'].includes(ext)) icon = '📊';
            
            const sizeInMB = (file.size / (1024 * 1024)).toFixed(2);
            
            fileItem.innerHTML = `
                <div class="file-info">
                    <span class="file-icon">${icon}</span>
                    <div>
                        <div style="font-weight: 600;">${file.name}</div>
                        <div style="font-size: 12px; color: #6c757d;">${sizeInMB} MB</div>
                    </div>
                </div>
                <span class="remove-file" onclick="removeFile(${index})">✕</span>
            `;
            
            fileList.appendChild(fileItem);
        });
    }
    
    function removeFile(index) {
        selectedFiles.splice(index, 1);
        displayFiles();
        uploadBtn.disabled = selectedFiles.length === 0;
        
        // Update file input
        const dt = new DataTransfer();
        selectedFiles.forEach(file => dt.items.add(file));
        fileInput.files = dt.files;
    }
    
    // Form submission
    uploadForm.addEventListener('submit', (e) => {
        if (selectedFiles.length === 0) {
            e.preventDefault();
            alert('Please select files to upload');
            return;
        }
        
        uploadBtn.disabled = true;
        uploadBtn.innerHTML = '⏳ Uploading...';
    });
</script>

{% endblock %}