'use strict';

layui.use(['table', 'layer', 'util', 'laydate'], function () {
    const table = layui.table;
    const layer = layui.layer;
    const util = layui.util;
    const laydate = layui.laydate;
    const tableId = 'accessRequestTable';
    const tableElem = document.getElementById(tableId);
    
    // Initialize date range picker
    laydate.render({
        elem: '#dateRange',
        range: true,
        done: function(value, date, endDate){
            // value is the string "yyyy-MM-dd - yyyy-MM-dd"
        }
    });
    
    // Get configuration from data attributes
    const pageUrl = tableElem.dataset.pageUrl;
    const handleUrl = tableElem.dataset.handleUrl;

    if (!pageUrl || !handleUrl) {
        console.error('Access request table configuration missing URLs');
        return;
    }

    table.render({
        elem: '#' + tableId,
        url: pageUrl,
        page: true,
        limit: 20,
        cellMinWidth: 120,
        cols: [[
            {
                field: 'requestTime',
                title: '时间',
                width: 170,
                templet: d => util.toDateString(d.requestTime, 'yyyy-MM-dd HH:mm')
            },
            {
                field: 'userId',
                title: '用户ID',
                width: 150
            },
            {
                field: 'clientDisplayName',
                title: '应用名称',
                minWidth: 150,
                templet: d => `<div>${util.escape(d.clientDisplayName)}</div><small class="text-muted">${d.clientId}</small>`
            },
            {
                field: 'reason',
                title: '理由',
                minWidth: 200,
                templet: d => util.escape(d.reason)
            },
            {
                field: 'status',
                title: '状态',
                width: 100,
                templet: '#statusTpl'
            },
            {
                field: 'handlerName',
                title: '处理人',
                width: 120,
                templet: d => util.escape(d.handlerName || '-')
            },
            {
                field: 'handleRemark',
                title: '处理备注',
                minWidth: 150,
                templet: d => util.escape(d.handleRemark || '-')
            },
            {
                fixed: 'right',
                title: '操作',
                width: 180,
                toolbar: '#accessRequestTableActions'
            }
        ]]
    });
    
    const btnSearch = document.getElementById('btnSearch');
    if (btnSearch) {
        btnSearch.addEventListener('click', function () {
            const dateRange = document.getElementById('dateRange').value;
            let startDate = null;
            let endDate = null;
            if (dateRange) {
                const parts = dateRange.split(' - ');
                if (parts.length === 2) {
                    startDate = parts[0];
                    endDate = parts[1];
                }
            }
            
            table.reload(tableId, {
                where: {
                    account: document.getElementById('accountFilter')?.value,
                    clientId: document.getElementById('clientFilter')?.value,
                    startDate: startDate,
                    endDate: endDate
                },
                page: { curr: 1 }
            });
        });
    }

    const btnClear = document.getElementById('btnClear');
    if (btnClear) {
        btnClear.addEventListener('click', function () {
            document.getElementById('dateRange').value = '';
            document.getElementById('accountFilter').value = '';
            document.getElementById('clientFilter').value = '';
            btnSearch.click();
        });
    }

    table.on('tool(' + tableId + ')', function (obj) {
        const data = obj.data;
        const event = obj.event;

        if (event === 'approve') {
            handleRequest(data.id, 'Approved');
        } else if (event === 'reject') {
            handleRequest(data.id, 'Rejected');
        } else if (event === 'ignore') {
            handleRequest(data.id, 'Ignored');
        } else if (event === 'restore') {
            layer.confirm('确定要将此申请还原回待处理状态吗？<br>注意：如果已通过，对应的授权将被撤销。', function(index){
                submitHandle(data.id, 'Pending', '');
                layer.close(index);
            });
        }
    });

    function handleRequest(id, status) {
        let title = "";
        let placeholder = "请输入处理备注（可选）";
        if (status === 'Approved') title = "通过申请";
        else if (status === 'Rejected') {
            title = "拒绝申请";
            placeholder = "请输入拒绝理由（可选）";
        }
        else title = "忽略申请";

        layer.prompt({
            formType: 2,
            title: title,
            placeholder: placeholder,
            area: ['400px', '100px']
        }, function (value, index, elem) {
            submitHandle(id, status, value);
            layer.close(index);
        });
    }

    async function submitHandle(id, status, remark) {
        const formData = new FormData();
        formData.append('id', id);
        formData.append('status', status);
        formData.append('remark', remark);

        try {
            const response = await fetch(handleUrl, {
                method: 'POST',
                body: formData
            });
            if (response.ok) {
                layer.msg('操作成功', { icon: 1 });
                table.reload(tableId);
            } else {
                const text = await response.text();
                layer.alert(text || '操作失败', { icon: 2 });
            }
        } catch (error) {
            console.error(error);
            layer.alert('网络请求失败', { icon: 2 });
        }
    }
});