<!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>
    <style>
        /* Conteneur principal */
        body {
    background-image: url('Buisson.jpg');
    background-size: cover;
    background-position: center;
    font-family: Arial, sans-serif;
}

#admin-container {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    width: 90%;
    max-width: 900px;
    margin: 50px auto;
    text-align: center;
}

/* Titres */
h1 {
    margin-bottom: 20px;
    color: #333;
}

/* Boutons */
button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

/* Tableau */
.demande-container {
    margin-top: 20px;
    overflow-y: auto;
    max-height: 400px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table th, table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}

table th {
    background-color: #f4f4f4;
    color: #333;
}

/* Bouton pour supprimer un élément */
.delete-btn {
    background-color: #3878d8;
}

.delete-btn:hover {
    background-color: #1d5c81;
}

/* Bouton Déconnexion */
#logout-admin {
    margin-top: 20px;
    background-color: #f44336;
}

#logout-admin:hover, #clear-queue-btn:hover {
    background-color: #e53935;
}

#clear-queue-btn{
    margin-top: 20px;
    background-color: #FF7F50;
}

#clear-queue-btn:hover{
    background-color: #FF4500;
}

/* Responsiveness */
@media screen and (max-width: 768px) {
    #admin-container {
        width: 95%;
        margin-top: 20px;
        padding: 15px;
    }

    h1 {
        font-size: 20px;
    }

    button {
        font-size: 14px;
        padding: 8px 16px;
    }

    table th, table td {
        padding: 8px;
    }

    table {
        font-size: 14px;
    }

    #logout-admin {
        font-size: 14px;
        padding: 8px 16px;
    }

    #clear-queue-btn {
        font-size: 14px;
        padding: 8px 16px;
    }

    .delete-btn {
        font-size: 14px;
        padding: 8px 16px;
    }
}

/* Pour les très petits écrans (moins de 480px) */
@media screen and (max-width: 480px) {
    #admin-container {
        width: 100%;
        padding: 10px;
    }

    h1 {
        font-size: 18px;
    }

    button {
        font-size: 12px;
        padding: 6px 12px;
    }

    table th, table td {
        padding: 6px;
    }

    table {
        font-size: 12px;
    }

    #logout-admin, #clear-queue-btn, .delete-btn {
        font-size: 12px;
        padding: 6px 12px;
    }
}

    </style>
    <!-- Firebase -->
    <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>
<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>

        <div class="demande-container">
            <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>
        </div>

        <!-- Bouton Déconnexion -->
        <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);

        const authorizedEmails = [
            "regis.flandin@lyc-buisson.com",
            "nicolas.metay@lyc-buisson.com",
            "julien.fosset@lyc-buisson.com",
            "eni.sti2d@lyc-buisson.com",
            "emimienpro@gmail.com",
            "alexis.fouques@lyc-buisson.com"
        ];

        // Vérification de l'authentification
        auth.onAuthStateChanged(user => {
            if (!user || !authorizedEmails.includes(user.email)) {
                window.location.href = 'connexion.html';
            } else {
                loadDemands();
            }
        });

        // Fonction pour charger les demandes
        function loadDemands() {
            const demandesRef = query(collection(db, "demandes"), orderBy("timestamp", "asc"));
            const tableau = document.getElementById("demande-list");

            onSnapshot(demandesRef, snapshot => {
                tableau.innerHTML = "";
                let index = 1;

                snapshot.forEach(doc => {
                    const data = doc.data();
                    const timestamp = data.timestamp?.seconds * 1000 || Date.now();
                    const heure = new Date(timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });

                    tableau.innerHTML += `
                        <tr>
                            <td>${index++}</td>
                            <td>${data.nom || 'Nom inconnu'}</td>
                            <td>${data.professeur || 'Prof inconnu'}</td>
                            <td>${heure}</td>
                            <td><button class="delete-btn" data-id="${doc.id}">-</button></td>
                        </tr>`;
                });

                attachDeleteEvents();
            });
        }

        // Attacher les événements de suppression
        function attachDeleteEvents() {
            document.querySelectorAll('.delete-btn').forEach(btn => {
                btn.addEventListener('click', async () => {
                    try {
                        await deleteDoc(doc(db, "demandes", btn.dataset.id));
                    } catch (e) {
                        console.error("Erreur de suppression :", e);
                    }
                });
            });
        }

        // Vider la file d'attente
        document.getElementById('clear-queue-btn').addEventListener('click', async () => {
            const snapshot = await getDocs(collection(db, "demandes"));
            const batch = writeBatch(db);

            snapshot.forEach(doc => batch.delete(doc.ref));

            await batch.commit().catch(err => console.error(err));
        });

        // Déconnexion
        document.getElementById("logout-admin").addEventListener("click", () => {
            auth.signOut().then(() => window.location.href = 'connexion.html');
        });
    </script>
</body>
</html>
