(function () {
	'use strict';

	/**
	 * Toggle the HTML hidden attribute on an element.
	 *
	 * @param {Element|null} element Target element.
	 * @param {boolean}      hide    Whether the element should be hidden.
	 */
	function setHidden(element, hide) {
		if (!element) {
			return;
		}

		if (hide) {
			element.setAttribute('hidden', 'hidden');
		} else {
			element.removeAttribute('hidden');
		}
	}

	/**
	 * Read the selected radio value for a name, or empty string.
	 *
	 * @param {string} name Input name.
	 * @return {string} Selected value, or an empty string when none is checked.
	 */
	function selectedRadioValue(name) {
		const checked = document.querySelector(
			'input[type="radio"][name="' + name + '"]:checked'
		);
		return checked ? checked.value : '';
	}

	/**
	 * Sync custom-page picker permalink into the URL field.
	 */
	function initCustomPagePicker() {
		const pageSelect = document.getElementById(
			'notfound_fallback_custom_page_id'
		);
		const urlInput = document.getElementById(
			'notfound_fallback_custom_url'
		);

		if (!pageSelect || !urlInput) {
			return;
		}

		pageSelect.addEventListener('change', function () {
			const selectedOption = pageSelect.options[pageSelect.selectedIndex];
			const permalink = selectedOption
				? selectedOption.dataset.permalink
				: '';

			if (permalink) {
				urlInput.value = permalink;
			}
		});
	}

	/**
	 * Show/hide fallback custom target + soft-404 warning from mode/status.
	 */
	function initFallbackDisclosure() {
		const modeRadios = document.querySelectorAll(
			'input[type="radio"][name="notfound_fallback_mode"]'
		);

		if (!modeRadios.length) {
			return;
		}

		const statusSelect = document.getElementById(
			'notfound_fallback_status'
		);
		const customTarget = document.getElementById(
			'seovaultseo-notfound-custom-target'
		);
		const soft404Warning = document.querySelector(
			'.seovaultseo-notfound-soft404-warning'
		);
		const recoveryThemeNotice = document.querySelector(
			'.seovaultseo-notfound-recovery-theme-notice'
		);

		const sync = function () {
			const mode = selectedRadioValue('notfound_fallback_mode');
			const status = statusSelect ? statusSelect.value : '';

			setHidden(customTarget, mode !== 'custom');
			setHidden(
				soft404Warning,
				!(status === '301' && (mode === 'home' || mode === 'custom'))
			);
			setHidden(recoveryThemeNotice, mode === 'theme');
		};

		modeRadios.forEach(function (radio) {
			radio.addEventListener('change', sync);
		});

		if (statusSelect) {
			statusSelect.addEventListener('change', sync);
		}

		sync();
	}

	/**
	 * Show/hide recovery detail rows from enable/content/toggle state.
	 */
	function initRecoveryDisclosure() {
		const enabledToggle = document.getElementById(
			'notfound_recovery_enabled'
		);
		const details = document.getElementById(
			'seovaultseo-notfound-recovery-details'
		);

		if (!enabledToggle || !details) {
			return;
		}

		const homeCtaToggle = document.getElementById(
			'notfound_recovery_show_home_cta'
		);
		const ctaLabelRow = document.getElementById(
			'seovaultseo-notfound-recovery-cta-label-row'
		);
		const recentToggle = document.getElementById(
			'notfound_recovery_show_recent'
		);
		const recentCountRow = document.getElementById(
			'seovaultseo-notfound-recovery-recent-count-row'
		);
		const contentModeRadios = document.querySelectorAll(
			'input[type="radio"][name="notfound_recovery_content_mode"]'
		);
		const pageRow = document.getElementById(
			'seovaultseo-notfound-recovery-page-row'
		);
		const builtinCopyRows = document.querySelectorAll(
			'.seovaultseo-notfound-recovery-builtin-copy'
		);

		const sync = function () {
			const enabled = enabledToggle.checked;
			const contentMode = selectedRadioValue(
				'notfound_recovery_content_mode'
			);
			const usePage = contentMode === 'page';

			setHidden(details, !enabled);
			setHidden(
				ctaLabelRow,
				!enabled || !homeCtaToggle || !homeCtaToggle.checked
			);
			setHidden(
				recentCountRow,
				!enabled || !recentToggle || !recentToggle.checked
			);
			setHidden(pageRow, !enabled || !usePage);

			builtinCopyRows.forEach(function (row) {
				setHidden(row, !enabled || usePage);
			});
		};

		enabledToggle.addEventListener('change', sync);

		if (homeCtaToggle) {
			homeCtaToggle.addEventListener('change', sync);
		}

		if (recentToggle) {
			recentToggle.addEventListener('change', sync);
		}

		contentModeRadios.forEach(function (radio) {
			radio.addEventListener('change', sync);
		});

		sync();
	}

	document.addEventListener('DOMContentLoaded', function () {
		initCustomPagePicker();
		initFallbackDisclosure();
		initRecoveryDisclosure();
	});
})();
