/**
 * @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 = [];

dtUserManagement = null;

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

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

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

/**
 * Get Broadcast Zones descriptions from server
 */
function get_broadcastzones_descriptions() {
    window.broadcastzones = [];
    fetchAPI("BroadcastZones/" + "BroadcastZoneDescriptions", "GET", {}, null, (okdata) => {
        if (Array.isArray(okdata)) {
            window.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) {
    dtUserManagement.clear();

    if (!Array.isArray(vv) || vv.length === 0) {
        $('#btnExport').prop('disabled', true);
        return;
    }

    dtUserManagement.rows.add(vv);
    dtUserManagement.draw();


    $('#usertable tbody').off('click').on('click', 'tr', function () {
        // if no data
        if (!dtUserManagement) return;
        // if user click an empty row
        if (!dtUserManagement.data().any()) return;

        const selected = dtUserManagement.row(this)
        // toggle behaviour - unselect if already selected
        if ($(this).hasClass('row-selected')) {
            $(this).removeClass('row-selected').find('td').css('background-color', '');
            window.selecteduserrow = null;
            $('#btnRemove').prop('disabled', true);
            $('#btnEdit').prop('disabled', true);
            return;
        }

        // unselect previously selected row
        $('#usertable tbody tr.row-selected').removeClass('row-selected').find('td').css('background-color', '');

        $(this).addClass('row-selected').find('td').css('background-color', '#ffeeba');
        window.selecteduserrow = selected.data();
        $('#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();

    if (dtUserManagement === null) {
        dtUserManagement = new DataTable('#usertable', {
            data: [],
            pageLength: 25,
            columns: [
                { title: "No", data: "index" },
                { title: "Username", data: "username" },
                { title: "Location", data: "location" },
                { title: "Airline", data: "airline_tags" },
                { title: "City", data: "city_tags" },
                { title: "Messagebank", data: "messagebank_ann_id" },
                { title: "Broadcast Zones", data: "broadcastzones" }
            ]
        });
    }


    let APIURL = "UserManagement/";

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

    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

    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

    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').off('input').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').off('click').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').off('click.soundbankselectionsave').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').off('click.soundbankselectionclose').on('click.soundbankselectionclose', '#soundbankselectionclose', function () {
                $('#soundbankmodal').modal('hide');
            });
        });
        // event on click btnShowMessagebankModal
        $('#btnShowMessagebankModal').off('click').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').off('click.messagebankselectionsave').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').off('click.messagebankselectionclose').on('click.messagebankselectionclose', '#messagebankselectionclose', function () {
                $('#messagebankmodal').modal('hide');
            });
        });
        // event on click btnShowBroaadcastZoneModal
        $('#btnShowBroaadcastZoneModal').off('click').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').off('click.broadcastzoneselectionsave').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').off('click.broadcastzoneselectionclose').on('click.broadcastzoneselectionclose', '#broadcastzoneselectionclose', function () {
                $('#broadcastzonemodal').modal('hide');
            });
        });

        // event on Click save button
        $('#addmodal').off('click.usermanagementsave').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').off('click.usermanagementclose').on('click.usermanagementclose', '#usermanagementclose', function () {
            $('#addmodal').modal('hide');
        });
    }

    $('#btnClear').off('click').on('click', function () {
        DoClear(APIURL, "UserManagement", (okdata) => {
            reloaduserDB();
            alert("Success clear user management : " + okdata.message);
        }, (errdata) => {
            alert("Error clear user management : " + errdata.message);
        });
    });
    $('#btnAdd').off('click').on('click', () => {
        $('#addmodal').modal('show');
        clearAddModal();
        modalshow(false, 0);
    });
    $('#btnRemove').off('click').on('click', () => {
        if (window.selecteduserrow) {

            /** @type {UserDB} */
            let user = {
                index: window.selecteduserrow.index,
                username: window.selecteduserrow.username
            }
            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').off('click').on('click', () => {
        if (window.selecteduserrow) {
            let index = window.selecteduserrow.index;
            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').off('click').on('click', () => {
        DoExport(APIURL, "user.xlsx", {});
    });
    $('#btnImport').off('click').on('click', () => {
        DoImport(APIURL, (okdata) => {
            reloaduserDB();
            alert("Success import user : " + okdata.message);
        }, (errdata) => {
            alert("Error importing user from XLSX : " + errdata.message);
        });
    });
});