/**
 * Flipbox click trigger (frontend) — vanilla JS.
 * - Toggles front/back for click mode (whole-surface or button).
 * - Syncs aria-hidden on faces; keyboard Enter/Space on focused shell (whole + tabindex).
 * - Event delegation supports dynamically injected markup (Divi/AJAX).
 */
( function () {
	'use strict';

	var SELECTOR_CLICK_BOX = '.dsm-flipbox[data-dsm-flip-trigger="click"]';
	var SELECTOR_INTERACTIVE =
		'a[href], button, input, textarea, select, [contenteditable="true"]';

	/**
	 * @param {Element} box Flipbox root (.dsm-flipbox).
	 */
	function syncFlipboxAria( box ) {
		if ( ! box || box.getAttribute( 'data-dsm-flip-trigger' ) !== 'click' ) {
			return;
		}
		var front = box.querySelector( '.dsm-flipbox-face-front' );
		var back = box.querySelector( '.dsm-flipbox-face-back' );
		if ( ! front || ! back ) {
			return;
		}
		if ( box.classList.contains( 'dsm_flipbox_clicked' ) ) {
			front.setAttribute( 'aria-hidden', 'true' );
			back.setAttribute( 'aria-hidden', 'false' );
		} else {
			front.setAttribute( 'aria-hidden', 'false' );
			back.setAttribute( 'aria-hidden', 'true' );
		}
	}

	/**
	 * @param {Element} box Flipbox root.
	 */
	function toggleFlipBoxState( box ) {
		if ( box.classList.contains( 'dsm_flipbox_click' ) ) {
			box.classList.remove( 'dsm_flipbox_click' );
			box.classList.add( 'dsm_flipbox_clicked' );
		} else {
			box.classList.remove( 'dsm_flipbox_clicked' );
			box.classList.add( 'dsm_flipbox_click' );
		}
		syncFlipboxAria( box );
	}

	function initFlipboxAriaAll() {
		var nodes = document.querySelectorAll( SELECTOR_CLICK_BOX );
		var i;
		for ( i = 0; i < nodes.length; i++ ) {
			syncFlipboxAria( nodes[ i ] );
		}
	}

	/**
	 * @param {Element} el
	 * @param {string}    selector
	 * @return {Element|null}
	 */
	function closest( el, selector ) {
		if ( el.closest ) {
			return el.closest( selector );
		}
		var cur = el;
		while ( cur && cur.nodeType === 1 ) {
			if ( cur.matches && cur.matches( selector ) ) {
				return cur;
			}
			cur = cur.parentElement;
		}
		return null;
	}

	/**
	 * @param {MouseEvent} e
	 */
	function onDocumentClick( e ) {
		var target = e.target;
		if ( ! target || target.nodeType !== 1 ) {
			return;
		}

		var btn = closest( target, '.dsm_flipbox_trigger_button .et_pb_button' );
		if ( btn ) {
			var wrapBtn = closest( btn, '.dsm-flipbox.dsm_flipbox_trigger_button' );
			if (
				wrapBtn &&
				wrapBtn.getAttribute( 'data-dsm-flip-trigger' ) === 'click'
			) {
				e.preventDefault();
				toggleFlipBoxState( wrapBtn );
				return;
			}
		}

		var whole = closest(
			target,
			'.dsm-flipbox.dsm_flipbox_trigger_whole[data-dsm-flip-trigger="click"]'
		);
		if ( ! whole ) {
			return;
		}

		var hit = closest( target, SELECTOR_INTERACTIVE );
		if ( hit && whole.contains( hit ) ) {
			return;
		}

		toggleFlipBoxState( whole );
	}

	/**
	 * @param {KeyboardEvent} e
	 */
	function onDocumentKeydown( e ) {
		if ( e.key !== 'Enter' && e.key !== ' ' ) {
			return;
		}
		var target = e.target;
		if ( ! target || target.nodeType !== 1 ) {
			return;
		}

		var box = closest(
			target,
			'.dsm-flipbox.dsm_flipbox_trigger_whole[data-dsm-flip-trigger="click"]'
		);
		if ( ! box ) {
			return;
		}

		var hit = closest( target, SELECTOR_INTERACTIVE );
		if ( hit && box.contains( hit ) && target !== box ) {
			return;
		}

		e.preventDefault();
		toggleFlipBoxState( box );
	}

	var ariaSyncTimeout = null;

	function scheduleAriaSyncDebounced() {
		if ( ariaSyncTimeout !== null ) {
			window.clearTimeout( ariaSyncTimeout );
		}
		ariaSyncTimeout = window.setTimeout( function () {
			ariaSyncTimeout = null;
			initFlipboxAriaAll();
		}, 80 );
	}

	function bindMutationObserver() {
		if ( typeof MutationObserver === 'undefined' ) {
			return;
		}
		var root = document.documentElement;
		if ( ! root ) {
			return;
		}
		var observer = new MutationObserver( function () {
			scheduleAriaSyncDebounced();
		} );
		observer.observe( root, { childList: true, subtree: true } );
	}

	function bootstrap() {
		initFlipboxAriaAll();
		document.addEventListener( 'click', onDocumentClick );
		document.addEventListener( 'keydown', onDocumentKeydown );
		bindMutationObserver();
	}

	if ( document.readyState === 'loading' ) {
		document.addEventListener( 'DOMContentLoaded', bootstrap );
	} else {
		bootstrap();
	}
} )();
