 
  window.addEventListener('DOMContentLoaded', () => {
    const blocs = document.querySelectorAll('#md [contenteditable="true"]');
    if (blocs.length > 0) {
      blocs[blocs.length - 1].focus(); // focus sur le dernier bloc
    }
	
	const container = document.querySelector(".messages-container");
	if(container) container.scrollTop = container.scrollHeight; // Pour voir le dernier message du Tchat
	
	
	  // Sélectionne tous les dropdowns sur la page
	  const dropdowns = document.querySelectorAll('.dropdown');

	  dropdowns.forEach(function (dropdown) {
	    const trigger = dropdown.querySelector('.dropdown-trigger button');

	    trigger.addEventListener('click', function (event) {
	      event.stopPropagation(); // Évite que le clic remonte jusqu'au body
	      dropdown.classList.toggle('is-active');
	    });
	  });

	  // Fermer le menu si on clique en dehors
	  document.addEventListener('click', function () {
	    dropdowns.forEach(function (dropdown) {
	      dropdown.classList.remove('is-active');
	    });
	  });
	  
	  ajouterBlocVideSiBesoin();
  });
  
  // Fonction pour ajouter un nouvel événement à chaque bloc
  function addBlocEvent(bloc) {
    
    bloc.addEventListener('keydown', function(event) {
 
      if (event.key === 'Enter' && !event.shiftKey) {
        event.preventDefault();
        
		const currentBloc = event.target;
		const texte = currentBloc.innerText.trim();
		
		if (texte.startsWith("/")) {
		  // Gérer les commandes
		  handleSlashCommand(currentBloc, texte);
		}

    	const blocId = currentBloc.getAttribute('data-id'); // Récupère l'ID du bloc
		const type = currentBloc.getAttribute('data-type');
		const metadata = currentBloc.getAttribute('metadata');
      	const params = new URLSearchParams();
		
		let contenuTexte = currentBloc.innerHTML
		  .replace(/<br\s*\/?>/gi, '\n')      // Remplace les <br> par \n
		  .replace(/<b>/gi, '**')             // Remplace <b> par **
		  .replace(/<\/b>/gi, '**')           // Remplace </b> par **
		  .replace(/<i>/gi, '*')              // Remplace <i> par *
		  .replace(/<\/i>/gi, '*');           // Remplace </i> par *
      	params.append("contenu", contenuTexte);
      	params.append("blocId", blocId);
		params.append("metadata", metadata); 
		params.append("type", type); 
    	
      	fetch("/Projet/ModifBloc", {
            method: "POST",
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            },
            body: params
          }).then(response => {
            if (!response.ok) {
              console.error("Erreur lors de la mise à jour du bloc.");
            }
          });
		 
		ajouterBlocVideSiBesoin();
      }
	});
    
	bloc.addEventListener('input', function () {
			autoResize(bloc);
	});
  }
  
  function autoResize(bloc) {
	    bloc.style.height = 'auto';
	    bloc.style.height = bloc.scrollHeight + 'px';
  }

  document.querySelectorAll('#md [contenteditable="true"]').forEach(bloc => {
	    addBlocEvent(bloc);
  });

  
  function ajouterBlocVideSiBesoin() {
    const allBlocs = document.querySelectorAll('#md [contenteditable="true"]');
	const pageId = new URLSearchParams(window.location.search).get("id");
	if(pageId === null) return;
	
	const message = document.querySelector('.column.is-half p');
	if (message && message.textContent.trim() === "Pas encore de page choisie.") {
	  console.log("Aucune page choisie, fonction arrêtée.");
	  return; // Arrête la fonction ici (se passe après avoir supprimé une page)
	}
	
    if (allBlocs.length === 0 || allBlocs[allBlocs.length - 1].innerText.trim() !== "") {
      const params = new URLSearchParams();
      params.append("contenu", "");  // Bloc vide
      params.append("type", "TEXTE"); // Type par défaut : TEXTE
      params.append("ordre", allBlocs.length);
      params.append("pageId", new URLSearchParams(window.location.search).get("id"));

      fetch("/Projet/NouveauBloc", {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        body: params.toString()
      }).then(response => response.json())
        .then(data => {
          if (data && data.idGenere) {
            const idGenere = data.idGenere;

            const container = document.createElement('div');
            container.classList.add('field', 'is-grouped', 'is-align-items-flex-start', 'bloc-container');

            const control = document.createElement('div');
            control.classList.add('control', 'is-expanded');

            const newBloc = document.createElement('div');
            newBloc.classList.add('textarea', 'is-primary', 'editor');
            newBloc.setAttribute('contenteditable', 'true');
            newBloc.setAttribute('rows', '1');
            newBloc.setAttribute('data-type', 'TEXTE');
            newBloc.setAttribute('data-id', idGenere);
			newBloc.setAttribute('metadata', '{}');

            control.appendChild(newBloc);
            container.appendChild(control);

            const delBtnWrapper = document.createElement('div');
            delBtnWrapper.classList.add('control');

            const delBtn = document.createElement('button');
            delBtn.classList.add('delete', 'is-danger', 'delete-bloc-btn');
            delBtn.setAttribute('data-id', idGenere);

            delBtnWrapper.appendChild(delBtn);
            container.appendChild(delBtnWrapper);

            document.getElementById('md').appendChild(container);

            addDeleteBloc(delBtn);
            addBlocEvent(newBloc);
			newBloc.focus();
          }
        });
    } else {
		// Vérifier si le dernier bloc est vide et lui appliquer le focus
		const blocs = document.querySelectorAll('.editor'); // Sélectionne tous les blocs
		if(blocs === null) return;
		const lastBloc = blocs[blocs.length - 1]; // Dernier bloc

		if (lastBloc && lastBloc.innerHTML.trim() === '') {
		  lastBloc.focus(); // Mettre le focus sur le dernier bloc si vide
		}
	}
  }

  
  function addDeleteBloc(button) {
	button.addEventListener('click', function () {
      const blocId = button.dataset.id;
      const blocContainer = button.closest('.bloc-container');
      const bloc = blocContainer.querySelector('[contenteditable="true"]');
      
      if (bloc.innerText.trim() === "") {
          return; // Empêche la suppression si le bloc est vide
      }

      if (confirm("Voulez-vous vraiment supprimer ce bloc ?")) {
        const params = new URLSearchParams();
        params.append("blocId", blocId);

        fetch("/Projet/SupprimerBloc", {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          body: params
        }).then(response => {
          if (response.ok) {
            blocContainer.remove(); // Supprime visuellement le bloc
			ajouterBlocVideSiBesoin();
          } else {
            console.error("Erreur lors de la suppression du bloc.");
          }
        });
      }
	});
  }
  
  document.querySelectorAll('.delete-bloc-btn').forEach(t => {
	  addDeleteBloc(t);
  });
  
  function addDeletePage(button) {
	button.addEventListener('click', function () {
      const pageId = button.dataset.id;

      if (confirm("Voulez-vous vraiment supprimer cette page ?")) {
        const params = new URLSearchParams();
        params.append("pageId", pageId);

        fetch("/Projet/SupprimerPage", {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          body: params
        }).then(response => {
          if (response.ok) {
        	  location.reload();
          } else {
            console.error("Erreur lors de la suppression du bloc.");
          }
        });
      }
	});
  }
  
  document.querySelectorAll('.delete-page-btn').forEach(t => {
	  addDeletePage(t);
  });
  
  // Pour le Tchat 
  const socketTchat = new WebSocket("ws://" + window.location.host + "/Projet/ws/tchat");

  socketTchat.onmessage = function(event) {
  const container = document.querySelector(".messages-container");
  const p = document.createElement("p");
  p.textContent = event.data;
  container.appendChild(p);
  container.scrollTop = container.scrollHeight;
  };
  
  const input = document.querySelector("input[name='contenu']");
  if (input) {
	  document.querySelector("input[name='contenu']").addEventListener("keydown", function(event) {
		const login = document.getElementById("user-login").textContent;
		if (event.key === "Enter") {
			const message = this.value;
			if (message.trim() !== "") {
	  			socketTchat.send(login + " : " + message);
	  			this.value = "";
	  		}
	  	}
	  });
  }

  
 
  // Pour le travail collaboratif sur les blocs
  const params = new URLSearchParams(window.location.search);
  const id = params.get("id");
  const pageId = parseInt(id);
  const socketBloc = new WebSocket("ws://" + window.location.host + "/Projet/ws/bloc?pageId=" + pageId);

  socketBloc.onmessage = (event) => {
    const data = JSON.parse(event.data);
    if (data.action === "update") {
      const blocElement = document.querySelector(`.editor[data-id='${data.blocId}']`);
      if (blocElement) {
        blocElement.textContent = data.content;
		blocElement.setAttribute('metadata', data.metadata);
      }
    }
  };

  document.querySelectorAll('.editor').forEach((bloc) => {
    bloc.addEventListener('input', (event) => {
      const blocId = event.target.getAttribute('data-id');
      const content = event.target.textContent;  // Récupère le contenu modifié du bloc
	  const type = event.target.getAttribute('data-type');
	  const metadata = event.target.getAttribute('metadata'); // Récupère le metadata du bloc

      const modif = {
        action: "update",
        blocId: blocId,
        content: content,
		metadata: metadata,
		type: type
      };

      socketBloc.send(JSON.stringify(modif));  // Envoi de la modification via le WebSocket
    });
  });
	
  document.querySelectorAll('.editor').forEach(function(element) {
	let content = element.innerHTML;
	content = content.replace(/\n/g, '<br />');
	content = content.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>');
	content = content.replace(/\*(.*?)\*/g, '<i>$1</i>');
	element.innerHTML = content;
  });
  
  
  
  
  // pour modifier le rendu des blocs
  function getBlocMetadata(bloc) {
    try {
      return JSON.parse(bloc.dataset.metadata || "{}");
    } catch (e) {
      return {};
    }
  }

  function setBlocMetadata(bloc, newMetadata) {
    bloc.dataset.metadata = JSON.stringify(newMetadata);
  }

  function applyBlocType(bloc, type, extra = {}) {
    bloc.dataset.type = type;
    
    let metadata = {};

    switch (type) {
      case "TEXTE":
        metadata = {};
        break;
      case "TITRE":
        metadata = { level: extra.level || 1 };
        break;
      case "LISTE":
        metadata = { style: extra.style || "bullet" };
        break;
      case "CODE":
        metadata = { language: extra.language || "plaintext", theme: "light" };
        break;
      case "PAGE":
        metadata = {
          pageId: extra.pageId || "nouvelle-page-id",
          title: extra.title || "Nouvelle page"
        };
        break;
      default:
        console.warn("Type de bloc inconnu :", type);
    }

    setBlocMetadata(bloc, metadata);
    renderBlocStyle(bloc);
  }

  function renderBlocStyle(bloc) {
    if (!bloc || !bloc.dataset) return;

    // Nettoyage des anciennes classes
    bloc.classList.remove('is-title', 'is-title-1', 'is-title-2', 'is-title-3');
    bloc.classList.remove('is-code-block', 'is-list', 'is-toggle');
    bloc.style.whiteSpace = "normal"; // reset si code

    const type = bloc.dataset.type || 'TEXTE';

    switch (type) {
      case 'TEXTE':
        bloc.classList.add('is-text');
        break;

      case 'TITRE':
        const level = bloc.dataset.level || '1';
        bloc.classList.add('is-title', `is-title-${level}`);
        break;

      case 'LISTE':
        bloc.classList.add('is-list');
        break;

      case 'CODE':
        bloc.classList.add('is-code-block');
        bloc.style.whiteSpace = "pre";
        bloc.dataset.language || 'plaintext';
        break;

      case 'PAGE':
        bloc.classList.add('is-page-block');
        break;

      case 'TOGGLE':
        bloc.classList.add('is-toggle');
        break;

      default:
        bloc.classList.add('is-text');
        break;
    }
  }


  function handleSlashCommand(bloc, texte) {
    const parts = texte.substring(1).split(" "); // Supprimer le "/" et diviser
    const command = parts[0].toLowerCase();
    const param = parts.slice(1).join(" "); // Récupère les paramètres (par exemple "js" pour /code js)

    switch (command) {
      case "page":
        createNewPage(param || "Nouvelle page");
		bloc.textContent = param || "Nouvelle page"; // On vide le bloc après transformation
		autoResize(bloc);
        break;

      case "h1":
      case "h2":
      case "h3":
        applyBlocType(bloc, "TITRE", { level: parseInt(command[1] || "1") });
        bloc.textContent = param; // On vide le bloc après transformation
		autoResize(bloc);
        break;

      case "ul":
        applyBlocType(bloc, "LISTE", { style: "bullet" });
        bloc.textContent = ''; // On vide le bloc après transformation
		autoResize(bloc);
        break;

      case "ol":
        applyBlocType(bloc, "LISTE", { style: "numbered" });
        bloc.textContent = ''; // On vide le bloc après transformation
		autoResize(bloc);
        break;

      case "code":
        applyBlocType(bloc, "CODE", { language: param || "plaintext" });
        bloc.textContent = ''; // On vide le bloc après transformation
		autoResize(bloc);
        break;

      default:
        console.log(`Commande non reconnue: ${command}`);
        break;
    }

    bloc.focus();
    placeCursorAtEnd(bloc);
  }
  
  function placeCursorAtEnd(element) {
    const range = document.createRange();
    const selection = window.getSelection(); 

    range.selectNodeContents(element); 
    range.collapse(false); 

    selection.removeAllRanges(); 
    selection.addRange(range); 
    
    element.scrollIntoView({ behavior: "smooth", block: "end" });
  }

  function createNewPage(titre) {
    const params = new URLSearchParams();
    params.append("titre", titre);

    fetch("/Projet/NouvellePage", {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      body: params.toString()
    })
    .then(response => response.json())
    .then(data => {
      if (data && data.pageId) {
        // Rediriger vers la nouvelle page par exemple
        window.location.href = "/Projet/Page?id=" + data.pageId;
      } else {
        console.error("Erreur lors de la création de la page.");
      }
    })
    .catch(err => {
      console.error("Erreur réseau :", err);
    });
  }

	