/**
 * Classified Listing booking modal controller.
 *
 * Works for the single listing page and anywhere rtrb_cl_booking_button() is
 * placed (e.g. the archive loop). A single shared modal shell
 * (#rtrb-cl-booking-modal) is reused for every listing on the page: on click
 * we inject a fresh booking-form container carrying the clicked button's
 * service/employee, which the React `site` bundle then auto-mounts via its
 * MutationObserver. On close the container is unmounted and removed so the
 * next (possibly different) listing mounts cleanly.
 */
(function () {
	'use strict';

	var MODAL_ID = 'rtrb-cl-booking-modal';

	function getModal() {
		return document.getElementById(MODAL_ID);
	}

	function getInner(modal) {
		return modal ? modal.querySelector('.rtrb-cl-booking-modal-inner') : null;
	}

	function clearForm(modal) {
		var inner = getInner(modal);
		if (!inner) {
			return;
		}
		var form = inner.querySelector('.rtrb-cl-booking-form');
		// Unmount the React root if the site bundle exposed its handle, so we
		// don't leak a root every time a different listing is opened.
		if (form && form._rtrbRoot && typeof form._rtrbRoot.unmount === 'function') {
			try {
				form._rtrbRoot.unmount();
			} catch (e) {
				/* no-op */
			}
		}
		inner.innerHTML = '';
	}

	function openModal(btn) {
		var modal = getModal();
		var inner = getInner(modal);
		if (!modal || !inner) {
			return;
		}

		// Reset any previously mounted listing form.
		clearForm(modal);

		var form = document.createElement('div');
		form.className = 'rtrb-root rt-radius-booking-form rtrb-cl-booking-form';
		form.setAttribute('data-rtcl', 'true');
		form.setAttribute('data-service-id', btn.getAttribute('data-service-id') || '');
		form.setAttribute('data-employee-id', btn.getAttribute('data-employee-id') || '');
		var flow = btn.getAttribute('data-flow');
		if (flow) {
			form.setAttribute('data-flow', flow);
		}
		var listingId = btn.getAttribute('data-listing-id');
		if (listingId) {
			form.setAttribute('data-listing-id', listingId);
		}

		// Appending triggers the site bundle's MutationObserver, which mounts
		// the React booking app for this listing.
		inner.appendChild(form);

		modal.style.display = 'flex';
		document.body.style.overflow = 'hidden';
	}

	function closeModal() {
		var modal = getModal();
		if (!modal) {
			return;
		}
		modal.style.display = 'none';
		document.body.style.overflow = '';
		clearForm(modal);
	}

	document.addEventListener('click', function (e) {
		var btn = e.target.closest ? e.target.closest('.rtrb-cl-book-now') : null;
		if (btn) {
			e.preventDefault();
			openModal(btn);
			return;
		}

		// Overlay (clicking the dimmed backdrop, outside the form).
		if (e.target && e.target.id === MODAL_ID) {
			closeModal();
			return;
		}

		// Close button rendered by the React form inside the modal.
		if (e.target && e.target.closest && e.target.closest('.rtrb-cl-modal-close')) {
			closeModal();
		}
	});

	document.addEventListener('keydown', function (e) {
		if (e.key !== 'Escape') {
			return;
		}
		var modal = getModal();
		if (modal && modal.style.display === 'flex') {
			closeModal();
		}
	});
})();