document.addEventListener('DOMContentLoaded', () => {
    const dropArea = document.getElementById('drop-area');
    const fileInput = document.getElementById('fileInput');
    const options = document.getElementById('options');
    const multiplicationFactor = document.getElementById('multiplicationFactor');
    const factorValue = document.getElementById('factorValue');
    const processButton = document.getElementById('processButton');
    const result = document.getElementById('result');
    const audioPlayer = document.getElementById('audioPlayer');
    const downloadLink = document.getElementById('downloadLink');

    let isDecrypting = false;
    let currentFile = null;

    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    ['dragenter', 'dragover'].forEach(eventName => {
        dropArea.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, unhighlight, false);
    });

    function highlight() {
        dropArea.classList.add('highlight');
    }

    function unhighlight() {
        dropArea.classList.remove('highlight');
    }

    dropArea.addEventListener('drop', handleDrop, false);

    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        handleFiles(files);
    }

    fileInput.addEventListener('change', function() {
        handleFiles(this.files);
    });

    function handleFiles(files) {
        if (files.length > 0) {
            currentFile = files[0];
            isDecrypting = currentFile.type === 'audio/mpeg';
            options.style.display = 'block';
            processButton.textContent = isDecrypting ? 'Decrypt' : 'Encrypt';
            dropArea.textContent = `File selected: ${currentFile.name}`;
        }
    }

    processButton.addEventListener('click', function() {
        if (!currentFile) {
            alert('Please select a file first.');
            return;
        }

        const formData = new FormData();
        formData.append('file', currentFile);
        formData.append('factor', multiplicationFactor.value);

        fetch('/process', {
            method: 'POST',
            body: formData
        })
        .then(response => {
            if (!response.ok) {
                return response.json().then(err => { throw new Error(err.error || 'Unknown error occurred') });
            }
            return response.blob();
        })
        .then(blob => {
            if (blob.size === 0) {
                throw new Error('Received empty file from server');
            }
            const url = URL.createObjectURL(blob);
            result.style.display = 'block';
            if (isDecrypting) {
                audioPlayer.style.display = 'none';
                downloadLink.textContent = 'Download Decrypted File';
            } else {
                audioPlayer.style.display = 'block';
                audioPlayer.src = url;
                downloadLink.textContent = 'Download Encrypted MP3';
            }
            downloadLink.href = url;
            downloadLink.download = isDecrypting ? 'decrypted_file' : 'encrypted.mp3';
            console.log('File processed successfully. Size:', blob.size, 'bytes');
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while processing the file: ' + error.message);
        });
    });
});