// Get references to the Sign Up and Sign In buttons and the main container
let signUpButton = document.getElementById('signUp');
let signInButton = document.getElementById('signIn');
let container = document.getElementById('container');

// Event listener to switch to Sign Up panel
signUpButton.addEventListener('click', () => {
	container.classList.add("right-panel-active"); // Adds class to activate the Sign Up panel animation
	document.getElementById('error').style.display = 'none'; // Hides any error message previously shown
});

// Event listener to switch back to Sign In panel
signInButton.addEventListener('click', () => {
	container.classList.remove("right-panel-active"); // Removes the class to return to Sign In panel
	document.getElementById('error').style.display = 'none'; // Hides any error message
});

// Function to toggle visibility of password fields on Sign Up form
function showPass() {
	signUpPass = document.getElementById('signUpPass');     // Reference to the Sign Up password field
	confirmPass = document.getElementById('confirmPass');   // Reference to the confirm password field
	if (signUpPass.type == 'password') {
		signUpPass.type = 'text';     // Reveal password
		confirmPass.type = 'text';    // Reveal confirmation
	}
	else {
		signUpPass.type = 'password';     // Hide password
		confirmPass.type = 'password';    // Hide confirmation
	}
}

// Function to toggle visibility of password field on Sign In form
function showLoginPass() {
	pass = document.getElementById('pass'); // Reference to login password input
	document.getElementById('error').style.display = 'none'; // Hide errors (though it might not affect Sign In errors)
	if (pass.type == 'password') {
		pass.type = 'user'; // Intentional? Typo or user-defined field? Otherwise would break functionality
	}
	else {
		pass.type = 'password'; // Hide password again
	}
}

// Function to handle Sign Up button click
function signUp() {
	signUpBtn = document.getElementById('signUpButton'); // Reference to Sign Up button
	signUpBtn.innerHTML = "Signing Up..."; // UI feedback
	signUpBtn.disabled = true;             // Prevent multiple submissions

	// Collect form values
	username = document.getElementById('signUpUsername').value;
	signUpPass = document.getElementById('signUpPass').value;
	confirmPass = document.getElementById('confirmPass').value;

	// Send POST request to backend for signup
	fetch('logon.php', {
		method: 'POST',
		headers: {
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		body: new URLSearchParams({
			username: username,
			signUpPass: signUpPass,
			confirmPass: confirmPass
		})
	})
		.then(response => response.json()) // Parse response as JSON
		.then(data => {
			document.getElementById('error').innerHTML = data.message; // Show response message

			if (data.success == false) {
				document.getElementById('error').style.color = 'red'; // Error message styling
			}
			else {
				document.getElementById('error').style.color = 'green'; // Success message styling
			}

			// If duplicate entry is found, override default message
			if (data.message.indexOf('Duplicate entry') > 1) {
				document.getElementById('error').innerHTML = "You are already registered";
			}

			document.getElementById('error').style.display = 'block'; // Show error/success div
			signUpBtn.innerHTML = "Sign Up"; // Reset button text
			signUpBtn.disabled = false;      // Re-enable button
		})
		.catch(error => {
			console.error('Error:', error); // Log any errors from fetch
			signUpBtn.innerHTML = "Sign Up"; // Reset button text
			signUpBtn.disabled = false;      // Re-enable button
		});
}

// Function to handle Sign In button click
function login() {
	let log = document.getElementById('loginButton'); // Reference to Sign In button
	log.innerHTML = "Signing in..."; // UI feedback
	log.disabled = true;             // Disable to avoid multiple clicks

	// Get input values
	let username = document.getElementById('username').value;
	let password = document.getElementById('pass').value;

	// Send POST request to backend login
	fetch('login.php', {
		method: 'POST',
		headers: {
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		body: new URLSearchParams({
			username: username,
			password: password
		})
	})
		.then(response => response.json()) // Parse response
		.then(data => {
			document.getElementById('s_error').innerHTML = data.message; // Display backend message
			document.getElementById('s_error').style.display = 'block';  // Make error/success visible

			if (data.success == false) {
				document.getElementById('s_error').style.color = 'red';   // Style error
			}
			else {
				document.getElementById('s_error').style.color = 'green'; // Style success
				// Redirect to OTP page upon successful login
				window.location.href = "send_otp.php";
			}

			log.innerHTML = "Sign in"; // Reset button text
			log.disabled = false;      // Re-enable button
		})
		.catch(error => {
			console.error('Error:', error); // Handle fetch errors
			log.innerHTML = "Sign in";      // Reset button
			log.disabled = false;           // Re-enable button
		});
}
