(function() {
    'use strict';
    var itemId = document.getElementById('wizard-item-content-video-cfg').dataset.itemId;
    var dropArea = document.getElementById('video-upload-area');
    var fileInput = document.getElementById('video-file-input');
    var statusEl = document.getElementById('video-upload-status');

    initDropzone(dropArea, fileInput, function(file) {
        if (file.type.startsWith('video/') || file.name.match(/\.(mp4|webm|mov)$/i)) {
            uploadVideo(file);
        }
    });

    function uploadVideo(file) {
        var contentType = file.type || 'video/mp4';
        statusEl.innerHTML =
            '<div class="upload-status">' +
            '<div class="upload-status-row">' +
            '<span id="video-upload-filename"></span>' +
            '<span id="video-upload-percent">0%</span></div>' +
            '<div class="progress-bar-container progress-bar-container--slim progress-bar-container--rounded">' +
            '<div id="video-progress-bar" class="progress-bar progress-bar--highlight"></div></div></div>';

        var uploader = new S3Uploader({
            filenameEl:  document.getElementById('video-upload-filename'),
            percentEl:   document.getElementById('video-upload-percent'),
            progressBar: document.getElementById('video-progress-bar'),
        });

        fetch('/api/upload/presign', {
            method: 'POST',
            headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
            body: JSON.stringify({ item_id: itemId, file_type: 'video', file_name: file.name, content_type: contentType, file_size_bytes: file.size })
        })
        .then(function(res) {
            if (!res.ok) return res.json().catch(function() { return {}; }).then(function(d) {
                throw new Error(d.error || 'Failed to get upload URL');
            });
            return res.json();
        })
        .then(function(data) {
            return uploader.upload(data.upload_url, file, data.s3_key, contentType, data.cache_control);
        })
        .then(function(s3Key) {
            return fetch('/api/upload/confirm', {
                method: 'POST',
                headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
                body: JSON.stringify({ item_id: itemId, file_type: 'video', s3_key: s3Key })
            });
        })
        .then(function(res) {
            if (!res.ok) return res.json().catch(function() { return {}; }).then(function(d) {
                throw new Error(d.error || 'Failed to confirm upload');
            });
            return res.json().catch(function() { return {}; });
        })
        .then(function(result) {
            if (result && result.pending_review) {
                statusEl.innerHTML = '<div class="upload-status-msg is-warning">Upload accepted but held for review — our scanner flagged it.</div>';
            } else {
                statusEl.innerHTML = '<div class="upload-status-msg is-success">Upload complete</div>';
            }
        })
        .catch(function(err) {
            // Server error text is set via textContent, not innerHTML, so a
            // message echoed from an API response can't inject markup.
            var msg = document.createElement('div');
            msg.className = 'upload-status-msg is-error';
            msg.textContent = err.message || 'Upload failed';
            statusEl.replaceChildren(msg);
        });
    }
})();