document.addEventListener('DOMContentLoaded', () => {
    const uploadButton = document.getElementById('uploadButton');
    const fileInput = document.getElementById('fileInput');
    const uploadCard = document.getElementById('upload-card');
    const processingStatus = document.getElementById('processing-status');
    const progressBar = document.querySelector('.progress-bar');
    const statusText = document.getElementById('status-text');
    const fileNameText = document.getElementById('file-name');
    const nextStepButton = document.getElementById('nextStepButton');

    uploadButton.addEventListener('click', () => {
        fileInput.click();
    });

    fileInput.addEventListener('change', () => {
        if (fileInput.files.length > 0) {
            const file = fileInput.files[0];
            fileNameText.textContent = `File: ${file.name}`;
            
            uploadCard.classList.add('hidden');
            processingStatus.classList.remove('hidden');

            let progress = 0;
            statusText.textContent = 'Uploading...';
            progressBar.style.width = '0%';
            nextStepButton.classList.add('hidden');

            const interval = setInterval(() => {
                progress += 10;
                progressBar.style.width = `${progress}%`;

                if (progress >= 50 && progress < 100) {
                    statusText.textContent = 'AI is analyzing your video...';
                }

                if (progress >= 100) {
                    clearInterval(interval);
                    statusText.textContent = 'Highlights are ready!';
                    progressBar.style.width = '100%';
                    nextStepButton.classList.remove('hidden');
                }
            }, 300);
        }
    });
});