'use strict';

layui.use(['table', 'layer', 'util'], function () {
    const table = layui.table;
    const layer = layui.layer;
    const util = layui.util;
    const tableId = 'grantTable';
    const tableElem = document.getElementById(tableId);

    // Get configuration from data attributes
    const pageUrl = tableElem.dataset.pageUrl;
    const grantUrl = tableElem.dataset.grantUrl;
    const revokeUrl = tableElem.dataset.revokeUrl;

    if (!pageUrl || !grantUrl || !revokeUrl) {
        console.error('Grant table configuration missing URLs');
        return;
    }

    table.render({
        elem: '#' + tableId,
        url: pageUrl,
        page: true,
        limit: 20,
        cellMinWidth: 120,
        cols: [[
            {
                field: 'account',
                title: '用户账号',
                width: 150
            },
            {
                field: 'applicationName',
                title: '应用名称',
                minWidth: 150,
                templet: d => `<div>${util.escape(d.applicationName)}</div><small class="text-muted">${d.applicationId}</small>`
            },
            {
                field: 'allowedTime',
                title: '授权时间',
                width: 170,
                templet: d => util.toDateString(d.allowedTime, 'yyyy-MM-dd HH:mm')
            },
            {
                fixed: 'right',
                title: '操作',
                width: 100,
                toolbar: '#grantTableActions'
            }
        ]]
    });

    const btnSearch = document.getElementById('btnSearch');
    if (btnSearch) {
        btnSearch.addEventListener('click', function () {
            table.reload(tableId, {
                where: {
                    account: document.getElementById('accountFilter')?.value,
                    appId: document.getElementById('appIdFilter')?.value
                },
                page: { curr: 1 }
            });
        });
    }

    const btnAdd = document.getElementById('btnAdd');
    if (btnAdd) {
        btnAdd.addEventListener('click', function () {
            let options = '<option value="">请选择应用</option>';
            // availableApplications is defined in the view
            if (typeof availableApplications !== 'undefined' && Array.isArray(availableApplications)) {
                availableApplications.forEach(function(app) {
                    // escape values just in case
                    const clientId = util.escape(app.clientId);
                    const displayName = util.escape(app.displayName);
                    options += `<option value="${clientId}">${displayName} (${clientId})</option>`;
                });
            }

            layer.open({
                type: 1,
                title: '新增授权',
                area: ['400px', '350px'],
                content: `
                        <div style="padding: 20px;">
                            <div class="mb-3">
                                <label class="form-label">用户账号</label>
                                <input type="text" class="form-control" id="newAccount" placeholder="请输入用户账号">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">应用</label>
                                <select class="form-select" id="newAppId">
                                    ${options}
                                </select>
                            </div>
                            <div class="text-end">
                                <button class="btn btn-primary" id="btnSubmitGrant">确认授权</button>
                            </div>
                        </div>
                    `,
                success: function (layero, index) {
                    layero.find('#btnSubmitGrant').on('click', async function () {
                        const account = layero.find('#newAccount').val();
                        const appId = layero.find('#newAppId').val();
                        if (!account || !appId) {
                            layer.msg('请填写完整信息');
                            return;
                        }

                        const formData = new FormData();
                        formData.append('account', account);
                        formData.append('appId', appId);

                        try {
                            const response = await fetch(grantUrl, {
                                method: 'POST',
                                body: formData
                            });
                            const result = await response.json();
                            if (result.success) {
                                layer.msg(result.message || '授权成功', { icon: 1 });
                                layer.close(index);
                                table.reload(tableId);
                            } else {
                                layer.msg(result.message || '授权失败', { icon: 2 });
                            }
                        } catch (e) {
                            layer.msg('网络请求错误', { icon: 2 });
                        }
                    });
                }
            });
        });
    }

    table.on('tool(' + tableId + ')', function (obj) {
        if (obj.event === 'revoke') {
            layer.confirm('确定要撤销该用户的访问权限吗？', function (index) {
                const formData = new FormData();
                formData.append('id', obj.data.id);
                fetch(revokeUrl, {
                    method: 'POST',
                    body: formData
                })
                    .then(res => res.json())
                    .then(res => {
                        if (res.success) {
                            layer.msg('撤销成功', { icon: 1 });
                            obj.del();
                        } else {
                            layer.msg(res.message || '撤销失败', { icon: 2 });
                        }
                    });
                layer.close(index);
            });
        }
    });
});