/**
 * WP PowerSuite – Native color picker sync
 * Keeps .wpps-color-picker-circle and .wpps-color-code-input in sync.
 * Uses browser default color panel (no custom popover).
 *
 * @package WP_PowerSuite\Admin\Assets
 */
(function () {
	'use strict';

	function init() {
		// When native color input changes, update the linked text input (6-digit from picker)
		document.addEventListener('input', function (e) {
			var colorEl = e.target;
			if (!colorEl || !colorEl.classList || !colorEl.classList.contains('wpps-color-picker-circle') && !colorEl.classList.contains('wpps-box-shadow-color-picker')) {
				return;
			}
			var id = colorEl.id;
			if (!id) {
				return;
			}
			var textEl = null;
			if (colorEl.classList.contains('wpps-box-shadow-color-picker')) {
				var wrap = colorEl.closest('.wpps-box-shadow-color-swatch-wrap');
				textEl = wrap ? wrap.querySelector('.wpps-box-shadow-hex') : null;
			} else {
				textEl = document.querySelector('.wpps-color-code-input[data-color-input="' + id + '"]');
			}
			if (textEl) {
				textEl.value = colorEl.value;
				if (typeof jQuery !== 'undefined') {
					jQuery(textEl).trigger('change');
				} else {
					textEl.dispatchEvent(new Event('change', { bubbles: true }));
				}
			}
		});

		// When user types in hex input, update the color input (first 7 chars for native)
		document.addEventListener('input', function (e) {
			var textEl = e.target;
			if (!textEl || !textEl.classList) {
				return;
			}
			var hex = (textEl.value || '').trim();
			if (!/^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(hex)) {
				return;
			}
			var colorEl = null;
			if (textEl.classList.contains('wpps-box-shadow-hex')) {
				var wrap = textEl.closest('.wpps-box-shadow-color-swatch-wrap');
				colorEl = wrap ? wrap.querySelector('.wpps-box-shadow-color-picker') : null;
			} else if (textEl.classList.contains('wpps-color-code-input') && textEl.getAttribute('data-color-input')) {
				var id = textEl.getAttribute('data-color-input');
				colorEl = document.getElementById(id);
			}
			if (colorEl) {
				colorEl.value = hex.length > 7 ? hex.substring(0, 7) : hex;
			}
		});
		document.addEventListener('change', function (e) {
			var textEl = e.target;
			if (!textEl || !textEl.classList) {
				return;
			}
			var hex = (textEl.value || '').trim();
			if (!hex) {
				return;
			}
			if (hex.indexOf('#') !== 0) {
				hex = '#' + hex;
			}
			if (!/^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(hex)) {
				return;
			}
			var colorEl = null;
			if (textEl.classList.contains('wpps-box-shadow-hex')) {
				var wrap = textEl.closest('.wpps-box-shadow-color-swatch-wrap');
				colorEl = wrap ? wrap.querySelector('.wpps-box-shadow-color-picker') : null;
			} else if (textEl.classList.contains('wpps-color-code-input') && textEl.getAttribute('data-color-input')) {
				var id = textEl.getAttribute('data-color-input');
				colorEl = document.getElementById(id);
			}
			if (colorEl) {
				colorEl.value = hex.length > 7 ? hex.substring(0, 7) : hex;
			}
		});

		// Reset button: restore default on linked circle + hex inputs.
		document.addEventListener('click', function (e) {
			var btn = e.target && e.target.closest ? e.target.closest('.wpps-color-reset') : null;
			if (!btn) {
				return;
			}
			e.preventDefault();
			var def = btn.getAttribute('data-default-color') || '#2271b1';
			var row = btn.closest('.wpps-color-field-row');
			if (!row) {
				return;
			}
			var picker = row.querySelector('.wpps-color-picker-circle');
			var text = row.querySelector('.wpps-color-code-input');
			if (picker) {
				picker.value = def;
				picker.dispatchEvent(new Event('input', { bubbles: true }));
				picker.dispatchEvent(new Event('change', { bubbles: true }));
			}
			if (text) {
				text.value = def;
				text.dispatchEvent(new Event('change', { bubbles: true }));
			}
		});
	}

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