function LSpinnerShow() {
    $(".loading-spinner-container").removeClass("d-none");
}

function LSpinnerHide() {
    $(".loading-spinner-container").addClass("d-none");
}

// Function to load media data
function loadMediaList() {
    LSpinnerShow();
    $("#media-table").addClass("d-none");

    const tableBody = $("#media-table tbody");
    tableBody.empty();

    $.ajax({
        url: "/media-list",
        method: "GET",
        success: function(data) {

            if (data.length > 0) {
                data.forEach((file, index) => {
                    const videoInfo = file.info.video
                        ? file.info.video.map((v, i) => !i ? `<li>Resolution: ${v.resolution}, Codec: ${v.codec}, Bitrate: ${v.bitrate}</li>` : `<li>Resolution: ${v.resolution}, Codec: ${v.codec}</li>`).join("")
                        : "<li>No video streams</li>";

                    const audioInfo = file.info.audio
                        ? file.info.audio.map(a => `<li>Channels: ${a.layout}, Codec: ${a.codec}, Bitrate: ${a.bitrate}, Language: ${a.language}</li>`).join("")
                        : "<li>No audio streams</li>";

                    const details = `
                        <b>Video:</b>
                        <ul>${videoInfo}</ul>
                        <b>Audio:</b>
                        <ul>${audioInfo}</ul>
                    `;

                    const pathEncoded = encodeURIComponent(file.path);

                    tableBody.append(`
                        <tr>
                            <td>${index + 1}</td>
                            <td>
                                <div class="filename"><a href="/single?path=${pathEncoded}"><b>${file.name}</b></a></div>
                                <div class="filepath">${file.path}</div>
                                <div class="filedetails">${details}</div>
                            </td>
                            <td class="size_unit_${file.size_unit}" data-order="${file.size_bytes}">${file.size}${file.size_unit}</td>
                        </tr>
                    `);
                });
            } else {
                tableBody.append(`<tr><td colspan="3" class="text-center">No files found</td></tr>`);
            }

            if(!$('#media-table_wrapper').length) {            
                $('#media-table').DataTable({
                    columnDefs: [
                        {
                            targets: "_all",
                            render: function(data, type, row, meta) {
                                var cell = meta.settings.aoData[meta.row].anCells[meta.col];
                                if (type === 'sort' && cell) {
                                    var orderValue = $(cell).attr('data-order');
                                    return orderValue !== undefined ? orderValue : data;
                                }
                                return data;
                            }
                        }
                    ]
                });
            }

            LSpinnerHide();
            $("#media-table").removeClass("d-none");
        },
        error: function(xhr, status, error) {
            LSpinnerHide();
            console.error("Error loading media list:", error);
        }
    });
}

function rescanMediaLibHandler() {
    $("#do-rescan-media-lib").on("click", function(){
        $.getJSON("/media-list/clear-cache").done(function(resp){
            if(resp.status) {
                return loadMediaList();
            }

            console.error("Error of rescan media library");
            // TODO: make alert bar
            alert("Error of rescan media library");
        });
    });
}

// Load media list when the page is ready
$(document).ready(function() {
    loadMediaList();
    rescanMediaLibHandler();
});