{{template "layout.html" .}}

{{define "content"}}
<link rel="stylesheet" href="{{asset "/template/default/assets/css/admin-groups.css"}}">

{{template "admin-hero-styles" .}}

<details class="admin-hero">
    <summary class="admin-hero-bar">
        <span class="admin-hero-icon" aria-hidden="true"><i class='bx bx-group'></i></span>
        <span class="admin-hero-intro">{{T "admin_groups_page_hint"}}</span>
        <span class="admin-hero-toggle">
            <span class="admin-hero-toggle-label"><i class='bx bx-info-circle' aria-hidden="true"></i> {{T "admin_usage_title"}}</span>
            {{template "admin-hero-help-meta" .}}
        </span>
    </summary>
    <div class="admin-hero-body">
        <ul class="admin-hero-field-grid">
            <li class="admin-hero-field-item"><strong>{{T "admin_groups_usage_define"}}</strong>{{T "admin_groups_usage_define_desc"}}</li>
            <li class="admin-hero-field-item"><strong>{{T "admin_groups_usage_perm"}}</strong>{{T "admin_groups_usage_perm_desc"}}</li>
        </ul>
    </div>
</details>

<div class="card groups-page">
    <div class="card-header d-flex justify-content-between align-items-center">
        <div class="d-flex gap-2 align-items-center flex-wrap">
            <button type="button" class="btn btn-primary btn-sm" onclick="showAddGroup()">
                <i class='bx bx-plus'></i> {{T "admin_groups_add"}}
            </button>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th width="60">{{T "admin_groups_col_id"}}</th>
                        <th>{{T "admin_groups_col_name"}}</th>
                        <th>{{T "admin_groups_col_desc"}}</th>
                        <th>{{T "admin_groups_col_perms"}}</th>
                        <th width="80">{{T "admin_groups_col_users"}}</th>
                        <th width="70">{{T "admin_groups_col_sort"}}</th>
                        <th width="80">{{T "admin_groups_col_status"}}</th>
                        <th width="60" class="text-center">{{T "admin_groups_col_actions"}}</th>
                    </tr>
                </thead>
                <tbody id="groupList">
                    {{$groups := index .Data "Groups"}}
                    {{$permLabels := index .Data "PermissionLabels"}}
                    {{if $groups}}
                    {{range $groups}}
                    <tr data-id="{{index . "id"}}" data-system="{{if index . "is_system"}}1{{else}}0{{end}}">
                        <td>{{index . "id"}}</td>
                        <td>
                            <div><strong>{{index . "group_name"}}</strong></div>
                            {{if index . "is_system"}}<span class="badge bg-danger mt-1">{{T "admin_groups_system_badge"}}</span>{{end}}
                        </td>
                        <td class="text-muted small">{{index . "description"}}</td>
                        <td>
                            {{if index . "permissions_all"}}
                            <span class="perm-chip is-all">{{T "admin_groups_all_perms"}}</span>
                            {{else}}
                            {{range index . "permissions_list"}}
                            {{$permKey := .}}
                            <span class="perm-chip" title="{{$permKey}}">{{if index $permLabels $permKey}}{{index $permLabels $permKey}}{{else}}{{$permKey}}{{end}}</span>
                            {{end}}
                            {{end}}
                        </td>
                        <td>{{index . "user_count"}}</td>
                        <td>{{index . "sort_order"}}</td>
                        <td>
                            {{if eq (index . "status") 1}}
                            <span class="badge bg-success">{{T "admin_groups_status_enabled"}}</span>
                            {{else}}
                            <span class="badge bg-secondary">{{T "admin_groups_status_disabled"}}</span>
                            {{end}}
                        </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" href="javascript:;" onclick="editGroup('{{index . "id"}}')"><i class="bx bx-edit"></i> {{T "admin_btn_edit"}}</a></li>
                                    {{if not (index . "is_system")}}
                                    <li><a class="dropdown-item text-danger group-action-delete" href="javascript:;" data-id="{{index . "id"}}" data-name="{{index . "group_name"}}"><i class="bx bx-trash"></i> {{T "admin_btn_delete"}}</a></li>
                                    {{end}}
                                </ul>
                            </div>
                        </td>
                    </tr>
                    {{end}}
                    {{else}}
                    <tr>
                        <td colspan="8" class="text-center text-muted py-4">{{T "admin_groups_no_groups"}}</td>
                    </tr>
                    {{end}}
                </tbody>
            </table>
        </div>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
var GroupI18n = {
    add: {{json (T "admin_groups_add")}},
    edit: {{json (T "admin_groups_edit")}},
    name: {{json (T "admin_groups_form_name")}},
    desc: {{json (T "admin_groups_form_desc")}},
    sort: {{json (T "admin_groups_form_sort")}},
    status: {{json (T "admin_groups_form_status")}},
    perms: {{json (T "admin_groups_form_perms")}},
    permAll: {{json (T "admin_groups_perm_all")}},
    permAllDesc: {{json (T "admin_groups_perm_all_desc")}},
    enabled: {{json (T "admin_groups_status_enabled")}},
    disabled: {{json (T "admin_groups_status_disabled")}},
    deleteConfirm: {{json (T "admin_groups_delete_confirm")}},
    systemReadonly: {{json (T "admin_groups_system_readonly")}},
    sectionView: {{json (T "admin_groups_perm_section_view")}},
    sectionInteract: {{json (T "admin_groups_perm_section_interact")}},
    sectionCreate: {{json (T "admin_groups_perm_section_create")}},
    sectionOwn: {{json (T "admin_groups_perm_section_own")}},
    sectionAll: {{json (T "admin_groups_perm_section_all")}},
    sectionAllHint: {{json (T "admin_groups_perm_section_all_hint")}},
    sectionPublish: {{json (T "admin_groups_perm_section_publish")}}
};
var PermissionCatalog = {{json (index .Data "PermissionCatalog")}};

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

function formatMsg(tpl, vars) {
    var text = String(tpl || '');
    Object.keys(vars || {}).forEach(function (k) {
        text = text.replace(new RegExp('\\{' + k + '\\}', 'g'), String(vars[k]));
    });
    return text;
}

function permByGroup(groupKey) {
    return (PermissionCatalog || []).filter(function (p) { return p.group === groupKey; });
}

var PermSectionIcons = {
    view: 'bx-show',
    interact: 'bx-message-dots',
    create: 'bx-plus-circle',
    own: 'bx-user',
    all: 'bx-folder-open',
    publish: 'bx-check-shield'
};

function syncPermItemState($root) {
    $root.find('.perm-item').each(function () {
        var $item = $(this);
        var $input = $item.find('.js-perm-item, #permAll').first();
        if (!$input.length) return;
        $item.toggleClass('is-checked', $input.is(':checked'));
        $item.toggleClass('is-disabled', $input.is(':disabled'));
    });
}

function buildPermSections(selected, isAll, readonly) {
    var sections = [
        { key: 'view', title: GroupI18n.sectionView },
        { key: 'interact', title: GroupI18n.sectionInteract },
        { key: 'create', title: GroupI18n.sectionCreate },
        { key: 'own', title: GroupI18n.sectionOwn },
        { key: 'all', title: GroupI18n.sectionAll },
        { key: 'publish', title: GroupI18n.sectionPublish }
    ];
    var html = '<div class="group-perm-panel">';
    if (!readonly) {
        html += '<div class="perm-all-card">' +
            '<input class="form-check-input" type="checkbox" id="permAll" ' + (isAll ? 'checked' : '') + '>' +
            '<label class="form-check-label" for="permAll">' +
            '<div class="perm-all-title"><i class="bx bx-shield-quarter"></i>' + escHtml(GroupI18n.permAll) + '</div>' +
            '<div class="perm-all-desc">' + escHtml(GroupI18n.permAllDesc) + '</div>' +
            '</label></div>';
    } else {
        html += '<div class="alert alert-info small py-2 mb-3">' + escHtml(GroupI18n.systemReadonly) + '</div>';
    }
    html += '<div class="perm-grid">';
    sections.forEach(function (sec) {
        var items = permByGroup(sec.key);
        if (!items.length) return;
        var icon = PermSectionIcons[sec.key] || 'bx-checkbox-checked';
        html += '<div class="perm-section-card">' +
            '<div class="perm-section-head"><i class="bx ' + icon + '"></i><span>' + escHtml(sec.title) + '</span></div>';
        if (sec.key === 'all' && GroupI18n.sectionAllHint) {
            html += '<div class="perm-section-hint text-danger">' + escHtml(GroupI18n.sectionAllHint) + '</div>';
        }
        html += '<div class="perm-items">';
        items.forEach(function (p) {
            var checked = isAll || (selected || []).indexOf(p.key) >= 0;
            var disabled = readonly || isAll;
            var id = 'perm_' + p.key.replace(/[:]/g, '_');
            var descClass = 'perm-desc';
            if (p.key === 'document:edit' || p.key === 'document:delete') {
                descClass += ' text-danger';
            }
            html += '<label class="perm-item' + (checked ? ' is-checked' : '') + (disabled ? ' is-disabled' : '') + '" for="' + id + '">' +
                '<input class="form-check-input js-perm-item" type="checkbox" id="' + id + '" value="' + escHtml(p.key) + '"' +
                (checked ? ' checked' : '') + (disabled ? ' disabled' : '') + '>' +
                '<span class="perm-item-body">' +
                '<span class="perm-label">' + escHtml(p.label) + '</span>' +
                '<span class="' + descClass + '">' + escHtml(p.desc) + '</span>' +
                '</span></label>';
        });
        html += '</div></div>';
    });
    html += '</div></div>';
    return html;
}

function getGroupFormHtml(data) {
    data = data || {};
    var isSystem = !!data.is_system;
    var readonly = isSystem;
    var selected = data.permissions_list || [];
    var isAll = !!data.permissions_all;
    return '<form id="groupForm" style="font-size: 0.875rem;">' +
        '<input type="hidden" id="groupId" value="' + escHtml(data.id || 0) + '">' +
        '<div class="group-form-basic">' +
        '<div class="row mb-3">' +
            '<div class="col-md-6">' +
                '<label class="form-label" style="font-size: 0.875rem;">' + escHtml(GroupI18n.name) + ' <span class="text-danger">*</span></label>' +
                '<input type="text" class="form-control form-control-sm" id="groupName" value="' + escHtml(data.group_name || '') + '"' + (readonly ? ' readonly' : ' required') + '>' +
            '</div>' +
            '<div class="col-md-3">' +
                '<label class="form-label" style="font-size: 0.875rem;">' + escHtml(GroupI18n.sort) + '</label>' +
                '<input type="number" class="form-control form-control-sm" id="groupSort" value="' + escHtml(data.sort_order == null ? 0 : data.sort_order) + '">' +
            '</div>' +
            '<div class="col-md-3">' +
                '<label class="form-label" style="font-size: 0.875rem;">' + escHtml(GroupI18n.status) + '</label>' +
                '<select class="form-select form-select-sm" id="groupStatus"' + (readonly ? ' disabled' : '') + '>' +
                    '<option value="1"' + ((data.status == null || data.status == 1) ? ' selected' : '') + '>' + escHtml(GroupI18n.enabled) + '</option>' +
                    '<option value="0"' + (data.status == 0 ? ' selected' : '') + '>' + escHtml(GroupI18n.disabled) + '</option>' +
                '</select>' +
            '</div>' +
        '</div>' +
        '<div class="mb-1">' +
            '<label class="form-label" style="font-size: 0.875rem;">' + escHtml(GroupI18n.desc) + '</label>' +
            '<textarea class="form-control form-control-sm" id="groupDesc" rows="2"' + (readonly ? ' readonly' : '') + '>' + escHtml(data.description || '') + '</textarea>' +
        '</div>' +
        '</div>' +
        '<div class="group-form-perms">' +
        '<label class="form-label">' + escHtml(GroupI18n.perms) + '</label>' +
        buildPermSections(selected, isAll, readonly) +
        '</div>' +
    '</form>';
}

function bindPermToggle($root) {
    var $all = $root.find('#permAll');
    var $items = $root.find('.js-perm-item');
    function sync() {
        var on = $all.is(':checked');
        $items.prop('disabled', on);
        if (on) $items.prop('checked', false);
        syncPermItemState($root);
    }
    $all.on('change', sync);
    $root.on('change', '.js-perm-item', function () {
        syncPermItemState($root);
    });
    sync();
}

function showGroupModal(title, formHtml, onSave) {
    var modalId = 'group-modal-' + Date.now();
    var modalHtml =
        '<div class="modal fade" id="' + modalId + '" tabindex="-1">' +
        '<div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">' +
        '<div class="modal-content">' +
        '<div class="modal-header">' +
        '<h5 class="modal-title">' + title + '</h5>' +
        '<button type="button" class="btn-close" data-bs-dismiss="modal"></button>' +
        '</div>' +
        '<div class="modal-body p-0">' + formHtml + '</div>' +
        '<div class="modal-footer">' +
        '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">' + AdminI18n.cancel + '</button>' +
        '<button type="button" class="btn btn-primary" id="' + modalId + '-save">' + AdminI18n.save + '</button>' +
        '</div></div></div></div>';
    $('body').append(modalHtml);
    var $modal = $('#' + modalId);
    bindPermToggle($modal);
    var modal = new bootstrap.Modal(document.getElementById(modalId));
    $('#' + modalId + '-save').on('click', function () {
        if (onSave) onSave(modal);
    });
    $modal.on('hidden.bs.modal', function () { $modal.remove(); });
    modal.show();
    return modal;
}

function collectGroupPayload() {
    var perms = [];
    $('.js-perm-item:checked').each(function () { perms.push($(this).val()); });
    return {
        id: parseInt($('#groupId').val(), 10) || 0,
        group_name: $.trim($('#groupName').val()),
        description: $.trim($('#groupDesc').val()),
        sort_order: parseInt($('#groupSort').val(), 10) || 0,
        status: parseInt($('#groupStatus').val(), 10) || 1,
        permissions_all: $('#permAll').is(':checked'),
        permissions: perms
    };
}

function saveGroup(modal) {
    var payload = collectGroupPayload();
    if (!payload.group_name) {
        BootstrapModal.msg(AdminI18n.fillRequired, { icon: 2 });
        return;
    }
    var loadId = BootstrapModal.load();
    $.ajax({
        url: '/admin/group-save',
        method: 'POST',
        contentType: 'application/json; charset=UTF-8',
        data: JSON.stringify(payload)
    }).done(function (res) {
        BootstrapModal.close(loadId);
        if (!res.success) {
            BootstrapModal.msg(res.message || AdminI18n.failed, { icon: 2 });
            return;
        }
        modal.hide();
        BootstrapModal.msg(res.message || AdminI18n.saved, { icon: 1, time: 1000 });
        setTimeout(function () { location.reload(); }, 2000);
    }).fail(function () {
        BootstrapModal.close(loadId);
        BootstrapModal.msg(AdminI18n.requestFailed, { icon: 2 });
    });
}

function showAddGroup() {
    showGroupModal(
        '<i class="bx bx-group"></i> ' + GroupI18n.add,
        getGroupFormHtml({ status: 1, sort_order: 0 }),
        saveGroup
    );
}

function editGroup(id) {
    var loadId = BootstrapModal.load();
    $.getJSON('/admin/group-get', { id: id }).done(function (res) {
        BootstrapModal.close(loadId);
        if (!res.success || !res.data) {
            BootstrapModal.msg(res.message || AdminI18n.failed, { icon: 2 });
            return;
        }
        showGroupModal(
            '<i class="bx bx-edit"></i> ' + GroupI18n.edit,
            getGroupFormHtml(res.data),
            saveGroup
        );
    }).fail(function () {
        BootstrapModal.close(loadId);
        BootstrapModal.msg(AdminI18n.requestFailed, { icon: 2 });
    });
}

async function deleteGroup(id, name) {
    var confirmed = await BootstrapModal.confirm(
        formatMsg(GroupI18n.deleteConfirm, { name: name }) + '<br><span class="text-danger">' + AdminI18n.cannotUndo + '</span>',
        {
            icon: 3,
            title: AdminI18n.confirmDelete,
            btn: [AdminI18n.delete, AdminI18n.cancel]
        }
    );
    if (!confirmed) return;
    var loadId = BootstrapModal.load();
    $.ajax({
        url: '/admin/group-delete',
        method: 'POST',
        contentType: 'application/json; charset=UTF-8',
        data: JSON.stringify({ id: id })
    }).done(function (res) {
        BootstrapModal.close(loadId);
        if (!res.success) {
            BootstrapModal.msg(res.message || AdminI18n.failed, { icon: 2 });
            return;
        }
        BootstrapModal.msg(res.message || AdminI18n.deleted, { icon: 1, callback: function () {
            location.reload();
        }});
    }).fail(function () {
        BootstrapModal.close(loadId);
        BootstrapModal.msg(AdminI18n.requestFailed, { icon: 2 });
    });
}

$(document).ready(function () {
    $(document).on('click', '.group-action-delete', function (e) {
        e.preventDefault();
        deleteGroup($(this).data('id'), $(this).data('name'));
    });
    if (typeof window.initTableActionDropdowns === 'function') {
        window.initTableActionDropdowns(document.getElementById('groupList'));
    }
});
</script>
{{end}}