document.addEventListener('DOMContentLoaded', () => {
    const launcherGrid = document.getElementById('launcher-grid');
    const folderView = document.getElementById('folder-view');
    const folderTitle = document.getElementById('folder-title');
    const folderContent = document.getElementById('folder-content');
    const backButton = document.getElementById('back-button');
    const overlay = document.getElementById('overlay'); // Nuevo elemento overlay

    // Datos de tus aplicaciones y carpetas (¡Mismos datos, sin cambios aquí!)
    const apps = [
		{ id: 'login', name: 'Login', icon: 'img/icons/login.png', url: '#', type: 'link' },	
        {
            id: 'social-media',
            name: 'Redes Sociales',
            icon: 'img/icons/carpeta_rrss.png', // Icono de carpeta
            type: 'folder',
            content: [              
                { id: 'facebook', name: 'Facebook', icon: 'img/icons/facebook.png', url: 'https://www.facebook.com/enacefio', type: 'link' },
                { id: 'tiktok', name: 'Tik Tok', icon: 'img/icons/tiktok.jpg', url: 'https://www.tiktok.com/@enacefio', type: 'link' },
                { id: 'instagram', name: 'Instagram', icon: 'img/icons/instagram.png', url: 'https://instagram.com/enacefio', type: 'link' },
                { id: 'linkedin', name: 'Linkedin', icon: 'img/icons/linkedin.png', url: 'https://www.linkedin.com/in/v%C3%ADctor-arag%C3%B3-garc%C3%ADa-5b329732/', type: 'link' },
                { id: 'youtube', name: 'Youtube', icon: 'img/icons/youtube.png', url: 'https://www.youtube.com/@VictorArago', type: 'link' }
                // Añade más redes sociales aquí
            ]
        },
		{
            id: 'rol',
            name: 'Rol',
            icon: 'img/icons/rol.png', // Icono de carpeta
            type: 'folder',
            content: [              
                { id: 'partidas', name: 'Partidas', icon: 'img/icons/rol_partidas.png', type: 'folder', content: [
					{ id: 'terminator_one_shot', name: 'Diablo - D&D (Lado Oscuro)', icon: 'img/icons/icono_aventura_d2_dnd.png', url: 'https://enacefio.com/rol/diablo_oscuro/', type: 'link' }
				] },
                { id: 'terminator_one_shot', name: 'Terminator - One Shot', icon: 'img/icons/web.png', url: 'https://enacefio.com/rol/terminator_one_shot.php', type: 'link' },
                { id: 'la_sierpe_de_espinas', name: 'La Sierpe de Espinas – Aventura D&D 5e', icon: 'img/icons/web.png', url: 'https://enacefio.com/rol/la_sierpe_de_las_espinas.php', type: 'link' }
                
            ]
        },
        { id: 'tienda', name: 'Tienda', icon: 'img/icons/tienda.png', url: 'tienda/shop/', type: 'link' },
		{
            id: 'impresion_3d',
            name: 'Impresión 3D',
            icon: 'img/icons/impresion_3d.png', // Icono de carpeta
            type: 'folder',
            content: [              
              
                { id: 'tienda_cults', name: 'Tienda Cults', icon: 'img/icons/cults3d.jpg', url: 'https://cults3d.com/es/usuarios/enacefio/modelos-3d', type: 'link' },
				{ id: 'makerworld', name: 'Perfil Makerworld', icon: 'img/icons/makerworld.png', url: 'https://makerworld.com/es/@enacefio', type: 'link' } 
                
            ]
        },
        
        { id: 'contador_mtg', name: 'Contador MTG', icon: 'img/icons/mtg_counter.png', url: 'tools/mtg_counter/', type: 'link' },
		{ id: 'card_deck_crafter', name: 'Editor de Cartas (Alpha)', icon: 'img/icons/card_editor.png', url: 'https://enacefio.com/card_deck_crafter/', type: 'link' },
        { id: 'github', name: 'Perfil y proyectos Github', icon: 'img/icons/github.png', url: 'https://github.com/enacefioh', type: 'link' },
		{
            id: 'lab',
            name: 'Laboratorio',
            icon: 'img/icons/carpeta_lab.png', // Icono de carpeta
            type: 'folder',
            content: [              
      
            ]
        }
    ];


    // Función para renderizar los iconos (sin cambios)
    function renderIcons(items, targetElement) {
        targetElement.innerHTML = '';
        items.forEach(item => {
            const itemElement = document.createElement('a');
            itemElement.classList.add('launcher-item');
            itemElement.setAttribute('data-id', item.id);

            const img = document.createElement('img');
            img.src = item.icon;
            img.alt = item.name;

            const span = document.createElement('span');
            span.textContent = item.name;

            itemElement.appendChild(img);
            itemElement.appendChild(span);

            if (item.type === 'folder') {
                itemElement.addEventListener('click', (e) => {
                    e.preventDefault();
                    openFolder(item);
                });
            } else {
                itemElement.href = item.url;
                itemElement.target = '_blank';
            }
            targetElement.appendChild(itemElement);
        });
    }

    // Función para abrir una carpeta (MODIFICADA)
    function openFolder(folder) {
        folderTitle.textContent = folder.name;
        renderIcons(folder.content, folderContent);
        folderView.classList.add('active');
        overlay.classList.add('active'); // Activar el overlay
    }

    // Función para volver a la vista principal (MODIFICADA)
    function goBack() {
        folderView.classList.remove('active');
        overlay.classList.remove('active'); // Desactivar el overlay
        // Opcional: limpiar el contenido de la carpeta después de la transición
        setTimeout(() => {
            folderContent.innerHTML = '';
            folderTitle.textContent = '';
        }, 300); // Coincide con la duración de la transición CSS
    }

    // Event listener para el botón de volver
    backButton.addEventListener('click', goBack);

    // Event listener para cerrar el modal haciendo clic en el overlay
    overlay.addEventListener('click', goBack);

    // Renderizar los iconos iniciales
    renderIcons(apps, launcherGrid);
	
	const html_form_login = `<form method='post' style='margin:auto;' action='https://enacefio.com/tools/ena_login.php'> 
			<table style='width:auto; margin:auto;'> 
				<tr><td>Usuario: </td><td><input type='text' name='user' /></td></tr> 
				<tr><td>Password: </td><td><input type='password' name='password' /></td></tr> 
				<tr><td colspan='2' style='text-align:center;'><input type='hidden'  name='action' value='login' /><input type='hidden'  name='url_retorno' value='https://enacefio.com' /><input class='green-button' type='submit' value='Entrar' /></td></tr> 
			</table> 
		</form>`;
		
		
	const icono_login = document.querySelector('[data-id="login"]');
	if(icono_login){
		icono_login.addEventListener('click', (e) => {  
			e.preventDefault();	
			folderTitle.textContent = "Login";
			folderContent.classList.remove("launcher-grid");
			folderContent.innerHTML = html_form_login;
			folderView.classList.add('active');
			overlay.classList.add('active'); // Activar el overlay
		});
	}
	
	const icono_user = document.querySelector('[data-id="user"]');
	if(icono_user){
		icono_user.addEventListener('click', (e) => {  
			e.preventDefault();	
			folderTitle.textContent = 'Bienvenido Invitado';			folderContent.classList.remove("launcher-grid");
			folderContent.innerHTML = ``;
			folderView.classList.add('active');
			overlay.classList.add('active'); // Activar el overlay
		});
	}
	
});