; (($) => {
    $(document).ready(() => {
        // Import CKEditor 5 (Assuming it's available via a CDN or a script tag)
        //  For example: <script src="https://cdn.ckeditor.com/ckeditor5/38.0.1/decoupled-document/ckeditor.js"></script>

        if (typeof DecoupledEditor === "undefined") {
            console.error("CKEditor 5 is not loaded. Make sure you have included the script in your HTML.")
            return
        }

        DecoupledEditor.create(document.querySelector("#editor-container"), {
            toolbar: ["heading", "|", "bold", "italic", "link", "bulletedList", "numberedList", "blockQuote"],
            // Note: The plugins below are included in the DecoupledEditor build.
            // If you need additional plugins, you'll need to create a custom build.
        })
            .then((editor) => {
                const toolbarContainer = document.querySelector("#toolbar-container")
                toolbarContainer.appendChild(editor.ui.view.toolbar.element)

                // Basic comment functionality
                const commentsContainer = document.querySelector("#comments-container")

                editor.model.document.on("change:data", () => {
                    const selection = editor.model.document.selection
                    if (!selection.isCollapsed) {
                        const selectedText = Array.from(selection.getSelectedBlocks())
                            .map((block) => block.getText())
                            .join("\n")

                        if (selectedText.trim() !== "") {
                            addComment(selectedText)
                        }
                    }
                })

                function addComment(selectedText) {
                    const commentElement = document.createElement("div")
                    commentElement.classList.add("comment")
                    commentElement.innerHTML = `
                          <p><strong>User</strong></p>
                          <p>Comment on: "${selectedText}"</p>
                          <textarea class="comment-text" placeholder="Add your comment here"></textarea>
                          <button class="save-comment">Save Comment</button>
                      `
                    commentsContainer.appendChild(commentElement)

                    const saveButton = commentElement.querySelector(".save-comment")
                    saveButton.addEventListener("click", () => {
                        const commentText = commentElement.querySelector(".comment-text").value
                        if (commentText.trim() !== "") {
                            const commentContent = document.createElement("p")
                            commentContent.textContent = commentText
                            commentElement.appendChild(commentContent)
                            commentElement.removeChild(commentElement.querySelector("textarea"))
                            commentElement.removeChild(saveButton)
                        }
                    })
                }

                // Note: Track changes is not available in the standard builds.
                // You would need to create a custom build to include this functionality.
                console.log("Editor initialized successfully")
            })
            .catch((error) => {
                console.error("There was a problem initializing the editor.", error)
            })
    })
})(jQuery)

