<%
local api = require "luci.passwall2.api"
-%>
<script src="<%=resource%>/view/<%=api.appname%>/Sortable.min.js?v=26.1.11"></script>

<style>
table .cbi-button-up,
table .cbi-button-down {
	display: none !important;
}

.drag-handle {
	vertical-align: middle;
	cursor: grab !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 100;
	padding: 0 !important;
	line-height: inherit;
	user-select: none;
	align-self: stretch;
}

.dragging-row {
	background-color: rgba(131, 191, 255, 0.7) !important;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
</style>

<script type="text/javascript">
	//<![CDATA[
	var appname = "<%= api.appname %>"

	function confirmDeleteNode(remark) {
		if (!confirm("<%:Delete the subscribed node%>: " + remark + " ?"))
			return false;

		fetch('<%= api.url("subscribe_del_node") %>?remark=' + encodeURIComponent(remark), {
			method: "GET"
		}).then(res => {
			if (res.ok) {
				location.reload();
			} else {
				alert("<%:Failed to delete.%>");
			}
		});
		return false;
	}

	function confirmDeleteAll() {
		if (!confirm("<%:Are you sure you want to delete all subscribed nodes?%>"))
			return false;

		fetch('<%= api.url("subscribe_del_all") %>', {
			method: "GET"
		}).then(res => {
			if (res.ok) {
				location.reload();
			} else {
				alert("<%:Failed to delete.%>");
			}
		});
		return false;
	}

	function ManualSubscribe(sectionId) {
		var urlInput = document.querySelector("input[name='cbid." + appname + "." + sectionId + ".url']");
		var currentUrl = urlInput ? urlInput.value.trim() : "";
		if (!currentUrl) {
			alert("<%:Subscribe URL cannot be empty.%>");
			return;
		}

		fetch('<%= api.url("subscribe_manual") %>?section='
			+ encodeURIComponent(sectionId)
			+ '&url='
			+ encodeURIComponent(currentUrl))
		.then(response => response.json())
		.then(data => {
			if (!data.success) {
				alert(data.msg || "Operation failed");
			} else {
				window.location.href = '<%= api.url("log") %>'
			}
		});
	}

	function ManualSubscribeAll() {
		var sectionIds = [];
		var urls = [];

		var table = document.getElementById("cbi-" + appname + "-subscribe_list");
		var editBtns = table ? table.getElementsByClassName("cbi-button cbi-button-edit") : [];

		for (var i = 0; i < editBtns.length; i++) {
			var btn = editBtns[i];
			var onclickStr = btn.getAttribute("onclick");
			if (!onclickStr) continue;

			var id = onclickStr.substring(onclickStr.lastIndexOf('/') + 1, onclickStr.length - 1);
			if (!id) continue;

			var urlInput = document.querySelector("input[name='cbid." + appname + "." + id + ".url']");
			var currentUrl = urlInput ? urlInput.value.trim() : "";
			if (!currentUrl) {
				alert("<%:Subscribe URL cannot be empty.%>");
				return;
			}

			sectionIds.push(id);
			urls.push(currentUrl);
		}

		if (sectionIds.length === 0) {
			//alert("No subscriptions found.");
			return;
		}

		var params = new URLSearchParams();
		params.append("sections", sectionIds.join(","));
		params.append("urls", urls.join(","));

		fetch('<%= api.url("subscribe_manual_all") %>', {
			method: 'POST',
			body: params
		})
		.then(response => response.json())
		.then(data => {
			if (!data.success) {
				alert(data.msg || "Operation failed");
			} else {
				window.location.href = '<%= api.url("log") %>'
			}
		});
	}

	//订阅列表添加拖拽排序
	document.addEventListener("DOMContentLoaded", function () {
		function initSortableForTable() {
			var section = document.getElementById("cbi-<%=api.appname%>-subscribe_list");
			if (!section) return;

			hideSortColumn(section);

			// === 插入 drag handle ===
			var rows = section.querySelectorAll("tr");
			rows.forEach(function(row) {
				var btn = row.querySelector(".cbi-button-remove:last-of-type");
				if (!btn) return;
				if (btn.nextElementSibling && btn.nextElementSibling.classList.contains("drag-handle")) return;
				var handle = document.createElement("span");
				handle.className = "drag-handle center";
				handle.title = "<%:Drag to reorder%>";
				handle.innerHTML = "⠿";
				btn.after(handle);
			});

			// === 初始化 Sortable ===
			var table = section.getElementsByTagName("table")[0];
			if (!table) return;
			var root = table.tBodies[0] || table;
			if (root._sortable_initialized) return root._sortable_instance;
			root._sortable_initialized = true;

			// 保存原始顺序
			root._origOrder = getCurrentOrder(root);

			try {
				root._sortable_instance = Sortable.create(root, {
					handle: ".drag-handle",
					draggable: "tr.cbi-section-table-row",
					animation: 150,
					ghostClass: "dragging-row",
					fallbackOnBody: true,
					forceFallback: false,
					swapThreshold: 0.65,
					onEnd: function (evt) {
						updateHiddenInput(root, section);
					}
				});
				return root._sortable_instance;
			} catch (e) {
				root._sortable_initialized = false;
				console.error("Sortable init failed:", e);
			}
		}

		// 获取 table 当前行顺序
		function getCurrentOrder(root) {
			var order = [];
			var rows = root.querySelectorAll("tr.cbi-section-table-row");
			rows.forEach(function (tr) {
				var id = tr.id || "";
				if (id.startsWith("cbi-<%=api.appname%>-"))
					id = id.replace("cbi-<%=api.appname%>-", "");
				order.push(id);
			});
			return order;
		}

		// 拖拽完成后更新 hidden input
		function updateHiddenInput(root, section) {
			var newOrder = getCurrentOrder(root);
			var changed = newOrder.join(" ") !== root._origOrder.join(" ");
			var hiddenInput = section.querySelector('input[type="hidden"][id^="cbi.sts."]');
			if (hiddenInput) {
				hiddenInput.value = changed ? newOrder.join(" ") : "";
			}
		}

		// 隐藏18.06 up/down 列
		function hideSortColumn(section) {
			var table = section.querySelector("table");
			if (!table) return;
			var ths = Array.prototype.slice.call(table.querySelectorAll("tr.cbi-section-table-titles > th"));
			var dataRows = table.querySelectorAll("tr.cbi-section-table-row");
			if (!ths.length || !dataRows.length) return;
			var sortCol = -1;
			for (var i = 0; i < ths.length; i++) {
				var hasSort = false, invalid = false;
				dataRows.forEach(function(tr) {
					var td = tr.querySelectorAll(":scope > td")[i];
					if (!td) return;
					if (td.querySelector(".cbi-button-edit, .cbi-button-remove")) invalid = true;
					if (td.querySelector(".cbi-button-up, .cbi-button-down")) hasSort = true;
				});
				if (!invalid && hasSort) { sortCol = i; break; }
			}
			if (sortCol === -1) return;
			var rows = [table.querySelector("tr.cbi-section-table-titles")].concat(
				Array.prototype.slice.call(dataRows),
				Array.prototype.slice.call(table.querySelectorAll("tr.cbi-section-table-descr"))
			);
			rows.forEach(function(tr) {
				var cells = Array.prototype.filter.call(tr.children, function(el) {
					return el.tagName === "TH" || el.tagName === "TD";
				});
				if (cells[sortCol]) cells[sortCol].style.display = "none";
			});
		}

		// === 等待 TypedSection 行稳定 ===
		(function waitStable() {
			var last = 0, stable = 0;
			var THRESHOLD = 5;
			function tick() {
				var count = document.querySelectorAll("tr.cbi-section-table-row").length;
				if (count && count === last) stable++;
				else stable = 0;

				last = count;
				if (stable >= THRESHOLD)
					setTimeout(initSortableForTable, 200);
				else
					requestAnimationFrame(tick);
			}
			tick();
		})();
	});
	//]]>
</script>
