{% load static %}
<section id="comment_root"
         class="w-full bg-white rounded-lg shadow-md border border-gray-300 p-6">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold text-gray-900">Comments ({{ all_comment | length }})</h2>
    </div>
    {% if user.is_authenticated %}
        <form class="mb-8" id="comments">
            {% csrf_token %}
            <div class="bg-gray-50 rounded-lg border border-gray-200 p-4">
                <label for="comment" class="sr-only">Your comment</label>
                <input type="text" id="replying_to_input" hidden>
                <input type="hidden"
                       id="content_type"
                       name="content_type"
                       value="{{ content_type }}">
                <div id="replying_to_root" class="mb-2"></div>
                <div id="add_update_label" class="mb-2"></div>
                <textarea id="comment"
                          rows="4"
                          name="comment"
                          class="w-full p-3 text-gray-900 bg-white border border-gray-200 rounded-lg focus:ring-2 focus:ring-red-200 focus:border-red-500 transition-all"
                          placeholder="Write a comment..."
                          required></textarea>
            </div>
            <div class="mt-4">
                <button type="button"
                        id="post_comment_btn"
                        class="px-5 py-2.5 text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm transition-all">
                    Post comment
                </button>
            </div>
        </form>
    {% else %}
        <div class="p-6 mb-6 bg-gray-50 rounded-lg border border-gray-200 text-center">
            <p class="text-lg text-gray-700">
                To comment, please <a href="#" class="text-red-600 hover:underline font-medium">sign in</a>.
            </p>
        </div>
    {% endif %}
    <div class="comment_group space-y-6">
        {% for comment in all_comment %}
            {% if comment.parent is None %}
                <article class="p-6 bg-gray-50 rounded-lg border border-gray-200">
                    <div class="flex justify-between items-start mb-4">
                        <div class="flex items-center space-x-3">
                            {% if comment.author_fk.user_avatar %}
                                <img class="w-10 h-10 rounded-full object-cover"
                                     src="{{ MEDIA_URL }}{{ comment.author_fk.user_avatar }}"
                                     alt="{{ comment.author }} profile"
                                     width="40"
                                     height="40">
                            {% else %}
                                <img class="w-10 h-10 rounded-full object-cover"
                                     src="{% static 'images/dummy-user.png' %}"
                                     alt="User profile"
                                     width="40"
                                     height="40">
                            {% endif %}
                            <div>
                                <p class="text-lg font-medium text-gray-900">{{ comment.author }}</p>
                                <p class="text-sm text-gray-500">
                                    <time datetime="2022-02-08">{{ comment.created_date | timesince }} ago</time>
                                </p>
                            </div>
                        </div>
                        {% if user.username == comment.author %}
                            <div class="relative">
                                <button id="dropdownComment1Button"
                                        data-dropdown-toggle="dropdownComment{{ comment.id }}"
                                        class="p-1.5 text-gray-500 rounded-lg hover:bg-gray-100">
                                    <svg class="w-5 h-5"
                                         fill="currentColor"
                                         viewBox="0 0 20 20"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z"></path>
                                    </svg>
                                </button>
                                <div id="dropdownComment{{ comment.id }}"
                                     class="hidden z-10 w-36 bg-white rounded-lg shadow-lg border border-gray-200">
                                    <ul class="py-1 text-sm text-gray-700">
                                        <li>
                                            <a class="block px-4 py-2 hover:bg-gray-100 edit_comment cursor-pointer"
                                               data-name="{{ comment.id }}">Edit</a>
                                        </li>
                                        <li>
                                            <a class="block px-4 py-2 hover:bg-gray-100 del_comment cursor-pointer"
                                               data-name="{{ comment.id }}">Delete</a>
                                        </li>
                                        <li>
                                            <a href="#" class="block px-4 py-2 hover:bg-gray-100">Report</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                    <p class="text-gray-800 mb-4 main_text">{{ comment.text | safe }}</p>
                    <div class="flex items-center space-x-4">
                        <button type="button"
                                onclick="add_reply('{{ comment.id }}','{{ comment.author }}')"
                                class="flex items-center text-sm text-gray-500 hover:text-red-600">
                            <svg class="mr-1.5 w-4 h-4"
                                 fill="none"
                                 stroke="currentColor"
                                 viewBox="0 0 24 24"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6">
                                </path>
                            </svg>
                            Reply
                        </button>
                        <button type="button"
                                onclick="see_replies('{{ comment.id }}')"
                                class="flex items-center text-sm text-gray-500 hover:text-red-600">
                            <svg class="mr-1.5 w-4 h-4"
                                 fill="none"
                                 stroke="currentColor"
                                 viewBox="0 0 24 24"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z">
                                </path>
                            </svg>
                            {{ comment.children | length }} Replies
                        </button>
                    </div>
                </article>
                <div class="w-full pl-6 md:pl-12"
                     id="comment_replies_{{ comment.id }}"
                     hidden>
                    {% for child_comment in comment.children %}
                        <article class="p-6 bg-white rounded-lg border border-gray-100 mb-4">
                            <div class="flex justify-between items-start mb-4">
                                <div class="flex items-center space-x-3">
                                    <img class="w-8 h-8 rounded-full object-cover"
                                         {% if user.userprofile.user_avatar %} src="{{ MEDIA_URL }}{{ user.userprofile.user_avatar }}" {% else %} src="{% static 'images/dummy-user.png' %}" {% endif %}
                                         alt="{{ child_comment.author }} profile"
                                         width="32"
                                         height="32">
                                    <div>
                                        <p class="text-base font-medium text-gray-900">{{ child_comment.author }}</p>
                                        <p class="text-xs text-gray-500">
                                            <time datetime="2022-02-08">{{ child_comment.created_date | timesince }} ago</time>
                                        </p>
                                    </div>
                                </div>
                                {% if user.username == child_comment.author %}
                                    <div class="relative">
                                        <button id="dropdownComment{{ child_comment.id }}_button"
                                                data-dropdown-toggle="dropdownComment{{ child_comment.id }}"
                                                class="p-1.5 text-gray-500 rounded-lg hover:bg-gray-100">
                                            <svg class="w-5 h-5"
                                                 fill="currentColor"
                                                 viewBox="0 0 20 20"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z"></path>
                                            </svg>
                                        </button>
                                        <div id="dropdownComment{{ child_comment.id }}"
                                             class="hidden z-10 w-36 bg-white rounded-lg shadow-lg border border-gray-200">
                                            <ul class="py-1 text-sm text-gray-700">
                                                <li>
                                                    <a class="block px-4 py-2 hover:bg-gray-100 edit_comment cursor-pointer"
                                                       data-name="{{ child_comment.id }}">Edit</a>
                                                </li>
                                                <li>
                                                    <a class="block px-4 py-2 hover:bg-gray-100 del_comment cursor-pointer"
                                                       data-name="{{ child_comment.id }}">Delete</a>
                                                </li>
                                                <li>
                                                    <a href="#" class="block px-4 py-2 hover:bg-gray-100">Report</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                            <p class="text-gray-800 text-sm main_text">{{ child_comment.text | safe }}</p>
                        </article>
                    {% endfor %}
                </div>
            {% endif %}
        {% empty %}
            <div class="p-6 bg-gray-50 rounded-lg border border-gray-200 text-center">
                <p class="text-gray-500">No comments yet. Be the first to share your thoughts!</p>
            </div>
        {% endfor %}
    </div>
    <script>
        function initDropDown(){
            document.querySelectorAll("[data-dropdown-toggle]").forEach((toggle) => {
                toggle.addEventListener("click", (e) => {
                    e.stopPropagation();
                    const { dropdownToggle } = toggle.dataset;
                    const dropdown = document.getElementById(dropdownToggle);
                    
                    // Close all other dropdowns first
                    document.querySelectorAll('[id^="dropdownComment"]').forEach(menu => {
                        if (menu.id !== dropdownToggle && !menu.classList.contains('hidden')) {
                            menu.classList.add('hidden');
                        }
                    });
                    
                    dropdown.classList.toggle("hidden");
                    
                    if (!dropdown.classList.contains("hidden")) {
                        const rect = toggle.getBoundingClientRect();
                        dropdown.style.position = "absolute";
                        dropdown.style.top = (window.scrollY + rect.bottom) + "px";
                        dropdown.style.left = (rect.left - 100) + "px";
                    }
                });
            });
            
            // Close dropdowns when clicking outside
            document.addEventListener('click', () => {
                document.querySelectorAll('[id^="dropdownComment"]').forEach(menu => {
                    if (!menu.classList.contains('hidden')) {
                        menu.classList.add('hidden');
                    }
                });
            });
        }

        function remove_reply(){
            document.getElementById("replying_to_cont").remove();
            document.getElementById("replying_to_input").value = "";
        }

        function add_reply(comment_id, comment_author){
            let replying_to_root = document.getElementById("replying_to_root");          
            let reply_text = "@" + comment_author + "#" + comment_id;

            replying_to_root.innerHTML = `
                <div id="replying_to_cont" class="flex items-center bg-gray-100 rounded-md p-2 max-w-max">
                    <p id="replying_to" class="text-sm text-gray-700">Replying to <span class="font-medium">${comment_author}</span></p>
                    <button onclick="remove_reply()" class="ml-2 text-gray-500 hover:text-red-600">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                        </svg>
                    </button>
                </div>
            `;
            document.getElementById("replying_to_input").value = reply_text;
            
            // Focus on the comment textarea
            document.getElementById("comment").focus();
        }

        function see_replies(comment_id){
            let id = "comment_replies_" + comment_id;
            let comment_container = document.getElementById(id);
            comment_container.toggleAttribute('hidden');
        }

        function comment_on_content(e){
            e.preventDefault();
            let content_pk = '{{ object.pk|safe }}';
            let content_type = '{{ content_type }}';
            var csrftoken = $("[name=csrfmiddlewaretoken]").val();

            let replying_to_input = document.getElementById("replying_to_input").value;
            let comment = document.getElementById("comment").value;
            if(comment == ""){
                return;
            }
            
            // Show loading state
            const btn = document.getElementById('post_comment_btn');
            const originalText = btn.textContent;
            btn.disabled = true;
            btn.innerHTML = `
                <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                Posting...
            `;
            
            $.ajax({
                type: 'POST',
                url: '/content/' + content_pk + '/comment/',
                data: {
                    "replying_to_input": replying_to_input,
                    "comment": comment,
                    "content_type": content_type
                },
                beforeSend: function(xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                },
                success: function (data) {
                    $('#comment_root').replaceWith(data);
                    location.reload();
                },
                error: function() {
                    // Restore button state on error
                    btn.disabled = false;
                    btn.textContent = originalText;
                }
            });
        }
        
        $('#post_comment_btn').click((e) => comment_on_content(e));
        
        function update_comment(e, comment_id){
            e.preventDefault();
            let content_pk = '{{ object.pk|safe }}';
            let content_type = '{{ content_type }}';
            var csrftoken = $("[name=csrfmiddlewaretoken]").val();

            let comment = document.getElementById("comment").value;
            if(comment == ""){
                return;
            }
            
            // Show loading state
            const btn = document.getElementById('update_comment_btn');
            const originalText = btn.textContent;
            btn.disabled = true;
            btn.innerHTML = `
                <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                Updating...
            `;
            
            $.ajax({
                type: 'POST',
                url: '/content/' + content_pk + '/comment/update/' + comment_id + '/',
                data: {
                    "comment": comment,
                    "content_type": content_type
                },
                beforeSend: function(xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                },
                success: function (data) {
                    $('#comment_root').replaceWith(data);
                    location.reload();
                },
                error: function() {
                    // Restore button state on error
                    btn.disabled = false;
                    btn.textContent = originalText;
                }
            });
        }
        
        function remove_update_label(){
            let add_update_label = document.getElementById("add_update_label");
            add_update_label.innerHTML = "";
            $('#comment').val("");
            $('#update_comment_btn').text('Post comment');
            $('#update_comment_btn').attr('id', 'post_comment_btn');
            $('#update_comment_btn').off('click');
            $('#post_comment_btn').off('click').on('click', (e) => comment_on_content(e));
        }
        
        $('body').on('click', '.edit_comment', function (e) {
            e.preventDefault();
            let comment_id = $(this).data('name');
            let comment_text = $(this).closest('article').find('.main_text').text();
            $('#post_comment_btn').off('click');
            $('#comment').val(comment_text);
            $('#post_comment_btn').text('Update comment');
            $('#post_comment_btn').attr('id', 'update_comment_btn');
            
            let add_update_label = document.getElementById("add_update_label");
            add_update_label.innerHTML = `
                <div class="flex items-center bg-blue-50 text-blue-800 rounded-md p-2 max-w-max">
                    <p class="text-sm">Editing comment</p>
                    <button onclick="remove_update_label()" class="ml-2 text-blue-500 hover:text-blue-700">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                        </svg>
                    </button>
                </div>
            `;
            
            $('#update_comment_btn').off('click').on('click', (e) => update_comment(e, comment_id));
            
            // Scroll to comment form
            document.getElementById('comments').scrollIntoView({ behavior: 'smooth' });
        });
        
        $('body').off('click', '.del_comment').on('click', '.del_comment', function (e) {
            e.preventDefault();

            var clickedElement = $(this);
            
            // Create a confirmation dialog
            const confirmDialog = document.createElement('div');
            confirmDialog.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
            confirmDialog.innerHTML = `
                <div class="bg-white rounded-lg p-6 max-w-sm mx-auto">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Delete Comment</h3>
                    <p class="text-gray-500 mb-6">Are you sure you want to delete this comment? This action cannot be undone.</p>
                    <div class="flex justify-end space-x-4">
                        <button id="cancel-delete" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-lg">Cancel</button>
                        <button id="confirm-delete" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg">Delete</button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(confirmDialog);
            document.body.style.overflow = 'hidden';
            
            // Handle cancel
            document.getElementById('cancel-delete').addEventListener('click', function() {
                document.body.removeChild(confirmDialog);
                document.body.style.overflow = '';
            });
            
            // Handle confirm
            document.getElementById('confirm-delete').addEventListener('click', function() {
                var csrftoken = $("[name=csrfmiddlewaretoken]").val();
                
                // Show loading state
                this.disabled = true;
                this.innerHTML = `
                    <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    Deleting...
                `;

                $.ajax({
                    type: 'POST',
                    url: "/content/comment/delete/",
                    data: {
                        "comment_pk": clickedElement.attr('data-name'),
                        "content_pk": '{{ object.pk|safe }}',
                        "content_type": '{{ content_type }}'
                    },
                    beforeSend: function (xhr, settings) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    },
                    success: function (data) {
                        $('#comment_root').replaceWith(data);
                        location.reload();
                    },
                    error: function() {
                        document.body.removeChild(confirmDialog);
                        document.body.style.overflow = '';
                    }
                });
            });
        });

        $(document).ready(function(){
            initDropDown();
        });
    </script>
</section>