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) => {
		// Only prevent default for non-step-0 navigation.
		// For step 0, allow form submission to trigger HTML5 validation.
		if(formStepsNum !== 0){
			e.preventDefault();
			let nextStep = btn.getAttribute("data-next");
			if(nextStep){
				formStepsNum = parseInt(nextStep, 10);
				if (isNaN(formStepsNum)) {
					return;
				}
				updateFormSteps();
				updateProgressbar();
			}
		}
		// For step 0, form submission will be handled by the submit event listener

	});

});

/* 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();
	}
	});
});

/* Handle form submission for step 0 with validation.
   Allow HTML5 validation to run first, then do custom validation.
   Prevent default submission to use AJAX instead. */
document.querySelector("#envira-general").addEventListener("submit", (e) => {
	// Only process on step 0
	if (formStepsNum === 0) {
		e.preventDefault();
		// Run custom validation and save data
		saveFormData();
	}
	// For other steps, let default form behavior proceed (though it shouldn't reach here)
	e.preventDefault();
});

/* 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: 100vh';
	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", (e) => {
	// Set email required attribute based on opt-in checkbox
	if(e.target.checked){
		email.setAttribute("required", "required");
	} else {
		email.removeAttribute("required");
	}
	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", (e) => {
		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;
	}

	// Custom validation as fallback to HTML5 validation.
	const isAnyUserTypeChecked = Array.from(userTypes).some(radio => radio.checked);
	if (!isAnyUserTypeChecked) {
		console.error("User type selection is required");
		return;
	}

	// If "Something Else" is selected, the #others text field is required.
	const othersInput = document.querySelector("#others");
	if (othersInput.required && othersInput.value.trim() === "") {
		console.error("Please fill in the 'What best describes you?' field");
		return;
	}

	// Validate email if opt-in is checked.
	if (email_opt_in.checked) {
		if (email.value.trim() === "" || !isValidEmail(email.value)) {
			console.error("Please enter a valid email address");
			setEmailInvalid();
			return;
		}
	}

	isSavingFormData = true;

	// post form data via WP admin-ajax. enviraOnboardingWizard.ajaxUrl,
	const form = document.querySelector("#envira-general");
	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 user has not selected any features, return.
	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.innerHTML = `${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}${addonName}</div>`
			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");
const installAddonsBtn = document.querySelector("#install-envira-addons-btn");
let loadingSpinner = document.querySelector(".envira-onboarding-spinner");
verifyBtn.addEventListener("click", (e) => {
	e.preventDefault();
	// Show spinner.
	loadingSpinner.style.visibility = "visible";
	verifyBtn.classList.add("envira-disabled");
	// disable the continue button.
	installAddonsBtn.disabled = true;
	installAddonsBtn.classList.add("envira-disabled");
	successMessage.classList.remove("envira-success", "envira-error");

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

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

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

	let requestData = {
		action: 'envira_verify_license_key',
		'envira-license-key': licenseKey,
		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){
				successMessage.classList.add("envira-success");
				successMessage.innerHTML = data.data;
				toggleButtonsVisibility();
			}else{
				successMessage.classList.add("envira-error");
				successMessage.innerHTML = data.data;
				toggleButtonsVisibility();
			}
		})
		.catch((error) => {
			successMessage.classList.add("envira-error");
			successMessage.innerHTML = data.data;
			toggleButtonsVisibility();
			console.log("Error:", error);
		});
});

// Install selected addons.
installAddonsBtn.addEventListener("click", () => {
	let requestData = {
		action: "install_selected_addons",
		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);
		});
});


// 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';
});