<?php
$current_page = basename($_SERVER['PHP_SELF']);

// Détection automatique de la profondeur pour les liens
$current_dir = basename(dirname($_SERVER['PHP_SELF']));
$is_subfolder = ($current_dir === 'connexion' || $current_dir === 'admin');
$base_path = $is_subfolder ? '../' : '';

// --- DÉTECTION DE LA SAISON ---
$jour_mois = date('md'); 

if ($jour_mois >= '0320' && $jour_mois <= '0620') {
    $img_saison = 'fp_printemps.webp';
} elseif ($jour_mois >= '0621' && $jour_mois <= '0922') {
    $img_saison = 'fp_ete.webp';
} elseif ($jour_mois >= '0923' && $jour_mois <= '1220') {
    $img_saison = 'fp_automne.webp';
} else {
    $img_saison = 'fp_hiver.webp'; 
}

// --- SYSTÈME DE NOTIFICATION ---
$nb_attente = 0;
if (isset($pdo) && function_exists('isLogged') && isLogged() && (hasRole('Administrateur') || hasRole('Valideur'))) {
    try {
        $stmt_notif = $pdo->query("SELECT COUNT(*) FROM utilisateurs WHERE est_valide = 0");
        $nb_attente = $stmt_notif->fetchColumn();
    } catch(Exception $e) {
        $nb_attente = 0;
    }
}

// ==========================================================
// CAPTURE DES LIENS (Pour ne pas les réécrire deux fois)
// ==========================================================
ob_start(); 
?>
    <li class="menu-item">
        <a href="<?php echo $base_path; ?>index.php" class="<?php echo ($current_page == 'index.php') ? 'active' : ''; ?>">Accueil</a>
    </li>
    <li class="menu-item">
        <a href="<?php echo $base_path; ?>dechets.php" class="<?php echo ($current_page == 'dechets.php') ? 'active' : ''; ?>">Déchets</a>
    </li>
    <li class="menu-item">
        <a href="<?php echo $base_path; ?>infos-pratiques.php" class="<?php echo ($current_page == 'infos-pratiques.php') ? 'active' : ''; ?>">Infos Pratiques</a>
    </li>

    <?php if(function_exists('isLogged') && isLogged()): ?>
        <li class="menu-item">
            <a href="<?php echo $base_path; ?>services.php" class="<?php echo ($current_page == 'services.php') ? 'active' : ''; ?>">Services</a>
        </li>
    <?php endif; ?>

    <?php if(function_exists('isLogged') && isLogged()): ?>
        <?php if(hasRole('Administrateur') || hasRole('Valideur')): ?>
            <li class="menu-item">
                <a href="<?php echo $base_path; ?>admin/index_admin.php" class="menu-icon <?php echo ($current_page == 'index_admin.php') ? 'active' : ''; ?>" title="Administration globale">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="3"></circle>
                        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
                    </svg>
                </a>
            </li>

            <li class="menu-item">
                <a href="<?php echo $base_path; ?>admin/admin_gestion.php" class="menu-icon <?php echo ($current_page == 'admin_gestion.php') ? 'active' : ''; ?>" title="Gestion des habitants">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                        <circle cx="9" cy="7" r="4"></circle>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                    </svg>
                    <?php if($nb_attente > 0): ?>
                        <span class="notif-badge"><?php echo $nb_attente; ?></span>
                    <?php endif; ?>
                </a>
            </li>
        <?php endif; ?>
        
        <?php if(hasRole('Administrateur') || hasRole('Maire') || hasRole('Adjoint') || hasRole('Secretaire')): ?>
            <li class="menu-item">
                <a href="<?php echo $base_path; ?>admin_cimetiere.php" class="<?php echo ($current_page == 'admin_cimetiere.php') ? 'active' : ''; ?>">Cimetière</a>
            </li>
        <?php endif; ?>
        
        <li class="menu-item">
            <a href="<?php echo $base_path; ?>connexion/logout.php" class="btn-connexion">Déconnexion</a>
        </li>
    <?php else: ?>
        <li class="menu-item">
            <a href="<?php echo $base_path; ?>connexion/login.php" class="btn-connexion <?php echo ($current_page == 'login.php') ? 'active' : ''; ?>">Connexion</a>
        </li>
    <?php endif; ?>
<?php
$liens_html = ob_get_clean(); 
?>

<style>
    body {
        background-image: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), url('<?php echo $base_path . 'images/' . $img_saison; ?>') !important;
    }

    nav { 
        margin: 15px auto; 
        padding: 5px 30px; 
        background: white; 
        border-radius: 25px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
        width: 100%; 
        box-sizing: border-box; 
    }

    .menu-list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 30px; align-items: center; flex-wrap: wrap; }
    
    .menu-item a { text-decoration: none; color: var(--nature-texte, #333); font-weight: 600; padding: 6px 20px; border-radius: 30px; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; position: relative; }
    
    .menu-item a:hover { background-color: var(--nature-clair, #f0f4f0); color: var(--nature-vert, #4a7c44); }
    .menu-item a.active { background-color: var(--nature-vert, #4a7c44); color: white; }
    .btn-connexion { border: 2px solid var(--nature-vert, #4a7c44); }
    
    .menu-item a.menu-icon { padding: 6px; border-radius: 50%; }
    .menu-item a.menu-icon svg { width: 22px; height: 22px; }
    
    .notif-badge { position: absolute; top: -2px; right: -2px; background-color: #e74c3c; color: white; font-size: 0.75em; font-weight: bold; padding: 2px 6px; border-radius: 50%; min-width: 12px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); border: 2px solid white; line-height: 1.2; }
</style>

<ul class="menu-list menu-pc-seulement">
    <?php echo $liens_html; ?>
    <li class="menu-item" style="flex-basis: 100%; text-align: center; margin-top: -15px;">
        <a href="<?php echo $base_path; ?>confidentialite.php" style="font-size: 0.75em; color: #999; padding: 0; font-weight: normal; text-decoration: underline; display: inline-block;">Politique de confidentialité & Cookies</a>
    </li>
</ul>

<div id="btn-flottant-mobile" onclick="toggleMenu()">☰ Menu</div>
<div id="overlay-sombre-mobile" onclick="toggleMenu()"></div>
<div id="panneau-lateral-mobile">
    <div class="fermer-panneau" onclick="toggleMenu()">✖</div>
    <ul class="liste-mobile">
        <?php echo $liens_html; ?>
        <li class="menu-item" style="margin-top: 20px; text-align: center;">
            <a href="<?php echo $base_path; ?>confidentialite.php" style="font-size: 0.8em; color: #999; text-decoration: underline; background: none;">Politique de confidentialité</a>
        </li>
    </ul>
</div>

<style>
    /* Par défaut sur PC, on cache les éléments mobiles */
    #btn-flottant-mobile, #overlay-sombre-mobile, #panneau-lateral-mobile { display: none; }

    /* RÈGLES APPLIQUÉES UNIQUEMENT SUR LES PETITS ÉCRANS */
    @media (max-width: 768px) {
        
        /* CORRECTIF : Empêche la page de s'élargir et de faire sortir le bouton */
        html, body { overflow-x: hidden !important; max-width: 100vw !important; }
        
        /* On cache la liste PC */
        .menu-pc-seulement { display: none !important; }
        
        /* On rend la boîte de fond transparente pour annuler l'encart */
        nav { background: transparent !important; box-shadow: none !important; padding: 0 !important; border: none !important; margin: 0 !important; }

        /* Le bouton flottant (déplacé en HAUT à droite) */
        #btn-flottant-mobile {
            display: flex !important; align-items: center; justify-content: center;
            position: fixed !important; 
            top: 15px !important;  /* HAUT DE L'ÉCRAN */
            right: 15px !important; /* Marge droite de 15px */
            bottom: auto !important; /* Annule l'ancienne position en bas */
            background: #4a7c44 !important; color: white !important;
            padding: 12px 20px !important; border-radius: 50px !important;
            font-weight: bold !important; font-size: 1.1em !important;
            box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
            z-index: 2147483647 !important; /* Valeur maximum absolue */
            cursor: pointer !important;
        }

        /* Le fond sombre cliquable */
        #overlay-sombre-mobile {
            position: fixed !important; top: 0 !important; left: 0 !important; 
            width: 100vw !important; height: 100vh !important;
            background: rgba(0,0,0,0.6) !important; 
            z-index: 2147483646 !important; 
            display: none; 
        }

        /* Le panneau rétractable sur le côté droit */
        #panneau-lateral-mobile {
            display: block !important; position: fixed !important; top: 0 !important; right: -350px;
            width: 85vw !important; /* Max 85% de l'écran */
            max-width: 300px !important; /* Ne dépasse jamais 300px */
            height: 100vh !important; background: white !important;
            box-shadow: -5px 0 20px rgba(0,0,0,0.5) !important;
            z-index: 2147483647 !important; transition: right 0.3s ease !important;
            padding: 60px 20px 20px 20px !important; overflow-y: auto !important;
            box-sizing: border-box !important;
        }

        /* Classes ajoutées en JS pour l'ouverture */
        #panneau-lateral-mobile.ouvert { right: 0 !important; }
        #overlay-sombre-mobile.ouvert { display: block !important; }

        /* La croix de fermeture */
        .fermer-panneau {
            position: absolute; top: 15px; right: 20px;
            font-size: 2.5em; color: #e74c3c; cursor: pointer;
            z-index: 2147483647;
            line-height: 1;
        }

        /* Mise en forme des liens dans le panneau */
        .liste-mobile { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
        .liste-mobile .menu-item a {
            display: block; text-align: center; text-decoration: none;
            color: #333; font-weight: bold; padding: 12px;
            background: #f4f7f6; border-radius: 10px; position: relative;
            white-space: normal !important; /* Permet aux textes longs d'aller à la ligne */
            word-wrap: break-word !important; /* Évite de déborder de la boîte */
            line-height: 1.3;
        }
        .liste-mobile .menu-item a.active { background: #4a7c44; color: white; }
        .liste-mobile .btn-connexion { background: white; border: 2px solid #4a7c44; }
        .liste-mobile .notif-badge { top: 5px; right: 10px; }
    }
</style>

<script>
    // SCRIPT MAGIQUE : On détache les éléments du menu pour les coller 
    // à la racine de la page (body). Ça détruit les "pièges" d'empilement CSS.
    document.addEventListener("DOMContentLoaded", function() {
        if (window.innerWidth <= 768) {
            document.body.appendChild(document.getElementById('overlay-sombre-mobile'));
            document.body.appendChild(document.getElementById('panneau-lateral-mobile'));
            document.body.appendChild(document.getElementById('btn-flottant-mobile'));
        }
    });

    function toggleMenu() {
        document.getElementById('panneau-lateral-mobile').classList.toggle('ouvert');
        document.getElementById('overlay-sombre-mobile').classList.toggle('ouvert');
    }
</script>