async function run_connection_test(button: HTMLButtonElement, result: HTMLDivElement) {
	const jaak_api_key_input = document.getElementById('woocommerce_jaak_jaak_api_key') as HTMLInputElement | null;
	const jaak_api_root_url_input = document.getElementById('woocommerce_jaak_jaak_api_root_url') as HTMLInputElement | null;

	if (!jaak_api_key_input || !jaak_api_root_url_input) {
		throw new Error('Required input elements not found.');
	}

	const jaak_api_root_url = jaak_api_root_url_input.value.trim() || jaak_api_root_url_input.placeholder;

	if (!jaak_api_key_input.value.trim()) {
		result.innerHTML = '<span class="dashicons dashicons-warning" style="color: #dc3232;"></span> <span style="color: #dc3232;">Please enter an API Key.</span>';
		return;
	}

	button.disabled = true;
	button.textContent = 'Testing...';
	result.innerHTML = '<span class="spinner is-active" style="float: none; margin: 0 5px 0 0;"></span> <span>Testing connection...</span>';

	try {
		const headers = new Headers();
		headers.append('Authorization', `Bearer ${jaak_api_key_input.value}`);

		const res = await fetch(`${jaak_api_root_url}/api/me`, {
			method: 'GET',
			headers,
		});

		if (res.ok) {
			const data: unknown = await res.json();
			result.innerHTML = `<div>
					<span class="dashicons dashicons-yes-alt" style="color: #46b450;"></span>
					<span style="color: #46b450;">Status: ${res.status}</span>
					<pre>${JSON.stringify(data, null, 2)}</pre>
				</div>`;
		}
		else {
			result.innerHTML = `<span class="dashicons dashicons-warning" style="color: #dc3232;"></span> <span style="color: #dc3232;">Connection test failed. Status: ${res.status}</span>`;
		}
	}
	catch (error) {
		console.error('Connection test error:', error);
		result.innerHTML = '<span class="dashicons dashicons-warning" style="color: #dc3232;"></span> <span style="color: #dc3232;">Connection test failed.</span>';
	}
	finally {
		button.disabled = false;
		button.textContent = 'Test Connection';
	}
};

document.addEventListener('DOMContentLoaded', () => {
	const button = document.getElementById('jaak-test-connection') as HTMLButtonElement | null;
	const result = document.getElementById('jaak-test-result') as HTMLDivElement | null;

	if (!button || !result) {
		return;
	}

	button.addEventListener('click', (e) => {
		e.preventDefault();

		run_connection_test(button, result)
			.catch((error) => {
				console.error('Unexpected error during connection test:', error);
			});

	});
});