// ====== canciones.js ======
// Módulo de Canciones - MicroBeam

// ============================================
// REFERENCIAS DOM (SOLO LAS QUE NO ESTÁN EN proyector.js)
// ============================================

const btnModeBible = document.getElementById('btnModeBible');
const btnModeSongs = document.getElementById('btnModeSongs');
const bibleControls = document.getElementById('bibleControls');
const songsControls = document.getElementById('songsControls');
const bibleNavControls = document.getElementById('bibleNavControls');
const txtSongSearch = document.getElementById('txtSongSearch');
const songSearchResults = document.getElementById('songSearchResults');
const songSearchList = document.getElementById('songSearchList');
const songSearchCount = document.getElementById('songSearchCount');
const lblCountContainer = document.getElementById('lblCount');
const lblObservaciones = document.getElementById('lblObservaciones');
const mediaLinksContainer = document.getElementById('mediaLinksContainer');
const bibleResultsContainerUI = document.getElementById('resultsContainer');
const songResultsContainerUI = document.getElementById('songResultsContainer');
const btnToggleRepertorio = document.getElementById('btnToggleRepertorio');
const repertorioMiniPanel = document.getElementById('repertorioMiniPanel');
const repertorioCount = document.getElementById('repertorioCount');
const btnVerRepertorio = document.getElementById('btnVerRepertorio');
const btnLimpiarRepertorio = document.getElementById('btnLimpiarRepertorio');
const appTitle = document.getElementById('appTitle');
const infoModal = document.getElementById('infoModal');
const repertorioModal = document.getElementById('repertorioModal');
const numberOverlay = document.getElementById('numberOverlay');

// ============================================
// ESTADO
// ============================================

let isSongMode = false;
let isRepertorioMode = false;
let cancionesRepertorio = [];
let currentSongLines = [];
let activeLineIndex = -1;
let numberKeystrokes = "";
let numberKeystrokesTimer = null;
let timerBusquedaCanciones = null;

let lblBibleState = { title: "ENCONTRADOS (Versículos)" };
let lblSongState = { title: "🎵 MODO CANCIONES", obsVisible: false, obsText: "", mediaVisible: false };

// --- NUEVAS VARIABLES PARA CANCIONES LOCALES ---
let customCanciones = JSON.parse(localStorage.getItem('microbeam_custom_songs')) || [];

// Función para unir la BD Fija con las Canciones Locales
function getAllSongs() {
    return (window.CANCIONES_DB || []).concat(customCanciones);
}

// ============================================
// CAMBIO DE MODO
// ============================================

if (btnModeBible && btnModeSongs) {
    btnModeBible.addEventListener('click', () => {
        isSongMode = false;
        btnModeBible.classList.add('active');
        btnModeSongs.classList.remove('active');
        bibleControls.style.display = 'block';
        songsControls.style.display = 'none';
        bibleNavControls.style.display = 'grid';

        lblSongState.title = lblCountContainer.innerText;
        lblSongState.obsVisible = lblObservaciones.style.display !== 'none';
        lblSongState.obsText = lblObservaciones.innerText;
        lblSongState.mediaVisible = mediaLinksContainer.style.display !== 'none';

        bibleResultsContainerUI.style.display = 'block';
        if (songResultsContainerUI) songResultsContainerUI.style.display = 'none';

        lblObservaciones.style.display = 'none';
        mediaLinksContainer.style.display = 'none';
        lblCountContainer.innerText = lblBibleState.title;

        const slider = document.getElementById('slideFontSize');
        const val = document.getElementById('valFontSize');
        if (slider && val) {
            slider.value = window.savedBibleFontSize || 7.0;
            val.innerText = (window.savedBibleFontSize || 7.0) + "vw";
        }
    });

    btnModeSongs.addEventListener('click', () => {
        isSongMode = true;
        btnModeSongs.classList.add('active');
        btnModeBible.classList.remove('active');
        bibleControls.style.display = 'none';
        songsControls.style.display = 'block';
        bibleNavControls.style.display = 'none';

        lblBibleState.title = lblCountContainer.innerText;

        bibleResultsContainerUI.style.display = 'none';
        if (songResultsContainerUI) songResultsContainerUI.style.display = 'block';

        lblCountContainer.innerText = lblSongState.title;
        lblObservaciones.innerText = lblSongState.obsText;
        lblObservaciones.style.display = lblSongState.obsVisible ? 'block' : 'none';
        mediaLinksContainer.style.display = lblSongState.mediaVisible ? 'flex' : 'none';

        const pullTop = document.getElementById('pullTopIndicator');
        const pullBot = document.getElementById('pullBottomIndicator');
        if (pullTop) pullTop.style.display = 'none';
        if (pullBot) pullBot.style.display = 'none';

        const slider = document.getElementById('slideFontSize');
        const val = document.getElementById('valFontSize');
        if (slider && val) {
            slider.value = window.savedSongFontSize || 8.5;
            val.innerText = (window.savedSongFontSize || 8.5) + "vw";
        }
    });
}

// ============================================
// UTILIDADES
// ============================================

function normalizeText(text) {
    if (!text) return "";
    return text.toString().toLowerCase().normalize("NFD")
        .replace(/[\u0300-\u036f]/g, "")
        .replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "")
        .replace(/\s{2,}/g, " ")
        .trim();
}

// ============================================
// BÚSQUEDA DE CANCIONES
// ============================================

if (txtSongSearch) {
    setTimeout(() => txtSongSearch.dispatchEvent(new Event('input')), 300);

     txtSongSearch.addEventListener('input', (e) => {
        const allSongs = getAllSongs(); // <--- USA LA LISTA COMBINADA
        if (!allSongs || allSongs.length === 0) return;
        
        const textoOriginal = e.target.value.trim();
        if (textoOriginal.length > 0 && textoOriginal.length < 3) return;
        
        clearTimeout(timerBusquedaCanciones);
        timerBusquedaCanciones = setTimeout(() => {
            let results = [];
            if (textoOriginal === "") {
                results = allSongs;
            } else {
                const rawTerms = textoOriginal.split(" ").filter(t => t.trim() !== "");
                const positiveTerms = rawTerms.filter(t => !t.startsWith("-")).map(t => normalizeText(t));
                const negativeTerms = rawTerms.filter(t => t.startsWith("-") && t.length > 1).map(t => normalizeText(t.substring(1)));
                
                results = allSongs.filter(c => {
                    const combined = normalizeText(c[1] + " " + c[2] + " " + c[3] + " " + c[4]);
                    if (positiveTerms.length > 0 && !positiveTerms.every(p => combined.includes(p))) return false;
                    if (negativeTerms.length > 0 && negativeTerms.some(n => combined.includes(n))) return false;
                    return true;
                }).sort((a, b) => {
                    const p1 = positiveTerms.length > 0 ? positiveTerms[0] : "";
                    return (p1 && normalizeText(a[1]).startsWith(p1)) ? -1 : 1;
                });
            }
            renderSongSearchResults(results);
        }, 250);
    });
}

function renderSongSearchResults(results) {
    if (songSearchCount) songSearchCount.innerText = `${results.length} encontradas`;
    if (songSearchList) songSearchList.innerHTML = '';
    
    results.forEach(song => {
        const li = document.createElement('li');
        li.style.padding = "8px";
        li.style.borderBottom = "1px solid #26262b";
        li.style.cursor = "pointer";
        li.style.display = "flex";
        li.style.justifyContent = "space-between";
        li.style.alignItems = "center";

        const leftContent = document.createElement('div');
        leftContent.style.flex = "1";
        leftContent.style.display = "flex";
        leftContent.style.alignItems = "center";

        if (isRepertorioMode) {
            const chk = document.createElement('input');
            chk.type = 'checkbox';
            chk.style.marginRight = "8px";
            chk.checked = cancionesRepertorio.some(s => s[0] === song[0]);
            chk.addEventListener('change', (e) => {
                e.stopPropagation();
                toggleRepertorio(song, chk.checked);
            });
            leftContent.appendChild(chk);
        }

        const isCustom = String(song[0]).startsWith('custom_');
        const badge = isCustom ? `<span style="background:#0076ff; color:white; font-size:0.6rem; padding:2px 4px; border-radius:3px; margin-left:5px;">LOCAL</span>` : '';
        
        const span = document.createElement('span');
        span.innerHTML = `<strong style="color:white;">${song[1]}</strong> ${badge} <br> <span style="color:#a0a0a5; font-size:0.8rem;">${song[2] || 'Desconocido'}</span>`;
        leftContent.appendChild(span);
        li.appendChild(leftContent);

        // Click para cargar la canción
        leftContent.addEventListener('click', () => {
            if (!isRepertorioMode) loadSongToPanel(song);
        });

        // Si es una canción local (creada por el usuario), mostrar controles
        if (isCustom) {
            const actionDiv = document.createElement('div');
            actionDiv.style.display = "flex";
            actionDiv.style.gap = "8px";

            const btnEdit = document.createElement('button');
            btnEdit.innerHTML = "✏️";
            btnEdit.className = "icon-btn";
            btnEdit.title = "Editar Canción";
            btnEdit.onclick = (e) => { e.stopPropagation(); abrirModalCancion(song); };

            const btnDelete = document.createElement('button');
            btnDelete.innerHTML = "🗑️";
            btnDelete.className = "icon-btn";
            btnDelete.title = "Eliminar Canción";
            btnDelete.style.color = "#ff6b6b";
            btnDelete.onclick = (e) => { 
                e.stopPropagation(); 
                if(confirm(`¿Estás seguro de eliminar la canción "${song[1]}"?`)) {
                    eliminarCancionLocal(song[0]);
                }
            };

            actionDiv.appendChild(btnEdit);
            actionDiv.appendChild(btnDelete);
            li.appendChild(actionDiv);
        }

        songSearchList.appendChild(li);
    });
}

// ============================================
// CARGA DE CANCIÓN
// ============================================

function loadSongToPanel(song) {
    lblCountContainer.innerText = `${song[1]} - ${song[2] || 'Desconocido'}`;
    lblObservaciones.innerText = song[3] || "";
    lblObservaciones.style.display = song[3] ? 'block' : 'none';

    mediaLinksContainer.innerHTML = '';
    const iconsMap = [
        { idx: 5, class: 'icon-video', title: 'Video', svg: '<svg class="icon" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="3"/><polygon points="10,9 16,12 10,15"/></svg>' },
        { idx: 6, class: 'icon-karaoke', title: 'Karaoke', svg: '<svg class="icon" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="3"/><polygon points="9,9 14,12 9,15"/><path d="M17.5 8.5v2a1.5 1.5 0 1 1-3 0v-2a1.5 1.5 0 1 1 3 0"/><path d="M16 12.5v2M14.5 14.5h3"/></svg>' },
        { idx: 7, class: 'icon-mp3', title: 'MP3', svg: '<svg class="icon" viewBox="0 0 24 24"><path d="M14 5v10"/><path d="M14 5l5-1v9"/><circle cx="10" cy="16.5" r="2.5"/><circle cx="19" cy="15.5" r="2.5"/></svg>' },
        { idx: 8, class: 'icon-inst', title: 'Pista Instrumental', svg: '<svg class="icon" viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2"/><path d="M8 6v12"/><path d="M12 6v12"/><path d="M16 6v12"/></svg>' },
        { idx: 9, class: 'icon-voces', title: 'Pista Voces', svg: '<svg class="icon" viewBox="0 0 24 24"><rect x="9" y="4" width="6" height="10" rx="3"/><path d="M6 11a6 6 0 0 0 12 0"/><path d="M12 17v3"/><path d="M9 20h6"/></svg>' },
        { idx: 10, class: 'icon-estudio', title: 'Versión Estudio', svg: '<svg class="icon" viewBox="0 0 24 24"><path d="M5 5h6a3 3 0 0 1 3 3v11H8a3 3 0 0 0-3 3z"/><path d="M19 5h-6a3 3 0 0 0-3 3v11h6a3 3 0 0 1 3 3z"/></svg>' }
    ];
    let hasMedia = false;
    iconsMap.forEach(m => {
        if (song[m.idx] && song[m.idx].trim() !== "") {
            hasMedia = true;
            const btn = document.createElement('a');
            btn.className = `media-btn ${m.class}`;
            btn.title = m.title;
            btn.innerHTML = m.svg;
            btn.onclick = (e) => { e.preventDefault(); window.open(song[m.idx], '_blank'); };
            mediaLinksContainer.appendChild(btn);
        }
    });
    mediaLinksContainer.style.display = hasMedia ? 'flex' : 'none';

    currentSongLines = song[4].replace(/\r/g,'').split('\n');
    activeLineIndex = -1; // Ahora rastreará el índice VISIBLE activo

    songResultsContainerUI.innerHTML = '';

    let currentSectionIdx = 0;
    let isFirstInSection = true;
    let visibleSlide = 1;
    let wasPreviousBreak = false; // Control de saltos múltiples consecutivos

    // Relación entre las diapositivas visibles y el índice real
    window.songVisibleToReal = [];
    window.songRealToVisible = [];

    currentSongLines.forEach((line, realIndex) => {
        const clean = line.trim();

        const isBreak =
            clean === "" ||
            /^\[.*\]$/.test(clean) ||
            /^\{.*\}$/.test(clean);

        // Los separadores NO generan diapositiva
        if (isBreak) {
            // Solo incrementamos el color si el renglón anterior NO era ya un salto
            if (!wasPreviousBreak) {
                currentSectionIdx++;
            }
            isFirstInSection = true;
            wasPreviousBreak = true;
            window.songRealToVisible[realIndex] = -1; 
            return;
        }

        // Si llegamos aquí, es una línea de letra real
        wasPreviousBreak = false;

        const visibleIndex = window.songVisibleToReal.length;

        window.songVisibleToReal.push(realIndex);
        window.songRealToVisible[realIndex] = visibleIndex;

        const div = document.createElement("div");
        div.id = "song-line-" + visibleIndex;
        div.className =
            "song-line-item verse-item sec-color-" +
            (currentSectionIdx % 7) +
            (isFirstInSection ? " section-start" : "");

        isFirstInSection = false;

        div.innerHTML = `
            <div class="song-line-num">${visibleSlide++}</div>
            <span class="line-text-content">
                <div class="song-line-text" contenteditable="false">${line}</div>
            </span>
        `;

        // 🌟 CAMBIO AQUÍ: Ahora enviamos el visibleIndex
        div.addEventListener("click", () => {
            projectSongLine(visibleIndex);
        });

        const textDiv = div.querySelector(".song-line-text");

        div.addEventListener("dblclick", () => {
            textDiv.contentEditable = "true";
            textDiv.focus();
        });

        textDiv.addEventListener("keydown", e => {
            if (e.key !== "Enter") return;
            e.preventDefault();
            textDiv.contentEditable = "false";
            currentSongLines[realIndex] = textDiv.innerText;
        });

        songResultsContainerUI.appendChild(div);
    });
}

// ============================================
// PROYECCIÓN DE LÍNEAS
// ============================================

function projectSongLine(visibleIndex) {
    // Validamos contra la cantidad de diapositivas VISIBLES reales
    if (!window.isProjectionReady || visibleIndex < 0 || visibleIndex >= window.songVisibleToReal.length) return;
    
    // 1. Limpiamos el borde y resplandor de TODAS las líneas anteriores
    document.querySelectorAll('.song-line-item').forEach(item => {
        item.classList.remove('active');
        item.style.border = "1px solid transparent"; // Deja el borde neutro original
        item.style.boxShadow = "none";               // Quita el resplandor de las que ya no están activas
    });
    
    // Actualizamos el índice de la diapositiva visible activa
    activeLineIndex = visibleIndex;
    
    // 2. Destacamos la diapositiva seleccionada con un marco brillante
    const target = document.getElementById(`song-line-${visibleIndex}`);
    if (target) {
        target.classList.add('active');
        
        // Aplicamos un borde azul eléctrico de 2.5 píxeles y un sombreado exterior brillante
        target.style.border = "2.5px solid #0076ff"; 
        target.style.boxShadow = "0 0 15px rgba(0, 118, 255, 0.7)";
        
        // Auto-scroll suave para mantener la diapositiva en el centro de la pantalla
        target.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
    
    // 3. Enviamos el texto en mayúsculas al proyector mapeando el índice visible al real
    const realIndex = window.songVisibleToReal[visibleIndex];
    window.proyectarTexto(currentSongLines[realIndex].toUpperCase(), "", window.savedSongFontSize);
}

// ============================================
// REPERTORIO
// ============================================

if (btnToggleRepertorio) {
    btnToggleRepertorio.addEventListener('click', () => {
        isRepertorioMode = !isRepertorioMode;
        btnToggleRepertorio.style.background = isRepertorioMode ? '#e53935' : '#4e4e5a';
        repertorioMiniPanel.style.display = isRepertorioMode ? 'flex' : 'none';
        txtSongSearch.dispatchEvent(new Event('input'));
    });
}

function toggleRepertorio(song, add) {
    if (add) cancionesRepertorio.push(song);
    else cancionesRepertorio = cancionesRepertorio.filter(s => s[0] !== song[0]);
    repertorioCount.innerText = `${cancionesRepertorio.length} seleccionada(s)`;
}

if (btnLimpiarRepertorio) {
    btnLimpiarRepertorio.addEventListener('click', () => {
        cancionesRepertorio = [];
        repertorioCount.innerText = "0 seleccionadas";
        txtSongSearch.dispatchEvent(new Event('input'));
    });
}

if (btnVerRepertorio) {
    btnVerRepertorio.addEventListener('click', () => {
        let repTexto = "REPERTORIO DE ALABANZA Y ADORACIÓN\n\n";
        cancionesRepertorio.forEach(song => {
            repTexto += `${song[1]} - ${song[2] || 'Desconocido'}\n`;
        });
        document.getElementById('txtRepertorio').value = repTexto;
        repertorioModal.style.display = 'flex';
    });
}

// ============================================
// BOTÓN "X" PARA BUSCADOR
// ============================================

const btnClearSongSearch = document.getElementById('btnClearSongSearch');
if (txtSongSearch && btnClearSongSearch) {
    txtSongSearch.addEventListener('input', function() {
        btnClearSongSearch.style.display = this.value.length > 0 ? 'block' : 'none';
    });
    btnClearSongSearch.addEventListener('click', function() {
        txtSongSearch.value = '';
        txtSongSearch.dispatchEvent(new Event('input'));
        txtSongSearch.focus();
        this.style.display = 'none';
    });
}

// ============================================
// LOGO Y MODALES
// ============================================

// Usamos btnProjectLogo (declarado en proyector.js) y window.proyectarLogo
if (typeof btnProjectLogo !== 'undefined') {
    btnProjectLogo.addEventListener('click', window.proyectarLogo);
}

if (appTitle) appTitle.addEventListener('click', () => infoModal.style.display = 'flex');
if (infoModal) infoModal.addEventListener('click', () => infoModal.style.display = 'none');
document.getElementById('closeInfoModal')?.addEventListener('click', () => infoModal.style.display = 'none');
document.getElementById('closeRepertorioModal')?.addEventListener('click', () => repertorioModal.style.display = 'none');

// ============================================
// ATALOS DE TECLADO
// ============================================
window.addEventListener('keydown', (e) => {
    // Bloqueo F5 / Ctrl+R
    if (e.key === 'F5' || (e.ctrlKey && (e.key === 'r' || e.key === 'R'))) {
        e.preventDefault();
        if (confirm("⚠️ ¿Recargar? Se cerrará la proyección y perderás el repertorio.")) {
            window.location.reload();
        }
        return;
    }

    // SHIFT+ENTER → Logo
    if (e.key === 'Enter' && e.shiftKey) {
        e.preventDefault();
        window.proyectarLogo();
        return;
    }

    const isTyping = e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.isContentEditable;

    if (e.key === 'Escape') {
        if (window.isProjectionReady) {
            window.limpiarProyeccion();
        }
        return;
    }

    if (isTyping) return;

  if (isSongMode) {
        // 🚀 NUEVA VALIDACIÓN: Saber si el contenedor de canciones REALMENTE está visible en pantalla
        const containerCanciones = document.getElementById('songResultsContainer');
        const estaEnModoCancionesReal = containerCanciones && containerCanciones.style.display !== 'none';

        // 🚀 SI EL PANEL NO ESTÁ VISIBLE, NO HACE NADA (Flechas, Espacio, Números y Enter se ignoran por completo)
        if (!estaEnModoCancionesReal) return; 

        if (e.key === ' ' || e.key === 'ArrowDown' || e.key === 'ArrowRight') {
            e.preventDefault();
            projectSongLine(activeLineIndex + 1);
        } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
            e.preventDefault();
            projectSongLine(activeLineIndex - 1);
        } else if (!isNaN(e.key) && e.key !== ' ') {
            numberKeystrokes += e.key;
            if (numberOverlay) {
                numberOverlay.innerText = numberKeystrokes;
                numberOverlay.style.display = 'block';
            }
            clearTimeout(numberKeystrokesTimer);
            numberKeystrokesTimer = setTimeout(() => {
                numberKeystrokes = "";
                if (numberOverlay) numberOverlay.style.display = 'none';
            }, 2000);
        } else if (e.key === 'Enter' && !e.shiftKey && numberKeystrokes !== "") {
            e.preventDefault();
            projectSongLine(parseInt(numberKeystrokes) - 1);
            numberKeystrokes = "";
            if (numberOverlay) numberOverlay.style.display = 'none';
            clearTimeout(numberKeystrokesTimer);
        }
    }
});

// ============================================
// GESTIÓN DE CANCIONES LOCALES (CRUD)
// ============================================

function abrirModalCancion(song = null) {
    const modal = document.getElementById('modalEdicionCancion');
    if (!modal) return;

    if (song) {
        document.getElementById('modalCancionTitulo').innerText = "✏️ Editar Canción Local";
        document.getElementById('txtCancionId').value = song[0];
        document.getElementById('txtCancionNombre').value = song[1];
        document.getElementById('txtCancionArtista').value = song[2] || "";
        document.getElementById('txtCancionNotas').value = song[3] || "";
        document.getElementById('txtCancionLetra').value = song[4] || "";
    } else {
        document.getElementById('modalCancionTitulo').innerText = "🎵 Nueva Canción Local";
        document.getElementById('txtCancionId').value = "";
        document.getElementById('txtCancionNombre').value = "";
        document.getElementById('txtCancionArtista').value = "";
        document.getElementById('txtCancionNotas').value = "";
        document.getElementById('txtCancionLetra').value = "";
    }
    modal.style.display = 'flex';
    document.getElementById('txtCancionNombre').focus();
}

function guardarCancionLocal() {
    const id = document.getElementById('txtCancionId').value;
    const nombre = document.getElementById('txtCancionNombre').value.trim();
    const artista = document.getElementById('txtCancionArtista').value.trim();
    const notas = document.getElementById('txtCancionNotas').value.trim();
    const letra = document.getElementById('txtCancionLetra').value.trim();

    if (!nombre || !letra) {
        alert("⚠️ El título y la letra son campos obligatorios.");
        return;
    }

    // Estructura idéntica a canciones_db.js
    const nuevaCancion = [
        id ? id : 'custom_' + Date.now(), // 0: ID (Generado con Timestamp si es nueva)
        nombre,                           // 1: Título
        artista,                          // 2: Artista
        notas,                            // 3: Notas
        letra,                            // 4: Letra
        "", "", "", "", "", ""            // 5-10: Espacios multimedia (vacíos por ahora)
    ];

    if (id) {
        // Actualizar existente
        const index = customCanciones.findIndex(c => c[0] === id);
        if (index > -1) customCanciones[index] = nuevaCancion;
    } else {
        // Añadir nueva
        customCanciones.push(nuevaCancion);
    }

    // Guardar en el disco duro del navegador
    localStorage.setItem('microbeam_custom_songs', JSON.stringify(customCanciones));
    
    document.getElementById('modalEdicionCancion').style.display = 'none';
    
    // Refrescar la búsqueda automáticamente
    if (txtSongSearch) txtSongSearch.dispatchEvent(new Event('input'));
    
    alert("✅ Canción guardada correctamente.");
}

function eliminarCancionLocal(id) {
    customCanciones = customCanciones.filter(c => c[0] !== id);
    localStorage.setItem('microbeam_custom_songs', JSON.stringify(customCanciones));
    
    // Si la canción eliminada estaba en el panel central, limpiarlo
    songResultsContainerUI.innerHTML = '';
    lblCountContainer.innerText = "🎵 MODO CANCIONES";
    lblObservaciones.style.display = 'none';
    
    // Refrescar lista
    if (txtSongSearch) txtSongSearch.dispatchEvent(new Event('input'));
}

// Escuchadores de eventos para los botones del modal
document.getElementById('btnNuevaCancion')?.addEventListener('click', () => abrirModalCancion());
document.getElementById('btnCerrarModalCancion')?.addEventListener('click', () => {
    document.getElementById('modalEdicionCancion').style.display = 'none';
});
document.getElementById('btnGuardarCancion')?.addEventListener('click', guardarCancionLocal);

// ============================================
// DESCARGAR CANCIONERO PERSONALIZADO EN TXT
// ============================================
document.getElementById('btnDescargarCancioneroInterno')?.addEventListener('click', () => {
    // 1. Obtener las canciones locales del localStorage
    const cancionesLocales = JSON.parse(localStorage.getItem('microbeam_custom_songs')) || [];

    // 2. Validar si hay canciones para descargar
    if (cancionesLocales.length === 0) {
        alert("⚠️ No hay canciones personalizadas creadas aún. Crea una primero para poder descargar el cancionero.");
        return;
    }

    // 3. Formatear el contenido del archivo de texto
    let contenidoTxt = "=========================================\n";
    contenidoTxt += "      CANCIONERO PERSONALIZADO LOCAL     \n";
    contenidoTxt += "=========================================\n\n";

    cancionesLocales.forEach((cancion, index) => {
        const titulo = cancion[1] || "Sin Título";
        const artista = cancion[2] ? ` - ${cancion[2]}` : "";
        const notas = cancion[3] ? ` (Notas: ${cancion[3]})` : "";
        const letra = cancion[4] || "Sin letra...";

        // Construir la cabecera de la canción
        contenidoTxt += `${index + 1}. ${titulo.toUpperCase()}${artista}\n`;
        if (notas) contenidoTxt += `   ${notas}\n`;
        contenidoTxt += `-----------------------------------------\n`;
        
        // Añadir la letra respetando los saltos de línea originales
        contenidoTxt += `${letra}\n\n`;
        contenidoTxt += `=========================================\n\n`;
    });

    // 4. Crear un Blob (Objeto de datos binarios) con el texto formateado
    const blob = new Blob([contenidoTxt], { type: 'text/plain;charset=utf-8' });
    
    // 5. Crear una URL temporal para el archivo
    const url = URL.createObjectURL(blob);
    
    // 6. Crear un enlace <a> oculto y simular un click para descargar
    const a = document.createElement('a');
    a.href = url;
    
    // Generar un nombre de archivo con la fecha actual
    const fecha = new Date().toISOString().split('T')[0];
    a.download = `Cancionero_Personalizado_${fecha}.txt`;
    
    document.body.appendChild(a);
    a.click(); // Forzar la descarga
    
    // 7. Limpiar la memoria
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
});
