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

/**
 * Fill messagebank table body with values
* @param {MessageBank[]} vv values to fill
*/
function fill_messagebanktablebody(vv) {
    $('#messagebanktablebody').empty();
    if (!Array.isArray(vv) || vv.length === 0) return;
    vv.forEach(item => {
        const row = `<tr>
                     <td>${item.index}</td>
                     <td>${item.description}</td>
                     <td>${item.language}</td>
                     <td>${item.aNN_ID}</td>
                     <td>${item.voice_Type}</td>
                     <td>${item.message_Detail}</td>
                     <td>${item.message_TAGS}</td>
                            </tr>`;
        $('#messagebanktablebody').append(row);
        let $addedrow = $('#messagebanktablebody tr:last');
        $addedrow.click(function () {
            if (window.selectedmessagerow) {
                window.selectedmessagerow.find('td').css('background-color', '');
                if (window.selectedmessagerow.is($(this))) {
                    window.selectedmessagerow = null;
                    $('#btnRemove').prop('disabled', true);
                    $('#btnEdit').prop('disabled', true);
                    return;
                }
            }
            $addedrow.find('td').css('background-color', '#ffeeba');
            window.selectedmessagerow = $addedrow;
            $('#btnRemove').prop('disabled', false);
            $('#btnEdit').prop('disabled', false);
        });
    });

    $('#tablesize').text("Table Size: " + vv.length);
}

/**
 * @typedef {Object} MessageBank
 * @property {string} Description - Description of the messagebank entry
 * @property {string} Language - Language code 
 * @property {number} ANN_ID - ANN ID (1-100)
 * @property {string} Voice_Type - Voice type
 * @property {string} Message_Detail - Detailed message constructed from categories and phrases
 * @property {string} Message_TAGS - Tags associated with the message
 */




$(document).ready(function () {
    console.log("messagebank.js loaded");
    $('#messagebanktablebody').empty();
    window.selectedmessagerow = null;
    let $btnClear = $('#btnClear');
    let $btnAdd = $('#btnAdd');
    let $btnRemove = $('#btnRemove');
    let $btnEdit = $('#btnEdit');
    let $btnExport = $('#btnExport');
    let $btnImport = $('#btnImport');
    $btnRemove.prop('disabled', true);
    $btnEdit.prop('disabled', true);
    let APIURL = "MessageBank/";
    let $findmessage = $('#findmessage');

    // modal for add / edit messagebank
    let $modal = $('#messagebankmodal');
    // text input, disabled by default
    let $messageindex = $modal.find('#messageindex');
    // text input
    let $messagedescription = $modal.find('#messagedescription');
    // select input, options loaded from languages[]
    let $messagelanguage = $modal.find('#messagelanguage');
    // number input from 1 to 100
    let $messageannid = $modal.find('#messageannid');
    // select input, options loaded from voiceTypes[]
    let $messagevoicetype = $modal.find('#messagevoicetype');
    // list <ul> of available categories and phrases
    let $messageavailablevariables = $modal.find('#messageavailablevariables');
    // list <ul> of selected categories and phrases
    let $messageselectedvariables = $modal.find('#messageselectedvariables');
    // for clearing messageselectedvariables
    let $btnclearlist = $modal.find('#btnclearlist');
    // for removing selected item from messageselectedvariables
    let $btnremovefromlist = $modal.find('#btnremovefromlist');
    // for adding selected item from messageavailablevariables to messageselectedvariables
    let $btnaddtolist = $modal.find('#btnaddtolist');

    /**
     * Refill messageavailablevariables options from categories[] 
     * and soundbankdata with category "Phrase" if messagelanguage and messagevoicetype are selected
     * @param {Function} cbLoaded - callback function when phrases are loaded
     */
    function refill_messageavailablevariables(cbLoaded) {
        $messageavailablevariables.empty();
        categories.forEach(cat => {
            if ("Phrase" === cat) return; // skip Phrase category
            if ("Airline_Code" === cat) cat = "Flight_Number"; // revisi 15012026 karena inconsistensi penamaan tag
            let displayCat = `[${cat}]`.toUpperCase();
            $messageavailablevariables.append(new Option(text=displayCat, value=displayCat));
        });
        // tambah [ETAD], [BCB]  revisi 19012026
        $messageavailablevariables.append(new Option(text='[ETAD]', value='[ETAD]'));
        $messageavailablevariables.append(new Option(text='[BCB]', value='[BCB]'));

        let lang = $messagelanguage.val();
        let vt = $messagevoicetype.val();
        if (lang && lang.length > 0 && vt && vt.length > 0) {
            fetchAPI(`SoundBank/GetPhrases/${lang}/${vt}`, "GET", {}, null, (okdata) => {
                    if (Array.isArray(okdata) && okdata.length > 0) {
                        console.log(`Loaded ${okdata.length} phrases from soundbank for language=${lang} and voiceType=${vt}`);
                        //console.log(JSON.stringify(okdata));
                        okdata.forEach(sb => {
                            if (sb.description && sb.description.length > 0) {
                                let v1 = sb.tag.toUpperCase();
                                let t1 = sb.description+` [${v1}]`;
                                let t2 = sb.description;
                                $messageavailablevariables.append($('<option>', { value: v1, text: t1, title: t2 }));
                            }
                        });
                        if (cbLoaded && typeof cbLoaded === 'function') {
                            cbLoaded();
                        }
                    }
                }, (errdata) => {
                    //alert("Error loading phrases from soundbank : " + errdata.message);
                    if (cbLoaded && typeof cbLoaded === 'function') {
                        cbLoaded();
                    }
                });
        } else {
            if (cbLoaded && typeof cbLoaded === 'function') {
                cbLoaded();
            }
        }
        


    }

    /**
 * Get data from modal inputs and return as MessageBank object
 * @returns {MessageBank} messagebank object or null if validation fails
 */
    function GetDataFromModal() {
        let description = $messagedescription.val().trim();
        let language = $messagelanguage.val();
        let annid = parseInt($messageannid.val());
        let voicetype = $messagevoicetype.val();
        let messagedetail = "";
        let messagetags = "";

        // iterate messageselectedvariables children
        $messageselectedvariables.children().each(function () {
            let text = $(this).text().trim();
            let value = $(this).val().trim();
            console.log('selected text:' + text + ', value:' + value);
            if (text.length > 0) {
                if (value.length > 0) {
                    messagetags += (messagetags.length > 0 ? " " : "") + value;
                    messagedetail += (messagedetail.length > 0 ? " " : "") + text;
                }

            }
        });

        if (description.length === 0) {
            alert("Description cannot be empty");
            return null;
        }
        if (!language) {
            alert("Language cannot be empty");
            return null;
        }
        if (isNaN(annid) || annid < 1 || annid > 100) {
            alert("ANN_ID must be a number between 1 and 100");
            return null;
        }
        if (!voicetype) {
            alert("Voice Type cannot be empty");
            return null;
        }
        if (messagedetail.length === 0 || messagetags.length === 0) {
            alert("Message haven't been constructed, please add categories and phrases");
            return null;
        }


        let mb = {
            Description: description,
            Language: language,
            ANN_ID: annid,
            Voice_Type: voicetype,
            Message_Detail: messagedetail,
            Message_TAGS: messagetags
        };
        console.log("Constructed MessageBank object:", JSON.stringify(mb));
        return mb;
    }

    /**
     * Clear message modal to default state
     */
    function clearMessageModal() {
        $messageindex.val('').prop('disabled', true);
        $messagedescription.val('').prop('disabled', false);
        // fill messagelanguage options from languages[]
        $messagelanguage.empty().prop('disabled', false);
        window.languages.forEach(lang => {
            $messagelanguage.append(new Option(lang, lang));
        });
        $messagelanguage.val(null).prop('disabled', false);
        $messagelanguage.on('change', function () {
            refill_messageavailablevariables();
        });
        // set default annid to 1
        $messageannid.val(1).prop('disabled', false);
        // fill messagevoicetype options from voiceTypes[]
        $messagevoicetype.empty().prop('disabled', false);
        window.voiceTypes.forEach(vt => {
            $messagevoicetype.append(new Option(vt, vt));
        });
        $messagevoicetype.val(null).prop('disabled', false);
        $messagevoicetype.on('change', function () {
            refill_messageavailablevariables();
        });

        refill_messageavailablevariables();
        $messageselectedvariables.empty();

        // event on btnclearlist
        $btnclearlist.off('click').on('click', function () {
            if ($messageselectedvariables.children().length > 0) {
                if (confirm("Are you sure want to clear selected variables list?")) {
                    $messageselectedvariables.empty();
                }
            }
        });

        // event on btnremovefromlist
        $btnremovefromlist.off('click').on('click', function () {
            let $selected = $messageselectedvariables.find('option:selected');
            if ($selected.length > 0) {
                $selected.remove();
            }

        });

        // event on btnaddtolist
        $btnaddtolist.off('click').on('click', function () {
            let $selected = $messageavailablevariables.find('option:selected');
            if ($selected.length > 0) {
                $selected.each(function () {
                    $messageselectedvariables.append($(this).clone());
                });
            }
        });
    }


    $findmessage.on('input', function () {
        let searchTerm = $findmessage.val().toLowerCase();
        if (searchTerm.length > 0) {
            window.selectedmessagerow = null;
            let filtered = window.messagebankdata.filter(item => item.description.toLowerCase().includes(searchTerm) || item.message_Detail.toLowerCase().includes(searchTerm) || item.message_TAGS.toLowerCase().includes(searchTerm));
            fill_messagebanktablebody(filtered);
        } else {
            window.selectedmessagerow = null;
            fill_messagebanktablebody(window.messagebankdata);
        }
    });


    reloadMessageBank(APIURL, () => fill_messagebanktablebody(window.messagebankdata));
    $btnClear.click(() => {
        DoClear(APIURL, "Messagebank", (okdata) => {
            reloadMessageBank(APIURL, () => fill_messagebanktablebody(window.messagebankdata));
            alert("Success clear messagebank : " + okdata.message);
        }, (errdata) => {
            alert("Error clear messagebank : " + errdata.message);
        });

    });


    $btnAdd.click(() => {

        $modal.modal('show');
        clearMessageModal();
        

        $('#closemodalbutton').off('click').on('click', function () {
            console.log('Close button clicked')
            $modal.modal('hide');
        });
        $('#savemodalbutton').off('click').on('click', function () {
            console.log('Save button clicked')
            let mb = GetDataFromModal();
            if (!mb) {
                return;
            }
            // send to server using fetchAPI
            fetchAPI(APIURL + "Add", "POST", {}, mb, (okdata) => {
                reloadMessageBank(APIURL, () => fill_messagebanktablebody(window.messagebankdata));
                alert("Success add new messagebank : " + okdata.message);
            }, (errdata) => {
                alert("Error add new messagebank : " + errdata.message);
            });

            $modal.modal('hide');
        });

    });
    $btnRemove.click(() => {
        if (window.selectedmessagerow) {
            let cells = window.selectedmessagerow.find('td');
            /** @type {MessageBank} */
            let mb = {
                index: Number(cells.eq(0).text()),
                description: cells.eq(1).text(),
                language: cells.eq(2).text(),
                aNN_ID: parseInt(cells.eq(3).text()),
                voice_Type: cells.eq(4).text(),
                message_Detail: cells.eq(5).text(),
                message_TAGS: cells.eq(6).text()
            }

            if (confirm(`Are you sure to delete messagebank [${mb.index}] Description=${mb.description}? ANN_ID=${mb.aNN_ID} Language=${mb.language} Voice_Type=${mb.voice_Type} `)) {
                fetchAPI(APIURL + "DeleteByIndex/" + mb.index, "DELETE", {}, null, (okdata) => {
                    reloadMessageBank(APIURL, () => fill_messagebanktablebody(window.messagebankdata));
                    alert("Success delete messagebank : " + okdata.message);
                }, (errdata) => {
                    alert("Error delete messagebank : " + errdata.message);
                });
            }
        }
    });
    $btnEdit.click(() => {
        if (window.selectedmessagerow) {
            let cells = window.selectedmessagerow.find('td');
            /** @type {MessageBank} */
            let mb = {
                index: Number(cells.eq(0).text()),
                description: cells.eq(1).text(),
                language: cells.eq(2).text(),
                aNN_ID: parseInt(cells.eq(3).text()),
                voice_Type: cells.eq(4).text(),
                message_Detail: cells.eq(5).text(),
                message_TAGS: cells.eq(6).text()
            }
            if (confirm(`Are you sure to edit messagebank [${mb.index}] Description=${mb.description} ANN_ID=${mb.aNN_ID} Language=${mb.language} Voice_Type=${mb.voice_Type} `)) {
                $modal.modal('show');

                clearMessageModal();
                // Fill modal fields with selected messagebank data
                $messageindex.val(mb.index).prop('disabled', true);
                // Edit mode cant change description, language, voicetype, annid
                $messagedescription.val(mb.description).prop('disabled', true);
                $messagelanguage.val(mb.language).prop('disabled', true);
                $messagevoicetype.val(mb.voice_Type).prop('disabled', true);
                $messageannid.val(mb.aNN_ID).prop('disabled', true);
                // Refill message available variables
                refill_messageavailablevariables(() => {
                // Fill messageselectedvariables from message_Detail and message_TAGS
                $messageselectedvariables.empty();
                if (mb.message_Detail && mb.message_Detail.length > 0) {
                    if (mb.message_TAGS && mb.message_TAGS.length > 0) {
                        let tags = mb.message_TAGS.split(" ");
                        tags.forEach((tag, idx) => {
                            //console.log(`Restoring tag[${idx}]: ${tag}`);
                            let tagLower = tag.toLowerCase();
                            let isfound = false;
                            if (tagLower==="[airline_code]") {
                                tagLower = "[flight_number]";
                            }
                            if (tagLower==="[gatenumber]") {
                                tagLower = "[gate]";
                            }
                            // find <option> in messageavailablevariables with value=tag
                            $messageavailablevariables.find('option').each(function () {
                                let valx = $(this).val().toLowerCase();
                                //console.log(`Available option value: ${valx}`);
                                if (valx === tagLower) {
                                    isfound = true;
                                    //console.log(`Found matching option for tag: ${tag}`);
                                    $messageselectedvariables.append($(this).clone());
                                }
                            });
                            // if (isfound) {
                            //     console.log(`Appended tag to selected variables: ${tag}`);
                            // } else {
                            //     console.log(`Tag not found in available variables: ${tag}`);
                            // }
                        });
                    }
                }
                });
                

                // Save button event
                $('#savemodalbutton').off('click').on('click', function () {
                    console.log('Save button clicked')
                    let mbUpdate = GetDataFromModal();
                    if (!mbUpdate) {
                        return;
                    }
                    fetchAPI(APIURL + "UpdateByIndex/" + mb.index, "PATCH", {}, mbUpdate, (okdata) => {
                        reloadMessageBank(APIURL, () => fill_messagebanktablebody(window.messagebankdata));
                        alert("Success edit messagebank : " + okdata.message);
                    }, (errdata) => {
                        alert("Error edit messagebank : " + errdata.message);
                    });
                    $modal.modal('hide');
                });
                $('#closemodalbutton').off('click').on('click', function () {
                    console.log('Close button clicked')
                    $modal.modal('hide');
                });

            }
        }
    });
    $btnExport.click(() => {
        DoExport(APIURL, "messagebank.xlsx", {});
    });
    $btnImport.click(() => {
        DoImport(APIURL, (okdata) => {
            reloadMessageBank(APIURL, () => fill_messagebanktablebody(window.messagebankdata));
            alert("Success import messagebank : " + okdata.message);
        }, (errdata) => {
            alert("Error importing messagebank from XLSX : " + errdata.message);
        });
    });
});