let accesscontrolid

const accessctrl_user = ["CHANGE PASSWORD", "DEACTIVATE USER", "ORGANISATION INFO", "PROFILE"]

const property_user = ["REGISTER PROPERTY", "VIEW PROPERTY"]

const tenancy_rental = [ 
    "REGISTER TENANT",
    "VIEW TENANTS",
    "PROPERTY SALES",
    "VIEW PROPERTY SALES",
    "DUE PROPERTY PAYMENTS",
    "MORE DOCUMENTS"
  ]
  

const transaction_user = [
    "OTHER PAYMENTS",
    "PAYMENT HISTORY", 
    "EXPENSES",
    "VIEW EXPENSES",
    "NET TRANSACTIONS"
  ]

const accounts_user = [
    "ADD GL ACCOUNT",
    "VIEW GL ACCOUNTS", 
    "ADD GL TRANSACTION",
    "GL TRANSACTION HISTORY",
    "TRIAL BALANCE", 
    "INCOME STATEMENT",
    "BALANCE SHEET"
  ]

const settings_user = [
    "MORE FEES"
  ] 
  
  

const access_array = [
                        ['accessctrl_user', 'USER', accessctrl_user], 
                        ['property_user', 'PROPERTY', property_user], 
                        ['tenancy_rental', 'CLIENTS/SALES', tenancy_rental],
                        ['transaction_user', 'OTHER TRANSACTION', transaction_user],
                        ['accounts_user', 'ACCOUNTS', accounts_user],
                        ['settings_user', 'SETTINGS', settings_user],
                    ]

function permissionDisplayName(permission) {
    const map = {
        "REGISTER TENANT": "REGISTER CLIENT",
        "VIEW TENANTS": "VIEW CLIENTS"
    };
    return map[permission] || permission;
}

function permissionMatches(savedPermissions, permissionName) {
    const aliases = {
        "REGISTER CLIENT": ["REGISTER TENANT"],
        "REGISTER TENANT": ["REGISTER CLIENT"],
        "VIEW CLIENTS": ["VIEW TENANTS"],
        "VIEW TENANTS": ["VIEW CLIENTS"],
        "PROPERTY SALES": ["RENT A PROPERTY"],
        "RENT A PROPERTY": ["PROPERTY SALES"],
        "VIEW PROPERTY SALES": ["VIEW RENTED PROPERTY"],
        "VIEW RENTED PROPERTY": ["VIEW PROPERTY SALES"],
        "DUE PROPERTY PAYMENTS": ["DUE RENTALS/RENEWALS"],
        "DUE RENTALS/RENEWALS": ["DUE PROPERTY PAYMENTS"]
    };
    const values = (savedPermissions || '').split('||').map(item => item.trim().toUpperCase()).filter(Boolean);
    const target = permissionName.toUpperCase();
    if (values.includes(target)) return true;
    const variants = aliases[target] || [];
    return variants.some(variant => values.includes(variant));
}

async function accesscontrolActive() {
    const form = document.querySelector('#accesscontrolsform')
    if(form.querySelector('#submit')) form.querySelector('#submit').addEventListener('click', accesscontrolFormSubmitHandler)
    if(document.getElementById('accesssave'))document.getElementById('accesssave').addEventListener('click', submitaccesssettings)
    let request2 = await httpRequest2('../controllers/fetchusers', null, null, 'json')
    if(request2.status) {
            if(request2.data.length) {
                elementWithId('userslist').innerHTML = `${request2.data.map(dat=>`<option>${dat.firstname} ${dat.lastname} || ${dat.email}</option>`)}`
            }
    } else return notification('No records retrieved')
    datasource = []
}

async function submitaccesssettings(){
    if(!validateForm('accesscontrolsform', [`email`])) return 
    function payload(){
        let param = new FormData()
        param.append('email', document.getElementById('email').value.split('||')[1].trim())
        param.append('role', document.getElementById('role').value)
        let accessstring = ''
        for(let i=0;i<document.getElementsByClassName('accesscontroller').length;i++){
            if(document.getElementsByClassName('accesscontroller')[i].checked)accessstring += `${document.getElementsByClassName('accesscontroller')[i].name}||` 
        }
        param.append('permissions', accessstring)
        return param
    }
    let request = await httpRequest2('../controllers/updatepermissions', payload(), document.querySelector('#accesscontrolsform #accesssave'))
    if(request.status) {
        notification('Record saved successfully!', 1);
        elementWithId('email').value = ''
        elementWithId('accesssave').classList.add('hidden')
        elementWithId('accessctrl_container').innerHTML = ''
        // fetchaccesscontrols();
        return
    }
    document.querySelector('#accesscontrolsform').reset();
    // fetchaccesscontrols();
    return notification(request.message, 0);
}
 
function accessboard(element){
    if(!element.value){
        elementWithId('accesssave').classList.add('hidden')
        elementWithId('accessctrl_container').innerHTML = ''}
}

function accessappendboard(res){
    for(let i=0;i<access_array.length;i++){
        let element = document.createElement('div')
        element.setAttribute('id', access_array[i][0])
        element.classList.add('flex', 'flex-col', 'border-r', 'mr-3', 'pr-3', 'border-b', 'mb-3', 'pb-3', 'W-[200px]')
        elementWithId('accessctrl_container').appendChild(element)
        document.getElementById(`${access_array[i][0]}`).innerHTML = `<p class="page-title">
                                <span>${access_array[i][1]}</span>
                            </p>`;
        document.getElementById(`${access_array[i][0]}`).innerHTML += access_array[i][2].map(data=>`<label class="bg-[#1d68e305] p-2 pl-1 mb-[1px] relative inline-flex items-center cursor-pointer">
                                          <input type="checkbox" name="${data}" ${permissionMatches(res.permissions, data) ? 'checked' : ''} class="sr-only peer accesscontroller">
                                          <div class="scale-[0.8] w-11 h-6 bg-gray-400 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                                          <span class="ms-2 text-xs font-medium text-blue-900">${permissionDisplayName(data)}</span>
                                        </label>`).join('')
    }
    
}

function populateaccesscontrolboard(result){
    accessappendboard(result);
    elementWithId('role').value =  result.role
    elementWithId('accesssave').classList.remove('hidden')
    
}

async function fetchaccesscontrols(id) {
    // scrollToTop('scrolldiv')
    function getparamm(){
        let paramstr = new FormData()
        paramstr.append('id', id)
        return paramstr
    }
    let request = await httpRequest2('../controllers/fetchaccesscontrols', id ? getparamm() : null, null, 'json')
    if(!id)document.getElementById('tabledata').innerHTML = `No records retrieved`
    if(request.status) {
        if(!id){
            if(request.data.length) {
                datasource = request.data
                resolvePagination(datasource, onaccesscontrolTableDataSignal)
            }
        }else{
             accesscontrolid = request.data[0].id
            populateData(request.data[0])
        }
    }
    else return notification('No records retrieved')
}

async function removeaccesscontrol(id) {
    // Ask for confirmation
    const confirmed = window.confirm("Are you sure you want to remove this accesscontrol?");

    // If not confirmed, do nothing
    if (!confirmed) {
        return;
    }

    function getparamm() {
        let paramstr = new FormData();
        paramstr.append('id', id);
        return paramstr;
    }

    let request = await httpRequest2('../controllers/removevisacountries', id ? getparamm() : null, null, 'json');
    
    // Show notification based on the result
    fetchaccesscontrols()
    return notification(request.message);
    
}


async function onaccesscontrolTableDataSignal() {
    let rows = getSignaledDatasource().map((item, index) => `
    <tr>
        <td>${item.index + 1 }</td>
        <td>${item.productname}</td>
        <td>${item.productdescription}</td>
        <td class="flex items-center gap-3">
            <button title="Edit row entry" onclick="fetchaccesscontrols('${item.id}')" class="material-symbols-outlined rounded-full bg-primary-g h-8 w-8 text-white drop-shadow-md text-xs" style="font-size: 18px;">edit</button>
            <button title="Delete row entry"s onclick="removeaccesscontrol('${item.id}')" class="material-symbols-outlined rounded-full bg-red-600 h-8 w-8 text-white drop-shadow-md text-xs" style="font-size: 18px;">delete</button>
        </td>
    </tr>`
    )
    .join('')
    injectPaginatatedTable(rows)
}

async function accesscontrolFormSubmitHandler() {
    if(!validateForm('accesscontrolsform', [`email`])) return
    
    function payload(){
        let params = new FormData()
        params.append('email', document.getElementById('email').value.split('||')[1].trim())
        return params
    }
    
    let request = await httpRequest2('../controllers/fetchuserprofile', payload(), document.querySelector('#accesscontrolsform #submit'), 'json')
    if(request.status) {
        populateaccesscontrolboard(request)
        return
    }
    document.querySelector('#accesscontrolform').reset();
    // fetchaccesscontrols();
    return notification(request.message, 0);
}
