{% extends "base.html" %}

{% block title %}Upload Video (BETA) - Video QC{% endblock %}

{% block extra_head %}
<style>
    .upload-zone {
        border: 3px dashed #ccc;
        border-radius: 8px;
        padding: 60px 20px;
        text-align: center;
        transition: all 0.3s;
        cursor: pointer;
    }

    .upload-zone:hover, .upload-zone.dragover {
        border-color: var(--hm-yellow);
        background-color: #fffef0;
    }

    .upload-icon {
        font-size: 4rem;
        color: var(--hm-yellow);
    }

    .file-list {
        max-height: 300px;
        overflow-y: auto;
    }

    .file-list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid #eee;
    }

    .file-list-item:last-child {
        border-bottom: none;
    }

    .file-count-badge {
        font-size: 1.1rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2><i class="bi bi-upload me-2"></i>Upload Video <span class="badge bg-warning text-dark">BETA</span></h2>
    <p class="text-muted">Upload one or more videos for quality control validation (up to 50 files)</p>

    <div class="row mt-4">
        <div class="col-md-8 offset-md-2">
            <div class="upload-zone" id="uploadZone">
                <i class="bi bi-camera-video upload-icon"></i>
                <h4 class="mt-3">Drag & Drop Videos Here</h4>
                <p class="text-muted">or click to browse</p>
                <p><small>Supported: MP4, MOV, AVI, MKV (up to 50 files). SRT subtitle files (.srt) can be included alongside videos for SRT QC.</small></p>
                <input type="file" id="fileInput" style="display: none;"
                       accept=".mp4,.mov,.avi,.mkv,.srt" multiple>
            </div>

            <!-- Selected Files List -->
            <div id="fileListContainer" class="mt-3" style="display: none;">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span>
                            <i class="bi bi-camera-video me-2"></i>Selected Videos
                            <span class="badge bg-primary file-count-badge ms-2" id="fileCount">0</span>
                        </span>
                        <button class="btn btn-sm btn-outline-danger" id="clearFilesBtn">
                            <i class="bi bi-x-circle me-1"></i>Clear
                        </button>
                    </div>
                    <div class="card-body p-0">
                        <div class="file-list" id="fileList"></div>
                    </div>
                    <div class="card-footer">
                        <button class="btn btn-hm-primary w-100" id="uploadBtn">
                            <i class="bi bi-cloud-upload me-2"></i>
                            <span id="uploadBtnText">Upload</span>
                            <span id="uploadSpinner" class="spinner-border spinner-border-sm ms-2" style="display: none;"></span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Upload Progress -->
            <div id="uploadProgress" class="mt-4" style="display: none;">
                <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated"
                         id="uploadProgressBar" style="width: 0%"></div>
                </div>
                <p class="text-center mt-2" id="uploadStatus">Uploading...</p>
            </div>

            <!-- Validation Error -->
            <div id="validationError" class="alert alert-warning mt-3" style="display: none;">
                <i class="bi bi-exclamation-triangle me-2"></i>
                <span id="validationMessage"></span>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    const uploadZone = document.getElementById('uploadZone');
    const fileInput = document.getElementById('fileInput');
    const fileListContainer = document.getElementById('fileListContainer');
    const fileList = document.getElementById('fileList');
    const fileCount = document.getElementById('fileCount');
    const uploadProgress = document.getElementById('uploadProgress');
    const uploadProgressBar = document.getElementById('uploadProgressBar');
    const uploadStatus = document.getElementById('uploadStatus');
    const uploadBtn = document.getElementById('uploadBtn');
    const uploadBtnText = document.getElementById('uploadBtnText');
    const uploadSpinner = document.getElementById('uploadSpinner');
    const validationError = document.getElementById('validationError');
    const validationMessage = document.getElementById('validationMessage');

    const MAX_FILES = 50;
    const ALLOWED_EXTENSIONS = ['mp4', 'mov', 'avi', 'mkv', 'srt'];
    let selectedFiles = [];

    uploadZone.addEventListener('click', () => fileInput.click());

    uploadZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadZone.classList.add('dragover');
    });

    uploadZone.addEventListener('dragleave', () => {
        uploadZone.classList.remove('dragover');
    });

    uploadZone.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadZone.classList.remove('dragover');
        if (e.dataTransfer.files.length > 0) {
            addFiles(Array.from(e.dataTransfer.files));
        }
    });

    fileInput.addEventListener('change', (e) => {
        if (e.target.files.length > 0) {
            addFiles(Array.from(e.target.files));
        }
    });

    document.getElementById('clearFilesBtn').addEventListener('click', () => {
        selectedFiles = [];
        updateFileList();
        fileListContainer.style.display = 'none';
        uploadZone.style.display = 'block';
        fileInput.value = '';
        hideValidation();
    });

    uploadBtn.addEventListener('click', () => handleUpload());

    function addFiles(files) {
        hideValidation();

        const validFiles = files.filter(f => {
            const ext = f.name.split('.').pop().toLowerCase();
            return ALLOWED_EXTENSIONS.includes(ext);
        });

        const invalidCount = files.length - validFiles.length;
        if (invalidCount > 0) {
            showValidation(`${invalidCount} file(s) skipped (unsupported format)`);
        }

        const existingNames = new Set(selectedFiles.map(f => f.name));
        for (const f of validFiles) {
            if (!existingNames.has(f.name)) {
                selectedFiles.push(f);
                existingNames.add(f.name);
            }
        }

        if (selectedFiles.length > MAX_FILES) {
            selectedFiles = selectedFiles.slice(0, MAX_FILES);
            showValidation(`Maximum ${MAX_FILES} files allowed. Extra files removed.`);
        }

        updateFileList();

        if (selectedFiles.length > 0) {
            fileListContainer.style.display = 'block';
        }
    }

    function updateFileList() {
        fileList.innerHTML = '';
        fileCount.textContent = selectedFiles.length;

        selectedFiles.forEach((file, idx) => {
            const item = document.createElement('div');
            item.className = 'file-list-item';
            const size = (file.size / 1024 / 1024).toFixed(1);

            item.innerHTML = `
                <div>
                    <i class="bi bi-file-earmark-play me-2"></i>
                    <span>${file.name}</span>
                    <small class="text-muted ms-2">${size} MB</small>
                </div>
                <button class="btn btn-sm btn-outline-secondary remove-file-btn" data-idx="${idx}">
                    <i class="bi bi-x"></i>
                </button>
            `;
            fileList.appendChild(item);
        });

        document.querySelectorAll('.remove-file-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const idx = parseInt(this.dataset.idx);
                selectedFiles.splice(idx, 1);
                updateFileList();
                if (selectedFiles.length === 0) {
                    fileListContainer.style.display = 'none';
                    uploadZone.style.display = 'block';
                }
            });
        });

        if (selectedFiles.length === 1) {
            uploadBtnText.textContent = 'Upload Video';
        } else {
            uploadBtnText.textContent = `Upload ${selectedFiles.length} Videos`;
        }
    }

    function showValidation(msg) {
        validationMessage.textContent = msg;
        validationError.style.display = 'block';
    }

    function hideValidation() {
        validationError.style.display = 'none';
    }

    async function handleUpload() {
        if (selectedFiles.length === 0) return;

        uploadBtn.disabled = true;
        uploadSpinner.style.display = 'inline-block';
        uploadProgress.style.display = 'block';
        uploadZone.style.display = 'none';

        const formData = new FormData();

        if (selectedFiles.length === 1) {
            formData.append('file', selectedFiles[0]);
        } else {
            for (const file of selectedFiles) {
                formData.append('files', file);
            }
        }

        try {
            const response = await fetch(`${BASE_URL}/video-qc/upload`, {
                method: 'POST',
                body: formData
            });

            const data = await response.json();

            if (data.success) {
                uploadProgressBar.style.width = '100%';
                uploadProgressBar.classList.remove('progress-bar-animated');
                uploadProgressBar.classList.add('bg-success');
                uploadStatus.textContent = 'Upload complete! Redirecting...';

                setTimeout(() => {
                    window.location.href = `${BASE_URL}/video-qc/configure/${data.session_id}`;
                }, 1000);
            } else {
                throw new Error(data.error || 'Upload failed');
            }
        } catch (error) {
            uploadProgressBar.classList.add('bg-danger');
            uploadStatus.textContent = `Error: ${error.message}`;
            showNotification(error.message, 'error');

            setTimeout(() => {
                uploadProgress.style.display = 'none';
                uploadZone.style.display = 'block';
                uploadBtn.disabled = false;
                uploadSpinner.style.display = 'none';
                uploadProgressBar.style.width = '0%';
                uploadProgressBar.classList.remove('bg-danger');
            }, 3000);
        }
    }
</script>
{% endblock %}