document.addEventListener("DOMContentLoaded", function () {
      const form = document.getElementById("guestbook-form");
      const entriesContainer = document.getElementById("guestbook-entries");
      const captchaCanvas = document.getElementById("captcha-canvas");
      const refreshCaptchaButton = document.getElementById("refresh-captcha");
      const captchaInput = document.getElementById("captcha-input");
      const GUESTBOOK_KEY = "guestbookEntries";

      let currentCaptcha = "";

      function generateCaptcha() {
        const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        let captcha = "";
        for (let i = 0; i < 6; i++) captcha += chars.charAt(Math.floor(Math.random() * chars.length));
        return captcha;
      }

      function drawCaptcha(captcha) {
        const ctx = captchaCanvas.getContext("2d");
        ctx.clearRect(0, 0, captchaCanvas.width, captchaCanvas.height);
        ctx.font = "22px Arial";
        ctx.fillStyle = "#000";
        ctx.fillText(captcha, 10, 32);
      }

      function refreshCaptcha() {
        currentCaptcha = generateCaptcha();
        drawCaptcha(currentCaptcha);
      }

      function formatMessage(message) {
        return message
          .split("\n")
          .map((line) => {
            if (line.startsWith(">")) return `<span class="anonymous">${line}</span>`;
            return line;
          })
          .join("<br>");
      }

      function loadEntries() {
        const entries = JSON.parse(localStorage.getItem(GUESTBOOK_KEY)) || [];
        entriesContainer.innerHTML = "";

        entries
          .slice()
          .reverse()
          .forEach((entry) => {
            const entryElement = document.createElement("div");
            entryElement.className = "entry";

            const nameElement = document.createElement("h4");
            if (entry.name === "Anonymous") nameElement.className = "anonymous";
            nameElement.textContent = entry.name;
            entryElement.appendChild(nameElement);

            const messageElement = document.createElement("p");
            messageElement.innerHTML = formatMessage(entry.message);
            entryElement.appendChild(messageElement);

            entriesContainer.appendChild(entryElement);
          });
      }

      form.addEventListener("submit", function (event) {
        event.preventDefault();

        let name = document.getElementById("name").value.trim();
        if (!name) name = "Anonymous";

        const message = document.getElementById("message").value.trim();
        const captchaValue = captchaInput.value.trim();

        if (name && message && captchaValue === currentCaptcha) {
          const entries = JSON.parse(localStorage.getItem(GUESTBOOK_KEY)) || [];
          entries.push({ name, message });
          localStorage.setItem(GUESTBOOK_KEY, JSON.stringify(entries));

          form.reset();
          document.getElementById("name").value = "Anonymous";
          loadEntries();
          refreshCaptcha();
        } else {
          alert("CAPTCHA is incorrect. Please try again.");
        }
      });

      refreshCaptcha();
      refreshCaptchaButton.addEventListener("click", refreshCaptcha);
      loadEntries();
    });