// Function to load media data
function loadMediaList() {
    $.ajax({
        url: "/media-list",
        method: "GET",
        success: function(data) {
            const tableBody = $("#media-table tbody");
            tableBody.empty(); // Clear existing rows

            if (data.length > 0) {
                data.forEach((file, index) => {
                    const videoInfo = file.info.video
                        ? file.info.video.map(v => `<li>Resolution: ${v.resolution}, Codec: ${v.codec}, Bitrate: ${v.bitrate}</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>
                    `;

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

            $('#media-table').DataTable();
        },
        error: function(xhr, status, error) {
            console.error("Error loading media list:", error);
        }
    });
}

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