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");
	$("#media-table_wrapper").addClass("d-none");

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

	$.ajax({
		url: "/media-list",
		method: "GET",
		success: function(resp) {
			if(resp.status == "scaning" && !resp.data.length) {
				return;
			}

			let data = resp.data;

			renderMediaList(data);
		},
		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;
				// $('#media-table').DataTable().destroy();
				// return loadMediaList();
			}

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

function renderMediaList(data) {
	const tableBody = $("#media-table tbody");

	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>${a.title}, 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 tbody td').length > 1) {            
		initMediaListTable();
	}

	LSpinnerHide();
	$("#media-table_wrapper").removeClass("d-none");
	$("#media-table").removeClass("d-none");
}

function initMediaListTable() {
	$('#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;
				}
			}
		]
	});
}

$(document).ready(function() {
	loadMediaList();
	rescanMediaLibHandler();

	socket.on("medialib-scaning-complete", resp => {
		if($('#media-table_wrapper').length) {
			$('#media-table').DataTable().destroy();
		}

		renderMediaList(resp.data);
	});
});