/**
 * Brooklyn Lite — shadcn-style Customizer Controls
 *
 * Transforms native WP Customizer controls into modern UI:
 * - Radio buttons → segmented tab controls
 * - Range sliders → slider with live value badge
 */
(function () {
	'use strict';

	var SECTION_IDS = [
		'brooklyn_lite_section_menu',
		'brooklyn_lite_section_blog_index',
		'brooklyn_lite_section_blog_single',
		'brooklyn_lite_section_footer',
		'brooklyn_lite_section_fonts',
		'brooklyn_lite_section_colors'
	];

	/**
	 * Transform radio groups into segmented controls.
	 */
	function transformRadios() {
		var selector = SECTION_IDS.map(function (id) {
			return '#accordion-section-' + id + ' .customize-control-radio';
		}).join(', ');

		var controls = document.querySelectorAll(selector);

		controls.forEach(function (control) {
			if (control.classList.contains('bl-radios-transformed')) return;

			// WP renders radios as: <label><input type="radio">Text</label>
			// OR inside .customize-inside-control-row divs
			var radios = control.querySelectorAll('input[type="radio"]');
			if (!radios.length) return;

			var items = [];
			radios.forEach(function (radio) {
				var labelEl = radio.closest('label');
				var text = '';
				if (labelEl) {
					// Get text content excluding the input element
					text = labelEl.textContent.trim();
				}
				items.push({
					value: radio.value,
					checked: radio.checked,
					name: radio.name,
					id: radio.id || (radio.name + '-' + radio.value),
					text: text,
					originalRadio: radio
				});
			});

			if (!items.length) return;

			var isVertical = items.length > 3;

			var wrapper = document.createElement('div');
			wrapper.className = 'bl-segmented-control' + (isVertical ? ' bl-segmented-control--vertical' : '');

			items.forEach(function (item) {
				var seg = document.createElement('div');
				seg.className = 'bl-segmented-item';

				var newRadio = document.createElement('input');
				newRadio.type = 'radio';
				newRadio.name = 'bl-' + item.name;
				newRadio.id = 'bl-' + item.id;
				newRadio.value = item.value;
				newRadio.checked = item.checked;

				var label = document.createElement('label');
				label.htmlFor = 'bl-' + item.id;
				label.textContent = item.text;

				newRadio.addEventListener('change', function () {
					if (!this.checked) return;

					// Sync with original WP radio
					item.originalRadio.checked = true;
					item.originalRadio.dispatchEvent(new Event('change', { bubbles: true }));

					// Also sync via WP Customize API
					var controlEl = this.closest('.customize-control');
					if (controlEl && window.wp && wp.customize) {
						var cid = controlEl.id.replace('customize-control-', '');
						if (wp.customize(cid)) {
							wp.customize(cid).set(this.value);
						}
					}
				});

				seg.appendChild(newRadio);
				seg.appendChild(label);
				wrapper.appendChild(seg);
			});

			// Insert after title
			var title = control.querySelector('.customize-control-title');
			if (title) {
				title.parentNode.insertBefore(wrapper, title.nextSibling);
			} else {
				control.appendChild(wrapper);
			}

			// Hide all original labels/rows that contain radios
			radios.forEach(function (radio) {
				var parent = radio.closest('label') || radio.closest('.customize-inside-control-row');
				if (parent) {
					parent.style.display = 'none';
				}
			});

			control.classList.add('bl-radios-transformed');
		});
	}

	/**
	 * Add value badge to range sliders.
	 */
	function enhanceRangeSliders() {
		var selector = SECTION_IDS.map(function (id) {
			return '#accordion-section-' + id + ' .customize-control input[type="range"]';
		}).join(', ');

		var ranges = document.querySelectorAll(selector);

		ranges.forEach(function (range) {
			if (range.dataset.blEnhanced) return;
			range.dataset.blEnhanced = '1';

			var control = range.closest('.customize-control');
			if (!control) return;

			var title = control.querySelector('.customize-control-title');
			if (!title) return;

			var header = document.createElement('div');
			header.className = 'bl-range-header';

			var badge = document.createElement('span');
			badge.className = 'bl-range-value';
			badge.textContent = range.value + 'px';

			title.parentNode.insertBefore(header, title);
			header.appendChild(title);
			header.appendChild(badge);

			range.addEventListener('input', function () {
				badge.textContent = this.value + 'px';
			});
		});
	}

	function runTransformations() {
		transformRadios();
		enhanceRangeSliders();
	}

	function init() {
		runTransformations();

		if (window.wp && wp.customize && wp.customize.section) {
			SECTION_IDS.forEach(function (sectionId) {
				var section = wp.customize.section(sectionId);
				if (section) {
					section.expanded.bind(function (isExpanded) {
						if (isExpanded) {
							setTimeout(runTransformations, 150);
						}
					});
				}
			});
		}
	}

	if (document.readyState === 'complete') {
		setTimeout(init, 200);
	} else {
		window.addEventListener('load', function () {
			setTimeout(init, 200);
		});
	}
})();
