/**
 * Onboarding wizard scripts for Vareon Calculator Suite Lite.
 *
 * Loaded only on the settings_page_vareoncalc admin page with tab=welcome.
 *
 * @package Vareon_Calculator_Suite_Lite
 */

( function () {
	'use strict';

	var REGION_PRESETS = {
		us: {
			currencyCode: 'USD',
			currencyPosition: 'before',
			thousandSeparator: 'comma',
			decimalSeparator: 'dot',
			measurementSystem: 'imperial',
		},
		eu: {
			currencyCode: 'EUR',
			currencyPosition: 'after',
			thousandSeparator: 'dot',
			decimalSeparator: 'comma',
			measurementSystem: 'metric',
		},
		uk: {
			currencyCode: 'GBP',
			currencyPosition: 'before',
			thousandSeparator: 'comma',
			decimalSeparator: 'dot',
			measurementSystem: 'mixed',
		},
	};

	/**
	 * Step 2: Quick Setup interactivity.
	 * - Region preset one-click configuration.
	 * - Theme preset border highlighting on selection.
	 * - Currency "CUSTOM" dropdown reveal + submit fallback.
	 */
	function initSetupStep() {
		var regionPreset = document.getElementById( 'onboarding-region-preset' );
		var currencySelect = document.getElementById( 'onboarding-currency-code' );
		var currencyPosition = document.getElementById( 'onboarding-currency-position' );
		var measurementSystem = document.getElementById( 'onboarding-measurement-system' );
		var thousandSeparator = document.getElementById( 'onboarding-thousand-separator' );
		var decimalSeparator = document.getElementById( 'onboarding-decimal-separator' );
		var customWrapper = document.getElementById( 'onboarding-currency-custom' );
		var customInput = document.getElementById( 'onboarding-currency-custom-input' );
		var suppressSync = false;

		function applyRegionPreset( key ) {
			var preset = REGION_PRESETS[ key ];
			if ( ! preset || ! currencySelect ) {
				return;
			}

			suppressSync = true;

			currencySelect.value = preset.currencyCode;
			if ( customWrapper ) {
				customWrapper.style.display = 'none';
			}

			if ( currencyPosition ) {
				currencyPosition.value = preset.currencyPosition;
			}
			if ( thousandSeparator ) {
				thousandSeparator.value = preset.thousandSeparator;
			}
			if ( decimalSeparator ) {
				decimalSeparator.value = preset.decimalSeparator;
			}
			if ( measurementSystem ) {
				measurementSystem.value = preset.measurementSystem;
			}

			suppressSync = false;
		}

		function syncRegionPreset() {
			if ( suppressSync || ! regionPreset || ! currencySelect ) {
				return;
			}

			var code = currencySelect.value || 'USD';
			var pos = currencyPosition ? currencyPosition.value : 'before';
			var ts = thousandSeparator ? thousandSeparator.value : 'comma';
			var ds = decimalSeparator ? decimalSeparator.value : 'dot';
			var ms = measurementSystem ? measurementSystem.value : 'mixed';
			var matched = 'custom';

			var keys = Object.keys( REGION_PRESETS );
			for ( var i = 0; i < keys.length; i++ ) {
				var p = REGION_PRESETS[ keys[ i ] ];
				if (
					p.currencyCode === code &&
					p.currencyPosition === pos &&
					p.thousandSeparator === ts &&
					p.decimalSeparator === ds &&
					p.measurementSystem === ms
				) {
					matched = keys[ i ];
					break;
				}
			}

			regionPreset.value = matched;
		}

		if ( regionPreset ) {
			regionPreset.addEventListener( 'change', function () {
				if ( this.value !== 'custom' ) {
					applyRegionPreset( this.value );
				}
			} );
		}

		var themeInputs = document.querySelectorAll(
			'input[name="vareoncalc_lite_options[theme_preset]"]'
		);
		themeInputs.forEach( function ( input ) {
			input.addEventListener( 'change', function () {
				themeInputs.forEach( function ( inp ) {
					var label = inp.closest( 'label' );
					if ( label ) {
						label.style.borderColor = inp.checked
							? '#3b82f6'
							: '#e2e8f0';
					}
				} );
			} );
		} );

		if ( currencySelect && customWrapper && customInput ) {
			currencySelect.addEventListener( 'change', function () {
				if ( this.value === 'CUSTOM' ) {
					customWrapper.style.display = 'block';
					customInput.focus();
				} else {
					customWrapper.style.display = 'none';
				}
				syncRegionPreset();
			} );

			var form = document.getElementById( 'onboarding-setup-form' );
			if ( form ) {
				form.addEventListener( 'submit', function () {
					if (
						currencySelect.value === 'CUSTOM' &&
						! customInput.value
					) {
						customInput.value = '$';
					}
				} );
			}
		}

		if ( currencyPosition ) {
			currencyPosition.addEventListener( 'change', syncRegionPreset );
		}
		if ( measurementSystem ) {
			measurementSystem.addEventListener( 'change', syncRegionPreset );
		}
	}

	/**
	 * Step 3: First Calculator interactivity.
	 * - Shortcode type button switching.
	 * - Clipboard copy with fallback.
	 */
	function initFirstCalcStep() {
		var typeSpan = document.getElementById( 'shortcode-type' );
		var copyBtn = document.getElementById( 'shortcode-copy-btn' );
		var shortcodeDisplay = document.getElementById( 'shortcode-display' );
		var typeButtons = document.querySelectorAll( '.vareoncalc-type-btn' );

		if ( ! typeSpan || ! copyBtn || ! shortcodeDisplay ) {
			return;
		}

		var i18n =
			typeof window.vareoncalcOnboarding !== 'undefined'
				? window.vareoncalcOnboarding
				: { copy: 'Copy', copied: 'Copied!' };

		typeButtons.forEach( function ( btn ) {
			btn.addEventListener( 'click', function () {
				var newType = this.getAttribute( 'data-type' );

				typeSpan.textContent = newType;

				typeButtons.forEach( function ( b ) {
					b.style.background = '#f1f5f9';
					b.style.borderColor = '#e2e8f0';
					b.style.color = '#475569';
				} );
				this.style.background = '#3b82f6';
				this.style.borderColor = '#3b82f6';
				this.style.color = '#fff';

				shortcodeDisplay.style.background = '#334155';
				copyBtn.style.background = '#22c55e';
				copyBtn.style.transform = 'scale(1.05)';

				setTimeout( function () {
					shortcodeDisplay.style.background = '#1e293b';
					copyBtn.style.background = '#3b82f6';
					copyBtn.style.transform = 'scale(1)';
				}, 300 );
			} );
		} );

		copyBtn.addEventListener( 'click', function () {
			var currentType = typeSpan.textContent;
			var shortcode = '[vareon type="' + currentType + '"]';
			var button = this;

			var onCopied = function () {
				button.textContent = i18n.copied;
				button.style.background = '#22c55e';
				setTimeout( function () {
					button.textContent = i18n.copy;
					button.style.background = '#3b82f6';
				}, 1500 );
			};

			if ( navigator.clipboard && navigator.clipboard.writeText ) {
				navigator.clipboard.writeText( shortcode ).then( onCopied );
			} else {
				var textarea = document.createElement( 'textarea' );
				textarea.value = shortcode;
				document.body.appendChild( textarea );
				textarea.select();
				document.execCommand( 'copy' );
				document.body.removeChild( textarea );
				onCopied();
			}
		} );
	}

	document.addEventListener( 'DOMContentLoaded', function () {
		initSetupStep();
		initFirstCalcStep();
	} );
} )();

