jQuery(document).ready(function($) {
	// initialize and set to default values all filters
	const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
	let timeframe = "";
	let from = "";
	let to = "";
	let plants = "";
	let ates = "";
	let customers = "";
	let workOrders = "";
	let thresholds = "";
	let lastId = 0;
	let refreshInterval = "";

	init();

	getThresholds();

	$("#rtaSearch").click(function(e) {
		e.preventDefault();
		generateStationBoxes();
	});

	// initialize and set to default values all filters
	function init() {
		const title = document.querySelector(".title");

		title.addEventListener("click", () => {
			const filter = document.querySelector(".filters");
			filter.classList.toggle("open");
		});

		const timeframeInput = document.getElementById("timeframe");
		timeframeInput.selectedIndex = 0;

		let plantsSelect = document.getElementById("plants");
		if (plantsSelect) {
			for (let i = 0; i < plantsSelect.options.length; i++) {
				plantsSelect.options[i].selected = true;
			}
		}

		let atesSelect = document.getElementById("ates");
		for (let i = 0; i < atesSelect.options.length; i++) {
			atesSelect.options[i].selected = true;
		}

		let customersSelect = document.getElementById("customers");
		if (customersSelect) {
			for (let i = 0; i < customersSelect.options.length; i++) {
				customersSelect.options[i].selected = true;
			}
		}

		let workOrdersSelect = document.getElementById("workOrders");
		if (workOrdersSelect) {
			for (let i = 0; i < workOrdersSelect.options.length; i++) {
				workOrdersSelect.options[i].selected = true;
			}
		}

		const today = new Date();
		const toDate = today.toISOString().split("T")[0];

		const fromDate = new Date(today.getTime() - 24 * 60 * 60 * 1000);
		const fromDateString = fromDate.toISOString().split("T")[0];

		document.getElementById("from").value = fromDateString;
		document.getElementById("to").value = toDate;

		$(".selectpicker").selectpicker("refresh");

		getDataFromInputs();
	}

	function getDataFromInputs() {
		timeframe = $("#timeframe").val();
		from = $("#from").val();
		to = $("#to").val();
		plants = $("#plants").val();
		ates = $("#ates").val();
		customers = $("#customers").val();
		workOrders = $("#workOrders").val();
	}

	function isValidFilters() {
		getDataFromInputs();

		let values = [];
		if (document.getElementById("customers")) {
			values = [timeframe, from, to, ates, customers, workOrders];
		} else {
			values = [timeframe, from, to, plants, ates];
		}

		const allValuesFilled = values.every(value => {
			if (Array.isArray(value)) {
				return value.length > 0;
			}
			return value.trim() !== "";
		});

		if (!allValuesFilled) {
			return false;
		}
	}

	function getThresholds() {
		$("#dashboard").html('<div class="spinner"></div>');
		generateStationBoxes();
	}

	// Function to generate the station boxes dynamically
	function generateStationBoxes() {
		// Sample data for the stations

		// Get the container where the boxes will be displayed
		const container = document.getElementById("dashboard");
		if (!container) {
			console.error("Dashboard container not found");
			return;
		}
		container.innerHTML = ""; // Clear previous boxes

		// check all the filters and return message if some filter is invalid
		if (isValidFilters() === false) {
			bootbox.alert("All filters are required!");
			return;
		}

		const searchBtn = $(this);
		searchBtn.prop("disabled", true).html("Loading...");
		$("#dashboard").html('<div class="spinner"></div>');

		// AJAX request to fetch data from the server
		$.ajax({
			url:
				QL_HOST +
				"real_time_analytics_clock/?AJX_RTACACTO=getDataTestingStation",
			type: "POST",
			data: {
				timeframe,
				from,
				to,
				plants,
				ates,
				customers,
				workOrders,
				userTimezone
			},
			success: function(response) {
				// Parse the JSON response
				const data = JSON.parse(response);
				if (data["error"]) {
					bootbox.alert("Error: " + data["error"]);
					return;
				}
				// Ensure the container is available
				const container = document.getElementById("dashboard");
				if (!container) {
					console.error(
						"Container element with id 'dashboard' not found."
					);
					return;
				}
				if (data.length === 0) {
					container.classList.add("text-center");
					container.innerHTML = "<p>No data available</p>";
				} else {
					container.classList.remove("text-center");
				}
				// Clear previous content
				container.innerHTML = "";

				if (data.length === 0) {
					container.innerHTML =
						"<p class='text-center'>No data available</p>";
					return;
				}

				// Generate station boxes with received data
				data.forEach(station => {
					// Calculate the color for the FPY based on percentage
					let fpyColor = "green";
					if (station.fpy < 90) {
						fpyColor = "red";
					} else if (station.fpy < 95) {
						fpyColor = "yellow";
					}

					// Create the station box HTML with inline CSS for background color
					const stationBox = `
						<div class="station-box" style="background-color: #fff;">
							<div class="station-title">
								${station.id} - ${station.name}
							</div>
							<div class="circle-container">
								<div class="circle" style="background: conic-gradient(${fpyColor} 0% ${
						station.fpy
					}%, #e0e0e0 ${station.fpy}% 100%);">
									<div class="circle-inner">
										<span class="qty-label">
											Qty: ${station.qty}
										</span>
									</div>
								</div>
							</div>
							<div class="fpy-percentage">
								FPY: ${station.fpy.toFixed(2)}%
							</div>
						</div>
					`;

					// Insert the station box into the container
					container.insertAdjacentHTML("beforeend", stationBox);
				});
			},
			error: function(xhr, status, error) {
				console.error("Error fetching data:", error);
				bootbox.alert("An error occurred while fetching data.");
			}
		});
	}
});