/*
    necesito poder agregar nombres a cada audios, pero solo cuando haya mas de 1 audio y cuando const musicCheckbox este marcado  musicCheckbox = document.getElementById('musiccheck'); (con algo asi music = musicCheckbox.checked ? musicCheckbox.value : 0;), para eso se me ocurre que se puede agregar un input de texto debajo de cada progress bar, con el id que identifique el respectivo audio, y se desmarca, ocultar esos input, es decir, es muy dinamico
    */
    const subidaAudio = async file => {
        try {
            alert(`Audio subido: ${file.name}`);
            previewAudio.style.display = 'block';
            opciones.style.display = 'flex';
            const tempId = `temp-${Date.now()}`;
            const progressBarId = waveAudio(file, tempId);
            audiosData.push({tempId, fileUrl: null, fileId: null});

            // Actualiza la dirección de flexión después de agregar el audio
            actualizarFlexDirection();

            const {fileUrl, fileId} = await subidaRsBackend(file, progressBarId);
            const index = audiosData.findIndex(audio => audio.tempId === tempId);
            if (index !== -1) {
                audiosData[index].audioUrl = fileUrl;
                audiosData[index].audioId = fileId;
                const waveformContainer = document.querySelector(`[data-temp-id="${tempId}"]`);
                if (waveformContainer) {
                    waveformContainer.setAttribute('data-audio-url', fileUrl);
                }
            }
            if (audiosData.length > 30) {
                alert('Ya has subido el límite máximo de 30 audios.');
            }
        } catch (error) {
            alert('Hubo un problema al cargar el Audio. Inténtalo de nuevo.');
        }
    };

    const waveAudio = (file, tempId) => {
        const reader = new FileReader(),
            audioContainerId = `waveform-container-${Date.now()}`,
            progressBarId = `progress-${Date.now()}`;

        reader.onload = e => {
            const newWaveform = document.createElement('div');
            newWaveform.innerHTML = `
                <div id="${audioContainerId}" class="waveform-wrapper">
                    <div class="waveform-container without-image" data-temp-id="${tempId}">
                        <div class="waveform-loading" style="display: none;">Cargando...</div>
                        <audio controls style="width: 100%;"><source src="${e.target.result}" type="${file.type}"></audio>
                        <div class="file-name">${file.name}</div>
                        <button class="delete-waveform">Eliminar</button>
                    </div>
                    <div class="progress-bar" style="width: 100%; height: 2px; background-color: #ddd; margin-top: 10px;">
                        <div id="${progressBarId}" class="progress" style="width: 0%; height: 100%; background-color: #4CAF50; transition: width 0.3s;"></div>
                    </div>
                </div>`;

            previewAudio.appendChild(newWaveform);
            inicializarWaveform(audioContainerId, e.target.result);
            const deleteButton = newWaveform.querySelector('.delete-waveform');
            deleteButton.addEventListener('click', event => {
                event.stopPropagation(); 
                eliminarWaveform(audioContainerId, tempId);
            });
        };

        reader.readAsDataURL(file);
        return progressBarId;
    };