window.lastplaybutton = null;

/**
 * Load setting language dropdown
 */
function load_setting_language() {
    $("#setting_language").empty().off('change');

    getLanguages(() => {
        window.languages.forEach((lang) => {
            let $option = $("<option></option>").attr("value", lang).text(lang);
            $("#setting_language").append($option);
        });
        $("#setting_language").on('change', function () {
            change_droparea_enable();
        });
    });
}

/**
 * Load setting category dropdown
 */
function load_setting_category() {
    $("#setting_category").empty().off('change');
    getCategories(() => {
        window.categories.forEach((cat) => {
            let $option = $("<option></option>").attr("value", cat).text(cat);
            $("#setting_category").append($option);
        });
        $("#setting_category").on('change', function () {
            change_droparea_enable();
        });
    });
}

/**
 * Load setting voice dropdown
 */
function load_setting_voice() {
    $("#setting_voice").empty().off('change');
    getVoiceTypes(() => {
        window.voiceTypes.forEach((voice) => {
            let $option = $("<option></option>").attr("value", voice).text(voice);
            $("#setting_voice").append($option);
        });
        $("#setting_voice").on('change', function () {
            change_droparea_enable();
        });
    });
}

/**
 * Get soundbank files from server based on category, language, and voice
 * @param {String} category 
 * @param {String} language 
 * @param {String} voice 
 */
function getSoundBankFiles(category, language, voice) {
    let URL = `FileManager/ListSoundbank/${language}/${voice}/${category}`;
    fetchAPI(URL, "GET", {}, null, (okdata) => {
        $("#file-list").empty();
        if (Array.isArray(okdata) && okdata.length > 0) {
            okdata.forEach((file) => {
                // get only the file name from the full path
                let fileName = file.split(/[/\\]/).pop();
                let $li = $("<li></li>").text(fileName);
                $("#file-list").append($li);
            });
        }
    }, (errdata) => {
        alert("Error getting soundbank files : " + errdata.message);
    });
}

/**
 * Enable or disable drop area based on selections
 */
function change_droparea_enable() {
    let selected_category = $("#setting_category").val();
    let selected_language = $("#setting_language").val();
    let selected_voice = $("#setting_voice").val();
    $("#file-list").empty();
    $("#searchfilelist").val("");
    $("#searchfilelist").off('input').on('input', function () {
        let searchTerm = $(this).val().toLowerCase();
        $("#file-list li").each(function () {
            let fileName = $(this).text().toLowerCase();
            if (fileName.includes(searchTerm)) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
    if (selected_category && selected_language && selected_voice) {
        $("#drop-area").removeClass("disabled");
        getSoundBankFiles(selected_category, selected_language, selected_voice);
    } else {
        $("#drop-area").addClass("disabled");

    }
}


/**
 * Get Soundbank path from server
 */
function get_soundbank_path() {
    $("#setting_path").val("");
    fetchAPI("Settings/SoundbankDirectory", "GET", {}, null, (okdata) => {
        if (okdata.message && okdata.message.trim().length > 0) {
            let path = okdata.message.trim();
            $("#setting_path").val(path);
        }
    }, (errdata) => {
        alert("Error getting soundbank path : " + errdata.message);
    });
}

function download(path, filename) {
    let downloadurl = `/api/FileManager/${path}`;
    let reqdata = { filename: filename };
    fetch(downloadurl, {
        method: 'POST',
        headers: {},
        body: JSON.stringify(reqdata)
    })
        .then(response => {
            if (!response.ok) {
                throw new Error("Network response was not ok");
            }
            return response.blob();
        })
        .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            a.remove();
            window.URL.revokeObjectURL(url);
        })
        .catch(errdata => {
            alert("Error downloading paging result file: " + errdata.message);
        });
}
function play(path, filename, cbplay = null) {
    let playurl = `/api/FileManager/${path}`;
    let reqdata = { filename: filename };
    fetch(playurl, {
        method: 'POST',
        body: JSON.stringify(reqdata)
    }).then(response => {
        if (!response.ok) {
            throw new Error("Network response was not ok");
        }
        return response.blob();
    }).then(blob => {
        const url = window.URL.createObjectURL(blob);
        const player = document.getElementById("audioplayer");
        if (player) {
            player.pause();
            
            player.src = url;
            player.load();
            $("#audioplayer").show();
            player.play();
            player.onplay = () => {
                if (cbplay && typeof cbplay === "function") {
                    cbplay();
                }
            }
            player.onended = () => {
                console.log("Finished playing audio file: " + filename);
                window.URL.revokeObjectURL(url);
            };
            player.onerror = (e) => {
                alert("Error playing audio file: " + filename);
            };
        }

    }).catch(errdata => {
        alert("Error playing soundbank result file: " + errdata.message);
    });
}

function get_pagingresult_files() {
    const url = `FileManager/PagingResultList`;
    $("#tbody_resultpaging").empty();
    fetchAPI(url, "GET", {}, null, (okdata) => {
        if (Array.isArray(okdata) && okdata.length > 0) {
            okdata.forEach((file) => {
                let filename = file.split(/[/\\]/).pop();
                let $tr = $("<tr></tr>");
                let $tdtitle = $("<td></td>").text(filename);
                // add button inside td to download the file
                let $btndownload = $("<button></button>").addClass("btn btn-primary").html("<i class='fa fa-download'></i>");
                let $btnplay = $("<button></button>").addClass("btn btn-success pad-btn").html("<i class='fa fa-play'></i>");
                $btndownload.off('click').on('click', function () {
                    download("DownloadPagingResultFile", filename);
                });
                $btnplay.off('click').on('click', function () {
                    const $icon = $(this).find("svg");
                    if ($icon.hasClass("fa-stop")) {
                        // stop playback
                        const player = document.getElementById("audioplayer");
                        if (player) {
                            player.pause();
                            window.URL.revokeObjectURL(player.src);
                        }
                    } else {
                        // start playback
                        play("PlayPagingResultFile", filename, () => {
                            if (window.lastplaybutton){
                                if (window.lastplaybutton !== $(this)){
                                    const $lasticon = window.lastplaybutton.find("svg");
                                    $lasticon.removeClass("fa-stop").addClass("fa-play");
                                }
                            }
                            window.lastplaybutton = $(this);
                        });
                    }
                    $icon.toggleClass("fa-play fa-stop");
                });

                let $tdbutton = $("<td></td>").append($btndownload).append($btnplay).addClass("text-center");
                $tr.append($tdtitle);
                $tr.append($tdbutton);
                $("#tbody_resultpaging").append($tr);
            });
        }
    }, (errdata) => {
        alert("Error getting paging result files : " + errdata.message);
    });
}

function get_soundbankresult_files() {
    const url = `FileManager/SoundbankResultList`;
    $("#tbody_resultsoundbank").empty();
    fetchAPI(url, "GET", {}, null, (okdata) => {
        if (Array.isArray(okdata) && okdata.length > 0) {
            okdata.forEach((file) => {
                let filename = file.split(/[/\\]/).pop();
                let $tr = $("<tr></tr>");
                let $tdtitle = $("<td></td>").text(filename);
                // add button inside td to download and play the file
                let $btndownload = $("<button></button>").addClass("btn btn-primary").html("<i class='fa fa-download'></i>");
                let $btnplay = $("<button></button>").addClass("btn btn-success").html("<i class='fa fa-play'></i>");
                let $tdbutton = $("<td></td>").append($btndownload).append($btnplay).addClass("text-center");

                $btndownload.off('click').on('click', function () {
                    download("DownloadSoundbankResultFile", filename);
                });
                $btnplay.off('click').on('click', function () {
                    const $icon = $(this).find("svg");
                    if ($icon.hasClass("fa-stop")) {
                        // stop playback
                        const player = document.getElementById("audioplayer");
                        if (player) {
                            player.pause();
                            window.URL.revokeObjectURL(player.src);
                        }   
                    } else {
                        // start playback
                        play("PlaySoundbankResultFile", filename, () => {
                            if (window.lastplaybutton){
                                if (window.lastplaybutton !== $(this)){
                                    const $lasticon = window.lastplaybutton.find("svg");
                                    $lasticon.removeClass("fa-stop").addClass("fa-play");
                                }
                            } 
                            window.lastplaybutton = $(this);
                        });
                    }
                    $icon.toggleClass("fa-play fa-stop");
                });
                $tr.append($tdtitle);
                $tr.append($tdbutton);
                $("#tbody_resultsoundbank").append($tr);
            });
        }
    }, (errdata) => {
        alert("Error getting soundbank result files : " + errdata.message);
    });
}



$(document).ready(function () {
    console.log("filemanagement.js x3 loaded");
    
    load_setting_category();
    load_setting_language();
    load_setting_voice();
    get_soundbank_path();
    setTimeout(() => {
        change_droparea_enable();
    }, 1000);
    get_pagingresult_files();
    get_soundbankresult_files();
    $("#save_directory").off('click').on('click', function () {
        let new_path = $("#setting_path").val();
        if (new_path && new_path.trim().length > 0) {
            fetchAPI("Settings/SoundbankDirectory", "POST", {}, { directory: new_path }, (okdata) => {
                alert("Soundbank directory path saved successfully.");
            }, (errdata) => {
                alert("Error saving soundbank directory path : " + errdata.message);
            });
        } else {
            alert("Please enter a valid soundbank directory path.");
        }
    });
    $("#drop-area").on('dragover', function (e) {
        e.preventDefault();
        e.stopPropagation();
        $(this).addClass('dragover');
    }).on('dragleave', function (e) {
        e.preventDefault();
        e.stopPropagation();
        $(this).removeClass('dragover');
    }).on('drop', function (e) {
        e.preventDefault();
        e.stopPropagation();
        $(this).removeClass('dragover');
        if ($(this).hasClass('disabled')) {
            alert("Please select Category, Language, and Voice Type before uploading files.");
            return;
        }
        let lang = $("#setting_language").val().trim();
        let category = $("#setting_category").val().trim();
        let voice = $("#setting_voice").val().trim();
        let files = e.originalEvent.dataTransfer.files;
        if (lang && lang.length > 0) {
            if (category && category.length > 0) {
                if (voice && voice.length > 0) {
                    if (files.length > 0) {
                        // check if each file have type audio/wav , size more than 0, and name ends with .wav
                        let allValid = true;
                        for (let i = 0; i < files.length; i++) {
                            let file = files[i];
                            if (file.type !== 'audio/wav' && !file.name.toLowerCase().endsWith('.wav')) {
                                allValid = false;
                            }
                            if (file.size <= 0) {
                                allValid = false;
                            }
                        }
                        if (allValid) {
                            if (confirm(`Are you sure want to upload ${files.length} file(s) to the soundbank directory for Category: ${$("#setting_category").val()}, Language: ${$("#setting_language").val()}, Voice Type: ${$("#setting_voice").val()}?`)) {
                                let url = `api/FileManager/UploadSoundbank/${lang}/${voice}/${category}`;
                                const formdata = new FormData();
                                for (let i = 0; i < files.length; i++) {
                                    formdata.append('files', files[i]);
                                }
                                try {
                                    fetch(url, {
                                        method: 'POST',
                                        body: formdata
                                    })
                                        .then(response => response.json())
                                        .then(okdata => {
                                            console.log("Upload result: ", JSON.stringify(okdata));
                                            change_droparea_enable();
                                            alert("Files uploaded successfully to soundbank directory.");
                                        })
                                        .catch(errdata => {
                                            alert("Error uploading files to soundbank directory : " + errdata.message);
                                        });
                                } catch (err) {
                                    alert("Error preparing file upload: " + err.message);
                                }
                            }
                        } else alert("Please upload only valid WAV audio files. Type must be audio/wav and size must be more than 0 bytes.");
                    } else alert("No files detected for upload.");
                } else alert("Please select Voice Type before uploading files.");
            } else alert("Please select Category before uploading files.");
        } else alert("Please select Language before uploading files.");

    });

    $("#clear_soundbank").off('click').on('click', function () {
        if (confirm("Are you sure want to delete all soundbank result files from the server? This action cannot be undone.")) {
            fetchAPI("FileManager/ClearSoundbankResultFiles","DELETE",{},null,(okdata)=>{
                alert("All soundbank result files have been deleted from the server.");
                get_soundbankresult_files();
            },(errdata)=>{
                alert("Error deleting soundbank result files : " + errdata.message);
            });
        }
    });
    $("#reload_soundbank").off('click').on('click', function () {
        get_soundbankresult_files();
    });
    $("#search_soundbank").off('input').on('input', function () {
        let searchTerm = $(this).val().toLowerCase();
        // find inside tbody_resultsoundbank, <tr> that have <td> with <p> containing the search term
        $("#tbody_resultsoundbank tr").each(function () {
            let fileName = $(this).find("td:first").text().toLowerCase();
            if (fileName.includes(searchTerm)) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
    $("#clear_paging").off('click').on('click', function () {
        if (confirm("Are you sure want to delete all paging result files from the server? This action cannot be undone.")) {
            fetchAPI("FileManager/ClearPagingResultFiles","DELETE",{},null,(okdata)=>{
                alert("All paging result files have been deleted from the server.");
                get_pagingresult_files();
            },(errdata)=>{
                alert("Error deleting paging result files : " + errdata.message);
            });
        }
    });
    $("#reload_paging").off('click').on('click', function () {
        get_pagingresult_files();
    });
    $("#search_paging").off('input').on('input', function () {
        let searchTerm = $(this).val().toLowerCase();
        // find inside tbody_resultpaging, <tr> that have <td> with <p> containing the search term
        $("#tbody_resultpaging tr").each(function () {
            let fileName = $(this).find("td:first").text().toLowerCase();
            if (fileName.includes(searchTerm)) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
});