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();
			pushErrMsg("Error loading media list");
			console.error("Error loading media list:", error);
		}
	});
}

function rescanMediaLibHandler() {
	$("#do-rescan-media-lib").on("click", function(){
		if($(this).hasClass("disabled")) {
			return;
		}

		console.log('test');
		$.getJSON("/media-list/clear-cache").done(function(resp){
			if(resp.status) {
				document.getElementById("do-rescan-media-lib").setStateInprogress();
				return;
			}

			console.error("Error of rescan media library");
			pushErrMsg("Error of rescan media library");
		});
	});
}

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

	if(typeof data != "object") {
		return;
	}

	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;
				}
			}
		]
	});
}

let lastMediaLibScaningProcessMsg = "";

function initScaningProcessingView() {
	const activateBtn = document.getElementById("do-rescan-media-lib");
	activateBtn.setStateInprogress = () => {
		changeBtnStateToInProgress(activateBtn);
	}

	activateBtn.setStateDefault = () => {
		changeBtnStateToDefault(activateBtn);
	}


	const scaningProcessingContainer = $(".scaning-process-container");

	socket.on("medialib-scaning-process", data => {
		if(!scaningProcessingContainer.is(":visible")) {
			scaningProcessingContainer.html("");
			scaningProcessingContainer.slideDown();
			activateBtn.setStateInprogress();
		}

		if(lastMediaLibScaningProcessMsg == data.message) {
			return;
		}

		lastMediaLibScaningProcessMsg = data.message;
		scaningProcessingContainer.html(data.message);
	});
}

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

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

		renderMediaList(resp.data);

		$(".scaning-process-container").slideUp();
		document.getElementById("do-rescan-media-lib").setStateDefault();
	});
});