// ====== proyector.js ======
// Módulo de Proyección y Galería de Fondos - MicroBeam

// ============================================
// CONSTANTES Y PLANTILLA HTML
// ============================================

const HTML_PROYECCION = `
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Proyección Activa - MicroBeam</title>
        <style>
            * { margin:0; padding:0; box-sizing:border-box; }
            body {
                width:100vw; height:100vh; background:#000; overflow:hidden;
                position: relative; display:flex; justify-content:center; align-items:center;
                user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
     
            }
            
            #bgLayer {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background-position: center; 
    background-size: cover; /* Valor inicial predeterminado */
    background-repeat: no-repeat;
    z-index: 1; opacity: 1;
}
            #container { 
                position: relative; z-index: 2; text-align:center; display:flex; 
                flex-direction:column; justify-content:center; align-items:center; 
                width:100%; height:100%; padding: 5vw; font-family: 'Tahoma', sans-serif;
            }
            #vText { 
                color:#fff; font-size:7vw; font-weight:bold; text-shadow: 3px 3px 12px rgba(0,0,0,0.95); line-height:1.4; transition: opacity 0.3s ease-in-out; text-align:center; 
            }
            
            #vCapsule { 
                display: inline-flex; align-items: center; justify-content: center;
                margin-top: 0.4vw; transition: opacity 0.3s ease-in-out;
                background: rgba(0, 0, 0, 0.25); 
                padding: 0.4vw 1.6vw; border-radius: 50px;
                backdrop-filter: blur(2px);
                box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            }
            #vRef { color:#ffaa44; font-weight:bold; text-shadow: 2px 2px 8px rgba(0,0,0,0.95); text-align: center; }
            .v-num-sup { color: #ffbd6b; font-size: 0.6em; vertical-align: super; margin-right: 0.2em; font-weight: 800; text-shadow: 2px 2px 6px rgba(0,0,0,0.9); }
            .fade { opacity: 0 !important; }
            #fsHint { position: absolute; bottom: 15px; right: 15px; color: rgba(255, 255, 255, 0.4); font-family: system-ui, sans-serif; font-size: 13px; background: rgba(0, 0, 0, 0.5); padding: 6px 12px; border-radius: 4px; pointer-events: none; transition: opacity 1s ease-in-out; z-index: 10; }
        </style>
    </head>
    <body>
        <div id="bgLayer"></div>
        <div id="container">
            <div id="vText"></div>
            <div id="vCapsule" class="fade"><div id="vRef"></div></div>
        </div>
        <div id="fsHint">🖰 Doble clic para Pantalla Completa</div>
        <script>
            let currentBaseSize = 7;
            let modo_panoramico=false;
            let wakeLock = null;

            async function requestWakeLock() {
                try {
                    if ('wakeLock' in navigator) {
                        wakeLock = await navigator.wakeLock.request('screen');
                    }
                } catch (err) { console.log("Wake Lock API error:", err); }
            }

            document.addEventListener('fullscreenchange', () => {
                if (document.fullscreenElement) {
                    requestWakeLock();
                } else {
                    if (wakeLock !== null) {
                        wakeLock.release().then(() => wakeLock = null);
                    }
                }
            });

            function actualizarEscalaFuentes() {
            
                const container = document.getElementById('container');
                const txt = document.getElementById('vText');
                const rf = document.getElementById('vRef');
                txt.style.fontSize = currentBaseSize + 'vw';
                rf.style.fontSize = (currentBaseSize * 0.65) + 'vw';
                
                const relAspectoSalida = 16/9;
                const relAspectoPantallaPanoramica = 2112/384;
                const estirarEnY = relAspectoPantallaPanoramica / relAspectoSalida;

if (modo_panoramico) {
    container.style.transform = "scaleY("+estirarEnY+")";
    container.style.transformOrigin = "center center";
    txt.style.lineHeight = "1.0"; 
    rf.style.lineHeight = "1.0"; 
} 
else
{
    container.style.transform = "";
    container.style.transformOrigin = "";
    txt.style.lineHeight = ""; 
    rf.style.lineHeight = ""; 
} 
            }
            
            function toggleFullscreen() {
                if (!document.fullscreenElement) {
                    document.documentElement.requestFullscreen().catch(err => console.log(err));
                } else { 
                    document.exitFullscreen(); 
                }
            }
            window.addEventListener('dblclick', () => { toggleFullscreen(); window.getSelection?.().removeAllRanges(); });
            setTimeout(() => { const h = document.getElementById('fsHint'); if(h) h.style.opacity = "0"; }, 4000);
            window.addEventListener('message', (e) => {
                if(!e.data) return;
                const bg = document.getElementById('bgLayer');
                const txt = document.getElementById('vText');
                const rf = document.getElementById('vRef');
                const cps = document.getElementById('vCapsule');
                
                if(e.data.type === 'setVerse') {
                    txt.classList.add('fade'); cps.classList.add('fade');
                    
                    setTimeout(() => {
                        if (e.data.size) {
                            currentBaseSize = parseFloat(e.data.size);
                            actualizarEscalaFuentes();
                        }
                        
                        txt.innerHTML = e.data.text;
                        if(e.data.ref) { 
                            rf.innerText = e.data.ref; 
                            cps.style.display = 'inline-flex'; 
                            cps.classList.remove('fade'); 
                        } else { 
                            cps.style.display = 'none'; 
                        }
                        
                        txt.classList.remove('fade');
                    }, 300);
                }
                
                if(e.data.type === 'clear') { txt.classList.add('fade'); cps.classList.add('fade'); setTimeout(() => { txt.innerHTML = ""; rf.innerText = ""; }, 300); }
                /*if(e.data.type === 'setBackground') { bg.style.backgroundImage = (e.data.url.startsWith('linear') || e.data.url.startsWith('radial')) ? e.data.url : (e.data.url ? "url('" + e.data.url + "')" : "none"); }*/
              if (e.data.type === 'setBackground') { 
    const bg = document.getElementById('bgLayer');
    const body = document.body;
    
    if (e.data.url) {
        const newUrl = (e.data.url.startsWith('linear') || e.data.url.startsWith('radial')) 
            ? e.data.url 
            : "url('" + e.data.url + "')";
        
        const hasCurrentBg = bg.style.backgroundImage && 
                             bg.style.backgroundImage !== 'none' && 
                             bg.style.opacity !== '0';

        if (hasCurrentBg) {
            // 1. CAMBIO DE FONDO A FONDO (Crossfade 0.3s)
            body.style.backgroundImage = bg.style.backgroundImage;
            body.style.backgroundSize = bg.style.backgroundSize || 'cover';
            body.style.backgroundPosition = 'center';
            body.style.backgroundRepeat = 'no-repeat';
            
            bg.style.transition = 'none';
            bg.style.opacity = '0';
            
            setTimeout(() => {
                bg.style.backgroundImage = newUrl;
                bg.style.transition = 'opacity 0.3s ease-in-out, filter 0.1s linear';
                bg.style.opacity = '1';
                
                // NUEVO: Limpiar el 'body' después de que el fundido termine (350ms)
                setTimeout(() => {
                    if (bg.style.opacity === '1') {
                        body.style.backgroundImage = 'none';
                    }
                }, 350);
            }, 50);

        } else {
            // 2. DE NEGRO A NUEVO FONDO (Aparición 2s)
            body.style.backgroundImage = 'none'; // Asegurarnos de que el fondo de atrás esté negro
            bg.style.transition = 'none';
            bg.style.opacity = '0';
            bg.style.backgroundImage = newUrl;
            
            setTimeout(() => {
                bg.style.transition = 'opacity 2s ease-in-out, filter 0.1s linear';
                bg.style.opacity = '1';
            }, 50);
        }

    } else {
        // 3. QUITAR FONDO (Desvanecimiento a negro de 2s)
        
        // NUEVO: Borramos de Inmediato la imagen trasera para asegurar que desvanezca al color negro puro
        body.style.backgroundImage = 'none'; 
        
        bg.style.transition = 'opacity 2s ease-in-out, filter 0.1s linear';
        bg.style.opacity = '0'; 
        
        setTimeout(() => {
            if (bg.style.opacity === '0') {
                bg.style.backgroundImage = 'none';
            }
        }, 2000);
    }
}
                
                
                if(e.data.type === 'setFontSize') { currentBaseSize = parseFloat(e.data.size); actualizarEscalaFuentes(); }
                if(e.data.type === 'setBgOpacity') { bg.style.filter = "brightness(" + (e.data.value / 100) + ")"; }
                // Recibe la orden de ajuste de fondo
            if(e.data.type === 'setBgStretch') {
                if (bg) {
                    bg.style.backgroundSize = e.data.size || 'cover';
                }
            }
                if (e.data.type === 'setAlign') {
                    const container = document.getElementById('container');
                    const cps = document.getElementById("vCapsule");
const ref = document.getElementById("vRef");
                    const txt = document.getElementById('vText');
                    
                    // 1. Alineación vertical: Afecta a la posición de TODO lo que contiene el div container
                    switch(e.data.valign){

case "top":
    container.style.justifyContent="flex-start";
    break;

case "bottom":
    container.style.justifyContent="flex-end";
    break;

default:
    container.style.justifyContent="center";
}
                    
                    // 2. Forzar que el texto principal siempre esté perfectamente centrado en su propio eje
                    container.style.alignItems = 'center';
                    if (txt) txt.style.textAlign = 'center';
                    
                    // 3. Alineación horizontal: Afecta EXCLUSIVAMENTE a la cápsula de la cita (vCapsule)
                    console.log("Alin: "+e.data.halign + " Valin:" + e.data.valign) ;
                    if (cps) {
                        // Alineación horizontal
                    switch(e.data.halign){

case "left":
    cps.style.alignSelf="flex-start";
    break;

case "center":
    cps.style.alignSelf="center";
    break;

case "right":
    cps.style.alignSelf="flex-end";
    break;
}
                    }
                }
            });
            if(window.opener) window.opener.postMessage({ type: 'ready' }, '*');
            
            /* Soluciona un bug de Chromium */
            document.addEventListener('fullscreenchange', () => {

    if (!document.fullscreenElement) return;

    setTimeout(() => {

        const txt = document.getElementById('vText');

        txt.innerHTML = txt.innerHTML;

    }, 4000);

});



        <\/script>
    </body>
    </html>
`;

// ============================================
// VARIABLES GLOBALES DE PROYECCIÓN
// ============================================

window.projectionWindow = null;
window.isProjectionReady = false;
window.currentActiveBackground = "";
window.addedBackgrounds = [];

window.savedBibleFontSize = 7.0;
window.savedSongFontSize = 8.5;

// ============================================
// REFERENCIAS DOM (ÚNICO LUGAR DONDE SE DECLARAN)
// ============================================

const galleryContainer = document.getElementById('galleryContainer');
const bgFileInput = document.getElementById('bgFile');
const btnAddImage = document.getElementById('btnAddImage');
const btnRemoveBg = document.getElementById('btnRemoveBg');
const btnProjectLogo = document.getElementById('btnProjectLogo');
const btnClear = document.getElementById('btnClear');
const btnOpenProjection = document.getElementById('btnOpenProjection');
const ctxMenu = document.getElementById('customContextMenu');
const menuRemoveAction = document.getElementById('menuRemoveAction');

// Variables internas de la galería
let draggedImageElement = null;
let targetImgToRemove = null;
let dragCounter = 0;

// ============================================
// PREVENCIÓN GLOBAL DE ARRASTRE
// ============================================

document.addEventListener('dragover', (e) => e.preventDefault());
document.addEventListener('drop', (e) => e.preventDefault());

// ============================================
// FUNCIONES DE PROYECCIÓN (Núcleo)
// ============================================

function abrirVentanaProyeccion(btn, html) {
    if (window.projectionWindow && !window.projectionWindow.closed) {
        window.projectionWindow.focus();
        return;
    }
    const features = "width=320,height=180,resizable=yes,scrollbars=no,menubar=no,status=no";
    window.projectionWindow = window.open('', 'ProyeccionBiblicaStandAlone', features);
    window.projectionWindow.document.write(html);
    window.projectionWindow.document.close();

    window.addEventListener('message', function handler(e) {
        if (e.data && e.data.type === 'ready') {
            window.isProjectionReady = true;
            if (btn) {
                btn.innerHTML = "🎬 <span class=\"btn-text-proy\">Proyectar (Conectada)</span>";
                btn.classList.add('connected-btn');
            }
            enviarConfiguracionInicial();
            enviarMensajeProyeccion({ 
    type: 'setVerse', 
    text: "<div style='opacity: 0.20;'>🖥️ MicroBeam 📖 <hr>Sistema de Proyección Bíblica</div><br><!--div style='opacity: 0.20;color:#D10574; font-weight:normal'>S&S Software © 2027</div-->", 
    ref: "" 
});
            window.removeEventListener('message', handler);
        }
    });
}

function enviarConfiguracionInicial() {
    if (!window.projectionWindow || window.projectionWindow.closed) return;
    const slideFontSize = document.getElementById('slideFontSize');
    const slideBgOpacity = document.getElementById('slideBgOpacity');

    if (slideFontSize) window.projectionWindow.postMessage({ type: 'setFontSize', size: slideFontSize.value }, '*');
    if (slideBgOpacity) window.projectionWindow.postMessage({ type: 'setBgOpacity', value: slideBgOpacity.value }, '*');
    
// (Dentro de enviarConfiguracionInicial)
    const modoAjusteFondo = localStorage.getItem('cfgBgAjuste') || 'cover';
    let cssSize = 'cover';
    if (modoAjusteFondo === 'stretch') cssSize = '100% 100%';
    if (modoAjusteFondo === 'contain') cssSize = 'contain';
    window.projectionWindow.postMessage({ type: 'setBgStretch', size: cssSize }, '*');

    if (window.currentActiveBackground) window.projectionWindow.postMessage({ type: 'setBackground', url: window.currentActiveBackground }, '*');
    const cfgValign = localStorage.getItem('cfgValign') || 'center';
    const cfgHalign = localStorage.getItem('cfgHalign') || 'center';
    window.projectionWindow.postMessage({ type: 'setAlign', valign: cfgValign, halign: cfgHalign }, '*');
}

function enviarMensajeProyeccion(data) {
    if (window.projectionWindow && !window.projectionWindow.closed) {
        window.projectionWindow.postMessage(data, '*');
    }
}

function proyectarTexto(texto, referencia, size) {
    if (!window.projectionWindow || window.projectionWindow.closed) return;
    const currentSize = size || window.savedBibleFontSize;
    window.projectionWindow.postMessage({
        type: 'setVerse',
        text: texto,
        ref: referencia || "",
        size: currentSize
    }, '*');
}

function limpiarProyeccion() {
    if (window.projectionWindow && !window.projectionWindow.closed) {
        window.projectionWindow.postMessage({ type: 'clear' }, '*');
    }
    document.querySelectorAll('.verse-item, .song-line-item').forEach(i => i.classList.remove('active'));
}

function cambiarFondoProyeccion(url) {
    if (window.projectionWindow && !window.projectionWindow.closed) {
        window.projectionWindow.postMessage({ type: 'setBackground', url: url }, '*');
        window.currentActiveBackground = url;
    }
}

function cambiarBrilloFondo(valor) {
    if (window.projectionWindow && !window.projectionWindow.closed) {
        window.projectionWindow.postMessage({ type: 'setBgOpacity', value: valor }, '*');
    }
}

// Variable de estado para recordar el modo de ajuste seleccionado
let modoAjusteFondoActual = localStorage.getItem('cfgBgAjuste') || 'cover';

function cambiarAjusteFondo(modo) {
    modoAjusteFondoActual = modo;
    localStorage.setItem('cfgBgAjuste', modo);

    // Mapear el concepto de la app a la propiedad CSS real de background-size
    let cssSize = 'cover';
    if (modo === 'stretch') cssSize = '100% 100%';
    if (modo === 'contain') cssSize = 'contain';

    // Aplicar instantáneamente a la ventana de proyección secundaria si está abierta
    if (window.projectionWindow && !window.projectionWindow.closed) {
        const bgLayer = window.projectionWindow.document.getElementById('bgLayer');
        if (bgLayer) {
            bgLayer.style.backgroundSize = cssSize;
        }
    }
}

// Asegúrate de exponer la nueva función globalmente al final del archivo proyector.js
window.cambiarAjusteFondo = cambiarAjusteFondo;

function cambiarTamanoFuenteProyeccion(size) {
    if (window.projectionWindow && !window.projectionWindow.closed) {
    // 🟢 NUEVA LÍNEA: Guardar el factor elegido en el localStorage
    localStorage.setItem('cfgFactorFuente', size);
        window.projectionWindow.postMessage({ type: 'setFontSize', size: size }, '*');
    }
}

function monitorearEstadoProyeccion() {
    setInterval(() => {
        if (!window.projectionWindow || window.projectionWindow.closed) {
            window.isProjectionReady = false;
            if (btnOpenProjection) {
                btnOpenProjection.innerHTML = "🎬 <span class=\"btn-text-proy\">Proyectar (Cerrada)</span>";
                btnOpenProjection.classList.remove('connected-btn');
            }
            window.projectionWindow = null;
        }
    }, 1000);
}

function cerrarProyeccionAlSalir() {
    window.addEventListener('beforeunload', () => {
        if (window.projectionWindow && !window.projectionWindow.closed) {
            window.projectionWindow.close();
        }
    });
}

// ============================================
// FUNCIONES DE GALERÍA Y SINCRONIZACIÓN
// ============================================

// Función auxiliar para extraer el fondo de forma 100% limpia sin basura del navegador
function obtenerValorFondo(el) {
    let bgImage = el.style.backgroundImage;
    if (bgImage) {
        if (bgImage.includes('url(')) {
            // Es una imagen: limpiamos el url("...")
            return bgImage.replace(/^url\(['"]?/, '').replace(/['"]?\)$/, '');
        }
        if (bgImage.includes('gradient')) {
            // Es un degradado limpio directo del backgroundImage
            return bgImage;
        }
    }
    // Salvaguarda en caso de que esté en la propiedad genérica background
    let bgGeneric = el.style.background;
    if (bgGeneric) {
        if (bgGeneric.includes('url(')) {
            const matchUrl = bgGeneric.match(/url\(['"]?(.*?)['"]?\)/);
            if (matchUrl) return matchUrl[1];
        }
        if (bgGeneric.includes('gradient')) {
            // Extrae estrictamente desde "linear-gradient" hasta el cierre del paréntesis, quitando el "repeat scroll..."
            const matchGrad = bgGeneric.match(/(linear|radial)-gradient\(.*\)/);
            if (matchGrad) return matchGrad[0];
        }
        return bgGeneric;
    }
    return "";
}

function actualizarOrdenFondos() {
    const galleryContainer = document.getElementById('galleryContainer');
    if (!galleryContainer) return;

    const items = Array.from(galleryContainer.querySelectorAll('.thumb-bg'));
    window.addedBackgrounds = [];

    items.forEach((el) => {
        el.setAttribute('draggable', 'true');
        el.style.border = '2px solid transparent';
        
        // Extraemos el valor limpio usando la nueva función
        let valorLimpio = obtenerValorFondo(el);
        if (valorLimpio) {
            window.addedBackgrounds.push(valorLimpio);
        }
    });


}



function procesarArchivosImagen(archivos) {
    console.log("📸 Procesando archivos:", archivos);
    if (!archivos || archivos.length === 0) {
        console.warn("⚠️ No hay archivos para procesar.");
        return;
    }

    let imagenesCargadas = 0;
    Array.from(archivos).forEach(file => {
        const esImagen = file.type.startsWith('image/') || /\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(file.name);
        if (!esImagen) {
            console.log(`⏩ Saltando archivo no imagen: ${file.name}`);
            return;
        }
        const reader = new FileReader();
reader.onload = (event) => {
                const url = event.target.result;
                
                // 1. Crear el contenedor con el formato correcto
                const div = document.createElement('div');
                div.className = 'thumb-bg';
                div.style.width = '100%';
                div.style.aspectRatio = '16/9';
                div.style.borderRadius = '4px';
                div.style.cursor = 'pointer';
                div.style.border = '2px solid transparent';
                div.title = file.name; // <--- ESTO MANTIENE EL TÍTULO VISIBLE
                
                div.style.backgroundImage = `url('${url}')`;
                div.style.backgroundSize = 'cover';
                div.style.backgroundPosition = 'center';
                
                // 2. Efectos visuales de hover
                div.onmouseover = () => div.style.border = '2px solid var(--accent, #0076ff)';
                div.onmouseout = () => div.style.border = '2px solid transparent';
                
                // 3. Asignar la acción de proyectar al hacer clic
                div.onclick = () => {
                    if (typeof cambiarFondoProyeccion === 'function') {
                        cambiarFondoProyeccion(url);
                    }
                };
                
                // 4. Agregar a la galería sin destruir los demás elementos
                if (galleryContainer) {
                    galleryContainer.appendChild(div); // Insertamos el DIV en vez de 'img'
                    
                    if (typeof actualizarOrdenFondos === 'function') {
                        actualizarOrdenFondos();
                    }
                    console.log(`✅ Imagen cargada mediante arrastre: ${file.name}`);
                }
            };
        reader.readAsDataURL(file);
    });
}

function leerDirectorio(directorio, archivosAcumulados, callback) {
    let dirReader = directorio.createReader();
    let leerEntradas = function() {
        dirReader.readEntries(function(entries) {
            if (entries.length === 0) {
                callback();
            } else {
                let promesas = [];
                entries.forEach(entry => {
                    promesas.push(new Promise((resolve) => {
                        if (entry.isFile) {
                            entry.file(f => { archivosAcumulados.push(f); resolve(); });
                        } else if (entry.isDirectory) {
                            leerDirectorio(entry, archivosAcumulados, resolve);
                        } else {
                            resolve();
                        }
                    }));
                });
                Promise.all(promesas).then(leerEntradas);
            }
        });
    };
    leerEntradas();
}

// ============================================
// MANEJADORES DE DRAG & DROP (Galería)
// ============================================

function handleDragEnter(e) {
    e.preventDefault();
    e.stopPropagation();
    if (!draggedImageElement && galleryContainer) {
        dragCounter++;
        console.log("🟢 dragEnter, counter:", dragCounter);
        if (dragCounter === 1) {
            galleryContainer.classList.add('drag-over');
        }
    }
}

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

function handleDragLeave(e) {
    e.preventDefault();
    e.stopPropagation();
    
    if (!draggedImageElement && galleryContainer) {
        dragCounter--;
        console.log("🔴 dragLeave, counter:", dragCounter);
        
        // TRUCO MAESTRO: Si el contador llega a 0, O si el ratón salió 
        // hacia un elemento que NO es parte de la galería (o hacia el escritorio)
        if (dragCounter <= 0 || !e.relatedTarget || !galleryContainer.contains(e.relatedTarget)) {
            dragCounter = 0; // Forzamos el reseteo por seguridad
            galleryContainer.classList.remove('drag-over');
        }
    }
}

// ============================================
// MANEJADORES DE DRAG & DROP (Galería)
// ============================================

// ... (mantén handleDragEnter, handleDragOver y handleDragLeave igual)

function handleDrop(e) {
    e.preventDefault();
    e.stopPropagation();
    console.log("📥 Drop en galería");

    if (galleryContainer) {
        galleryContainer.classList.remove('drag-over');
        dragCounter = 0;
    }

    // 1. Evitar conflictos si solo estamos reordenando imágenes internas
    if (draggedImageElement) {
        console.log("🔄 Reorden interno detectado. Ignorando carga externa.");
        return;
    }

    // 2. Procesar los archivos de forma directa y segura
    if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length > 0) {
        let archivos = Array.from(e.dataTransfer.files);
        console.log("📁 Archivos recibidos desde el sistema:", archivos.length);
        procesarArchivosImagen(archivos);
    } else {
        console.log("ℹ️ No se encontraron archivos válidos en el drop.");
    }
}

// ============================================
// EVENTOS DE GALERÍA
// ============================================

// ============================================
// MANEJO DEL BOTÓN "AÑADIR" (SIN ROMPER LA GALERÍA)
// ============================================
//const bgFileInput = document.getElementById('bgFile');

if (bgFileInput) {
    // Asegurarnos de no duplicar el evento si el script se carga dos veces
    bgFileInput.replaceWith(bgFileInput.cloneNode(true));
    
    document.getElementById('bgFile').addEventListener('change', function(e) {
        const files = e.target.files;
        const gallery = document.getElementById('galleryContainer');
        if (!gallery || files.length === 0) return;

        // Procesar cada archivo que el usuario haya seleccionado
        Array.from(files).forEach(file => {
            const reader = new FileReader();
            
            reader.onload = (event) => {
                const url = event.target.result;
                
                // 1. Crear el nuevo contenedor de la imagen de forma segura
                const div = document.createElement('div');
                div.className = 'thumb-bg';
                div.style.width = '100%';
                div.style.aspectRatio = '16/9';
                div.style.borderRadius = '4px';
                div.style.cursor = 'pointer';
                div.style.border = '2px solid transparent';
                div.title = file.name; // El título será el nombre del archivo
                console.log("agregado " + file.name);
                div.style.backgroundImage = `url('${url}')`;
                div.style.backgroundSize = 'cover';
                div.style.backgroundPosition = 'center';
                
                // 2. Asignarle sus propios efectos visuales (igual que los base)
                div.onmouseover = () => div.style.border = '2px solid var(--accent, #0076ff)';
                div.onmouseout = () => div.style.border = '2px solid transparent';
                
                // 3. Asignarle la función de proyectar al hacer clic
                div.onclick = () => {
                    if (typeof cambiarFondoProyeccion === 'function') {
                        cambiarFondoProyeccion(url);
                    }
                };
                
                // 4. Agregarlo a la galería respetando los demás fondos
                gallery.appendChild(div);
            };
            
            reader.readAsDataURL(file);
        });

        // Limpiar el input para que puedas volver a subir la misma imagen si la borras
        this.value = '';
    });
}

if (galleryContainer) {
    galleryContainer.addEventListener('dragenter', handleDragEnter, { passive: false });
    galleryContainer.addEventListener('dragover', handleDragOver, { passive: false });
    galleryContainer.addEventListener('dragleave', handleDragLeave, { passive: false });
    galleryContainer.addEventListener('drop', handleDrop, { passive: false });
}

if (btnAddImage) {
    btnAddImage.addEventListener('dragenter', handleDragEnter, { passive: false });
    btnAddImage.addEventListener('dragover', handleDragOver, { passive: false });
    btnAddImage.addEventListener('dragleave', handleDragLeave, { passive: false });
    btnAddImage.addEventListener('drop', handleDrop, { passive: false });
}

// ============================================
// MENÚ CONTEXTUAL
// ============================================

if (menuRemoveAction) {
    menuRemoveAction.addEventListener('click', () => {
        if (targetImgToRemove) {
            targetImgToRemove.remove();
            if (targetImgToRemove.classList.contains('active') && btnRemoveBg) {
                btnRemoveBg.click();
            }
            actualizarOrdenFondos();
            targetImgToRemove = null;
        }
        if (ctxMenu) ctxMenu.style.display = "none";
    });
}

document.addEventListener('click', (e) => {
    if (ctxMenu && e.target !== ctxMenu && !ctxMenu.contains(e.target)) {
        ctxMenu.style.display = "none";
    }
});

// ============================================
// BOTONES DE UI
// ============================================

if (btnOpenProjection) {
    btnOpenProjection.onclick = function() {
        abrirVentanaProyeccion(btnOpenProjection, HTML_PROYECCION);
    };
}

if (btnRemoveBg) {
    btnRemoveBg.onclick = function() {
        window.currentActiveBackground = "";
        document.querySelectorAll('.thumb-bg').forEach(t => t.classList.remove('active'));
        cambiarFondoProyeccion("");
    };
}

if (btnProjectLogo) {
    btnProjectLogo.addEventListener('click', proyectarLogo);
}

if (btnClear) {
    btnClear.onclick = function() {
        limpiarProyeccion();
    };
}

// ============================================
// PROYECTAR LOGO
// ============================================

// Variable exclusiva para el logo (así no choca con los fondos normales)
window.logoPrincipalConfigurado = null;

function proyectarLogo() {
    let logoParaProyectar = window.logoPrincipalConfigurado;
    
    // Si no has elegido ninguno con clic derecho, tomamos el primero de la galería
    if (!logoParaProyectar && window.addedBackgrounds && window.addedBackgrounds.length > 0) {
        logoParaProyectar = window.addedBackgrounds[0];
    }
    
    if (logoParaProyectar) {
        if (typeof cambiarFondoProyeccion === 'function') {
            cambiarFondoProyeccion(logoParaProyectar);
        }
        if (typeof limpiarProyeccion === 'function') {
            limpiarProyeccion();
        }
        console.log("⭐ Proyectando Logo Principal", );
    } else {
        alert("🖼️ No hay ningún fondo disponible en la galería para proyectar como Logo.");
    }
}

// ============================================
// EXPOSICIÓN GLOBAL
// ============================================

window.abrirVentanaProyeccion = abrirVentanaProyeccion;
window.enviarMensajeProyeccion = enviarMensajeProyeccion;
window.proyectarTexto = proyectarTexto;
window.limpiarProyeccion = limpiarProyeccion;
window.cambiarFondoProyeccion = cambiarFondoProyeccion;
window.cambiarBrilloFondo = cambiarBrilloFondo;
//window.cambiarEstiradoFondo = cambiarEstiradoFondo;
window.cambiarTamanoFuenteProyeccion = cambiarTamanoFuenteProyeccion;
window.proyectarLogo = proyectarLogo;
window.monitorearEstadoProyeccion = monitorearEstadoProyeccion;
window.cerrarProyeccionAlSalir = cerrarProyeccionAlSalir;
window.HTML_PROYECCION = HTML_PROYECCION;
window.actualizarOrdenFondos = actualizarOrdenFondos;

// ============================================
// INICIALIZACIÓN
// ============================================


monitorearEstadoProyeccion();
cerrarProyeccionAlSalir();

console.log("🖥️ Módulo de Proyección y Galería cargado correctamente.");

// ============================================
// LÓGICA DE BOTONES DE AJUSTE DE FONDO
// ============================================

function cambiarAjusteFondo(modo) {
    localStorage.setItem('cfgBgAjuste', modo);
    
    let cssSize = 'cover';
    if (modo === 'stretch') cssSize = '100% 100%';
    if (modo === 'contain') cssSize = 'contain';

    if (window.projectionWindow && !window.projectionWindow.closed) {
        window.projectionWindow.postMessage({ type: 'setBgStretch', size: cssSize }, '*');
    }
}

// ============================================
// RESTAURADOR DE FONDOS PREDETERMINADOS (DEGRADADOS E IMÁGENES)
// ============================================
function cargarFondosSeguro() {
    const gallery = document.getElementById('galleryContainer');
    if (!gallery) return;
    
    // Evitar duplicados si ya hay elementos
    if (gallery.children.length > 0) return;

    // Aquí están tus degradados elegantes y hermosos
    // Como empiezan con "linear" o "radial", tu proyector los aceptará sin errores
    const fondosBase = [

        { 
            url: 'linear-gradient(135deg, #003060 0%, #000814 100%)', 
            name: 'Azul Profundo' 
        },
        { 
            url: 'linear-gradient(135deg, #4a0000 0%, #0a0000 100%)', 
            name: 'Rojo Carmesí' 
        },
        { 
            url: 'radial-gradient(circle, #2b0054 0%, #000000 100%)', 
            name: 'Púrpura Radial' 
        },
        // IMÁGENES LOCALES POR DEFECTO (Asegúrate de que existan en la carpeta imgs/)
        // Si no existen, puedes dejarlas comentadas (con // al inicio)
        { url: 'imgs/1-Logo.png', name: 'Jesucristo es el Señor' },
        { url: 'imgs/Mountain.jpg', name: 'Montañas' },
        { url: 'imgs/Abstract1.jpg', name: 'Abstracto' }
    ];

const fondos = (
    modoPro && Array.isArray(fondos_premium)
)
    ? [...fondos_premium, ...fondosBase]
    : [...fondosBase];

    fondos.forEach(fondo => {
        const div = document.createElement('div');
        div.className = 'thumb-bg';
        div.style.width = '100%';
        div.style.aspectRatio = '16/9';
        div.style.borderRadius = '4px';
        div.style.cursor = 'pointer';
        div.style.border = '2px solid transparent';
        div.title = fondo.name;
        
        // Pintar el cuadrito en la galería según si es degradado o imagen
        if (fondo.url.startsWith('linear') || fondo.url.startsWith('radial')) {
            div.style.background = fondo.url;
        } else {
            div.style.backgroundImage = `url('${fondo.url}')`;
            div.style.backgroundSize = 'cover';
            div.style.backgroundPosition = 'center';
        }
        
        // Efecto visual de iluminación azul al pasar el ratón
        div.onmouseover = () => div.style.border = '2px solid var(--accent, #0076ff)';
        div.onmouseout = () => div.style.border = '2px solid transparent';
        
        // Al hacer clic, enviar la URL o el degradado a la proyección
        div.onclick = () => {
            if (typeof cambiarFondoProyeccion === 'function') {
                cambiarFondoProyeccion(fondo.url);
            }
        };
        
        gallery.appendChild(div);
    });
}


