{{template "layout.html" .}}

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

    <div class="filter-bar">
        <div class="btn-group btn-group-sm user-reports-tabs" role="group">
            <button type="button" class="btn btn-primary" data-tab="mine">{{T "user_reports_tab_mine"}}</button>
            <button type="button" class="btn btn-outline-secondary" data-tab="received">{{T "user_reports_tab_received"}}</button>
        </div>
        <div class="btn-group btn-group-sm user-reports-filter" role="group">
            <button type="button" class="btn btn-primary" data-status="-1">{{T "user_reports_status_all"}}</button>
            <button type="button" class="btn btn-outline-secondary" data-status="0">{{T "user_reports_status_pending"}}</button>
            <button type="button" class="btn btn-outline-secondary" data-status="1">{{T "user_reports_status_handled"}}</button>
            <button type="button" class="btn btn-outline-secondary" data-status="2">{{T "user_reports_status_dismissed"}}</button>
        </div>
    </div>

    <div class="card user-table-card">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="userReportsTable">
                <thead id="userReportsThead">
                    <tr>
                        <th class="col-check"><input type="checkbox" id="userReportsCheckAll" title="{{T "user_select_all"}}"></th>
                        <th>{{T "user_reports_col_document"}}</th>
                        <th class="js-report-reporter-col d-none">{{T "user_reports_col_reporter"}}</th>
                        <th>{{T "user_reports_col_reason"}}</th>
                        <th>{{T "user_reports_col_detail"}}</th>
                        <th>{{T "user_reports_col_status"}}</th>
                        <th>{{T "user_reports_col_time"}}</th>
                        <th>{{T "user_reports_col_note"}}</th>
                        <th width="60" class="text-center">{{T "user_col_actions"}}</th>
                    </tr>
                </thead>
                <tbody id="userReportsList">
                    <tr><td colspan="9" class="text-center text-muted py-5">{{T "user_loading"}}</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="reportsBatchActionBar" 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="userReportsSelectedCount">0</span> {{T "user_reports_selected_suffix"}}</span>
        <div class="d-flex gap-2 flex-wrap align-items-center">
            <input type="text" class="form-control form-control-sm d-none" id="userReportsNote" style="width:200px;" placeholder="{{T "user_reports_note_placeholder"}}">
            <button type="button" class="btn btn-sm btn-outline-success js-reports-bulk-btn d-none" id="btnUserReportsBatchHandle" data-action="handle"><i class='bx bx-check'></i> {{T "user_reports_batch_handle"}}</button>
            <button type="button" class="btn btn-sm btn-outline-secondary js-reports-bulk-btn d-none" id="btnUserReportsBatchDismiss" data-action="dismiss"><i class='bx bx-x'></i> {{T "user_reports_batch_dismiss"}}</button>
            <button type="button" class="btn btn-sm btn-outline-danger js-reports-bulk-btn d-none" id="btnUserReportsBatchCancel"><i class='bx bx-trash'></i> {{T "user_reports_batch_cancel"}}</button>
            <button type="button" class="btn btn-sm btn-outline-secondary" id="btnUserReportsClearSelection">{{T "user_clear_selection"}}</button>
        </div>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
window.UserReportsI18n = {
    empty: {{json (T "user_reports_empty")}},
    loadError: {{json (T "user_reports_load_error")}},
    cancel: {{json (T "user_reports_cancel")}},
    batchCancel: {{json (T "user_reports_batch_cancel")}},
    cancelConfirm: {{json (T "user_reports_cancel_confirm")}},
    batchCancelConfirm: {{json (T "user_reports_batch_cancel_confirm")}},
    confirmTitle: {{json (T "user_reports_confirm_title")}},
    handle: {{json (T "user_reports_handle")}},
    dismiss: {{json (T "user_reports_dismiss")}},
    handleConfirm: {{json (T "user_reports_handle_confirm")}},
    dismissConfirm: {{json (T "user_reports_dismiss_confirm")}},
    batchHandleConfirm: {{json (T "user_reports_batch_handle_confirm")}},
    batchDismissConfirm: {{json (T "user_reports_batch_dismiss_confirm")}},
    noSelection: {{json (T "user_reports_no_selection")}},
    statusPending: {{json (T "user_reports_status_pending")}},
    statusHandled: {{json (T "user_reports_status_handled")}},
    statusDismissed: {{json (T "user_reports_status_dismissed")}}
};

$(function() {
    var currentTab = 'mine';
    var currentStatus = '-1';
    var i18n = window.UserReportsI18n;

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

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

    function isReceived() {
        return currentTab === 'received';
    }

    function syncBatchBarMode() {
        var received = isReceived();
        $('#userReportsNote, #btnUserReportsBatchHandle, #btnUserReportsBatchDismiss').toggleClass('d-none', !received);
        $('#btnUserReportsBatchCancel').toggleClass('d-none', received);
        $('#userReportsThead .js-report-reporter-col').toggleClass('d-none', !received);
    }

    function updateBulkState() {
        var $rowChecks = $('.user-report-row-check');
        var checked = $rowChecks.filter(':checked').length;
        $('#userReportsSelectedCount').text(checked);
        $('#reportsBatchActionBar').toggle(checked > 0);
        $('.js-reports-bulk-btn').prop('disabled', checked === 0);
        var $selAll = $('#userReportsCheckAll');
        if ($selAll.length) {
            $selAll.prop('checked', $rowChecks.length > 0 && checked === $rowChecks.length);
            $selAll.prop('indeterminate', checked > 0 && checked < $rowChecks.length);
        }
    }

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

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

    function loadReports() {
        syncBatchBarMode();
        var received = isReceived();
        var colspan = received ? 9 : 8;
        var url = '/user/reports-data?tab=' + encodeURIComponent(currentTab) +
            '&status=' + encodeURIComponent(currentStatus);
        $.getJSON(url, function(res) {
            if (!res.success) {
                $('#userReportsList').html('<tr><td colspan="' + colspan + '" class="text-center text-muted py-5">' + escapeHtml(i18n.loadError) + '</td></tr>');
                updateBulkState();
                return;
            }
            if (!res.data || !res.data.rows || !res.data.rows.length) {
                $('#userReportsList').html('<tr><td colspan="' + colspan + '" class="text-center text-muted py-5">' + escapeHtml(i18n.empty) + '</td></tr>');
                updateBulkState();
                return;
            }

            var html = '';
            res.data.rows.forEach(function(row) {
                var pending = Number(row.status) === 0;
                html += '<tr>' +
                    '<td>' + (pending ? '<input type="checkbox" class="user-report-row-check" value="' + row.id + '">' : '') + '</td>' +
                    '<td class="fw-medium">' + escapeHtml(row.document_title || '-') + '</td>' +
                    (received ? '<td class="small">' + escapeHtml(row.reporter_name || '-') + '</td>' : '') +
                    '<td class="small">' + escapeHtml(row.reason_label || row.reason || '-') + '</td>' +
                    '<td><div class="user-report-detail">' + escapeHtml(row.detail || '-') + '</div></td>' +
                    '<td>' + statusBadge(Number(row.status)) + '</td>' +
                    '<td class="small text-muted">' + escapeHtml(row.created_at_str || '-') + '</td>' +
                    '<td class="small text-muted">' + escapeHtml(row.admin_note || '-') + '</td>' +
                    '<td class="text-center">';
                if (pending) {
                    html += '<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">';
                    if (received) {
                        html += '<li><a class="dropdown-item js-handle-report" href="javascript:;" data-id="' + row.id + '" data-action="handle"><i class="bx bx-check"></i> ' + escapeHtml(i18n.handle) + '</a></li>' +
                            '<li><a class="dropdown-item js-handle-report" href="javascript:;" data-id="' + row.id + '" data-action="dismiss"><i class="bx bx-x"></i> ' + escapeHtml(i18n.dismiss) + '</a></li>';
                    } else {
                        html += '<li><a class="dropdown-item text-danger js-cancel-report" href="javascript:;" data-id="' + row.id + '"><i class="bx bx-trash"></i> ' + escapeHtml(i18n.cancel) + '</a></li>';
                    }
                    html += '</ul></div>';
                } else {
                    html += '<span class="text-muted">—</span>';
                }
                html += '</td></tr>';
            });
            $('#userReportsList').html(html);
            $('#userReportsCheckAll').prop('checked', false).prop('indeterminate', false);
            updateBulkState();
        }).fail(function() {
            $('#userReportsList').html('<tr><td colspan="' + colspan + '" class="text-center text-muted py-5">' + escapeHtml(i18n.loadError) + '</td></tr>');
            updateBulkState();
        });
    }

    function setGroupActive($group, $btn) {
        $group.find('.btn').removeClass('btn-primary').addClass('btn-outline-secondary');
        $btn.removeClass('btn-outline-secondary').addClass('btn-primary');
    }

    $('.user-reports-tabs').on('click', '.btn', function() {
        setGroupActive($('.user-reports-tabs'), $(this));
        currentTab = $(this).data('tab');
        loadReports();
    });

    $('.user-reports-filter').on('click', '.btn', function() {
        setGroupActive($('.user-reports-filter'), $(this));
        currentStatus = String($(this).data('status'));
        loadReports();
    });

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

    $(document).on('click', '.js-cancel-report', function() {
        var id = $(this).data('id');
        confirmAction(i18n.cancelConfirm, function() {
            $.post('/user/report_cancel', { id: id }, function(res) {
                BootstrapModal.msg(res.message || '', { icon: res.success ? 1 : 2 });
                if (res.success) loadReports();
            }, 'json');
        });
    });

    $('#btnUserReportsBatchCancel').on('click', function() {
        var ids = getSelectedIDs();
        if (!ids.length) {
            BootstrapModal.msg(i18n.noSelection, { icon: 2 });
            return;
        }
        confirmAction(i18n.batchCancelConfirm, function() {
            $.ajax({
                url: '/user/report_batch_cancel',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ ids: ids }),
                success: function(res) {
                    BootstrapModal.msg(res.message || '', { icon: res.success ? 1 : 2 });
                    if (res.success) loadReports();
                },
                error: function() {
                    BootstrapModal.msg(i18n.loadError, { icon: 2 });
                }
            });
        });
    });

    function handleReports(ids, action, isBatch) {
        if (!ids.length) {
            BootstrapModal.msg(i18n.noSelection, { icon: 2 });
            return;
        }
        var msg = action === 'dismiss'
            ? (isBatch ? i18n.batchDismissConfirm : i18n.dismissConfirm)
            : (isBatch ? i18n.batchHandleConfirm : i18n.handleConfirm);
        var note = ($('#userReportsNote').val() || '').trim();
        confirmAction(msg, function() {
            var url = isBatch || ids.length > 1 ? '/user/report_batch_handle' : '/user/report_handle';
            var payload = isBatch || ids.length > 1
                ? { ids: ids, action: action, note: note }
                : { id: ids[0], action: action, note: note };
            $.ajax({
                url: url,
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(payload),
                success: function(res) {
                    BootstrapModal.msg(res.message || '', { icon: res.success ? 1 : 2 });
                    if (res.success) loadReports();
                },
                error: function() {
                    BootstrapModal.msg(i18n.loadError, { icon: 2 });
                }
            });
        });
    }

    $(document).on('click', '.js-handle-report', function() {
        handleReports([$(this).data('id')], $(this).data('action'), false);
    });

    $('#btnUserReportsBatchHandle, #btnUserReportsBatchDismiss').on('click', function() {
        handleReports(getSelectedIDs(), $(this).data('action'), true);
    });

    $('#btnUserReportsClearSelection').on('click', function() {
        $('.user-report-row-check, #userReportsCheckAll').prop('checked', false).prop('indeterminate', false);
        updateBulkState();
    });

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