<?php
// Protection de la page admin (sécurité de base)
if (!isset($_SESSION['user_id']) || $_SESSION['role'] !== 'admin') {
    // Si l'utilisateur n'est pas admin, on le déconnecte et le redirige
    header('Location: ../index.php');
    exit;
}

$currentAdminPage = basename($_SERVER['PHP_SELF']);
?>
<header class="navbar admin-navbar" style="border-bottom: 2px solid #e4e7eb; position: relative;">
    <div class="logo">
        <a href="index.php">PARCO<span>TRIP</span> <small style="font-size: 0.8rem; background: #4a51ff; color: #fff; padding: 2px 8px; border-radius: 6px; margin-left: 5px;">ADMIN</small></a>
    </div>
    <nav>
        <ul class="nav-links" style="overflow: visible !important;">
            <li><a href="index.php" class="<?php echo ($currentAdminPage == 'index.php') ? 'active' : ''; ?>"><i class="fa-solid fa-chart-pie"></i> Dashboard</a></li>
            <li><a href="manage_parks.php" class="<?php echo ($currentAdminPage == 'manage_parks.php') ? 'active' : ''; ?>"><i class="fa-solid fa-map-location-dot"></i> Parcs</a></li>
            
            <li class="dropdown-admin <?php echo ($currentAdminPage == 'edituser.php') ? 'page-active' : ''; ?>" style="position: relative; display: inline-block;">
                <a href="#" class="dropdown-trigger-admin <?php echo ($currentAdminPage == 'edituser.php') ? 'active' : ''; ?>" style="display: flex; align-items: center; gap: 6px; font-weight: 700; cursor: pointer; text-decoration: none;">
                    <i class="fa-solid fa-bars-progress"></i> Gérer <i class="fa-solid fa-chevron-down arrow-icon" style="font-size: 0.7rem; transition: transform 0.2s;"></i>
                </a>
                <div class="dropdown-menu-admin">
                    <ul>
                        <li>
                            <a href="edituser.php" class="<?php echo ($currentAdminPage == 'edituser.php') ? 'sub-active' : ''; ?>">
                                <i class="fa-solid fa-user-gear"></i> Gérer les membres
                            </a>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a href="../index.php" target="_blank"><i class="fa-solid fa-eye"></i> Voir le site</a></li>
            
            <li>
                <a href="logout.php" style="color: #ff4757; font-weight: 700;" onclick="return confirm('Voulez-vous vraiment vous déconnecter de l\'administration ?');">
                    <i class="fa-solid fa-power-off"></i> Déconnexion
                </a>
            </li>
        </ul>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>
</header>

<style>
/* Conteneur du sous-menu (Bulle flottante sous la Navbar) */
.dropdown-admin .dropdown-menu-admin {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #ffffff !important;
    min-width: 200px;
    border-radius: 8px;
    padding: 4px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #e4e7eb !important;
    display: none; /* Géré proprement par JavaScript au clic/survol */
    z-index: 99999 !important;
}

/* Affichage forcé via la classe d'état .is-open */
.dropdown-admin.is-open .dropdown-menu-admin {
    display: block !important;
}

/* Rotation de la petite flèche */
.dropdown-admin.is-open .arrow-icon {
    transform: rotate(180deg);
}

/* Liens à l'intérieur de la bulle déroulante */
.dropdown-menu-admin ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

.dropdown-menu-admin ul li {
    display: block !important;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

.dropdown-menu-admin ul li a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    font-size: 0.9rem !important;
    color: #475569 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.2s ease;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Effet Hover dans la bulle */
.dropdown-menu-admin ul li a:hover {
    background-color: #f1f5f9 !important;
    color: #4a51ff !important;
}

/* Style de l'élément si on est sur la page edituser.php */
.dropdown-menu-admin ul li a.sub-active {
    background-color: #4a51ff !important;
    color: #ffffff !important;
}

/* --- ADAPTATION RESPONSIVE MOBILE --- */
@media screen and (max-width: 768px) {
    .dropdown-admin {
        display: block !important;
        width: 100%;
    }
    .dropdown-admin .dropdown-menu-admin {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        background: rgba(0, 0, 0, 0.03) !important;
        width: 100%;
        padding-left: 15px;
    }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const dropdownContainer = document.querySelector(".dropdown-admin");
    const dropdownTrigger = document.querySelector(".dropdown-trigger-admin");

    if (dropdownTrigger && dropdownContainer) {
        // Activation au clic pour éviter les caprices du hover CSS
        dropdownTrigger.addEventListener("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            dropdownContainer.classList.toggle("is-open");
        });

        // Fermer automatiquement le menu si l'utilisateur clique n'importe où ailleurs sur l'écran
        document.addEventListener("click", function(e) {
            if (!dropdownContainer.contains(e.target)) {
                dropdownContainer.classList.remove("is-open");
            }
        });

        // Optionnel : Garde aussi l'ouverture au survol sur PC pour le confort
        dropdownContainer.addEventListener("mouseenter", function() {
            if (window.innerWidth > 768) {
                dropdownContainer.classList.add("is-open");
            }
        });
        dropdownContainer.addEventListener("mouseleave", function() {
            if (window.innerWidth > 768) {
                dropdownContainer.classList.remove("is-open");
            }
        });
    }
});
</script>