/**
 * WTE Business Card — Customizer Preview (postMessage handlers).
 *
 * All settings with transport:'postMessage' are bound here for
 * instant, smooth preview updates without a full page reload.
 *
 * @package WTE_Business_Card
 * @since   1.0.0
 */
(function (api) {
	'use strict';

	/* ── Helpers ───────────────────────────────────── */
	function setCSSVar(name, val) {
		document.documentElement.style.setProperty(name, val);
	}

	function setText(selector, val) {
		document.querySelectorAll(selector).forEach(function (el) {
			el.textContent = val;
		});
	}

	function setHTML(selector, val) {
		document.querySelectorAll(selector).forEach(function (el) {
			el.innerHTML = val.replace(/\n/g, '<br>');
		});
	}

	function toggleClass(selector, className, condition) {
		var el = document.querySelector(selector);
		if (el) {
			if (condition) {
				el.classList.add(className);
			} else {
				el.classList.remove(className);
			}
		}
	}

	function toggleDisplay(selector, show) {
		document.querySelectorAll(selector).forEach(function (el) {
			el.style.display = show ? '' : 'none';
		});
	}

	function setAttr(selector, attr, val) {
		document.querySelectorAll(selector).forEach(function (el) {
			el.setAttribute(attr, val);
		});
	}

	function setSrc(selector, val) {
		document.querySelectorAll(selector).forEach(function (el) {
			el.src = val;
		});
	}

	/* ── Colors → CSS Custom Properties ───────────── */
	var colorMap = {
		wte_color_header_bg:      '--wte-color-header-bg',
		wte_color_header_text:    '--wte-color-header-text',
		wte_color_footer_bg:      '--wte-color-footer-bg',
		wte_color_footer_text:    '--wte-color-footer-text',
		wte_color_accent:         '--wte-color-accent',
		wte_color_link:           '--wte-color-link',
		wte_color_body_bg:        '--wte-color-body-bg',
		wte_color_section_alt_bg: '--wte-color-section-alt-bg'
	};

	Object.keys(colorMap).forEach(function (id) {
		api(id, function (setting) {
			setting.bind(function (val) {
				setCSSVar(colorMap[id], val);
			});
		});
	});

	/* ── Text Content (single-line) ────────────────── */
	var textMap = {
		wte_hero_heading:            '.wte-hero__heading',
		wte_hero_subheading:         '.wte-hero__subheading',
		wte_owner_name:              '.wte-profile__name',
		wte_owner_name_kana:         '.wte-profile__kana',
		wte_owner_title:             '.wte-profile__title',
		wte_business_name:           '.wte-business__name',
		wte_business_tel:            '.wte-profile__tel',
		wte_business_founded:        '.wte-profile__founded',
		wte_greeting_heading:        '#wte-greeting .wte-section__heading',
		wte_greeting_signature:      '.wte-greeting__signature',
		wte_hero_cta_primary_text:   '.wte-hero__cta-primary',
		wte_hero_cta_secondary_text: '.wte-hero__cta-secondary',
		wte_header_cta_text:         '.wte-header__cta',
		wte_service_section_heading: '#wte-services .wte-section__heading',
		wte_appeal_section_heading:  '#wte-appeal .wte-section__heading',
		wte_contact_page_title:      '.wte-contact-page__title',
		wte_contact_cta_label:       '.wte-contact-cta__label'
	};

	Object.keys(textMap).forEach(function (id) {
		api(id, function (setting) {
			setting.bind(function (val) {
				setText(textMap[id], val);
			});
		});
	});

	/* ── Text with line breaks (textarea) ─────────── */
	var htmlMap = {
		wte_owner_bio:           '.wte-profile__bio',
		wte_business_address:    '.wte-profile__address',
		wte_business_hours:      '.wte-profile__hours',
		wte_greeting_body:       '.wte-greeting__body',
		wte_contact_page_intro:  '.wte-contact-page__intro',
		wte_service_section_subtext: '#wte-services .wte-section__subtext'
	};

	Object.keys(htmlMap).forEach(function (id) {
		api(id, function (setting) {
			setting.bind(function (val) {
				setHTML(htmlMap[id], val);
			});
		});
	});

	/* ── Hero CTA links ────────────────────────────── */
	api('wte_hero_cta_primary_url', function (setting) {
		setting.bind(function (val) {
			document.querySelectorAll('.wte-hero__cta-primary').forEach(function (el) {
				if (val) {
					el.href = val;
				} else {
					el.href = '#wte-services';
				}
			});
		});
	});

	api('wte_hero_cta_secondary_url', function (setting) {
		setting.bind(function (val) {
			document.querySelectorAll('.wte-hero__cta-secondary').forEach(function (el) {
				if (val) {
					el.href = val;
				}
			});
		});
	});

	/* ── Header ───────────────────────────────────── */
	api('wte_header_sticky', function (setting) {
		setting.bind(function (val) {
			toggleClass('.wte-header', 'wte-header--sticky', !!val);
			toggleClass('body', 'has-sticky-header', !!val);
		});
	});

	api('wte_header_shadow', function (setting) {
		setting.bind(function (val) {
			toggleClass('.wte-header', 'wte-header--shadow', !!val);
		});
	});

	api('wte_header_height', function (setting) {
		setting.bind(function (val) {
			setCSSVar('--wte-header-height', parseInt(val, 10) + 'px');
		});
	});

	api('wte_site_logo_width', function (setting) {
		setting.bind(function (val) {
			setCSSVar('--wte-logo-width', parseInt(val, 10) + 'px');
		});
	});

	api('wte_nav_display', function (setting) {
		setting.bind(function (val) {
			toggleDisplay('.wte-nav', !!val);
		});
	});

	api('wte_header_cta_display', function (setting) {
		setting.bind(function (val) {
			toggleDisplay('.wte-header__cta', !!val);
		});
	});

	/* ── Hero ─────────────────────────────────────── */
	api('wte_hero_overlay_opacity', function (setting) {
		setting.bind(function (val) {
			setCSSVar('--hero-overlay-opacity', (parseInt(val, 10) / 100).toString());
		});
	});

	api('wte_hero_overlay_color', function (setting) {
		setting.bind(function (val) {
			setCSSVar('--hero-overlay-color', val);
		});
	});

	api('wte_hero_height', function (setting) {
		setting.bind(function (val) {
			var hero = document.querySelector('.wte-hero');
			if (!hero) return;
			hero.className = hero.className.replace(/wte-hero--\w+/g, '');
			hero.classList.add('wte-hero');
			hero.classList.add('wte-hero--' + val);
		});
	});

	api('wte_hero_image', function (setting) {
		setting.bind(function (val) {
			var hero = document.querySelector('.wte-hero');
			if (!hero) return;
			hero.style.backgroundImage = val ? 'url(' + val + ')' : 'none';
		});
	});

	/* ── Typography ───────────────────────────────── */
	api('wte_font_size_base', function (setting) {
		setting.bind(function (val) {
			setCSSVar('--wte-font-size-base', parseInt(val, 10) + 'px');
		});
	});

	/* ── Tagline ──────────────────────────────────── */
	api('wte_site_tagline_display', function (setting) {
		setting.bind(function (val) {
			toggleDisplay('.wte-header__tagline', !!val);
		});
	});

	/* ── Contact CTA in LP ────────────────────────── */
	api('wte_contact_display_in_lp', function (setting) {
		setting.bind(function (val) {
			toggleDisplay('#wte-contact-cta', !!val);
		});
	});

	/* ── Greeting Image ────────────────────────────── */
	api('wte_greeting_image', function (setting) {
		setting.bind(function (val) {
			var wrap = document.querySelector('.wte-greeting__image-wrap');
			if (!wrap) return;
			if (val) {
				var img = wrap.querySelector('img');
				if (img) {
					img.src = val;
				} else {
					wrap.innerHTML = '<img src="' + val + '" alt="" class="wte-greeting__image">';
				}
				wrap.style.display = '';
			} else {
				wrap.style.display = 'none';
			}
		});
	});

	/* ── SNS Header / Footer display ──────────────── */
	api('wte_sns_display_header', function (setting) {
		setting.bind(function (val) {
			toggleDisplay('.wte-header .wte-sns-list', !!val);
		});
	});

	api('wte_sns_display_footer', function (setting) {
		setting.bind(function (val) {
			toggleDisplay('.wte-footer .wte-sns-list', !!val);
		});
	});

	/* ── Service Cards 1-6 ─────────────────────────── */
	for (var n = 1; n <= 6; n++) {
		(function (num) {
			api('wte_service_' + num + '_title', function (setting) {
				setting.bind(function (val) {
					var card = document.querySelectorAll('.wte-service-card')[num - 1];
					if (card) {
						var title = card.querySelector('.wte-service-card__title');
						if (title) title.textContent = val;
					}
				});
			});
			api('wte_service_' + num + '_desc', function (setting) {
				setting.bind(function (val) {
					var card = document.querySelectorAll('.wte-service-card')[num - 1];
					if (card) {
						var desc = card.querySelector('.wte-service-card__desc');
						if (desc) desc.textContent = val;
					}
				});
			});
			api('wte_service_' + num + '_display', function (setting) {
				setting.bind(function (val) {
					var cards = document.querySelectorAll('.wte-service-card');
					var card = cards[num - 1];
					if (card) {
						card.style.display = val ? '' : 'none';
					}
				});
			});
		})(n);
	}

	/* ── Appeal Points 1-3 ────────────────────────── */
	for (var a = 1; a <= 3; a++) {
		(function (num) {
			api('wte_appeal_' + num + '_heading', function (setting) {
				setting.bind(function (val) {
					var card = document.querySelector('.wte-appeal-card[data-appeal="' + num + '"]');
					if (card) {
						var h = card.querySelector('.wte-appeal-card__heading');
						if (h) h.textContent = val;
					}
				});
			});
			api('wte_appeal_' + num + '_body', function (setting) {
				setting.bind(function (val) {
					var card = document.querySelector('.wte-appeal-card[data-appeal="' + num + '"]');
					if (card) {
						var b = card.querySelector('.wte-appeal-card__body');
						if (b) b.textContent = val;
					}
				});
			});
			api('wte_appeal_' + num + '_number', function (setting) {
				setting.bind(function (val) {
					var card = document.querySelector('.wte-appeal-card[data-appeal="' + num + '"]');
					if (card) {
						var nb = card.querySelector('.wte-appeal-card__number');
						if (nb) nb.textContent = val;
					}
				});
			});
		})(a);
	}

}(wp.customize));
