<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File d'attente - Administration</title>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="fileA.css">
    <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js"></script>
</head>
<style>
    body {
        background-image: url('Buisson.jpg');
        background-size: cover;
        background-position: center;
        font-family: Arial, sans-serif;
    }
    #admin-container {
        background: rgba(255, 255, 255, 0.9);
        padding: 20px;
        border-radius: 10px;
        max-width: 800px;
        margin: auto;
        margin-top: 50px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        padding: 10px;
        text-align: center;
        border-bottom: 1px solid #ddd;
    }
    th {
        background-color: #f4f4f4;
    }
    button {
        padding: 10px 20px;
        background-color: #007BFF;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    button:hover {
        background-color: #0056b3;
    }
</style>
<body>
    <div id="admin-container">
        <h1>Gestion des demandes</h1>
        
        <!-- Bouton pour vider la file d'attente -->
        <button id="clear-queue-btn">Vider la file d'attente</button>

        <table id="demande-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Nom de l'élève</th>
                    <th>Professeur</th>
                    <th>Heure</th>
                    <th>Supprimer</th>
                </tr>
            </thead>
            <tbody id="demande-list">
                <!-- Les demandes seront ajoutées ici dynamiquement -->
            </tbody>
        </table>
        <button id="logout-admin">Se déconnecter</button>
    </div>

    <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js";
        import { getAuth } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-auth.js";
        import { 
            getFirestore, 
            collection, 
            query, 
            orderBy, 
            onSnapshot, 
            deleteDoc, 
            doc, 
            getDocs, 
            writeBatch 
        } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js";

        // Configuration Firebase
        const firebaseConfig = {
            apiKey: "AIzaSyBaFwA2kJM8CvlzBBkeCkq1CdlYclcxNZ0",
            authDomain: "sti2d-file-attente.firebaseapp.com",
            projectId: "sti2d-file-attente",
            storageBucket: "sti2d-file-attente.firebasestorage.app",
            messagingSenderId: "861290828360",
            appId: "1:861290828360:web:749ffe7565bd95db273e7d"
        };

        // Initialisation Firebase
        const app = initializeApp(firebaseConfig);
        const auth = getAuth(app);
        const db = getFirestore(app);

        // Référence à la collection des demandes triées par timestamp
        const demandesRef = collection(db, "demandes");
        const sortedDemandesRef = query(demandesRef, orderBy("timestamp", "asc"));

        // Sélectionner l'élément du tableau
        const tableau = document.getElementById("demande-list");

        // Fonction pour afficher les demandes dans le tableau
        onSnapshot(sortedDemandesRef, (snapshot) => {
            tableau.innerHTML = ""; // Réinitialise le tableau
            let index = 1; // Utilisé pour afficher un ordre séquentiel
            snapshot.forEach((doc) => {
                const data = doc.data();

                // Vérification si les données sont présentes
                const nom = data.nom || "Nom inconnu";
                const prof = data.professeur || "Professeur inconnu";
                
                // Formatage du timestamp
                let heure = "Heure inconnue";
                if (data.timestamp) {
                    const timestamp = data.timestamp.seconds * 1000; // Convertir en millisecondes
                    const dateObj = new Date(timestamp);
                    const hours = dateObj.getHours().toString().padStart(2, '0'); // Format de l'heure
                    const minutes = dateObj.getMinutes().toString().padStart(2, '0'); // Format des minutes
                    heure = `${hours}:${minutes}`; // Affichage de l'heure
                }

                // Crée une ligne dans le tableau
                const row = document.createElement("tr");

                row.innerHTML = `
                    <td>${index++}</td> <!-- Affiche l'ordre -->
                    <td>${nom}</td>
                    <td>${prof}</td>
                    <td>${heure}</td>
                    <td><button class="delete-btn" data-id="${doc.id}">-</button></td>
                `;

                tableau.appendChild(row);
            });

            // Attacher un gestionnaire d'événements aux boutons de suppression
            attachDeleteEventListeners();
        });

        // Fonction pour attacher un gestionnaire d'événements de suppression aux boutons
        function attachDeleteEventListeners() {
            const deleteButtons = document.querySelectorAll('.delete-btn');
            deleteButtons.forEach(button => {
                button.addEventListener('click', async (e) => {
                    const id = e.target.getAttribute('data-id');
                    try {
                        // Supprimer la demande de Firestore
                        await deleteDoc(doc(db, "demandes", id));
                    } catch (error) {
                        console.error("Erreur lors de la suppression :", error);
                        alert("Une erreur est survenue lors de la suppression.");
                    }
                });
            });
        }

        // Fonction pour vider la file d'attente
        document.getElementById('clear-queue-btn').addEventListener('click', async () => {
            const snapshot = await getDocs(demandesRef); // Récupérer toutes les demandes
            if (snapshot.empty) {
                alert("Aucune demande à supprimer.");
                return;
            }
            const batch = writeBatch(db); // Utiliser un batch pour supprimer plusieurs documents
            snapshot.forEach((doc) => {
                batch.delete(doc.ref); // Ajouter la suppression du document au batch
            });
            try {
                await batch.commit(); // Committer le batch pour supprimer tous les documents
            } catch (error) {
                console.error("Erreur lors de la suppression de la file d'attente :", error);
                alert("Une erreur est survenue lors de la suppression.");
            }
        });

        // Gestion de la déconnexion
        document.getElementById("logout-admin").addEventListener("click", () => {
            auth.signOut().then(() => {
                window.location.href = 'connexion.html'; // Redirige vers la page de connexion après déconnexion
            }).catch((error) => {
                console.error("Erreur lors de la déconnexion :", error);
            });
        });
    </script>
</body>
</html>
