/**
 * @typedef {Object} UserDB
 * @property {number} index Index number
 * @property {string} username Username
 * @property {string} password Password (plain)
 * @property {string} location Location
 * @property {string} airline_tags Airline variable tags (string) separated by semicolon ;
 * @property {string} city_tags City variable tags (string) separated by semicolon ;
 * @property {string} messagebank_ann_id Messagebank announcement ID (number) separated by semicolon ;
 * @property {string} broadcastzones Broadcast zones description (string) separated by semicolon ;
 */

/** List of UserDB data loaded from server
 * @type {UserDB[]}
 */
window.userdb = [];

/**
 * Currently selected user row in table
 * @type {JQuery<HTMLElement>|null}
 */
window.selecteduserrow = null;

/**
 * @typedef {Object} KeyValueMessage
 * @property {string} key
 * @property {string} value
 */

/**
 * List of airline tags loaded from server
 * @type {KeyValueMessage[]}
 */
window.airlinetags = [];
/**
 * List of city tags loaded from server
 * @type {KeyValueMessage[]}
 */
window.citytags = [];
/**
 * List of message bank IDs loaded from server
 * @type {KeyValueMessage[]}
 */
window.messagebankids = [];
/**
 * List of broadcast zones description loaded from server
 * @type {string[]}
 */
window.broadcastzones = [];

/**
 * Get Messagebank ANN_IDs from server
 */
function get_messagebankids() {
    messagebankids = [];
    fetchAPI("MessageBank/" + "MessageIDs", "GET", {}, null, (okdata) => {
        if (Array.isArray(okdata)) {
            messagebankids.push(...okdata);
        }
    }, (errdata) => {
        alert("Error loading message bank IDs : " + errdata.message);
    });
}

/**
 * Get Airline Tags from server
 */
function get_airlinetags() {
    airlinetags = [];
    fetchAPI("SoundBank/" + "AirlineTags", "GET", {}, null, (okdata) => {
        if (Array.isArray(okdata)) {
            airlinetags.push(...okdata);
        }
    }, (errdata) => {
        alert("Error loading airline tags : " + errdata.message);
    });
}

/**
 * Get City Tags from server
 */
function get_citytags() {
    citytags = [];
    fetchAPI("SoundBank/" + "CityTags", "GET", {}, null, (okdata) => {
        if (Array.isArray(okdata)) {
            citytags.push(...okdata);
        }
    }, (errdata) => {
        alert("Error loading city tags : " + errdata.message);
    });
}

/**
 * Get Broadcast Zones descriptions from server
 */
function get_broadcastzones_descriptions() {
    broadcastzones = [];
    fetchAPI("BroadcastZones/" + "BroadcastZoneDescriptions", "GET", {}, null, (okdata) => {
        if (Array.isArray(okdata)) {
            broadcastzones.push(...okdata);
        }
    }, (errdata) => {
        alert("Error loading broadcast zones : " + errdata.message);
    });
}

/**
 * Fill user table body with values
 * @param {UserDB[]} vv values to fill
 */
function fill_usertablebody(vv) {
    $('#usertablebody').empty();

    if (!Array.isArray(vv) || vv.length === 0) {
        $('#btnExport').prop('disabled', true);
        return;
    }
    vv.forEach(item => {
        const row = `<tr>
                     <td>${item.index}</td>
                     <td>${item.username}</td>
                     <td>${item.location}</td>
                     <td>${item.airline_tags}</td>
                     <td>${item.city_tags}</td>
                     <td>${item.messagebank_ann_id}</td>
                     <td>${item.broadcastzones}</td>
                     </tr>`;
        $('#usertablebody').append(row);
        let $addedrow = $('#usertablebody tr:last');
        $addedrow.on('click', function () {
            if (window.selecteduserrow) {
                window.selecteduserrow.find('td').css('background-color', '');
                if (window.selecteduserrow.is($(this))) {
                    window.selecteduserrow = null;
                    $('#btnRemove').prop('disabled', true);
                    $('#btnEdit').prop('disabled', true);
                    return;
                }
            }
            $(this).find('td').css('background-color', '#ffeeba');
            window.selecteduserrow = $(this);
            $('#btnRemove').prop('disabled', false);
            $('#btnEdit').prop('disabled', false);
        });
    });
    $('#tablesize').text("Table Size: " + vv.length);
    $('#btnExport').prop('disabled', false);
}

/**
 * Reload UserDB from server with date and filter
 * @param {String} APIURL API URL endpoint , default "UserManagement/"
 */
function reloaduserDB(APIURL = "UserManagement/") {
    window.userdb = [];
    fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => {
        if (Array.isArray(okdata)) {
            window.userdb.push(...okdata);
            fill_usertablebody(window.userdb);
        }
    }, (errdata) => {
        alert("Error loading user database : " + errdata.message);
    });
}

$(document).ready(function () {
    console.log("usermanagement.js ready");
    get_airlinetags();
    get_citytags();
    get_messagebankids();
    get_broadcastzones_descriptions();


    let $usertablebody = $('#usertablebody');
    let $finduser = $('#finduser');
    let $btnClear = $('#btnClear');
    let $btnAdd = $('#btnAdd');
    let $btnRemove = $('#btnRemove');
    let $btnEdit = $('#btnEdit');
    let $btnExport = $('#btnExport');
    let $btnImport = $('#btnImport');
    let APIURL = "UserManagement/";

    // add / edit modal elements
    let $addmodal = $('#addmodal');
    let $modalindex = $('#modalindex');
    let $modalusername = $('#modalusername');
    let $modalpassword = $('#modalpassword');
    let $modalverifypassword = $('#modalverifypassword');
    let $modallocation = $('#modallocation');
    let $modalairlinetags = $('#modalairlinetags');
    let $modalcitytags = $('#modalcitytags');
    let $modalmessagebank = $('#modalmessagebank');
    let $modalbroadcastzones = $('#modalbroadcastzones');
    let $btnShowSoundbankModal = $('#btnShowSoundbankModal');
    let $btnShowMessagebankModal = $('#btnShowMessagebankModal');
    let $btnShowBroaadcastZoneModal = $('#btnShowBroaadcastZoneModal');


    function clearAddModal() {
        $modalindex.val("");
        $modalusername.val("");
        $modalpassword.val("");
        $modalverifypassword.val("");
        $modalairlinetags.val("");
        $modalcitytags.val("");
        $modalmessagebank.val("");
        $modalbroadcastzones.val("");
        $modallocation.val("");
    }

    // soundbank selection modal elements
    let $soundbankmodal = $('#soundbankmodal');
    let $citylist = $('#citylist');
    let $airlinelist = $('#airlinelist');

    function fill_citylist() {
        $citylist.empty();
        citytags.forEach(tag => {
            let value = `${tag.value} [${tag.key}]`;
            const row = `<div class="form-check">
                         <input class="form-check-input citytagcheckbox" type="checkbox" value="${tag.key}" id="citytag_${tag.key}">
                         <label class="form-check-label" for="citytag_${tag.key}">
                           ${value}
                         </label>
                       </div>`;
            $citylist.append(row);
        });
    }

    function fill_airlinelist() {
        $airlinelist.empty();
        airlinetags.forEach(tag => {
            let value = `${tag.value} [${tag.key}]`;
            const row = `<div class="form-check">
                         <input class="form-check-input airlinetagcheckbox" type="checkbox" value="${tag.key}" id="airlinetag_${tag.key}">
                         <label class="form-check-label" for="airlinetag_${tag.key}">
                           ${value}
                         </label>
                       </div>`;
            $airlinelist.append(row);
        });
    }

    // broadcast zone selection modal elements
    let $broadcastzonemodal = $('#broadcastzonemodal');
    let $broadcastzonelist = $('#broadcastzonelist');

    function fill_broadcastzonelist() {
        $broadcastzonelist.empty();
        broadcastzones.forEach(desc => {
            const row = `<div class="form-check">
                         <input class="form-check-input broadcastzonecheckbox" type="checkbox" value="${desc}" id="broadcastzone_${desc}">
                         <label class="form-check-label" for="broadcastzone_${desc}">
                           ${desc}
                         </label>
                       </div>`;
            $broadcastzonelist.append(row);
        });
    }


    // messagebank selection modal elements
    let $messagebankmodal = $('#messagebankmodal');
    let $messagebanklist = $('#messagebanklist');

    function fill_messagebanklist() {
        $messagebanklist.empty();
        messagebankids.forEach(id => {
            let value = `${id.value} [${id.key}]`;
            const row = `<div class="form-check">
                         <input class="form-check-input messagebankidcheckbox" type="checkbox" value="${id.key}" id="messagebankid_${id.key}">
                         <label class="form-check-label" for="messagebankid_${id.key}">
                           ${value}
                         </label>
                       </div>`;
            $messagebanklist.append(row);
        });
    }


    $usertablebody.empty();
    reloaduserDB();
    $finduser.on('input', function () {
        let searchTerm = $(this).val().toLowerCase();
        if (searchTerm.length > 0) {
            let filteredUsers = window.userdb.filter(user =>
                user.username.toLowerCase().includes(searchTerm) ||
                user.airline_tags.toLowerCase().includes(searchTerm) ||
                user.city_tags.toLowerCase().includes(searchTerm)
                //user.messagebank_ann_id.toLowerCase().includes(searchTerm) ||
                //user.broadcastzones.toLowerCase().includes(searchTerm)
            );
            fill_usertablebody(filteredUsers);
        } else {
            fill_usertablebody(window.userdb);
        }

    });

    /**
     * Show modal dialog for soundbank, messagebank, broadcastzone selection
     * @param {boolean} editmode if true, edit mode, else add mode
     * @param {number} index index of user to edit, default 0
     */
    function modalshow(editmode = false, index=0) {
        // event on click btnShowSoundbankModal
        $btnShowSoundbankModal.on('click', function () {
            $soundbankmodal.modal('show');
            fill_citylist();
            fill_airlinelist();

            let airline = $modalairlinetags.val().trim();
            let city = $modalcitytags.val().trim();
            if (airline.length > 0) {
                let airlinekeys = airline.split(";");
                $('#airlinelist input[type=checkbox]').each(function () {
                    let tag = $(this).val();
                    if (airlinekeys.includes(tag)) {
                        $(this).prop('checked', true);
                    }
                });
            }
            if (city.length > 0) {
                let citykeys = city.split(";");
                $('#citylist input[type=checkbox]').each(function () {
                    let tag = $(this).val();
                    if (citykeys.includes(tag)) {
                        $(this).prop('checked', true);
                    }
                });
            }

            $soundbankmodal.on('click.soundbankselectionsave', '#soundbankselectionsave', function () {
                let selected_airlinetags = [];
                $('#airlinelist input[type=checkbox]:checked').each(function () {
                    selected_airlinetags.push($(this).val());
                });
                let selected_citytags = [];
                $('#citylist input[type=checkbox]:checked').each(function () {
                    selected_citytags.push($(this).val());
                });

                //console.log("Selected airline tags: ", selected_airlinetags);
                //console.log("Selected city tags: ", selected_citytags);

                if (selected_airlinetags.length == 0 || selected_citytags.length == 0) {
                    alert("Please select at least one airline tag and one city tag.");
                    return;
                }

                let airlinevalue = selected_airlinetags.join(";");
                let cityvalue = selected_citytags.join(";");
                $modalairlinetags.val(airlinevalue);
                $modalcitytags.val(cityvalue);


                $soundbankmodal.modal('hide');
            });
            $soundbankmodal.on('click.soundbankselectionclose', '#soundbankselectionclose', function () {
                $soundbankmodal.modal('hide');
            });
        });
        // event on click btnShowMessagebankModal
        $btnShowMessagebankModal.on('click', function () {
            $messagebankmodal.modal('show');
            fill_messagebanklist();
            let messagebank = $modalmessagebank.val().trim();
            if (messagebank.length > 0) {
                let messagebankkeys = messagebank.split(";");
                $('#messagebanklist input[type=checkbox]').each(function () {
                    let id = $(this).val();
                    if (messagebankkeys.includes(id)) {
                        $(this).prop('checked', true);
                    }
                });
            }

            $messagebankmodal.on('click.messagebankselectionsave', '#messagebankselectionsave', function () {
                let selected_messagebankids = [];
                $('#messagebanklist input[type=checkbox]:checked').each(function () {
                    selected_messagebankids.push($(this).val());
                });
                //console.log("Selected message bank IDs: ", selected_messagebankids);
                if (selected_messagebankids.length == 0) {
                    alert("Please select at least one message bank ID.");
                    return;
                }
                let messagebankvalue = selected_messagebankids.join(";");
                $modalmessagebank.val(messagebankvalue);

                $messagebankmodal.modal('hide');
            });
            $messagebankmodal.on('click.messagebankselectionclose', '#messagebankselectionclose', function () {
                $messagebankmodal.modal('hide');
            });
        });
        // event on click btnShowBroaadcastZoneModal
        $btnShowBroaadcastZoneModal.on('click', function () {
            $broadcastzonemodal.modal('show');
            fill_broadcastzonelist();
            let broadcastzones = $modalbroadcastzones.val().trim();
            if (broadcastzones.length > 0) {
                let broadcastzonesvalues = broadcastzones.split(";");
                $('#broadcastzonelist input[type=checkbox]').each(function () {
                    let desc = $(this).val();
                    if (broadcastzonesvalues.includes(desc)) {
                        $(this).prop('checked', true);
                    }
                });
            }
            $broadcastzonemodal.on('click.broadcastzoneselectionsave', '#broadcastzoneselectionsave', function () {
                let selected_broadcastzones = [];
                $('#broadcastzonelist input[type=checkbox]:checked').each(function () {
                    selected_broadcastzones.push($(this).val());
                });
                //console.log("Selected broadcast zones: ", selected_broadcastzones);
                if (selected_broadcastzones.length == 0) {
                    alert("Please select at least one broadcast zone.");
                    return;
                }
                let broadcastzonesvalue = selected_broadcastzones.join(";");
                $modalbroadcastzones.val(broadcastzonesvalue);
                $broadcastzonemodal.modal('hide');
            });
            $broadcastzonemodal.on('click.broadcastzoneselectionclose', '#broadcastzoneselectionclose', function () {
                $broadcastzonemodal.modal('hide');
            });
        });

        // event on Click save button
        $addmodal.on('click.usermanagementsave', '#usermanagementsave', function () {
            let username = $modalusername.val().trim();
            let password = $modalpassword.val();
            let verifypassword = $modalverifypassword.val();
            let location = $modallocation.val().trim();
            let airline_tags = $modalairlinetags.val().trim();
            let city_tags = $modalcitytags.val().trim();
            let messagebank_ann_id = $modalmessagebank.val().trim();
            let broadcastzones = $modalbroadcastzones.val().trim();

            if (username.length === 0) {
                alert("Username cannot be empty");
                return;
            }
            if (password.length === 0 || verifypassword.length === 0) {
                alert("Password cannot be empty");
                return;
            }
            if (password !== verifypassword) {
                alert("Password and Verify Password do not match");
                return;
            }
            if (airline_tags.length === 0) {
                alert("Airline tags cannot be empty");
                return;
            }
            if (city_tags.length === 0) {
                alert("City tags cannot be empty");
                return;
            }
            if (messagebank_ann_id.length === 0) {
                alert("Message bank ANN_ID cannot be empty");
                return;
            }
            if (broadcastzones.length === 0) {
                alert("Broadcast zones cannot be empty");
                return;
            }

            /**
             * @type {UserDB}
             */
            let ll = {
                index: index,
                username: username,
                password: password,
                location: location,
                airline_tags: airline_tags,
                city_tags: city_tags,
                messagebank_ann_id: messagebank_ann_id,
                broadcastzones: broadcastzones
            }

            if (editmode) {
                fetchAPI(APIURL + "UpdateByIndex/" + index, "PATCH", {}, ll, (okdata) => {
                    alert("Success update User : " + okdata.message);
                    reloaduserDB();
                }, (errdata) => {
                    alert("Error update User : " + errdata.message);
                });

            } else {
                fetchAPI(APIURL + "Add", "POST", {}, ll, (okdata) => {
                    alert("Success add User : " + okdata.message);
                    reloaduserDB();
                }, (errdata) => {
                    alert("Error add User : " + errdata.message);
                });
            }


            $addmodal.modal('hide');
        });
        // event on Click close button
        $addmodal.on('click.usermanagementclose', '#usermanagementclose', function () {
            $addmodal.modal('hide');
        });
    }

    $btnClear.on('click', function () {
        DoClear(APIURL, "UserManagement", (okdata) => {
            reloaduserDB();
            alert("Success clear user management : " + okdata.message);
        }, (errdata) => {
            alert("Error clear user management : " + errdata.message);
        });
    });
    $btnAdd.click(() => {
        $addmodal.modal('show');
        clearAddModal();
        modalshow(false,0);
    });
    $btnRemove.click(() => {
        if (window.selecteduserrow) {
            let cells = window.selecteduserrow.find('td');
            /** @type {UserDB} */
            let user = {
                index: parseInt(cells.eq(0).text()),
                username: cells.eq(1).text(),
                password: cells.eq(2).text(),
                airline_tags: cells.eq(3).text(),
                city_tags: cells.eq(4).text(),
                messagebank_ann_id: cells.eq(5).text(),
                broadcastzones: cells.eq(6).text()
            }
            if (confirm(`Are you sure to delete user [${user.index}] Username=${user.username} ?`)) {
                fetchAPI(APIURL + "DeleteByIndex/" + user.index, "DELETE", {}, null, (okdata) => {
                    reloaduserDB();
                    alert("Success delete user : " + okdata.message);
                }, (errdata) => {
                    alert("Error delete user : " + errdata.message);
                });
            }
        } else {
            alert("No user selected");
        }
    });
    $btnEdit.click(() => {
        if (window.selecteduserrow) {
            let cells = window.selecteduserrow.find('td');
            let index = parseInt(cells.eq(0).text());
            if (isNaN(index) || index <= 0) {
                alert("Invalid user index");
                return;
            }
            /** @type {UserDB} */
            let user = window.userdb.find(u => u.index === index);
            if (!user) {
                alert("User not found");
                return;
            }
            if (confirm(`Are you sure to edit user [${user.index}] Username=${user.username} ?`)) {
                $addmodal.modal('show');
                // fill modal with user data
                $modalindex.val(user.index);
                $modalusername.val(user.username);
                $modalpassword.val(user.password);
                $modalverifypassword.val(user.password);
                $modallocation.val(user.location);
                $modalairlinetags.val(user.airline_tags);
                $modalcitytags.val(user.city_tags);
                $modalmessagebank.val(user.messagebank_ann_id);
                $modalbroadcastzones.val(user.broadcastzones);
                modalshow(true, user.index);

            }
        } else {
            alert("No user selected");
        }
    });
    $btnExport.click(() => {
        DoExport(APIURL, "user.xlsx", {});
    });
    $btnImport.click(() => {
        DoImport(APIURL, (okdata) => {
            reloaduserDB();
            alert("Success import user : " + okdata.message);
        }, (errdata) => {
            alert("Error importing user from XLSX : " + errdata.message);
        });
    });
});