<?php
/**
 * DNCMEXICO.COM - Cabecera Global Modular, Adaptativa e Inmune
 * Corrección de Roles (RBAC), Sesiones Nativas y Autoconexión de Taxonomías.
 * FIX V2: Resolución definitiva de "Cuerpos Perdidos" (Fixed + Dynamic Spacer) y Menú Móvil (Event Capture).
 */
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

// 1. AUTOCONEXIÓN DE SEGURIDAD
if (!isset($pdo) && file_exists('includes/conexion.php')) {
    try {
        include_once 'includes/conexion.php';
    } catch (Exception $e) {
        error_log("Fallo crítico de autoconexión en Header: " . $e->getMessage());
    }
}

// 2. CONTROL DE ACCESOS
$roles_administrativos = ['SuperAdmin', 'Admin', 'Editor', 'Reportero'];
$mostrar_barra_admin = isset($_SESSION['rol']) && in_array($_SESSION['rol'], $roles_administrativos);

// 3. CONSULTA ÚNICA E INMUNE DE CATEGORÍAS
$menu_categorias = [];
if (isset($pdo)) {
    try {
        $stmt = $pdo->query("SELECT nombre, slug FROM categorias ORDER BY nombre ASC");
        if ($stmt) {
            $menu_categorias = $stmt->fetchAll(PDO::FETCH_ASSOC);
        }
    } catch (PDOException $e) {
        error_log("Error SQL en menú dinámico: " . $e->getMessage());
    }
}
?>

<link rel="stylesheet" href="assets/css/header.css">

<style>
/* ==========================================================================
   CSS CRÍTICO - BLINDAJE DE ESTRUCTURA Y MENÚ MÓVIL
   ========================================================================== */

/* 1. EL ENVOLTORIO MAESTRO ES AHORA FIJO PARA EVITAR CONFLICTOS FLEXBOX Y PÉRDIDA DE CUERPOS */
#dnc-global-header-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 999999 !important;
    width: 100% !important;
    background-color: #000000 !important;
    display: block !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.8) !important;
}

/* Asegurar que ningún contenedor corte el cajón lateral */
#dnc-global-header-wrapper,
.site-header,
.header-main-container {
    overflow: visible !important;
}

@media (max-width: 992px) {
    .site-header {
        position: relative !important; 
        z-index: 999999 !important;
        padding: 0 15px !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }
    
    .header-main-container {
        justify-content: space-between !important;
    }

    /* Transformación forzada a Cajón Lateral Premium sin bug de visibilidad */
    header.site-header nav.main-navigation {
        position: fixed !important;
        top: 0 !important;
        left: -120vw !important; /* Fuera de pantalla matemáticamente */
        width: 85vw !important;
        max-width: 320px !important;
        height: 100vh !important;
        background-color: #050505 !important;
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
        z-index: 1000000 !important; /* Un nivel debajo de la hamburguesa */
        padding: 85px 20px 40px !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important; 
        overflow-y: auto !important;
        transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: none !important;
    }
    
    header.site-header nav.main-navigation.active {
        left: 0 !important; 
        box-shadow: 15px 0 60px rgba(0,0,0,0.95) !important;
    }

    /* Reset estructural profundo para evitar que enlaces queden invisibles */
    header.site-header nav.main-navigation ul.nav-menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    header.site-header nav.main-navigation ul.nav-menu li {
        width: 100% !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    header.site-header nav.main-navigation ul.nav-menu li a.nav-link {
        display: block !important;
        width: 100% !important;
        font-size: 16px !important;
        padding: 14px 10px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Botón Hamburguesa blindado */
    header.site-header button.mobile-menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 26px !important;
        height: 18px !important;
        z-index: 1000001 !important; /* MÁXIMO Z-INDEX PARA SOBRESALIR DEL MENU */
        position: relative !important;
        background: transparent !important;
        border: none !important;
        margin-right: 15px !important;
        padding: 0 !important;
        order: -1 !important;
        cursor: pointer !important;
    }
    
    header.site-header button.mobile-menu-toggle .bar {
        width: 100% !important;
        height: 2px !important;
        background-color: #ffffff !important;
        transition: all 0.3s ease !important;
        pointer-events: none !important;
    }
    
    header.site-header button.mobile-menu-toggle.open .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
    }
    header.site-header button.mobile-menu-toggle.open .bar:nth-child(2) {
        opacity: 0 !important;
    }
    header.site-header button.mobile-menu-toggle.open .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
    }

    /* Ajustes compactos UI móvil */
    .site-header .logo-branding { margin-right: auto !important; }
    .site-header .main-logo { max-width: 140px !important; }
    .site-header .header-right-actions { margin-left: auto !important; }
    .site-header .search-form-header { padding: 4px 8px !important; }
    .site-header .search-form-header input { width: 80px !important; font-size: 12px !important; }
    .site-header .search-form-header input:focus { width: 110px !important; }
}
</style>

<div id="dnc-global-header-wrapper">

    <?php if ($mostrar_barra_admin): ?>
        <div class="admin-quick-bar">
            <div class="admin-bar-container">
                <span class="user-welcome">Panel: <strong><?= htmlspecialchars($_SESSION['rol'] . " - " . ($_SESSION['nombre'] ?? 'Staff')); ?></strong></span>
                <div class="admin-actions">
                    <a href="crear_noticia.php">📝 Redactar Nota</a>
                    <?php if (in_array($_SESSION['rol'], ['SuperAdmin', 'Admin', 'Editor'])): ?>
                        <a href="aprobar_noticias.php">📥 Aprobaciones</a>
                        <a href="gestionar_categorias.php">🗂️ Categorías</a>
                    <?php endif; ?>
                    <?php if (in_array($_SESSION['rol'], ['SuperAdmin', 'Admin'])): ?>
                        <a href="gestionar_usuarios.php">👥 Usuarios</a>
                        <a href="dashboard.php">📊 Dashboard</a>
                    <?php endif; ?>
                    <a href="logout.php" class="admin-logout">Cerrar Sesión</a>
                </div>
            </div>
        </div>
    <?php endif; ?>

    <header class="site-header" itemscope itemtype="https://schema.org/WPHeader">
        <div class="header-main-container">
            
            <button class="mobile-menu-toggle" aria-label="Abrir menú" aria-expanded="false">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </button>

            <div class="logo-branding" itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
                <a href="index.php" rel="home" itemprop="url" class="logo-link">
                    <img src="assets/img/logo-official.svg" 
                         alt="DESTINATION NETWORK CHANNEL MEXICO" 
                         title="DESTINATION NETWORK CHANNEL MEXICO"
                         itemprop="logo"
                         width="280" 
                         height="75"
                         fetchpriority="high" 
                         decoding="async"
                         class="main-logo">
                </a>
            </div>

            <nav class="main-navigation">
                <ul class="nav-menu">
                    <li><a href="index.php" class="nav-link">Inicio</a></li>
                    <?php
                    if (!empty($menu_categorias)) {
                        foreach ($menu_categorias as $item_cat) {
                            echo '<li><a href="categoria.php?slug=' . htmlspecialchars($item_cat['slug']) . '" class="nav-link">' . htmlspecialchars($item_cat['nombre']) . '</a></li>';
                        }
                    }
                    ?>
                </ul>
            </nav>

            <div class="header-right-actions">
                <form action="buscar.php" method="GET" class="search-form-header">
                    <input type="text" name="q" placeholder="Buscar noticia..." required autocomplete="off" aria-label="Buscar">
                    <button type="submit" aria-label="Buscar">
                        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                    </button>
                </form>
            </div>

        </div>
    </header>
</div>

<div id="dnc-header-spacer" style="display: block; width: 100%; visibility: hidden; flex-shrink: 0;"></div>

<script>
(function() {
    // Sincronizar el espaciador con la altura real del header en todo momento
    function syncSpacer() {
        var wrapper = document.getElementById('dnc-global-header-wrapper');
        var spacer = document.getElementById('dnc-header-spacer');
        if (wrapper && spacer) {
            spacer.style.height = wrapper.getBoundingClientRect().height + 'px';
        }
    }

    // Bindings para el espaciador dinámico
    window.addEventListener('resize', syncSpacer);
    window.addEventListener('load', syncSpacer);
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', syncSpacer);
    } else {
        syncSpacer();
    }

    // Lógica blindada del Menú Móvil
    function initMobileMenu() {
        var btnOriginal = document.querySelector('.mobile-menu-toggle');
        var nav = document.querySelector('.main-navigation');
        
        if (!btnOriginal || !nav) return;
        
        // Clonamos para remover event listeners previos débiles
        var btn = btnOriginal.cloneNode(true);
        btnOriginal.parentNode.replaceChild(btn, btnOriginal);
        
        // FASE DE CAPTURA (true) Y stopImmediatePropagation PARA EVITAR DOBLE EJECUCIÓN (Choque con header.js)
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            
            var isClosed = !nav.classList.contains('active');
            
            if (isClosed) {
                nav.classList.add('active');
                btn.classList.add('open');
                btn.setAttribute('aria-expanded', 'true');
                document.body.style.overflow = 'hidden'; 
            } else {
                nav.classList.remove('active');
                btn.classList.remove('open');
                btn.setAttribute('aria-expanded', 'false');
                document.body.style.overflow = '';
            }
        }, true);

        // Autocierre al tocar fuera del contenedor
        document.addEventListener('click', function(e) {
            if (nav.classList.contains('active')) {
                if (!nav.contains(e.target) && !btn.contains(e.target)) {
                    nav.classList.remove('active');
                    btn.classList.remove('open');
                    btn.setAttribute('aria-expanded', 'false');
                    document.body.style.overflow = '';
                }
            }
        });
    }
    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initMobileMenu);
    } else {
        initMobileMenu();
    }
})();
</script>
<script src="assets/js/header.js" defer></script>