<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Suivi des QR Codes</title>
    <link rel="stylesheet" href="css.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script type="module">
        // Importer le SDK Firebase
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js";
        import { getFirestore, doc, setDoc, getDocs, collection, updateDoc, increment } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js";

        console.log("Initialisation de Firebase...");

        // Configuration Firebase
        const firebaseConfig = {
            apiKey: "AIzaSyCPMU6WMvVaX7wp4jRFdJTyBvqzMOKXO4k",
            authDomain: "qrcode-40207.firebaseapp.com",
            projectId: "qrcode-40207",
            storageBucket: "qrcode-40207.appspot.com",
            messagingSenderId: "327102074514",
            appId: "1:327102074514:web:765b10a7b16624194aa04b",
            measurementId: "G-9G0TRYQFEY"
        };

        // Initialiser Firebase
        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);

        // Références des éléments
        const lienInput = document.getElementById('googleLink');
        const boutonGenerer = document.getElementById('generateQR');
        const conteneurQR = document.getElementById('qrcode');
        const listeData = document.getElementById('dataList');

        // Fonction pour afficher la liste des QR codes générés
        async function afficherListeData() {
            listeData.innerHTML = '<h2>QR Codes Générés</h2>';

            try {
                const snapshot = await getDocs(collection(db, 'qrcodes'));
                snapshot.forEach(doc => {
                    const data = doc.data();

                    const itemListe = document.createElement('div');
                    itemListe.className = 'list-item';

                    itemListe.innerHTML = `
                        <p><strong>Lien :</strong> <a href="${data.link}" target="_blank">${data.link}</a></p>
                        <p><strong>Scan Count :</strong> ${data.scanCount}</p>
                        <img src="${data.qrCodeLink}" alt="Aperçu QR Code" style="width: 100px; height: 100px; cursor: pointer;">
                        <button onclick="resetScanCount('${doc.id}')">Réinitialiser</button>
                    `;

                    listeData.appendChild(itemListe);
                });
            } catch (error) {
                console.error("Erreur lors de la récupération des données depuis Firestore:", error);
            }
        }

        // Fonction pour réinitialiser le compteur de scans
        async function resetScanCount(docId) {
            try {
                const qrCodeRef = doc(db, 'qrcodes', docId);

                // Réinitialiser le compteur de scans à zéro
                await updateDoc(qrCodeRef, {
                    scanCount: 0
                });

                console.log(`Compteur de scans pour le QR code avec l'ID ${docId} réinitialisé.`);
                // Rafraîchir la liste des QR codes
                afficherListeData();
            } catch (error) {
                console.error("Erreur lors de la réinitialisation du compteur de scans : ", error);
            }
        }

        // Générer le QR Code et sauvegarder dans Firestore
        boutonGenerer.addEventListener('click', async () => {
            const lien = lienInput.value;
            if (!lien) {
                alert('Veuillez entrer un lien valide.');
                return;
            }

            const docId = `qr_${Date.now()}`;
            const qrCodeUrl = `${lien}?docId=${docId}`;

            // Effacer le QR code précédent
            conteneurQR.innerHTML = '';

            try {
                // Générer le QR Code
                const qrCode = new QRCode(conteneurQR, {
                    text: qrCodeUrl,
                    width: 200,
                    height: 200
                });

                // Ajouter un délai pour récupérer l'image du QR code
                setTimeout(async () => {
                    const qrCodeImage = conteneurQR.querySelector('img').src;

                    // Sauvegarder le lien et l'image du QR code dans Firestore
                    await setDoc(doc(db, 'qrcodes', docId), {
                        link: lien,
                        qrCodeLink: qrCodeImage,
                        scanCount: 0
                    });

                    // Rafraîchir la liste des QR codes
                    afficherListeData();
                }, 500);
            } catch (error) {
                console.error("Erreur lors de la génération du QR code ou de la sauvegarde dans Firestore :", error);
            }
        });

        // Charger la liste des QR codes lors du chargement de la page
        afficherListeData();
    </script>
</head>
<body>
    <h1>Suivi des QR Codes</h1>
    <label for="googleLink">Entrez le lien :</label>
    <input type="url" id="googleLink" placeholder="https://example.com" required>
    <button id="generateQR">Générer le QR Code</button>

    <div id="qrcode" style="display: none;"></div> <!-- Conteneur pour le QR Code généré -->
    <div id="dataList"></div> <!-- Liste des QR codes générés -->
</body>
</html>