// --- SISTEMA DE NAVEGACIÓN MÓVIL ---
// Gestiona las pestañas inferiores (Juego/Tienda) en pantallas pequeñas

let bottomNav, navButtons, clickZone, shopZone;
let currentTab = 'game';

function initNavigation() {
    bottomNav = document.getElementById('bottom-nav');
    clickZone = document.getElementById('click-zone');
    shopZone = document.getElementById('shop-zone');

    if (!bottomNav || !clickZone || !shopZone) {
        console.warn('[NAV] Elementos no encontrados:', {
            bottomNav: !!bottomNav,
            clickZone: !!clickZone,
            shopZone: !!shopZone
        });
        return;
    }

    navButtons = bottomNav.querySelectorAll('.bottom-nav-item');

    if (navButtons.length === 0) {
        console.warn('[NAV] No se encontraron botones de navegación');
        return;
    }

    // Configurar event listeners para tabs
    navButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            const tab = btn.dataset.tab;
            if (tab) switchTab(tab);
        });
    });

    // Aplicar estado inicial inmediatamente en móvil
    const isMobile = window.innerWidth <= 480;
    if (isMobile) {
        // En móvil, ocultar tienda por defecto y mostrar juego
        shopZone.classList.add('hidden-mobile');
        clickZone.classList.remove('hidden-mobile');
        // Marcar tab activo
        navButtons.forEach(btn => {
            btn.classList.toggle('active', btn.dataset.tab === 'game');
        });
    }

    window.addEventListener('resize', handleResize);

    // Inicializar menú "Más"
    initMoreMenu();

    console.log('[NAV] Navegación inicializada, móvil:', isMobile);
}

function switchTab(tab) {
    if (!bottomNav || !clickZone || !shopZone) return;

    currentTab = tab;

    // Actualizar botones activos
    navButtons.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.tab === tab);
    });

    // Reproducir sonido de click
    if (typeof audioSystem !== 'undefined' && audioSystem.playClick) {
        audioSystem.playClick();
    }

    // Mostrar/ocultar secciones
    if (tab === 'game') {
        clickZone.classList.remove('hidden-mobile');
        shopZone.classList.add('hidden-mobile');
    } else if (tab === 'shop') {
        clickZone.classList.add('hidden-mobile');
        shopZone.classList.remove('hidden-mobile');
    }
}

function handleResize() {
    const isMobile = window.innerWidth <= 480;

    if (isMobile) {
        // Mostrar bottom nav y aplicar tab actual
        if (bottomNav) bottomNav.classList.add('visible');
        switchTab(currentTab);
    } else {
        // Ocultar bottom nav y mostrar ambas secciones
        if (bottomNav) bottomNav.classList.remove('visible');
        if (clickZone) clickZone.classList.remove('hidden-mobile');
        if (shopZone) shopZone.classList.remove('hidden-mobile');
    }
}

// Función para obtener el tab actual (útil para otros sistemas)
function getCurrentTab() {
    return currentTab;
}

// Exponer función para cambiar de tab programáticamente
function setTab(tab) {
    if (tab === 'game' || tab === 'shop') {
        switchTab(tab);
    }
}

// ===========================================
// MENÚ "MÁS" PARA MÓVIL
// ===========================================

// Toggle menú principal (modal)
function toggleMoreMenu() {
    const menu = document.getElementById('more-menu');
    const toggleBtn = document.getElementById('more-menu-toggle');
    if (!menu) return;

    const wasOpen = menu.classList.contains('active');
    menu.classList.toggle('active');
    const isOpen = menu.classList.contains('active');

    if (toggleBtn) {
        toggleBtn.setAttribute('aria-expanded', String(isOpen));
    }

    // Actualizar icono de audio
    updateMobileAudioIcon();

    // Mostrar/ocultar ascensión según estado del juego
    const ascensionItem = document.getElementById('ascension-menu-item');
    const ascensionBtn = document.getElementById('ascension-btn');
    if (ascensionItem && ascensionBtn) {
        const isVisible = ascensionBtn.style.display !== 'none' &&
                         window.getComputedStyle(ascensionBtn).display !== 'none';
        ascensionItem.style.display = isVisible ? 'flex' : 'none';
    }

    // Focus trap + Escape
    if (isOpen && !wasOpen && typeof setupFocusTrap === 'function') {
        setupFocusTrap(menu, toggleMoreMenu);
    } else if (!isOpen && wasOpen && typeof removeFocusTrap === 'function') {
        removeFocusTrap(menu);
    }

    // Reproducir sonido de click
    if (typeof audioSystem !== 'undefined' && audioSystem.playClick) {
        audioSystem.playClick();
    }
}

// Toggle modal "Sobre el Juego"
function toggleAbout() {
    const modal = document.getElementById('about-modal');
    if (modal) {
        const isOpening = !modal.classList.contains('active');
        modal.classList.toggle('active');
        if (typeof audioSystem !== 'undefined' && audioSystem.playClick) {
            audioSystem.playClick();
        }
        
        if (isOpening) {
            setupFocusTrap(modal, toggleAbout);
        } else {
            removeFocusTrap(modal);
        }
    }
}

// Actualizar icono de audio en menú móvil
function updateMobileAudioIcon() {
    const icon = document.getElementById('audio-icon-mobile');
    const label = document.getElementById('audio-label-mobile');
    if (icon && label && typeof audioSystem !== 'undefined') {
        icon.textContent = audioSystem.muted ? '🔇' : '🔊';
        label.textContent = audioSystem.muted ? 'Activar' : 'Silenciar';
    }
}

// Inicializar menú principal - event listeners
function initMoreMenu() {
    const toggle = document.getElementById('more-menu-toggle');
    if (toggle) {
        toggle.addEventListener('click', (e) => {
            e.stopPropagation();
            toggleMoreMenu();
        });
        toggle.setAttribute('aria-expanded', 'false');
        toggle.removeAttribute('aria-haspopup');
    }

    // Cerrar al hacer click en backdrop del modal (fuera del contenido)
    const menu = document.getElementById('more-menu');
    if (menu) {
        menu.addEventListener('click', (e) => {
            if (e.target === menu) {
                toggleMoreMenu();
            }
        });
    }
}
