class Popup {
	constructor() {
		if (Popup.instance) {
			return Popup.instance;
		}
		Popup.instance = this;

		this.a11y = window.jvbA11y;
		this.popups = new Map();
		this.activePopup = null;

		this.clickHandler = this.handleClick.bind(this);
		this.keyHandler = this.handleEscape.bind(this);
		document.addEventListener('click', this.clickHandler);
	}

	/**
	 * Register a new popup
	 * @param {Object} config - { toggle, popup, name, onOpen, onClose, onEscape }
	 * @returns {Object} API for this popup
	 */
	registerPopup(config = {}) {
		const popup = config.popup;
		const toggle = config.toggle;

		if (!popup || !toggle) {
			console.warn('Popup registration requires both popup and toggle elements');
			return null;
		}

		const id = toggle.id || '.' + toggle.className.split(' ').join('.');

		const entry = {
			id,
			toggle,
			popup,
			name: config.name || 'Popup',
			onOpen: config.onOpen || (() => {}),
			onClose: config.onClose || (() => {}),
			onEscape: config.onEscape || (() => {}),
			isOpen: false
		};

		this.popups.set(id, entry);

		return this.getPopupAPI(id);
	}

	getPopupAPI(id) {
		return {
			openPopup: (message) => this.openPopup(id, message),
			closePopup: (message) => this.closePopup(id, message),
			togglePopup: () => this.togglePopup(id),
			isOpen: () => this.popups.get(id)?.isOpen || false,
			destroy: () => this.popups.delete(id)
		};
	}

	/**
	 * Single document-level click handler for all popups
	 */
	handleClick(e) {
		// Check if click is on any registered toggle
		for (const [id, entry] of this.popups) {
			if (e.target === entry.toggle || e.target.closest(id)) {
				this.togglePopup(id);
				return;
			}
		}

		// If a popup is active, close it on outside click
		if (this.activePopup) {
			const entry = this.popups.get(this.activePopup);
			if (entry && !entry.popup.contains(e.target)) {
				this.closePopup(this.activePopup);
			} else if (entry && window.targetCheck(e, '.close')) {
				this.closePopup(this.activePopup);
			}
		}
	}

	handleEscape(e) {
		if (e.key === 'Escape' && this.activePopup) {
			const entry = this.popups.get(this.activePopup);
			this.closePopup(this.activePopup, `Closed ${entry.name} with escape key`);
			entry.onEscape();
		}
	}

	togglePopup(id) {
		const entry = this.popups.get(id);
		if (!entry) return;

		if (entry.isOpen) {
			this.closePopup(id);
		} else {
			this.openPopup(id);
		}
	}

	openPopup(id, message) {
		const entry = this.popups.get(id);
		if (!entry) return;

		// Close any currently active popup first
		if (this.activePopup && this.activePopup !== id) {
			this.closePopup(this.activePopup);
		}

		entry.isOpen = true;
		this.activePopup = id;

		entry.popup.classList.add('expanded');
		entry.toggle.classList.add('expanded');
		entry.toggle.title = `Hide ${entry.name}`;
		entry.toggle.ariaExpanded = true;
		entry.toggle.querySelector('span').textContent = `Close ${entry.name}`;

		this.a11y.announce(message || `Opened ${entry.name}`);
		entry.onOpen();

		document.addEventListener('keydown', this.keyHandler);
	}

	closePopup(id, message) {
		const entry = this.popups.get(id);
		if (!entry) return;

		entry.isOpen = false;
		if (this.activePopup === id) {
			this.activePopup = null;
		}

		entry.popup.classList.remove('expanded');
		entry.toggle.classList.remove('expanded');
		entry.toggle.title = `Show ${entry.name}`;
		entry.toggle.ariaExpanded = false;
		entry.toggle.querySelector('span').textContent = '';

		this.a11y.announce(message || `Closed ${entry.name}`);
		entry.onClose();

		// Only remove keydown if no popups are active
		if (!this.activePopup) {
			document.removeEventListener('keydown', this.keyHandler);
		}
	}

	destroy() {
		document.removeEventListener('click', this.clickHandler);
		document.removeEventListener('keydown', this.keyHandler);
		this.popups.clear();
		this.activePopup = null;
	}
}

document.addEventListener('DOMContentLoaded', function () {
	window.jvbPopup = new Popup();
});