/**
 * ViditScript Main JavaScript
 * 
 * This file handles WebSocket connections for real-time processing updates
 * and other client-side functionality.
 */

// ViditScript Main JavaScript

// Set up Socket.IO connection for real-time updates
document.addEventListener('DOMContentLoaded', function() {
    // Connect to Socket.IO if it's available (might not be loaded on all pages)
    if (typeof io !== 'undefined') {
        console.log('Connecting to Socket.IO for real-time updates');
        const socket = io();
        
        // Listen for connection events
        socket.on('connect', function() {
            console.log('Connected to Socket.IO server');
        });
        
        socket.on('disconnect', function() {
            console.log('Disconnected from Socket.IO server');
        });
        
        // Store socket in window object for other scripts to access
        window.viditSocket = socket;
    }
});

// Auto-dismiss flash messages after 5 seconds
document.addEventListener('DOMContentLoaded', function() {
    // Find all alert elements with a close button
    const alerts = document.querySelectorAll('.alert.alert-dismissible');
    
    // Set a timeout to automatically close each alert
    alerts.forEach(function(alert) {
        setTimeout(function() {
            // Create and trigger a click event on the close button
            const closeButton = alert.querySelector('.btn-close');
            if (closeButton) {
                closeButton.click();
            }
        }, 5000); // 5 seconds
    });
});

document.addEventListener('DOMContentLoaded', function() {
    
    // Initialize video file size validation
    if (document.getElementById('video-upload-form')) {
        initializeVideoUploadValidation();
    }
    
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function(tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});

/**
 * Initialize Socket.IO connection for real-time processing updates
 */
function initializeSocketConnection() {
    // Connect to Socket.IO server
    const socket = io();
    
    // Processing container for updates
    const processingContainer = document.getElementById('processing-container');
    const clipId = processingContainer.dataset.clipId;
    
    // Handle connection
    socket.on('connect', function() {
        console.log('WebSocket connected');
    });
    
    // Handle disconnection
    socket.on('disconnect', function() {
        console.log('WebSocket disconnected');
    });
    
    // Handle processing started event
    socket.on('processing_started', function(data) {
        if (data.clip_id == clipId) {
            updateProcessingStatus('Started processing your clip', 'active');
        }
    });
    
    // Handle processing update event
    socket.on('processing_update', function(data) {
        if (data.clip_id == clipId) {
            updateProcessingStatus(data.status, 'active');
        }
    });
    
    // Handle processing complete event
    socket.on('processing_complete', function(data) {
        if (data.clip_id == clipId) {
            updateProcessingStatus('Processing completed!', 'completed');
            showDownloadButton();
        }
    });
    
    // Handle processing error event
    socket.on('processing_error', function(data) {
        if (data.clip_id == clipId) {
            updateProcessingStatus('Error: ' + data.error, 'error');
        }
    });
}

/**
 * Update the processing status display
 * 
 * @param {string} message - The status message to display
 * @param {string} status - The status class (active, completed, error)
 */
function updateProcessingStatus(message, status) {
    const statusElement = document.getElementById('processing-status');
    
    if (statusElement) {
        // Update the message
        statusElement.textContent = message;
        
        // Remove existing status classes
        statusElement.classList.remove('active', 'completed', 'error');
        
        // Add the new status class
        statusElement.classList.add(status);
        
        // Update progress steps
        const progressSteps = document.querySelectorAll('.progress-step');
        
        if (status === 'completed') {
            progressSteps.forEach(step => {
                step.classList.remove('active');
                step.classList.add('completed');
            });
        }
        
        if (status === 'error') {
            const activeStep = document.querySelector('.progress-step.active');
            if (activeStep) {
                activeStep.classList.remove('active');
                activeStep.classList.add('error');
            }
        }
    }
}

/**
 * Show the download button when processing is complete
 */
function showDownloadButton() {
    const downloadButtonContainer = document.getElementById('download-button-container');
    
    if (downloadButtonContainer) {
        downloadButtonContainer.classList.remove('d-none');
    }
}

/**
 * Initialize video upload form validation
 */
function initializeVideoUploadValidation() {
    const form = document.getElementById('video-upload-form');
    const fileInput = document.getElementById('video_file');
    const maxSize = 100 * 1024 * 1024; // 100 MB in bytes
    
    form.addEventListener('submit', function(e) {
        if (fileInput.files.length > 0) {
            const fileSize = fileInput.files[0].size;
            
            if (fileSize > maxSize) {
                e.preventDefault();
                alert('The selected file is too large. Maximum size is 100 MB.');
            }
        }
    });
}