document.addEventListener('DOMContentLoaded', () => {

    // Sélection des éléments du DOM

    const editor = document.getElementById('content');

    const toolbar = document.getElementById('toolbar');

    const imageUpload = document.getElementById('image-upload');

    const uploadProgress = document.getElementById('upload-progress');

    const fullscreenBtn = document.getElementById('fullscreenBtn');

    const container = document.getElementById('editeur');



    // Fonctionnalité plein écran

    fullscreenBtn.addEventListener('click', () => {

        if (!document.fullscreenElement) {

            container.requestFullscreen().catch(err => {

                alert(`Erreur lors de l'activation du mode plein écran : ${err.message}`);

            });

        } else {

            document.exitFullscreen();

        }

    });



    // Sélection de tous les boutons "Citer"

    const quoteButtons = document.querySelectorAll('.quote-btn');



    // Ajout d'un écouteur d'événements à chaque bouton

    quoteButtons.forEach(function(quoteButton) {

        quoteButton.addEventListener('click', function() {

            // Récupération du contenu et de l'auteur de la citation à partir des attributs data-*

            const content = this.getAttribute('data-content');

            const author = this.getAttribute('data-author');

            const replyid = this.getAttribute('data-id');

            

            // Décodage du contenu et de l'auteur si nécessaire

            const decodedContent = decodeHtml(content);

            const decodedAuthor = decodeHtml(author);

            

            // Formatage de la citation avec des balises BBCode

            const quote = `[quote="${decodedAuthor}" id="${replyid}"]${decodedContent}[/quote]\n`;

            

            // Ajout de la citation à la fin du contenu de l'éditeur

            editor.value += quote;

        });

    });

    

    // Fonction pour décoder les entités HTML

    function decodeHtml(html) {

        const txt = document.createElement("textarea");

        txt.innerHTML = html;

        return txt.value;

    }



    // Écouteur d'événements pour la barre d'outils

    toolbar.addEventListener('click', (e) => {

        // Vérifie si un bouton ou une icône a été cliqué

        const button = e.target.closest('button'); // Récupère le bouton parent

        if (button) { // Si un bouton a été cliqué

            const tag = button.getAttribute('data-tag'); // Récupération du tag à ajouter

            console.log(`Bouton ${tag} cliqué`); // Log pour le débogage

            wrapSelectionWithTag(tag); // Appel de la fonction pour ajouter le tag

        }

    });



    // Écouteur d'événements pour les modifications dans l'éditeur

    editor.addEventListener('input', () => {

        console.log('Contenu modifié'); // Log pour le débogage

    });



    // Écouteur d'événements pour le changement d'image

    imageUpload.addEventListener('change', () => {

        console.log('Image sélectionnée'); // Log pour le débogage

        uploadImage(); // Appel de la fonction pour uploader l'image

    });



    // Fonction pour ajouter des balises autour de la sélection de texte

    function wrapSelectionWithTag(tag) {

        console.log(`Tag ${tag} ajouté`); // Log pour le débogage

        const startTag = `[${tag}]`; // Balise d'ouverture

        const endTag = `[/${tag}]`; // Balise de fermeture

        const start = editor.selectionStart; // Position de début de la sélection

        const end = editor.selectionEnd; // Position de fin de la sélection

        const text = editor.value; // Texte actuel de l'éditeur

        // Ajout des balises autour de la sélection

        editor.value = text.slice(0, start) + startTag + text.slice(start, end) + endTag + text.slice(end);

    }

});