document.addEventListener("DOMContentLoaded", function () {
    const form = document.getElementById("comment-form");
    const commentsList = document.getElementById("comments-list");
    const commentContent = document.getElementById("comment-content");

    if (!form || !commentsList || !commentContent) {
        return;
    }

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

        const formData = new FormData(form);

        fetch("php/ajax/add-comment.php", {
            method: "POST",
            body: formData
        })
            .then(response => response.json())
            .then(data => {
                if (!data.success) {
                    alert(data.message);
                    return;
                }

                const emptyMessage = commentsList.querySelector(".no-comments-message");
                if (emptyMessage) {
                    emptyMessage.remove();
                }

                const commentElement = document.createElement("div");
                commentElement.classList.add("comment-item");

                commentElement.innerHTML = `
                    <p>
                        <strong>${escapeHtml(data.author)}</strong>
                        <span>${escapeHtml(data.created)}</span>
                    </p>
                    <p>${escapeHtml(data.content).replace(/\n/g, "<br>")}</p>
                `;

                commentsList.prepend(commentElement);
                commentContent.value = "";
            })
            .catch(() => {
                alert("Kommentar konnte nicht gesendet werden.");
            });
    });

    function escapeHtml(text) {
        const div = document.createElement("div");
        div.textContent = text;
        return div.innerHTML;
    }
});