<script>
document.addEventListener("DOMContentLoaded", function () {

    const bbs = document.getElementById("bbs-text");

    if (!bbs) return;


    /* 元の本文を保存 */
    const originalText = bbs.textContent;


    /*
     * IDをクリック可能な文字に変換
     *
     * 例：
     * ID：CaTBHDEOdz
     */
    const escapedText = originalText
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;");


    bbs.innerHTML = escapedText.replace(
        /(ID：)([A-Za-z0-9]+)/g,
        '$1<span class="bbs-id" data-id="$2" style="color: #6d5b8c; cursor: pointer;">$2</span>'
    );


    /*
     * IDクリック
     */
    bbs.querySelectorAll(".bbs-id").forEach(function (idElement) {

        idElement.addEventListener("click", function () {

            const selectedID = this.dataset.id;

            showIDPosts(selectedID);

        });

    });


    /*
     * 同じIDのレスを探す
     */
    function showIDPosts(selectedID) {

        const posts = originalText.split(
            /(?=\d+：名無しの旅人)/
        );

        const matchedPosts = posts.filter(function (post) {

            return post.includes(
                "ID：" + selectedID
            );

        });


        createPopup(
            selectedID,
            matchedPosts
        );

    }


    /*
     * ポップアップ作成
     */
    function createPopup(id, posts) {

        /* 既存ポップアップ削除 */
        const oldPopup =
            document.querySelector(".id-popup-overlay");

        if (oldPopup) {
            oldPopup.remove();
        }


        /*
         * 背景
         */
        const overlay =
            document.createElement("div");

        overlay.style.cssText = `
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            padding: 20px;
        `;


        /*
         * ポップアップ本体
         */
        const popup =
            document.createElement("div");

        popup.style.cssText = `
            width: 100%;
            max-width: 500px;
            max-height: 70vh;
            background: #ffffff;
            border: 1px solid #cccccc;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        `;


        /*
         * ヘッダー
         */
        const header =
            document.createElement("div");

        header.style.cssText = `
            padding: 12px 15px;
            border-bottom: 1px solid #dddddd;
            font-size: 14px;
            font-weight: bold;
            color: #6d5b8c;
        `;

        header.textContent = "ID：" + id;


        /*
         * 閉じるボタン
         */
        const close =
            document.createElement("button");

        close.textContent = "×";

        close.style.cssText = `
            float: right;
            border: none;
            background: transparent;
            font-size: 20px;
            cursor: pointer;
            color: #555555;
            line-height: 1;
        `;


        close.addEventListener(
            "click",
            function () {
                overlay.remove();
            }
        );


        header.appendChild(close);


        /*
         * 投稿一覧
         */
        const content =
            document.createElement("div");

        content.style.cssText = `
            padding: 15px;
            overflow-y: auto;
            max-height: calc(70vh - 50px);
            font-size: 13px;
            line-height: 1.8;
            white-space: pre-wrap;
        `;


        posts.forEach(function (post, index) {

            const postElement =
                document.createElement("div");

            postElement.textContent =
                post.trim();

            postElement.style.cssText = `
                padding-bottom: 15px;
                margin-bottom: 15px;
                border-bottom: ${
                    index < posts.length - 1
                        ? "1px solid #eeeeee"
                        : "none"
                };
            `;

            content.appendChild(postElement);

        });


        popup.appendChild(header);

        popup.appendChild(content);

        overlay.appendChild(popup);

        document.body.appendChild(overlay);


        /*
         * 背景クリックで閉じる
         */
        overlay.addEventListener(
            "click",
            function (event) {

                if (
                    event.target === overlay
                ) {
                    overlay.remove();
                }

            }
        );

    }

});
</script>