/**
 * Kubelio Slidepanel.
 *
 * Provides slide-in panel functionality with direct selectors and simplified logic.
 *
 * @version 5.1.0
 */
class Slidepanel {
	constructor() {
		this.init();
	}

	init() {
		this.attachEvents();
	}

	dispatch(name, el, detail = {}) {
		el.dispatchEvent(new CustomEvent(`slidepanel:${name}`, { detail, bubbles: true, cancelable: true }));
	}

	getAnimClasses(panel) {
		// Used to add additional direction classes if CSS needs them
		if (panel.classList.contains('is-slidepanel-left')) return 'is-sliding-left';
		if (panel.classList.contains('is-slidepanel-bottom')) return 'is-sliding-bottom';
		if (panel.classList.contains('is-slidepanel-top')) return 'is-sliding-top';
		return 'is-sliding-right';
	}

	open(target) {
		const panel = typeof target === 'string' ? document.querySelector(target.startsWith('#') || target.startsWith('.') ? target : `#${target}`) : target;
		if (!panel) return;

		this.dispatch('beforeOpen', panel);

		// Remove any previous exit states
		panel.classList.remove('is-slidepanel-out');

		// Remove inline display:none if present
		if (panel.style.display === 'none') {
			panel.style.display = '';
		}

		requestAnimationFrame(() => {
			requestAnimationFrame(() => {
				panel.classList.add('is-active');
				document.body.classList.add('is-slidepanel-active');
				this.dispatch('opened', panel);
			});
		});
	}

	close(el = null) {
		const panel = el || document.querySelector('.rt-slidepanel.is-active');

		if (!panel) {
			return;
		}
		this.dispatch('beforeClose', panel);

		// Start exit animation
		panel.classList.remove('is-active');
		panel.classList.add('is-slidepanel-out');

		setTimeout(() => {
			panel.style.display = 'none';
			panel.classList.remove('is-slidepanel-out');
			document.body.classList.remove('is-slidepanel-active');

			// Remove active class from triggers
			const panelId = panel.id;
			if (panelId) {
				const triggers = document.querySelectorAll(`.js-slidepanel[href="#${panelId}"], .js-slidepanel[data-target="${panelId}"]`);
				triggers.forEach(trigger => trigger.classList.remove('is-active'));
			}

			this.dispatch('closed', panel);
		}, 500); // 500ms buffer for 0.4s animation
	}

	attachEvents() {
		document.addEventListener('click', (e) => {
			// Trigger
			const trigger = e.target.closest('.js-slidepanel');
			if (trigger) {
				e.preventDefault();
				const target = trigger.getAttribute('href') || trigger.getAttribute('data-target');
				if (target) {
					requestAnimationFrame(() => {
						trigger.classList.add('is-active');
					});
					this.open(target);
				}
				return;
			}

			// Close buttons and overlay
			const isCloseBtn = e.target.closest('.js-slidepanel-close, .rt-slidepanel__close');
			const isOverlay = e.target.matches('.rt-slidepanel__overlay');

			if (isCloseBtn || isOverlay) {
				e.preventDefault();
				this.close(e.target.closest('.rt-slidepanel'));
			}
		});

		// Escape Key
		document.addEventListener('keydown', (e) => {
			if (e.key === 'Escape') this.close();
		});
	}
}

/**
 * Initialize global slidepanel instance
 */
document.addEventListener('DOMContentLoaded', () => {
	window.rtSlidepanel = new Slidepanel();
});
