window.addEventListener("load", function () {

    /* -------------------------  ------------------------- */
    var commentInputBox = document.getElementById("commentInputBox");
	var commentForm = document.getElementById("commentForm");
	var textarea = document.getElementById("content");          
	var contentDisplay = document.getElementById("contentDisplay"); 
    var usernameInput = document.getElementById("username");
    var parentInput = document.getElementById("parent_id");
    var replyInfo = document.getElementById("replyInfo");
    var replyUserSpan = document.getElementById("replyUser");
    var cancelReplyLink = document.getElementById("cancelReplyLink");
    var sendBtn = document.getElementById("sendBtn");
    var cancelFormBtn = document.getElementById("cancelFormBtn");
    var sendSuccessBox = document.getElementById("sendSuccess");
    var commentsBox = document.getElementById("comments");
    var loadMoreBtn = document.getElementById("loadMore");
    var likeArea = document.getElementById("likeArea");

    /* -------------------------  ------------------------- */
    function ajax(url, method, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                callback(JSON.parse(xhr.responseText));
            }
        };
        xhr.send();
    }

    /* ------------------------- 保存 ------------------------- */
    if (usernameInput) {
        var saved = localStorage.getItem("comment_username");
        if (saved) usernameInput.value = saved;
    }

    /* -------------------------  ------------------------- */
    fetch(API + "/tj?id=" + PAGE_ID, {
        method: "POST",
        headers: {"Content-Type": "application/x-www-form-urlencoded"},
        body:
            "screen=" + encodeURIComponent(window.screen.width + "x" + window.screen.height) +
            "&ref=" + encodeURIComponent(document.referrer) +
            "&url=" + encodeURIComponent(location.href) +
            "&title=" + encodeURIComponent(document.title)
    });

    /* ------------------------- 输入框展开 ------------------------- */
    if (commentInputBox && commentForm && contentDisplay) {
    commentInputBox.onclick = function () {
        commentInputBox.style.display = "none";
        commentForm.style.display = "block";
        contentDisplay.focus();   
    };
}


    /* ------------------------- 自动高度 ------------------------- */
    if (contentDisplay) {
    contentDisplay.addEventListener("input", function () {
        this.style.height = "auto";
        this.style.height = this.scrollHeight + "px";
    });
}


    
    /* ------------------------- 表情 ------------------------- */
if (contentDisplay && textarea) {
    var emojis = document.querySelectorAll("#emojiBox img");
    for (var i = 0; i < emojis.length; i++) {
        emojis[i].onclick = function () {
            var code = this.getAttribute("data-code"); 
            var num = code.replace("emoji_", "");

            
            contentDisplay.innerHTML += '<img src="/em/' + num + '.png" class="emoji">';

            
            textarea.value += "[" + code + "]";
        };
    }
}

/* ------------------------- 粘贴文本 ------------------------- */
if (contentDisplay) {
    contentDisplay.addEventListener("paste", function (e) {
        e.preventDefault();

        var text = (e.clipboardData || window.clipboardData).getData("text");

        
        document.execCommand("insertText", false, text);
    });
}



/* -------------------------  ------------------------- */
if (contentDisplay && textarea) {
    contentDisplay.addEventListener("input", function () {
        var clone = contentDisplay.cloneNode(true);

        
        var imgs = clone.querySelectorAll("img.emoji");
        for (var i = 0; i < imgs.length; i++) {
            var src = imgs[i].getAttribute("src");
            var num = src.match(/\/(\d+)\.png$/)[1];
            var text = document.createTextNode("[emoji_" + num + "]");
            imgs[i].parentNode.replaceChild(text, imgs[i]);
        }

        
        var pureText = clone.textContent || clone.innerText;

        
        textarea.value = pureText;
    });
}




   /* ------------------------- 点赞 ------------------------- */
var likeOriginalHTML = likeArea ? likeArea.innerHTML : '';
var likeProcessing = false; /* 防重复点击 */

function restoreLikeBtn(count) {
    var area = document.getElementById('likeArea');
    if (!area) return;
    area.innerHTML = likeOriginalHTML;
    var span = document.getElementById('likeCount');
    if (span) span.innerText = count;
    area.classList.add('liked'); /* 点击当次变红，刷新后自然消失 */
}

function loadLikeCount() {
    ajax(API + '/getlike?id=' + PAGE_ID, 'GET', function (d) {
        var span = document.getElementById('likeCount');
        if (span) span.innerText = d.count;
    });
}
loadLikeCount();

if (likeArea) {
    likeArea.onclick = function () {
        if (likeProcessing) return; /* 防连续点击 */
        likeProcessing = true;

        ajax(API + '/like?id=' + PAGE_ID, 'POST', function (d) {
            likeProcessing = false;
            var area = document.getElementById('likeArea');
            var count = d.count;

            if (d.status === 'liked') {
                /* 后台判断此 IP 已赞过：只弹提示，不变红，不动数字 */
                var tip = document.createElement('span');
                tip.className = 'like-plus';
                tip.innerText = '已赞过';
                tip.style.cssText = 'left:50%;top:0;transform:translateX(-50%);white-space:nowrap;';
                area.appendChild(tip);
                setTimeout(function () {
                    if (tip.parentNode) tip.parentNode.removeChild(tip);
                }, 1200);
                return;
            }

            /* 正常点赞：+1 动画，1秒后恢复大拇指样式并变红 */
            var plus = document.createElement('span');
            plus.className = 'like-plus';
            plus.innerText = '+1';
            plus.style.cssText = 'left:50%;top:0;transform:translateX(-50%);';
            area.appendChild(plus);
            setTimeout(function () {
                if (plus.parentNode) plus.parentNode.removeChild(plus);
            }, 800);
            setTimeout(function () {
                restoreLikeBtn(count);
            }, 1000);
        });
    };
}

    /* ------------------------- 加载 ------------------------- */
    var allComments = [];
    var showCount = 5;

    function loadComments() {
        if (!commentsBox) return;

        fetch(API + "/comments?id=" + PAGE_ID)
            .then(function (r) { return r.json(); })
            .then(function (list) {
                allComments = list || [];  // 防止接口返回 null 导致报错
                renderComments();
            })
            .catch(function () {
                allComments = [];  // 请求异常时也兜底为空数组
                renderComments();
            });
    }

    /* ------------------------- 渲染 ------------------------- */
    function renderComments() {
        if (!commentsBox) return;
        if (!Array.isArray(allComments)) allComments = [];  // 兜底，确保是数组

        var map = {};
        for (var i = 0; i < allComments.length; i++) {
            allComments[i].children = [];
            map[allComments[i].id] = allComments[i];
        }

        var roots = [];
        for (var j = 0; j < allComments.length; j++) {
            var c = allComments[j];
            if (c.parent_id && map[c.parent_id]) {
                map[c.parent_id].children.push(c);
            } else {
                roots.push(c);
            }
        }

        var displayRoots = roots.slice(0, showCount);

        function renderTree(nodes) {
            var html = "";

            for (var k = 0; k < nodes.length; k++) {
                var c = nodes[k];

                
               var content = c.content;

for (var i = 1; i <= 20; i++) {
    var key = "[emoji_" + i + "]";
    var img = '<img src="/em/' + i + '.png" class="emoji">';
    content = content.split(key).join(img);
}



                html +=
    '<div class="comment-box">' +
        '<b>' + c.username + '</b>' +
(c.pinned ? '<span class="pinned">置顶</span>' : '') +
'<div style="margin:8px 0">' + content + '</div>' +
        '<div style="display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between;margin-top:8px">' +
            '<div style="display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center">' +
                '<span style="font-size:12px;color:#888">' + c.time + '</span>' +
                '<span class="reply-btn" data-id="' + c.id + '" data-user="' + c.username.replace(/"/g, '&quot;') + '">回复</span>' +
            '</div>' +
            '<div class="like-btn" data-id="' + c.id + '">' +
                '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>' +
                c.likes +
            '</div>' +
        '</div>' +
        (c.children.length ? '<div class="comment-children">' + renderTree(c.children) + '</div>' : '') +
    '</div>';
            }

            return html;
        }

        commentsBox.innerHTML = renderTree(displayRoots);

        
        if (loadMoreBtn) {
            loadMoreBtn.style.display = roots.length > showCount ? "block" : "none";
        }

        /* 点赞 */
        var likeBtns = commentsBox.querySelectorAll(".like-btn");
        for (var a = 0; a < likeBtns.length; a++) {
            likeBtns[a].onclick = function () {
                var id = this.getAttribute("data-id");
                var self = this;

                fetch(API + "/comment_like?id=" + id, { method: "POST" })
                    .then(function (r) { return r.json(); })
                    .then(function (d) {
                        self.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>' + d.count;
                    });
            };
        }

        /* 回复 */
        var replyBtns = commentsBox.querySelectorAll(".reply-btn");
        for (var b = 0; b < replyBtns.length; b++) {
            replyBtns[b].onclick = function () {
                var id = this.getAttribute("data-id");
                var user = this.getAttribute("data-user");
                setReply(id, user);
            };
        }
    }

    /* ------------------------- 展开 ------------------------- */
    if (loadMoreBtn) {
        loadMoreBtn.onclick = function () {
            showCount += 8; 
            renderComments();
        };
    }

    /* ------------------------- 回复 ------------------------- */
    function setReply(id, username) {
        parentInput.value = id;
        replyUserSpan.innerText = username;
        replyInfo.style.display = "block";

        if (commentInputBox) commentInputBox.style.display = "none";
        commentForm.style.display = "block";

        commentForm.scrollIntoView({ behavior: "smooth" });
        textarea.focus();
    }

    if (cancelReplyLink) {
        cancelReplyLink.onclick = function () {
            parentInput.value = 0;
            replyInfo.style.display = "none";
        };
    }

    /* ------------------------- 取消 ------------------------- */
    if (cancelFormBtn) {
        cancelFormBtn.onclick = function () {
            textarea.value = "";
            textarea.style.height = "80px";
            parentInput.value = 0;
            replyInfo.style.display = "none";
            commentForm.style.display = "none";

            if (commentInputBox) commentInputBox.style.display = "block";
        };
    }

    /* ------------------------- 发送 ------------------------- */
    if (sendBtn) {
        sendBtn.onclick = function () {
            var username = usernameInput.value.trim();
            var content = textarea.value.trim();
            var parent = parentInput.value;

            if (!content) return alert("留言内容不能为空");
            if (content.length > 200) return alert("内容不能超过 200 字");
            if (username.length > 15) return alert("用户名不能超过 15 个字");

            if (!username) {
                username = "佛弟子" + Math.floor(10000 + Math.random() * 90000);
                usernameInput.value = username;
            }

            localStorage.setItem("comment_username", username);

            fetch(API + "/pl?id=" + PAGE_ID, {
                method: "POST",
                headers: {"Content-Type": "application/x-www-form-urlencoded"},
                body:
                    "username=" + encodeURIComponent(username) +
                    "&content=" + encodeURIComponent(content) +
                    "&parent_id=" + parent
            })
                .then(function (r) { return r.text(); })
                .then(function (t) {
    if (t === "too_fast") return alert("您评论太快了，请稍后再试");
    if (t === "too_long") return alert("不能超过 200 字");

    // 清空
    contentDisplay.innerHTML = "";
    textarea.value = "";
    contentDisplay.style.height = "80px";

    parentInput.value = 0;
    replyInfo.style.display = "none";
    commentForm.style.display = "none";
    if (commentInputBox) commentInputBox.style.display = "block";

    if (sendSuccessBox) {
        sendSuccessBox.innerText = "发送成功，留言将在审核后显示";
        sendSuccessBox.style.opacity = 1;
        setTimeout(function () {
            sendSuccessBox.style.opacity = 0;
        }, 5000);
    }

    loadComments();
});

        };
    }

    /* ------------------------- 初始化 ------------------------- */
    loadComments();
});