( function () {
	'use strict';

	document.addEventListener( 'DOMContentLoaded', function () {
		var wrap = document.querySelector( '.ambh-fundraiser-attrs' );
		if ( ! wrap ) {
			return;
		}

		// Show/hide the Sub-teams row whenever the "Team fundraiser" checkbox changes.
		var typeCheckbox = wrap.querySelector( 'input[name="_ambh_is_team"]' );
		var nestedRow    = wrap.querySelector( '#ambh-attr-nested' );
		if ( typeCheckbox && nestedRow ) {
			typeCheckbox.addEventListener( 'change', function () {
				nestedRow.hidden = ! this.checked;
			} );
		}

		wrap.addEventListener( 'click', function ( e ) {
			var editLink  = e.target.closest( '.ambh-attr-edit-link' );
			var okBtn     = e.target.closest( '.ambh-attr-ok' );
			var cancelBtn = e.target.closest( '.ambh-attr-cancel' );

			if ( editLink ) {
				e.preventDefault();
				openEditor( editLink.closest( '.ambh-attr-row' ) );
				return;
			}

			if ( okBtn ) {
				e.preventDefault();
				var row = okBtn.closest( '.ambh-attr-row' );
				syncDisplayValue( row );
				closeEditor( row );
				return;
			}

			if ( cancelBtn ) {
				e.preventDefault();
				var row = cancelBtn.closest( '.ambh-attr-row' );
				restoreOriginalValue( row );
				closeEditor( row );
			}
		} );

		function openEditor( row ) {
			var input = getInput( row );
			if ( input ) {
				row.dataset.originalValue = input.type === 'checkbox' ? ( input.checked ? '1' : '0' ) : input.value;
			}
			row.querySelector( '.ambh-attr-edit-link' ).hidden = true;
			row.querySelector( '.ambh-attr-editor' ).removeAttribute( 'hidden' );
		}

		function closeEditor( row ) {
			row.querySelector( '.ambh-attr-editor' ).setAttribute( 'hidden', '' );
			row.querySelector( '.ambh-attr-edit-link' ).hidden = false;
		}

		function restoreOriginalValue( row ) {
			var input = getInput( row );
			if ( ! input ) {
				return;
			}
			var orig = row.dataset.originalValue || '';
			if ( input.type === 'checkbox' ) {
				input.checked = orig === '1';
			} else {
				input.value = orig;
			}
		}

		function syncDisplayValue( row ) {
			var input     = getInput( row );
			var valueSpan = row.querySelector( '.ambh-attr-value' );
			if ( ! input || ! valueSpan ) {
				return;
			}

			var inputType = row.dataset.inputType || 'text';
			var label     = '—';

			switch ( inputType ) {
				case 'select':
					var opt = input.options[ input.selectedIndex ];
					if ( opt && opt.value !== '' ) {
						label = opt.text;
					}
					break;

				case 'number':
					if ( input.value !== '' ) {
						var parser   = window.ambhCurrencyInput && window.ambhCurrencyInput.parseAmount
							? window.ambhCurrencyInput.parseAmount
							: parseFloat;
						var num      = parser( input.value );
						var currency = row.dataset.currency || '';
						label = isNaN( num ) ? '—' : currency + num.toLocaleString( undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 } );
					}
					break;

				case 'checkbox':
					label = input.checked
						? ( row.dataset.checkedLabel   || 'Yes' )
						: ( row.dataset.uncheckedLabel || 'No' );
					break;

				case 'datetime':
					if ( input.value !== '' ) {
						var dt = new Date( input.value );
						label  = isNaN( dt.getTime() ) ? input.value : dt.toLocaleDateString();
					}
					break;

				default:
					label = input.value || '—';
			}

			valueSpan.textContent = label;
		}

		function getInput( row ) {
			return row.querySelector( '.ambh-attr-editor .ambh-attr-input' );
		}
	} );
} )();
