document.addEventListener("DOMContentLoaded", () => {
  const messageForm = document.getElementById("messageForm");
  const pseudoInput = document.getElementById("pseudo");
  const messageInput = document.getElementById("message");
  const messagesDiv = document.getElementById("messages");

  // Fonction pour ajouter un message
  function addMessage(pseudo, message) {
    const messageDiv = document.createElement("div");
    messageDiv.classList.add("message");
    messageDiv.innerHTML = `<strong>${pseudo} :</strong> <p>${message}</p>`;
    messagesDiv.appendChild(messageDiv);
    messagesDiv.scrollTop = messagesDiv.scrollHeight; // Auto-scroll
  }

  // Fonction pour saluer avec un message de bienvenue
  function greetUser() {
    addMessage("Bot", "Bienvenue sur le Chatroom ! Rappelez-vous, soyez respectueux, et amusez-vous !");
  }

  // Au chargement de la page, on salue l'utilisateur
  greetUser();

  // Gestion de l'envoi de message
  messageForm.addEventListener("submit", (e) => {
    e.preventDefault();
    const pseudo = pseudoInput.value.trim();
    const message = messageInput.value.trim();

    if (pseudo && message) {
      addMessage(pseudo, message);
      messageInput.value = ""; // Effacer le champ message
    }
  });
});