<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AudioMerge - Unir Audios Online</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/6.6.3/wavesurfer.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
  <style>
    /* --- Estilos Inspirados en la Imagen --- */
    :root {
      --bg-color: #1a1a2e; /* Fondo principal oscuro azul/púrpura */
      --surface-color: #2a2a4e; /* Color de superficie para paneles */
      --primary-cyan: #00f5d4; /* Cian brillante */
      --primary-purple: #9b5de5; /* Púrpura */
      --text-light: #e0e0e0; /* Texto claro principal */
      --text-medium: #a0a0c0; /* Texto secundario */
      --glow-cyan: 0 0 8px var(--primary-cyan), 0 0 16px var(--primary-cyan);
      --gradient: linear-gradient(90deg, var(--primary-cyan) 0%, var(--primary-purple) 100%);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif; /* Fuente más parecida */
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-light);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      padding: 1rem 2rem; /* Añadir padding general */
    }

    /* --- Header --- */
    header {
      text-align: center;
      margin-bottom: 1.5rem;
    }

    .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .logo-icon {
        font-size: 2.5rem; /* Más grande */
        color: var(--primary-cyan);
        text-shadow: var(--glow-cyan);
    }

    header h1 {
      font-size: 2.5rem; /* Más grande */
      font-weight: 700;
      color: var(--primary-cyan);
      text-shadow: var(--glow-cyan);
    }

    .intro {
        text-align: center;
        margin-bottom: 2rem;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .intro h2 {
        display: none; /* Ocultamos el h2 original, el h1 ya es el título principal */
    }

    .intro p {
        color: var(--text-medium);
        line-height: 1.6;
        font-size: 1rem;
    }

    .separator {
        height: 2px;
        background: var(--gradient);
        width: 100%;
        max-width: 800px;
        margin: 0 auto 2rem auto; /* Centrado */
        border: none;
        border-radius: 1px;
    }

    /* --- Layout Principal (2 Columnas) --- */
    main {
      flex: 1;
      display: flex;
      flex-direction: column; /* Por defecto, apilado */
      align-items: center;
      gap: 2rem;
      width: 100%;
      max-width: 1200px; /* Ancho máximo */
      margin: 0 auto;
    }

    .content-wrapper {
        display: flex;
        flex-direction: row; /* Filas en pantallas grandes */
        gap: 2rem;
        width: 100%;
    }

    /* --- Panel de Controles (Izquierda) --- */
    .controls-panel {
        background-color: var(--surface-color);
        padding: 1.5rem;
        border-radius: 12px;
        width: 100%; /* Ocupa todo en móvil */
        max-width: 350px; /* Ancho fijo en escritorio */
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        align-self: flex-start; /* Alinear arriba */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    .control-group h3 {
        color: var(--primary-cyan);
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    /* Iconos simples para los títulos de grupo */
    .control-group h3::before {
        content: '⚙️'; /* Icono genérico, puedes cambiarlo */
        font-size: 1rem;
    }
    .control-group.upload h3::before { content: '📁'; }
    .control-group.actions h3::before { content: '🚀'; }


    #file-input { display: none; }

    .btn {
      background: var(--gradient);
      color: var(--bg-color); /* Texto oscuro sobre gradiente */
      font-weight: 600;
      border: none;
      padding: 0.8rem 1.5rem;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      text-shadow: none; /* Quitar sombra de texto si la hubiera */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .btn:hover {
      opacity: 0.9;
      box-shadow: 0 4px 10px rgba(155, 93, 229, 0.4); /* Sombra púrpura al pasar */
    }

    .btn:disabled {
      background: #555e70; /* Gris oscuro deshabilitado */
      color: #888;
      cursor: not-allowed;
      box-shadow: none;
      opacity: 0.7;
    }

    /* Botón Secundario/Borrar */
     .btn-secondary {
        background: #4a4a6e; /* Un gris azulado */
        color: var(--text-light);
    }
    .btn-secondary:hover {
        background: #5a5a7e;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        opacity: 1;
    }
    /* Botón Error */
     .btn-error {
        background: #c0392b; /* Rojo oscuro */
        color: var(--text-light);
    }
    .btn-error:hover {
        background: #e74c3c; /* Rojo más brillante */
        box-shadow: 0 4px 10px rgba(192, 57, 43, 0.4);
        opacity: 1;
    }

    .file-status {
        color: var(--text-medium);
        font-size: 0.9rem;
        margin-top: 0.5rem;
        text-align: center;
    }

    /* Lista de Audios */
    .audio-list-container {
        max-height: 350px; /* Altura máxima */
        overflow-y: auto;
        padding-right: 5px; /* Espacio para scrollbar */
    }

    /* Custom Scrollbar */
    .audio-list-container::-webkit-scrollbar {
        width: 8px;
    }
    .audio-list-container::-webkit-scrollbar-track {
        background: var(--surface-color);
        border-radius: 4px;
    }
    .audio-list-container::-webkit-scrollbar-thumb {
        background: var(--primary-purple);
        border-radius: 4px;
    }
    .audio-list-container::-webkit-scrollbar-thumb:hover {
        background: var(--primary-cyan);
    }


    .audio-item {
      background-color: rgba(0, 0, 0, 0.2); /* Fondo sutil */
      border-radius: 6px;
      padding: 0.75rem 1rem;
      margin-bottom: 0.75rem;
      border-left: 4px solid var(--primary-cyan); /* Indicador izquierdo */
    }

    .audio-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.75rem;
    }

    .audio-name {
      font-weight: 600;
      font-size: 0.95rem;
      word-break: break-all; /* Evitar overflow */
    }

    .audio-meta {
      font-size: 0.8rem;
      color: var(--text-medium);
      flex-shrink: 0; /* No achicar */
      margin-left: 1rem;
    }

    .audio-options {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      align-items: center;
    }

    .audio-options label {
      font-size: 0.85rem;
      color: var(--text-medium);
      display: flex;
      align-items: center;
      gap: 0.3rem;
    }

    .audio-options input[type="number"] {
      width: 70px;
      padding: 0.4rem;
      border-radius: 4px;
      border: 1px solid #4a4a6e; /* Borde sutil */
      background-color: var(--bg-color); /* Fondo como el body */
      color: var(--text-light);
      font-size: 0.85rem;
    }
     .audio-options input[type="number"]:focus {
         outline: none;
         border-color: var(--primary-cyan);
         box-shadow: 0 0 5px var(--primary-cyan);
     }

    /* --- Panel de Salida (Derecha) --- */
    .output-panel {
      background-color: var(--surface-color);
      padding: 1.5rem;
      border-radius: 12px;
      flex: 1; /* Ocupa el espacio restante */
      display: flex;
      flex-direction: column;
      align-items: center; /* Centrar contenido inicial */
      justify-content: center; /* Centrar contenido inicial */
      min-height: 300px; /* Altura mínima para que se vea bien */
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    .output-placeholder {
        text-align: center;
        color: var(--text-medium);
    }
    .output-placeholder .icon {
        font-size: 4rem;
        color: var(--primary-cyan);
        opacity: 0.6;
        margin-bottom: 1rem;
    }

    .output-content {
        display: none; /* Oculto por defecto */
        width: 100%;
    }
     .output-panel.active .output-placeholder {
         display: none;
     }
     .output-panel.active .output-content {
         display: block;
     }
     .output-panel.active {
         justify-content: flex-start; /* Alinear arriba cuando hay contenido */
     }

    .output-content h3 {
        color: var(--primary-cyan);
        text-align: center;
        margin-bottom: 1.5rem;
        font-size: 1.3rem;
    }

    .output-waveform {
      width: 100%;
      height: 120px; /* Altura fija */
      background-color: rgba(0, 0, 0, 0.2); /* Fondo sutil */
      border-radius: 8px;
      margin-bottom: 1.5rem;
    }

    .output-controls {
      display: flex;
      justify-content: center; /* Centrar botones */
      gap: 1rem;
      flex-wrap: wrap; /* Para móviles */
    }

    /* --- Sección de Características (Opcional, estilizada) --- */
     .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
        width: 100%;
        margin-top: 2rem; /* Espacio arriba */
     }

     .feature-card {
        background-color: var(--surface-color);
        padding: 1.5rem;
        border-radius: 12px;
        text-align: center;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-top: 3px solid var(--primary-cyan); /* Borde superior */
     }

     .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 245, 212, 0.2); /* Sombra cyan al pasar */
     }

     .feature-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        color: var(--primary-cyan);
        /* text-shadow: var(--glow-cyan); No mucho brillo aquí */
     }

     .feature-title {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
        color: var(--primary-cyan);
        font-weight: 600;
     }

     .feature-card p {
        color: var(--text-medium);
        font-size: 0.9rem;
        line-height: 1.5;
     }


    /* --- Otros Elementos --- */
    .loader {
      display: none;
      border: 4px solid rgba(255, 255, 255, 0.2); /* Borde más sutil */
      border-radius: 50%;
      border-top: 4px solid var(--primary-cyan); /* Color primario */
      width: 30px;
      height: 30px;
      animation: spin 1s linear infinite;
      margin: 1rem auto; /* Centrado */
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .toast {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: var(--gradient); /* Gradiente también */
      color: var(--bg-color);
      padding: 1rem 1.5rem;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
      transition: transform 0.4s ease-out, opacity 0.4s ease-out;
      transform: translateY(120%); /* Empezar fuera */
      opacity: 0;
      z-index: 1000;
      font-weight: 600;
    }

    .toast.show {
      transform: translateY(0);
      opacity: 1;
    }
    /* Sobrescribir colores para éxito/error si es necesario, aunque el gradiente puede ser suficiente */
    .toast.success {
       /* background: linear-gradient(90deg, #2ecc71, #27ae60); */
    }
    .toast.error {
       background: linear-gradient(90deg, #e74c3c, #c0392b);
       color: var(--text-light);
    }

    footer {
      background-color: var(--surface-color);
      color: var(--text-medium);
      padding: 1.5rem;
      text-align: center;
      margin-top: 3rem; /* Más espacio antes del footer */
      border-top: 2px solid var(--primary-cyan);
      font-size: 0.9rem;
    }

    .error-message {
      color: #e74c3c; /* Rojo error */
      margin-top: 0.5rem;
      font-size: 0.9rem;
      text-align: center;
    }

    /* --- Responsividad --- */
    @media (max-width: 768px) {
       body {
           padding: 1rem; /* Menos padding en móvil */
       }
       .content-wrapper {
           flex-direction: column; /* Apilar columnas */
       }
       .controls-panel {
           max-width: 100%; /* Ancho completo */
           order: 1; /* Controles primero */
       }
       .output-panel {
           width: 100%;
           order: 2; /* Salida después */
           min-height: 250px;
       }
       header h1 { font-size: 2rem; }
       .logo-icon { font-size: 2rem; }
       .feature-grid { grid-template-columns: 1fr; } /* Una columna para features */
    }

  </style>
  <!-- No necesitas <style type="text/css">, puedes combinarlo -->
</head>
<body>
  <header>
    <div class="logo">
      <div class="logo-icon">🎵</div> <!-- Puedes cambiar el icono si quieres -->
      <h1>AudioMerge</h1>
    </div>
    <section class="intro">
      <!-- H2 eliminado, párrafo principal -->
      <p>Combina múltiples archivos de audio y personaliza qué fragmentos se unen. Sube tus MP3, WAV u OGG, define inicio y fin, y genera una mezcla a tu medida.</p>
    </section>
    <hr class="separator"> <!-- Separador estilizado -->
  </header>

  <main>
    <div class="content-wrapper">

      <!-- Panel de Controles (Izquierda) -->
      <aside class="controls-panel">
        <div class="control-group upload">
           <h3>Añadir Archivos</h3>
           <input type="file" id="file-input" accept="audio/*" multiple>
           <button class="btn" id="select-files">
             <span>⬆️ Subir Audios</span>
           </button>
           <p class="file-status" id="file-status">Ningún archivo seleccionado</p>
           <div class="error-message" id="upload-error"></div>
        </div>

        <div class="control-group files">
            <h3>Archivos Cargados</h3>
             <div class="audio-list-container" id="audio-list">
                <!-- Los items de audio aparecerán aquí -->
             </div>
        </div>

        <div class="control-group actions">
            <h3>Acciones</h3>
             <div class="loader" id="merge-loader"></div>
             <button class="btn" id="merge-btn" disabled>
               <span>✨ Combinar Audios</span>
             </button>
             <button class="btn btn-secondary" id="clear-btn" disabled>
               <span>🗑️ Borrar Todo</span>
             </button>
        </div>
      </aside>

      <!-- Panel de Salida (Derecha) -->
      <section class="output-panel" id="output-panel">
          <!-- Estado inicial -->
          <div class="output-placeholder" id="output-placeholder">
              <div class="icon">🎶</div>
              <p>El audio combinado aparecerá aquí</p>
          </div>
          <!-- Contenido cuando hay salida -->
          <div class="output-content" id="output-content">
              <h3>Audio Combinado</h3>
              <div class="output-waveform" id="output-waveform"></div>
              <div class="output-controls">
                  <button class="btn" id="play-output">
                      <span id="play-text">▶️ Reproducir</span>
                  </button>
                  <button class="btn btn-secondary" id="download-output">
                      <span>⬇️ Descargar</span>
                  </button>
              </div>
          </div>
      </section>

    </div>

    <!-- Sección de Características (opcional) -->
    <div class="feature-grid">
      <div class="feature-card">
        <div class="feature-icon">🎚️</div>
        <h3 class="feature-title">Fácil de Usar</h3>
        <p>Interfaz intuitiva para combinar audios sin complicaciones.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon">✂️</div>
        <h3 class="feature-title">Personalización</h3>
        <p>Define el inicio y fin exacto de cada fragmento de audio.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon">📱</div>
        <h3 class="feature-title">Responsivo</h3>
        <p>Funciona en cualquier dispositivo, desde PC hasta móviles.</p>
      </div>
    </div>
  </main>

  <div class="toast" id="toast">Mensaje de notificación</div>

  <footer>
    <p>© 2025 AudioMerge - Herramienta online para unir archivos de audio</p>
  </footer>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Elementos del DOM (actualizados para la nueva estructura)
      const fileInput = document.getElementById('file-input');
      const selectFilesBtn = document.getElementById('select-files');
      const audioListContainer = document.getElementById('audio-list'); // El contenedor de la lista
      const mergeBtn = document.getElementById('merge-btn');
      const clearBtn = document.getElementById('clear-btn');
      const mergeLoader = document.getElementById('merge-loader');
      const outputPanel = document.getElementById('output-panel');
      const outputPlaceholder = document.getElementById('output-placeholder');
      const outputContent = document.getElementById('output-content');
      const outputWaveformEl = document.getElementById('output-waveform'); // Elemento para WaveSurfer
      const playOutputBtn = document.getElementById('play-output');
      const playText = document.getElementById('play-text');
      const downloadOutputBtn = document.getElementById('download-output');
      const uploadError = document.getElementById('upload-error');
      const toast = document.getElementById('toast');
      const fileStatus = document.getElementById('file-status');

      // Estado de la aplicación
      let audioFilesData = []; // Array para guardar { file: File, start: number, end: number | null }

      // Inicializar WaveSurfer para la salida (con nuevos colores)
      let outputWavesurfer = WaveSurfer.create({
        container: outputWaveformEl, // Usar el elemento real
        waveColor: 'rgba(155, 93, 229, 0.7)', // Púrpura semi-transparente
        progressColor: 'var(--primary-cyan)', // Cian sólido
        cursorColor: 'var(--primary-cyan)',
        height: 120,
        barWidth: 2,
        barRadius: 2,
        responsive: true,
        hideScrollbar: true
      });

      // --- Event Listeners ---

      selectFilesBtn.addEventListener('click', () => fileInput.click());

      fileInput.addEventListener('change', handleFiles);

      // Arrastrar y soltar (ahora en el panel de controles o un área específica si prefieres)
      // Para simplicidad, lo dejamos en el botón y el input por ahora.
      // Si quieres drag & drop, necesitarías añadir listeners a `controls-panel` o un div específico.

      clearBtn.addEventListener('click', clearAll);

      mergeBtn.addEventListener('click', processAndMergeAudio);

      playOutputBtn.addEventListener('click', toggleOutputPlayback);

      // Actualizar tiempos en el array cuando cambian los inputs
      audioListContainer.addEventListener('change', (event) => {
         if (event.target.classList.contains('start-time') || event.target.classList.contains('end-time')) {
            const itemElement = event.target.closest('.audio-item');
            const index = parseInt(itemElement.dataset.index, 10);
            if (index >= 0 && index < audioFilesData.length) {
                 if (event.target.classList.contains('start-time')) {
                    audioFilesData[index].start = parseFloat(event.target.value) || 0;
                 } else {
                    // Permitir vacío o número para 'end'
                    const val = parseFloat(event.target.value);
                    audioFilesData[index].end = isNaN(val) ? null : val;
                 }
                console.log("Updated times:", audioFilesData[index]);
            }
         }
      });

       // Listener para actualizar estado de reproducción en WaveSurfer
       outputWavesurfer.on('play', () => { playText.textContent = '⏸️ Pausa'; });
       outputWavesurfer.on('pause', () => { playText.textContent = '▶️ Reproducir'; });
       outputWavesurfer.on('finish', () => { playText.textContent = '▶️ Reproducir'; });


      // --- Funciones ---

      function handleFiles(event) {
        const newFiles = Array.from(event.target.files || event.dataTransfer.files)
                           .filter(file => file.type.startsWith('audio/'));

        if (newFiles.length === 0) return;

        newFiles.forEach(file => {
            // Añadir al array de datos con tiempos por defecto
            audioFilesData.push({ file: file, start: 0, end: null });
        });

        // Limpiar el input para permitir seleccionar el mismo archivo de nuevo
        fileInput.value = '';
        displayFiles();
        updateButtonStates();
      }

      function displayFiles() {
        audioListContainer.innerHTML = ''; // Limpiar lista visual
        if (audioFilesData.length === 0) {
            fileStatus.textContent = 'Ningún archivo seleccionado';
            return;
        }

        fileStatus.textContent = `${audioFilesData.length} archivo(s) seleccionado(s)`;

        audioFilesData.forEach((data, index) => {
          const file = data.file;
          const item = document.createElement('div');
          item.classList.add('audio-item');
          item.setAttribute('data-index', index); // Guardar índice

          // Usar 'null' para end significa hasta el final
          const endValue = data.end === null ? '' : data.end;

          item.innerHTML = `
            <div class="audio-info">
              <div class="audio-name">${escapeHTML(file.name)}</div>
              <div class="audio-meta">${(file.size / 1024).toFixed(1)} KB</div>
            </div>
            <div class="audio-options">
              <label>Inicio (s): <input type="number" class="start-time" value="${data.start}" min="0" step="0.1"></label>
              <label>Fin (s): <input type="number" class="end-time" value="${endValue}" placeholder="Final" min="0" step="0.1"></label>
            </div>
          `;
          audioListContainer.appendChild(item);
        });
      }

       function updateButtonStates() {
          const hasFiles = audioFilesData.length > 0;
          mergeBtn.disabled = !hasFiles;
          clearBtn.disabled = !hasFiles;
       }

      function clearAll() {
        audioFilesData = [];
        displayFiles();
        updateButtonStates();
        // Ocultar sección de salida y resetear WaveSurfer si estaba visible
        outputPanel.classList.remove('active');
        outputWavesurfer.empty();
        playText.textContent = '▶️ Reproducir';
        uploadError.textContent = ''; // Limpiar errores
      }

      async function processAndMergeAudio() {
          if (audioFilesData.length === 0) {
              showToast('No hay archivos para combinar.', 'error');
              return;
          }

          mergeBtn.disabled = true;
          clearBtn.disabled = true; // Deshabilitar mientras procesa
          mergeLoader.style.display = 'block';
          uploadError.textContent = '';
          outputPanel.classList.remove('active'); // Ocultar salida previa

          try {
              const context = new (window.AudioContext || window.webkitAudioContext)();
              const buffers = await Promise.all(audioFilesData.map(data => decodeAudioFile(context, data.file)));

              let processedBuffers = [];
              let totalLength = 0;
              let sampleRate = 0;
              let numChannels = 0;

              for (let i = 0; i < buffers.length; i++) {
                  const buffer = buffers[i];
                  const data = audioFilesData[i];

                  if (i === 0) { // Tomar datos del primer buffer válido
                      sampleRate = buffer.sampleRate;
                      numChannels = buffer.numberOfChannels;
                  } else if (buffer.sampleRate !== sampleRate || buffer.numberOfChannels !== numChannels) {
                      // Simple manejo de incompatibilidad: omitir o intentar resamplear (complejo)
                      console.warn(`Archivo ${data.file.name} omitido debido a diferente SampleRate/Canales.`);
                      showToast(`Formato incompatible: ${data.file.name}`, 'error');
                      continue; // Omitir este buffer
                  }

                  let startTime = data.start;
                  let endTime = data.end === null ? buffer.duration : data.end;

                  // Validar tiempos
                  startTime = Math.max(0, Math.min(startTime, buffer.duration));
                  endTime = Math.max(startTime, Math.min(endTime, buffer.duration));

                  if (startTime >= endTime) continue; // Omitir si no hay duración

                  const startSample = Math.floor(startTime * sampleRate);
                  const endSample = Math.floor(endTime * sampleRate);
                  const sliceLength = endSample - startSample;

                  if (sliceLength <= 0) continue; // Omitir si no hay muestras

                  const slicedBuffer = context.createBuffer(numChannels, sliceLength, sampleRate);
                  for (let channel = 0; channel < numChannels; channel++) {
                      const channelData = buffer.getChannelData(channel).slice(startSample, endSample);
                      slicedBuffer.copyToChannel(channelData, channel, 0);
                  }
                  processedBuffers.push(slicedBuffer);
                  totalLength += sliceLength;
              }

               if (processedBuffers.length === 0 || totalLength === 0) {
                    throw new Error("No se pudo procesar ningún fragmento de audio válido.");
               }

              // Crear buffer de salida y concatenar
              const outputBuffer = context.createBuffer(numChannels, totalLength, sampleRate);
              let offset = 0;
              processedBuffers.forEach(buffer => {
                  for (let channel = 0; channel < numChannels; channel++) {
                      outputBuffer.getChannelData(channel).set(buffer.getChannelData(channel), offset);
                  }
                  offset += buffer.length;
              });

              // Convertir a Blob WAV y mostrar
              const wavBlob = bufferToWav(outputBuffer);
              const url = URL.createObjectURL(wavBlob);

              outputWavesurfer.load(url);
              outputPanel.classList.add('active'); // Mostrar panel de salida

              // Configurar descarga
              downloadOutputBtn.onclick = () => {
                  const a = document.createElement('a');
                  a.href = url;
                  a.download = `merged_audio_${Date.now()}.wav`;
                  document.body.appendChild(a);
                  a.click();
                  document.body.removeChild(a);
                  // No revocar URL inmediatamente si WaveSurfer aún lo usa
                  // URL.revokeObjectURL(url); <-- Podría causar problemas si se descarga mientras reproduce
              };

              showToast('¡Audios combinados con éxito!', 'success');

          } catch (err) {
              console.error("Error al combinar audios:", err);
              uploadError.textContent = `Error: ${err.message || 'No se pudieron procesar los archivos.'}`;
              showToast('Error al combinar los audios.', 'error');
          } finally {
              mergeLoader.style.display = 'none';
              mergeBtn.disabled = false; // Reactivar botones
              clearBtn.disabled = false;
              context.close(); // Cerrar AudioContext
          }
      }

      function decodeAudioFile(context, file) {
          return new Promise((resolve, reject) => {
              const reader = new FileReader();
              reader.onload = (e) => {
                  context.decodeAudioData(e.target.result)
                      .then(resolve)
                      .catch(err => reject(new Error(`Error decodificando ${file.name}: ${err.message}`)));
              };
              reader.onerror = (e) => reject(new Error(`Error leyendo ${file.name}: ${e.target.error}`));
              reader.readAsArrayBuffer(file);
          });
      }


      function toggleOutputPlayback() {
        if (!outputWavesurfer.isReady) return; // Asegurarse que esté cargado

        if (outputWavesurfer.isPlaying()) {
          outputWavesurfer.pause();
        } else {
          outputWavesurfer.play();
        }
      }

      // --- Funciones Auxiliares ---

      function bufferToWav(buffer) {
          // (Misma función bufferToWav que tenías antes)
          const numChannels = buffer.numberOfChannels;
          const sampleRate = buffer.sampleRate;
          const format = 1; // PCM
          const bitDepth = 16;
          const bytesPerSample = bitDepth / 8;
          const blockAlign = numChannels * bytesPerSample;
          const bufferLength = buffer.length * blockAlign;
          const wavBuffer = new ArrayBuffer(44 + bufferLength);
          const view = new DataView(wavBuffer);

          writeString(view, 0, 'RIFF');
          view.setUint32(4, 36 + bufferLength, true);
          writeString(view, 8, 'WAVE');
          writeString(view, 12, 'fmt ');
          view.setUint32(16, 16, true);
          view.setUint16(20, format, true);
          view.setUint16(22, numChannels, true);
          view.setUint32(24, sampleRate, true);
          view.setUint32(28, sampleRate * blockAlign, true);
          view.setUint16(32, blockAlign, true);
          view.setUint16(34, bitDepth, true);
          writeString(view, 36, 'data');
          view.setUint32(40, bufferLength, true);

          let offset = 44;
          for (let i = 0; i < buffer.length; i++) {
              for (let channel = 0; channel < numChannels; channel++) {
                  let sample = buffer.getChannelData(channel)[i];
                  sample = Math.max(-1, Math.min(1, sample));
                  const intSample = sample < 0 ? sample * 0x8000 : sample * 0x7FFF;
                  view.setInt16(offset, intSample, true);
                  offset += 2;
              }
          }
          return new Blob([view], { type: 'audio/wav' });
      }

      function writeString(view, offset, string) {
          for (let i = 0; i < string.length; i++) {
              view.setUint8(offset + i, string.charCodeAt(i));
          }
      }

      let toastTimeout;
      function showToast(message, type = 'info') {
          toast.textContent = message;
          toast.className = 'toast'; // Reset classes
          toast.classList.add(type); // Add type class (success, error, info)
          toast.classList.add('show');

          clearTimeout(toastTimeout);
          toastTimeout = setTimeout(() => {
              toast.classList.remove('show');
          }, 3000); // Ocultar después de 3 segundos
      }

       function escapeHTML(str) {
           const div = document.createElement('div');
           div.textContent = str;
           return div.innerHTML;
       }


       // --- Inicialización ---
       updateButtonStates(); // Estado inicial de botones

    });
  </script>
</body>
</html>