function toggleSettings() {
	const panel = document.getElementById('settings-panel');
	panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
	if (panel.style.display === 'block') {
		const username = document.getElementById('username');
		username.focus();
		username.selectionStart = username.selectionEnd = username.value.length
	}
}

function toggleUsers() {
	const panel = document.getElementById('users-panel');
	panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
}

document.addEventListener('click', function(event) {
	const settingsPanel = document.getElementById('settings-panel');
	const settingsButton = document.querySelector('.settings-button');
	const usersPanel = document.getElementById('users-panel');
	const usersButton = document.querySelector('.users-button');

	if (!settingsPanel.contains(event.target) && !settingsButton.contains(event.target)) {
		settingsPanel.style.display = 'none';
	}

	if (!usersPanel.contains(event.target) && !usersButton.contains(event.target)) {
		usersPanel.style.display = 'none';
	}
});

document.addEventListener('keypress', function(event) {
	if (event.key === 'Enter') {
		const settingsPanel = document.getElementById('settings-panel');
		const inputPanel = document.getElementById('message');
		if (settingsPanel.contains(event.target)) {
			setUsername();
		}
		if (inputPanel.contains(event.target)) {
			sendMessage();
		}
	}
});

async function loadUsers() {
	try {
		const response = await fetch('/users');
		const data = await response.json();

		const usersList = document.getElementById('users-list');
		usersList.innerHTML = '';

		data.users.sort().forEach(user => {
			const userDiv = document.createElement('div');
			userDiv.className = 'user-item';
			userDiv.textContent = user;
			usersList.appendChild(userDiv);
		});
	} catch (error) {
		console.error('Error loading users:', error);
	}
}


let lastMessageCount = 0;
async function loadMessages() {
	try {
		const messagesDiv = document.getElementById('messages');
		const response = await fetch('/messages');
		const text = await response.text();
		const tempDiv = document.createElement('div');
		tempDiv.innerHTML = text;

		if (messagesDiv.scrollTop != bottom) {
			// show a button to scroll to the bottom
			const scrollToBottomButton = document.getElementById('scroll');
			scrollToBottomButton.style.display = 'block';
			scrollToBottomButton.onclick = scrollToBottom;
		} else {
			// hide the button
			const scrollToBottomButton = document.getElementById('scroll');
			scrollToBottomButton.style.display = 'none';
		}

		const messages = tempDiv.getElementsByTagName('p');

		const newMessageCount = messages.length;

		if (newMessageCount > lastMessageCount || lastMessageCount === 0) {
			messagesDiv.innerHTML = '';
			Array.from(messages).forEach(msg => {
				const messageDiv = document.createElement('div');
				messageDiv.className = 'message';
				const [username, content] = msg.innerHTML.split('<br>');
				messageDiv.innerHTML = '<div class="username">' + username + '</div>' + 
					'<div class="content">' + content + '</div>';
				messagesDiv.appendChild(messageDiv);
			});
			scrollToBottom();
			lastMessageCount = newMessageCount;
		}
	} catch (error) {
		console.error('Error loading messages:', error);
	}
}

var bottom = 0;

function scrollToBottom() {
	const messagesDiv = document.getElementById('messages');
	messagesDiv.scrollTop = messagesDiv.scrollHeight;
	bottom = messagesDiv.scrollTop;
}

async function checkUsername() {
	try {
		const response = await fetch('/username/status');
		const data = await response.json();
		if (!data.hasUsername) {
			document.getElementById('settings-panel').style.display = 'block'
			const username = document.getElementById('username');
			username.focus();
			username.selectionStart = username.selectionEnd = username.value.length
		}
	} catch (error) {
		console.error('Error checking username status:', error);
	}
}

async function updateCurrentUser() {
	try {
		const response = await fetch('/username/status');
		const data = await response.json();
		const userDiv = document.getElementById('current-user');
		if (data.hasUsername) {
			userDiv.textContent = data.username;
		} else {
			userDiv.textContent = '';
		}
	} catch (error) {
		console.error('Error getting username:', error);
	}
}

async function setUsername() {
	const username = document.getElementById('username').value;
	if (!username) {
		showUsernameStatus('Please enter a username', 'red');
		return;
	}

	try {
		const response = await fetch('/username', {
			method: 'PUT',
			headers: {
				'Content-Type': 'application/json'
			},
			body: JSON.stringify({ username: username })
		});

		const data = await response.json();

		if (response.ok) {
			showUsernameStatus('Username set successfully!', 'green');
			updateCurrentUser();
			setTimeout(() => {
				document.getElementById('settings-panel').style.display = 'none';
			}, 500);
			location.reload();
		} else {
			showUsernameStatus(data.error || 'Failed to set username', 'red');
		}
	} catch (error) {
		showUsernameStatus('Error connecting to server', 'red');
	}
}

async function sendMessage() {
	const message = document.getElementById('message').value;
	if (!message) {
		return;
	}

	try {
		const response = await fetch('/messages', {
			method: 'PUT',
			headers: {
				'Content-Type': 'application/json'
			},
			body: JSON.stringify({ message: message })
		});

		const data = await response.json();

		if (response.ok) {
			document.getElementById('message').value = '';
			// showStatus('Message sent!', '#64b5f6');
			loadMessages();
		} else {
			showStatus(data.error || 'Failed to send message', 'red');
		}
	} catch (error) {
		showStatus('Error connecting to server', 'red');
	}
}

function showStatus(message, color) {
	const status = document.getElementById('status');
	status.textContent = message;
	status.style.color = color;
	setTimeout(() => {
		status.textContent = '';
	}, 3000);
}

function showUsernameStatus(message, color) {
	const status = document.getElementById('username-status');
	status.textContent = message;
	status.style.color = color;
	setTimeout(() => {
		status.textContent = '';
	}, 3000);
}

async function pingCheck() {
	try {
		await fetch('/ping', {method: 'POST'});
	} catch (error) {
		console.error('Ping failed:', error);
	}
}

async function initialize() {
	await loadMessages();
	document.getElementById('users-panel').style.display = 'none';
	document.getElementById('settings-panel').style.display = 'none';
	checkUsername();
	updateCurrentUser();
	setInterval(loadMessages, 1000);
	setInterval(loadUsers, 1000);
	setInterval(pingCheck, 3000);
	scrollToBottom();
}

initialize();