document.addEventListener('DOMContentLoaded', function () {
	getInfo();
	getDirectoryEntries();
});

async function getInfo() {
	try {
		const response = await fetch('/api/v1/user/route');
		const route = await response.json();
		document.getElementById('routeId').textContent = route.id || '';
		document.getElementById('routeHost').textContent = `${route.server}:${route.port}` || '';
		document.getElementById('routeAuth').textContent = route.auth || '';
		document.getElementById('routeSecret').textContent = route.secret || '';
		document.getElementById('routeBlock').textContent = `${route.block_start} - ${route.block_start + route.block_length}` || '';
		document.getElementById('routeApiKey').textContent = route.apiKey || '';
	} catch (error) {
		console.error('Error fetching route info:', error);
	}
}

// Get directory entries
function getDirectoryEntries() {
	fetch('/api/v1/user/directory')
		.then(response => response.json())
		.then(data => {
			const table = document.getElementById('directoryList');
			// Keep the first row (update form) and remove the rest
			while (table.children.length > 1) {
				table.removeChild(table.lastChild);
			}
			data.forEach(entry => {
				const row = document.createElement('tr');
				row.innerHTML = `<td>${entry.number}</td><td>${entry.name}</td><td><button onclick="deleteEntry(${entry.number})" class="btn btn-danger btn-sm">Delete</button></td>`;
				table.appendChild(row);
			});
		})
		.catch(error => console.error('Error fetching directory:', error));
}


// Handle update form for directory entries
document.getElementById('dirForm').addEventListener('submit', function(event) {
	event.preventDefault();
	const number = document.getElementById('dirNumber').value;
	const name = document.getElementById('dirName').value;
	const submitButton = document.getElementById('dirSubmit');

	submitButton.disabled = true;
	fetch('/api/v1/user/directory', {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json'
		},
		body: JSON.stringify({ number, name })
	})
	.then(response => response.json())
	.then(data => {
		getDirectoryEntries();
		submitButton.disabled = false;
	})
	.catch(error => {
		console.error('Error updating directory:', error);
		submitButton.disabled = false;
	});
});

// Handle delete entry
function deleteEntry(number) {
	fetch(`/api/v1/user/directory/${number}`, {
		method: 'DELETE'
	})
	.then(response => {
		if (response.status === 200) {
			getDirectoryEntries();
		}
	})
	.catch(error => console.error('Error deleting entry:', error));
}