{{template "layout.html" .}}

{{define "content"}}
<div class="user-list-page user-comments-page">
    <div class="card mb-3">
        <div class="card-body">
            <div class="user-page-head">
                <div class="user-page-head-main">
                    <h5>{{T "user_comments_title"}}</h5>
                    <p class="text-muted">{{T "user_comments_subtitle"}}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="filter-bar">
        <div class="btn-group btn-group-sm user-comments-tabs" role="group">
            <button type="button" class="btn btn-primary" data-tab="mine">{{T "user_comments_tab_mine"}}</button>
            <button type="button" class="btn btn-outline-secondary" data-tab="received">{{T "user_comments_tab_received"}}</button>
        </div>
    </div>

    <div class="card user-table-card">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="userCommentsTable">
                <thead>
                    <tr>
                        <th class="col-check"><input type="checkbox" id="userCommentsCheckAll" title="{{T "user_select_all"}}"></th>
                        <th>{{T "user_comments_col_document"}}</th>
                        <th>{{T "user_comments_col_content"}}</th>
                        <th>{{T "user_comments_col_status"}}</th>
                        <th>{{T "user_comments_col_time"}}</th>
                        <th width="60" class="text-center">{{T "user_col_actions"}}</th>
                    </tr>
                </thead>
                <tbody id="userCommentsList">
                    <tr><td colspan="6" class="text-center text-muted py-5">{{T "user_loading"}}</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="commentsBatchActionBar" class="user-batch-bar" style="display:none;">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
        <span class="small text-secondary"><span id="userCommentsSelectedCount">0</span> {{T "user_comments_selected_suffix"}}</span>
        <div class="d-flex gap-2 flex-wrap">
            <button type="button" class="btn btn-sm btn-outline-danger" id="btnUserCommentsBatchDelete"><i class='bx bx-trash'></i> {{T "user_batch_delete"}}</button>
            <button type="button" class="btn btn-sm btn-outline-secondary" id="btnUserCommentsClearSelection">{{T "user_clear_selection"}}</button>
        </div>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
window.UserCommentsI18n = {
    empty: {{json (T "user_comments_empty")}},
    loadError: {{json (T "user_comments_load_error")}},
    colDocument: {{json (T "user_comments_col_document")}},
    colContent: {{json (T "user_comments_col_content")}},
    colStatus: {{json (T "user_comments_col_status")}},
    colTime: {{json (T "user_comments_col_time")}},
    statusPending: {{json (T "user_comments_status_pending")}},
    statusApproved: {{json (T "user_comments_status_approved")}},
    statusHidden: {{json (T "user_comments_status_hidden")}},
    delete: {{json (T "user_btn_delete")}},
    deleted: {{json (T "user_comment_deleted")}},
    selectAll: {{json (T "user_select_all")}},
    batchDelete: {{json (T "user_batch_delete")}},
    deleteConfirm: {{json (T "user_comments_delete_confirm")}},
    batchDeleteConfirm: {{json (T "user_comments_batch_delete_confirm")}},
    confirmDeleteTitle: {{json (T "user_comments_confirm_delete_title")}},
    noSelection: {{json (T "user_comments_no_selection")}},
    selectedSuffix: {{json (T "user_comments_selected_suffix")}}
};

$(function() {
    var currentTab = 'mine';
    var i18n = window.UserCommentsI18n;

    function statusBadge(st) {
        if (Number(st) === 0) return '<span class="badge badge-audit-pending">' + i18n.statusPending + '</span>';
        if (Number(st) === 1) return '<span class="badge badge-audit-approved">' + i18n.statusApproved + '</span>';
        return '<span class="badge badge-audit-rejected">' + i18n.statusHidden + '</span>';
    }

    function escapeHtml(s) {
        return $('<div>').text(s == null ? '' : String(s)).html();
    }

    function updateBulkState() {
        var $rowChecks = $('.user-comment-row-check');
        var total = $rowChecks.length;
        var checked = $rowChecks.filter(':checked').length;
        $('#userCommentsSelectedCount').text(checked);
        $('#commentsBatchActionBar').toggle(checked > 0);
        var $selAll = $('#userCommentsCheckAll');
        if ($selAll.length) {
            $selAll.prop('checked', total > 0 && checked === total);
            $selAll.prop('indeterminate', checked > 0 && checked < total);
        }
    }

    function getSelectedCommentIDs() {
        return $('.user-comment-row-check:checked').map(function() {
            return parseInt($(this).val(), 10) || 0;
        }).get().filter(function(id) { return id > 0; });
    }

    function confirmDelete(message, callback) {
        if (typeof BootstrapModal !== 'undefined' && BootstrapModal.confirm) {
            BootstrapModal.confirm(message, { icon: 3, title: i18n.confirmDeleteTitle }, callback);
        } else if (confirm(message)) {
            callback();
        }
    }

    function deleteComment(id, onDone) {
        $.post('/user/comment_delete', { id: id }, function(res) {
            BootstrapModal.msg(res.message || i18n.deleted, { icon: res.success ? 1 : 2 });
            if (res.success && typeof onDone === 'function') onDone();
        }, 'json');
    }

    function batchDeleteComments(ids, onDone) {
        $.ajax({
            url: '/user/comment_batch_delete',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ ids: ids }),
            success: function(res) {
                BootstrapModal.msg(res.message || i18n.deleted, { icon: res.success ? 1 : 2 });
                if (res.success && typeof onDone === 'function') onDone();
            },
            error: function() {
                BootstrapModal.msg(i18n.loadError, { icon: 2 });
            }
        });
    }

    function loadComments() {
        $.getJSON('/user/comments-data?tab=' + encodeURIComponent(currentTab), function(res) {
            if (!res.success) {
                $('#userCommentsList').html('<tr><td colspan="6" class="text-center text-muted py-5">' + escapeHtml(i18n.loadError) + '</td></tr>');
                updateBulkState();
                return;
            }
            if (!res.data || !res.data.rows || !res.data.rows.length) {
                $('#userCommentsList').html('<tr><td colspan="6" class="text-center text-muted py-5">' + escapeHtml(i18n.empty) + '</td></tr>');
                updateBulkState();
                return;
            }

            var html = '';
            res.data.rows.forEach(function(row) {
                html += '<tr>' +
                    '<td><input type="checkbox" class="user-comment-row-check" value="' + row.id + '"></td>' +
                    '<td class="fw-medium">' + escapeHtml(row.document_title || '-') + '</td>' +
                    '<td><div class="user-comment-content plain-text-content">' + renderPlainTextHtml(row.content || '') + '</div></td>' +
                    '<td>' + statusBadge(row.status) + '</td>' +
                    '<td class="small text-muted">' + escapeHtml(row.created_at_str || '') + '</td>' +
                    '<td class="text-center">' +
                    '<div class="dropdown table-action-dropdown">' +
                    '<button class="btn btn-action-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">' +
                    '<i class="bx bx-dots-vertical-rounded" style="font-size:1.15rem;"></i></button>' +
                    '<ul class="dropdown-menu dropdown-menu-end">' +
                    '<li><a class="dropdown-item text-danger btn-del-comment" href="javascript:;" data-id="' + row.id + '"><i class="bx bx-trash"></i> ' + escapeHtml(i18n.delete) + '</a></li>' +
                    '</ul></div></td></tr>';
            });
            $('#userCommentsList').html(html);
            $('#userCommentsCheckAll').prop('checked', false).prop('indeterminate', false);
            updateBulkState();
        }).fail(function() {
            $('#userCommentsList').html('<tr><td colspan="6" class="text-center text-muted py-5">' + escapeHtml(i18n.loadError) + '</td></tr>');
            updateBulkState();
        });
    }

    $('.user-comments-tabs .btn').on('click', function() {
        $('.user-comments-tabs .btn').removeClass('btn-primary').addClass('btn-outline-secondary');
        $(this).removeClass('btn-outline-secondary').addClass('btn-primary');
        currentTab = $(this).data('tab');
        loadComments();
    });

    $(document).on('change', '#userCommentsCheckAll', function() {
        $('.user-comment-row-check').prop('checked', this.checked);
        updateBulkState();
    });
    $(document).on('change', '.user-comment-row-check', updateBulkState);

    $(document).on('click', '.btn-del-comment', function() {
        var id = $(this).data('id');
        confirmDelete(i18n.deleteConfirm, function() {
            deleteComment(id, loadComments);
        });
    });

    $('#btnUserCommentsBatchDelete').on('click', function() {
        var ids = getSelectedCommentIDs();
        if (!ids.length) {
            BootstrapModal.msg(i18n.noSelection, { icon: 3 });
            return;
        }
        var msg = i18n.batchDeleteConfirm.replace('{count}', ids.length);
        confirmDelete(msg, function() {
            batchDeleteComments(ids, loadComments);
        });
    });

    $('#btnUserCommentsClearSelection').on('click', function() {
        $('.user-comment-row-check, #userCommentsCheckAll').prop('checked', false).prop('indeterminate', false);
        updateBulkState();
    });

    loadComments();
});
</script>
{{end}}