<?php
/**
 * Layout Principal del Admin
 * 
 * Incluye header y sidebar que se reutiliza en todas las páginas
 * 
 * Variables requeridas:
 * - $page_title: Título de la página
 * - $active_menu: ID del menú activo ('resumen', 'invitados', 'agregar', 'configuracion', 'invitacion')
 * - $content: Contenido HTML de la página
 */

if (!isset($page_title)) $page_title = 'Dashboard';
if (!isset($active_menu)) $active_menu = 'resumen';

?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($page_title); ?> - Eventos Institucionales</title>
    <link rel="stylesheet" href="../assets/css/admin.css">
</head>
<body>
    <div class="admin-layout">
        <!-- Header -->
        <header class="header">
            <div class="header-left">
                <button class="expand-btn" id="expandSidebar" aria-label="Expandir sidebar">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M3 12h18M3 6h18M3 18h18"/>
                    </svg>
                </button>
            </div>
            <div class="header-right">
                <div class="user-menu" id="userMenu">
                    <button class="user-btn" id="userBtn">
                        <div class="user-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20">
                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                                <circle cx="12" cy="7" r="4"/>
                            </svg>
                        </div>
                    </button>
                    <div class="user-dropdown">
                        <a href="?page=cambiar_password">Cambiar mi contraseña</a>
                        <a href="logout.php">Cerrar Sesión</a>
                    </div>
                </div>
            </div>
        </header>

        <!-- Overlay para mobile -->
        <div class="sidebar-overlay" id="sidebarOverlay"></div>
        
        <!-- Sidebar -->
        <aside class="sidebar" id="sidebar">
            <ul class="sidebar-menu">
                <li>
                    <a href="?page=resumen" class="<?php echo $active_menu === 'resumen' ? 'active' : ''; ?>" data-tooltip="Resumen">
                        <span class="icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                                <polyline points="9 22 9 12 15 12 15 22"/>
                            </svg>
                        </span>
                        <span class="text">Resumen</span>
                    </a>
                </li>
                <li>
                    <a href="?page=invitados" class="<?php echo $active_menu === 'invitados' ? 'active' : ''; ?>" data-tooltip="Invitados">
                        <span class="icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                                <circle cx="12" cy="7" r="4"/>
                            </svg>
                        </span>
                        <span class="text">Invitados</span>
                    </a>
                </li>
                <li>
                    <a href="?page=agregar" class="<?php echo $active_menu === 'agregar' ? 'active' : ''; ?>" data-tooltip="Añadir Invitado">
                        <span class="icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <line x1="12" y1="5" x2="12" y2="19"/>
                                <line x1="5" y1="12" x2="19" y2="12"/>
                            </svg>
                        </span>
                        <span class="text">Añadir Invitado</span>
                    </a>
                </li>
                <li>
                    <a href="?page=tracklist" class="<?php echo $active_menu === 'tracklist' ? 'active' : ''; ?>" data-tooltip="Tracklist">
                        <span class="icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M9 18V5l12-2v13"/>
                                <circle cx="6" cy="18" r="3"/>
                                <circle cx="18" cy="16" r="3"/>
                            </svg>
                        </span>
                        <span class="text">Tracklist</span>
                    </a>
                </li>
                <li>
                    <a href="?page=configuracion" class="<?php echo $active_menu === 'configuracion' ? 'active' : ''; ?>" data-tooltip="Configuración">
                        <span class="icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <circle cx="12" cy="12" r="3"/>
                                <path d="M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24"/>
                            </svg>
                        </span>
                        <span class="text">Configuración</span>
                    </a>
                </li>
                
                <li><div class="sidebar-separator"></div></li>
                
                <li>
                    <a href="?page=invitacion" class="<?php echo $active_menu === 'invitacion' ? 'active' : ''; ?>" data-tooltip="Invitación Digital">
                        <span class="icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                <polyline points="14 2 14 8 20 8"/>
                                <line x1="16" y1="13" x2="8" y2="13"/>
                                <line x1="16" y1="17" x2="8" y2="17"/>
                                <polyline points="10 9 9 9 8 9"/>
                            </svg>
                        </span>
                        <span class="text">Invitación Digital</span>
                    </a>
                </li>
                <?php if (canManageUsers()): ?>
                <li><div class="sidebar-separator"></div></li>
                <li>
                    <a href="?page=usuarios" class="<?php echo $active_menu === 'usuarios' ? 'active' : ''; ?>" data-tooltip="Usuarios">
                        <span class="icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                                <circle cx="9" cy="7" r="4"/>
                                <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>
                            </svg>
                        </span>
                        <span class="text">Usuarios</span>
                    </a>
                </li>
                <?php endif; ?>
            </ul>
            <!-- Información del Sistema (aparte del menú, al final del sidebar) -->
            <div class="sidebar-info">
                <div class="sidebar-separator"></div>
                <a href="?page=informacion" class="sidebar-info-link <?php echo $active_menu === 'informacion' ? 'active' : ''; ?>" data-tooltip="Información del Sistema">
                    <span class="icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="12" cy="12" r="10"/>
                            <line x1="12" y1="16" x2="12" y2="12"/>
                            <line x1="12" y1="8" x2="12.01" y2="8"/>
                        </svg>
                    </span>
                    <span class="text">Información del Sistema</span>
                </a>
            </div>
        </aside>

        <!-- Main Content -->
        <div class="main-content-wrapper">
            <main class="main-content">
                <?php echo $content; ?>
            </main>
        </div>
    </div>

    <script>
        // Sidebar expand/collapse
        const sidebar = document.getElementById('sidebar');
        const expandBtn = document.getElementById('expandSidebar');
        const mainContentWrapper = document.querySelector('.main-content-wrapper');
        const sidebarOverlay = document.getElementById('sidebarOverlay');
        
        // Función para actualizar el margen del contenido
        function updateMainContentMargin() {
            if (sidebar.classList.contains('expanded')) {
                mainContentWrapper.style.marginLeft = '250px';
            } else {
                mainContentWrapper.style.marginLeft = '70px';
            }
        }
        
        // Cargar estado del sidebar desde localStorage
        const sidebarExpanded = localStorage.getItem('sidebarExpanded') === 'true';
        if (sidebarExpanded) {
            sidebar.classList.add('expanded');
        }
        updateMainContentMargin();
        
        expandBtn.addEventListener('click', () => {
            sidebar.classList.toggle('expanded');
            const isExpanded = sidebar.classList.contains('expanded');
            localStorage.setItem('sidebarExpanded', isExpanded);
            updateMainContentMargin();
            
            // Mostrar/ocultar overlay en mobile
            if (window.innerWidth <= 768) {
                if (isExpanded) {
                    sidebarOverlay.classList.add('show');
                } else {
                    sidebarOverlay.classList.remove('show');
                }
            }
        });
        
        // Cerrar sidebar al hacer click en overlay
        if (sidebarOverlay) {
            sidebarOverlay.addEventListener('click', () => {
                sidebar.classList.remove('expanded');
                sidebarOverlay.classList.remove('show');
                localStorage.setItem('sidebarExpanded', 'false');
                updateMainContentMargin();
            });
        }
        
        // Tooltips para sidebar colapsado
        const sidebarLinks = document.querySelectorAll('.sidebar-menu a');
        let tooltip = null;
        
        sidebarLinks.forEach(link => {
            const tooltipText = link.getAttribute('data-tooltip');
            if (!tooltipText) return;
            
            link.addEventListener('mouseenter', (e) => {
                // Solo mostrar tooltip si sidebar está colapsado y no es mobile
                if (!sidebar.classList.contains('expanded') && window.innerWidth > 768) {
                    // Crear tooltip si no existe
                    if (!tooltip) {
                        tooltip = document.createElement('div');
                        tooltip.className = 'sidebar-tooltip';
                        document.body.appendChild(tooltip);
                    }
                    
                    tooltip.textContent = tooltipText;
                    tooltip.classList.add('show');
                    
                    // Posicionar tooltip
                    const rect = link.getBoundingClientRect();
                    tooltip.style.left = (rect.right + 12) + 'px';
                    tooltip.style.top = (rect.top + rect.height / 2) + 'px';
                    tooltip.style.transform = 'translateY(-50%)';
                }
            });
            
            link.addEventListener('mouseleave', () => {
                if (tooltip) {
                    tooltip.classList.remove('show');
                }
            });
        });
        
        // User menu dropdown
        const userMenu = document.getElementById('userMenu');
        const userBtn = document.getElementById('userBtn');
        
        userBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            userMenu.classList.toggle('active');
        });
        
        // Cerrar dropdown al hacer click fuera
        document.addEventListener('click', (e) => {
            if (!userMenu.contains(e.target)) {
                userMenu.classList.remove('active');
            }
        });
        
        // Actualizar margen en resize y al cargar
        function handleResize() {
            if (window.innerWidth <= 768) {
                mainContentWrapper.style.marginLeft = '0';
                if (sidebar.classList.contains('expanded')) {
                    sidebarOverlay.classList.add('show');
                } else {
                    sidebarOverlay.classList.remove('show');
                }
            } else {
                updateMainContentMargin();
                sidebarOverlay.classList.remove('show');
            }
        }
        
        window.addEventListener('resize', handleResize);
        handleResize(); // Ejecutar al cargar
    </script>
</body>
</html>
