const prevBtns = document.querySelectorAll('.envira-onboarding-btn-prev');
const nextBtns = document.querySelectorAll('.envira-onboarding-btn-next');
const progress = document.querySelector('.envira-onboarding-progress');
const formSteps = document.querySelectorAll('.envira-onboarding-form-step');
const progressSteps = document.querySelectorAll('.envira-onboarding-progress-step');

let formStepsNum = 0;
let isSavingFormData = false;

/* Event Listener for Next Button. */
nextBtns.forEach(btn => {
	btn.addEventListener('click', e => {
		e.preventDefault();
		if (formStepsNum === 0) {
			saveFormData();
		} else {
			let nextStep = btn.getAttribute('data-next');
			if (nextStep) {
				formStepsNum = parseInt(nextStep, 10);
				if (isNaN(formStepsNum)) {
					return;
				}
				updateFormSteps();
				updateProgressbar();
			}
		}
	});
});

/* Event Listener for Back Button. */
prevBtns.forEach(btn => {
	btn.addEventListener('click', () => {
		// Get data-prev attribute from the button and set it as stepsNum.
		let prevStep = btn.getAttribute('data-prev');
		if (prevStep) {
			formStepsNum = parseInt(prevStep, 10);
			if (isNaN(formStepsNum)) {
				return;
			}
			updateFormSteps();
			updateProgressbar();
		}
	});
});

/* Prevent Enter-key native form submission on step 0. Without this, pressing Enter
   inside the "other" text field or the email field POSTs the form to the current page
   (full reload), bypassing the AJAX save entirely. */
document.querySelector('#envira-general').addEventListener('submit', e => {
	e.preventDefault();
	if (formStepsNum === 0) {
		saveFormData();
	}
});

/* Updates Form Items */
function updateFormSteps() {
	formSteps.forEach(formStep => {
		formStep.classList.contains('envira-onboarding-form-step-active') &&
			formStep.classList.remove('envira-onboarding-form-step-active');
	});
	formSteps[formStepsNum].classList.add('envira-onboarding-form-step-active');

	// Show selected plugins div only on step 2.
	if (formStepsNum === 2) {
		selectedPluginsdiv.style.display = 'block';
	} else {
		selectedPluginsdiv.style.display = 'none';
	}
}

/* Updates Progress Bar */
function updateProgressbar() {
	progressSteps.forEach((progressStep, index) => {
		let spacer = progressStep.previousElementSibling;
		if (index <= formStepsNum) {
			progressStep.classList.add('envira-onboarding-progress-step-active');
			spacer.style.borderColor = '#37993B';
		} else {
			progressStep.classList.remove('envira-onboarding-progress-step-active');
			spacer.style.borderColor = '#DCDDE1';
		}
	});
	progress.style.width = (formStepsNum / (progressSteps.length - 1)) * 100 + '%';
}

// when envira-onboarding-back-to-welcome or envira-get-started-btn is clicked, show and hide the onboarding wizard pages.
const backToWelcomeBtn = document.querySelector('#envira-onboarding-back-to-welcome');
const getStartedBtn = document.querySelector('#envira-get-started-btn');

backToWelcomeBtn.addEventListener('click', () => {
	document.querySelector('.envira-onboarding-wizard-intro').style = {display: 'flex'};
	document.querySelector('.envira-onboarding-wizard-wrapper').style = 'height: 85vh';
	document.querySelector('.envira-onboarding-wizard-pages').style.display = 'none';
});

getStartedBtn.addEventListener('click', () => {
	document.querySelector('.envira-onboarding-wizard-intro').style.display = 'none';
	document.querySelector('.envira-onboarding-wizard-wrapper').style = 'height: auto';
	document.querySelector('.envira-onboarding-wizard-pages').style = {display: 'flex'};
});

// Disable click on no-clickable checkboxes with class no-clicks.

const noClicks = document.querySelectorAll('.no-clicks');
noClicks.forEach(noClick => {
	noClick.addEventListener('click', e => {
		e.preventDefault();
		e.stopPropagation();
	});
});

// set height on page load.
document.querySelector('.envira-onboarding-wizard-wrapper').style = 'height: 85vh';

function isValidEmail(email) {
	let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
	return emailRegex.test(email);
}

// Check if email_address is valid.
const email = document.querySelector('#email_address');
const saveOptIn = document.querySelector('#save-opt-in');
let emailError = document.querySelector('.envira-email-error');
emailError.innerHTML = '';

const setEmailValid = () => {
	emailError.innerHTML = '';
	saveOptIn.disabled = false;
	saveOptIn.classList.remove('envira-disabled');
};

const setEmailInvalid = () => {
	emailError.innerHTML = 'Please enter a valid email address.';
	saveOptIn.disabled = true;
	saveOptIn.classList.add('envira-disabled');
};

// If the user opt in for email, then check if the email is valid or not empty.

let email_opt_in = document.querySelector('#email_opt_in');

email_opt_in.addEventListener('change', () => {
	emailValidation();
});

let emailValidation = () => {
	// If email opt in is checked and email is invalid, show error message.
	if ((email.value === '' || !isValidEmail(email.value)) && email_opt_in.checked) {
		setEmailInvalid();
	}
	// If email opt in is not checked and email is invalid, show error message.
	if (email.value !== '' && !isValidEmail(email.value) && !email_opt_in.checked) {
		setEmailInvalid();
	}
	// If email opt in is not checked and email is valid or empty, remove the error message.
	if (
		(email.value !== '' && isValidEmail(email.value)) ||
		(email.value === '' && !email_opt_in.checked)
	) {
		setEmailValid();
	}
};

email.addEventListener('input', () => {
	emailValidation();
});

// Show others option when something else is selected for Drip.
// if user_type radio buttons are not checked disable the save button.
const userTypes = document.querySelectorAll("input[name='eow[_user_type]']");

userTypes.forEach(userType => {
	userType.addEventListener('change', e => {
		if (e.target.value === 'other') {
			document.querySelector('#others_div').style.display = 'block';
			document.querySelector('#others').required = true;
		} else {
			document.querySelector('#others_div').style.display = 'none';
			document.querySelector('#others').required = false;
		}
		let isAnyUserTypeChecked = Array.from(userTypes).some(radio => radio.checked);

		if (!isAnyUserTypeChecked) {
			saveOptIn.disabled = true;
			saveOptIn.classList.add('envira-disabled');
		} else {
			saveOptIn.disabled = false;
			saveOptIn.classList.remove('envira-disabled');
		}
	});
});

function saveFormData() {
	// Guard against concurrent calls: the submit event (Enter key) can fire while a
	// fetch is already in-flight because formStepsNum only advances after the response.
	if (isSavingFormData) {
		return;
	}

	const form = document.querySelector('#envira-general');

	// Manual validation: e.preventDefault() on the button's click event bypasses native
	// browser validation for required radio buttons. Ensure a user type is selected.
	const isAnyUserTypeChecked = Array.from(userTypes).some(radio => radio.checked);
	if (!isAnyUserTypeChecked) {
		form.reportValidity();
		return;
	}

	// If "Something Else" is selected, the #others text field is required but native
	// browser validation is bypassed, so we must enforce it explicitly.
	const othersInput = document.querySelector('#others');
	if (othersInput.required && othersInput.value.trim() === '') {
		othersInput.setCustomValidity('This field is required');
		form.reportValidity();
		othersInput.setCustomValidity('');
		return;
	}

	isSavingFormData = true;

	// post form data via WP admin-ajax. enviraOnboardingWizard.ajaxUrl,
	const formData = new FormData(form);

	// Disable next buttons during async request to prevent duplicate submissions.
	nextBtns.forEach(btn => {
		btn.disabled = true;
	});

	formData.append('action', 'save_onboarding_data');
	formData.append('nonce', enviraOnboardingWizard.nonce);
	fetch(enviraOnboardingWizard.ajaxUrl, {
		method: 'POST',
		body: formData
	})
		.then(response => response.json())
		.then(data => {
			if (data.success) {
				formStepsNum = 1;
				updateFormSteps();
				updateProgressbar();
			} else {
				formStepsNum = 0;
				console.log('Error saving the data');
			}
		})
		.catch(error => {
			formStepsNum = 0;
			console.error(
				'Failed to save onboarding data. Please check your connection and try again.',
				error
			);
		})
		.finally(() => {
			isSavingFormData = false;
			nextBtns.forEach(btn => {
				btn.disabled = false;
			});
		});
}
// Get all the checkboxes with the class feature.
const features = document.querySelectorAll('.feature');
let selectedFeatures = [];
features.forEach(feature => {
	feature.addEventListener('click', e => {
		if (e.target.checked) {
			if (!selectedFeatures.includes(e.target.value)) {
				selectedFeatures.push(e.target.value);
				// Find the element with e.target.value + -desc and show it.
				document.querySelector(`#${e.target.value}-desc`).style.display = 'block';
			}
		} else {
			selectedFeatures = selectedFeatures.filter(feature => feature !== e.target.value);
			document.querySelector(`#${e.target.value}-desc`).style.display = 'none';
		}
	});
});

// Save selected features to the database.
const saveFeaturesBtn = document.querySelector('#envira-save-features');
saveFeaturesBtn.addEventListener('click', () => {
	if (selectedFeatures.length === 0) {
		return;
	}

	let requestData = {
		action: 'save_selected_addons',
		addons: selectedFeatures,
		nonce: enviraOnboardingWizard.nonce
	};

	fetch(enviraOnboardingWizard.ajaxUrl, {
		method: 'post',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: new URLSearchParams(requestData).toString()
	})
		.then(response => response.json())
		.then(data => {
			if (data.success) {
				// Show success message.
			}
		})
		.catch(error => {
			console.error('Error:', error);
		});

	displaySelectedAddons();
});

// Get all the checkboxes with the class recommended.
const recommendedPlugins = document.querySelectorAll('.recommended');
let selectedRecommended = [];
let selectedPluginsdiv = document.querySelector('.selected-plugins-names');
let selectedPluginsNames = [];
recommendedPlugins.forEach(recommended => {
	recommended.addEventListener('click', e => {
		if (e.target.checked) {
			selectedRecommended.push(e.target.value);
			selectedPluginsNames.push(e.target.getAttribute('data-name'));
			// Find the element with e.target.value + -desc and show it.
			document.querySelector(`#${e.target.value}-desc`).style.display = 'block';
		} else {
			selectedRecommended = selectedRecommended.filter(
				recommended => recommended !== e.target.value
			);
			selectedPluginsNames = selectedPluginsNames.filter(
				name => name !== e.target.getAttribute('data-name')
			);
			document.querySelector(`#${e.target.value}-desc`).style.display = 'none';
		}
		displaySelectedPlugins();
	});
});

// Display selected recommended plugins based on selection.
let displaySelectedPlugins = () => {
	selectedPluginsdiv.innerHTML = '';

	if (selectedPluginsNames.length === 0) {
		// check if there are any selected recommended plugins.
		recommendedPlugins.forEach(recommended => {
			// get the checked recommended plugins that are not in the selectedRecommended array.
			if (
				recommended.checked &&
				!selectedRecommended.includes(recommended.value) &&
				!enviraOnboardingWizard.plugins_list.includes(recommended.value)
			) {
				selectedPluginsNames.push(recommended.getAttribute('data-name'));
				document.querySelector(`#${recommended.value}-desc`).style.display = 'block';
			}
		});
	}

	if (selectedPluginsNames.length > 0) {
		selectedPluginsdiv.innerHTML = 'The following plugins will be installed: ';
	}

	selectedPluginsNames.forEach(name => {
		let plugin = document.createElement('span');
		plugin.textContent = name;
		selectedPluginsdiv.appendChild(plugin);
		// Append comma after each plugin name but not after the last plugin name.
		if (selectedPluginsNames.indexOf(name) !== selectedPluginsNames.length - 1) {
			let comma = document.createElement('span');
			comma.innerHTML = ', ';
			selectedPluginsdiv.appendChild(comma);
		}
	});
};

displaySelectedPlugins();

// Install the selected recommended plugins.
const installBtn = document.querySelector('#envira-install-recommended');
installBtn.addEventListener('click', () => {
	if (selectedRecommended.length === 0) {
		// check if there are any selected recommended plugins.
		recommendedPlugins.forEach(recommended => {
			// get the checked recommended plugins that are not in the selectedRecommended array.
			if (recommended.checked && !selectedRecommended.includes(recommended.value)) {
				selectedRecommended.push(recommended.value);
			}
		});
	}

	let requestData = {
		action: 'install_recommended_plugins',
		plugins: selectedRecommended,
		nonce: enviraOnboardingWizard.nonce
	};

	fetch(enviraOnboardingWizard.ajaxUrl, {
		method: 'post',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: new URLSearchParams(requestData).toString()
	})
		.then(response => response.json())
		.then(data => {
			if (data.success) {
				// Show success message.
			}
		})
		.catch(error => {
			console.error('Error:', error);
		});
});

// Insert selected addons to #selected-add-ons div.

let tickSvg = `<svg class=envira-checkmark fill=none viewBox="0 0 14 11" xmlns=http://www.w3.org/2000/svg>
<path clip-rule=evenodd d="M10.8542 1.37147C11.44 0.785682 12.3897 0.785682 12.9755 1.37147C13.5613 1.95726 13.5613 2.907 12.9755 3.49279L6.04448 10.4238C5.74864 10.7196 5.35996 10.8661 4.97222 10.8631C4.58548 10.8653 4.19805 10.7189 3.90298 10.4238L1.0243 7.5451C0.438514 6.95931 0.438514 6.00956 1.0243 5.42378C1.61009 4.83799 2.55983 4.83799 3.14562 5.42378L4.97374 7.2519L10.8542 1.37147Z" fill=currentColor fill-rule=evenodd></path>
</svg>`;

let selectedAddons = document.querySelector('#selected-add-ons');

function displaySelectedAddons() {
	// Find all the selected-addon-item divs and remove them, to avoid duplicates.
	let selectedAddonItems = document.querySelectorAll('.selected-addon-item');
	selectedAddonItems.forEach(item => {
		item.remove();
	});

	selectedFeatures.forEach(feature => {
		const addon = document.createElement('div');
		addon.classList.add(
			'envira-col',
			'col-sm-6',
			'col-xs-12',
			'envira-col',
			'text-xs-left',
			'selected-addon-item'
		);
		// Get data-name attribute from the checkbox by its name.
		let addonName = document.querySelector(`input[name="${feature}"]`).getAttribute('data-name');
		addon.innerHTML = tickSvg;
		addon.appendChild(document.createTextNode(addonName));
		selectedAddons.appendChild(addon);
		// show the desc of the selected feature.
		document.querySelector(`#${feature}-desc`).style.display = 'block';
	});
}

// Verify license key.
const verifyBtn = document.querySelector('.envira-gallery-verify-submit');
const successMessage = document.querySelector('#license-key-message');
let loadingSpinner = document.querySelector('.envira-onboarding-spinner');

/**
 * Lite install addons while verifying the license key.
 * Introduced onboarding: 'install_addons', param for installing addons.
 * Pro installs addons after verifying the license key via separate ajax call.
 */
verifyBtn.addEventListener('click', e => {
	e.preventDefault();

	let licenseKey = document.getElementById('envira-settings-key').value;

	if (licenseKey === '') {
		successMessage.classList.add('envira-error');
		successMessage.innerHTML = 'Please enter your license key.';
		return;
	}

	// Show spinner.
	loadingSpinner.style.visibility = 'visible';
	verifyBtn.classList.add('envira-disabled');
	successMessage.classList.remove('envira-success', 'envira-error');

	let requestData = {
		action: 'envira_connect',
		key: licenseKey,
		onboarding: 'install_addons',
		_wpnonce: enviraOnboardingWizard.connect_nonce
	};

	let toggleButtonsVisibility = () => {
		loadingSpinner.style.visibility = 'hidden';
		verifyBtn.disabled = false;
		verifyBtn.classList.remove('envira-disabled');
	};

	fetch(enviraOnboardingWizard.ajaxUrl, {
		method: 'post',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: new URLSearchParams(requestData).toString()
	})
		.then(response => response.json())
		.then(data => {
			if (data.success) {
				successMessage.classList.add('envira-success');
				successMessage.textContent = data.data.message;
				toggleButtonsVisibility();
			} else {
				successMessage.classList.add('envira-error');
				successMessage.textContent = data.data.message;
				toggleButtonsVisibility();
			}
		})
		.catch(error => {
			successMessage.classList.add('envira-error');
			successMessage.innerHTML = 'Error verifying the license key.';
			console.log('Error:', error);
			toggleButtonsVisibility();
		});
});

// Show body content once it is loaded.
let domReady = cb => {
	document.readyState === 'interactive' || document.readyState === 'complete'
		? cb()
		: document.addEventListener('DOMContentLoaded', cb);
};

domReady(() => {
	// Display body when DOM is loaded
	document.body.style.visibility = 'visible';
});