/**
 * Northfield Theatre — Seating Plan Interactions
 *
 * Keyboard + pointer accessible zone selection. Updates the detail panel
 * when a zone is selected.
 *
 * @package Northfield_Theatre
 * @since 1.0.0
 */

(function () {
	'use strict';

	var dataEl = document.getElementById('seating-zones-data');
	var panel = document.getElementById('seating-detail-panel');
	var svg = document.querySelector('.seating-plan__svg');

	if (!dataEl || !panel || !svg) {
		return;
	}

	var zoneData;
	try {
		zoneData = JSON.parse(dataEl.textContent);
	} catch (err) {
		return;
	}

	var detailEls = {
		eyebrow: document.getElementById('seating-detail-band-label'),
		title: document.getElementById('zone-detail-heading'),
		intro: document.getElementById('seating-detail-intro'),
		priceBlock: document.getElementById('seating-detail-price-block'),
		price: document.getElementById('seating-detail-price'),
		meta: document.getElementById('seating-detail-meta'),
		rows: document.getElementById('seating-detail-rows'),
		seats: document.getElementById('seating-detail-seats'),
		notes: document.getElementById('seating-detail-notes'),
		access: document.getElementById('seating-detail-access'),
		panelRoot: document.querySelector('.seating-detail'),
	};

	var zones = svg.querySelectorAll('.seating-plan__zone');

	function selectZone(key, trigger) {
		var info = zoneData[key];
		if (!info) {
			return;
		}

		// Update active state on SVG
		zones.forEach(function (z) {
			z.classList.remove('is-active');
		});
		if (trigger) {
			trigger.classList.add('is-active');
		}

		// Update panel
		if (detailEls.panelRoot) {
			detailEls.panelRoot.setAttribute('data-band', info.bandKey);
		}
		detailEls.eyebrow.textContent = info.bandLabel;
		detailEls.title.textContent = info.label;
		detailEls.intro.textContent = info.notes;
		detailEls.price.textContent = info.price;
		detailEls.rows.textContent = info.rows;
		detailEls.seats.textContent = info.seats + ' seats';
		detailEls.notes.textContent = info.notes;
		detailEls.access.textContent = info.access;

		detailEls.priceBlock.hidden = false;
		detailEls.meta.hidden = false;

		// Announce to screen readers via focus
		if (trigger) {
			trigger.setAttribute('aria-selected', 'true');
		}
		zones.forEach(function (z) {
			if (z !== trigger) {
				z.setAttribute('aria-selected', 'false');
			}
		});
	}

	zones.forEach(function (zone) {
		zone.setAttribute('aria-selected', 'false');

		zone.addEventListener('click', function () {
			var key = zone.getAttribute('data-zone');
			selectZone(key, zone);
		});

		zone.addEventListener('keydown', function (e) {
			if (e.key === 'Enter' || e.key === ' ') {
				e.preventDefault();
				var key = zone.getAttribute('data-zone');
				selectZone(key, zone);
			}
		});
	});

	// Scroll panel into view on mobile when a zone is selected.
	if (window.matchMedia('(max-width: 959px)').matches) {
		zones.forEach(function (zone) {
			zone.addEventListener('click', function () {
				if (panel && panel.scrollIntoView) {
					setTimeout(function () {
						panel.scrollIntoView({
							behavior: 'smooth',
							block: 'start',
						});
					}, 50);
				}
			});
		});
	}
})();
