class ConfirmModal {
	constructor(options = {}) {
		this.modal = document.querySelector(options.modalSelector || "#confirm-modal")
		this.message = this.modal.querySelector(options.messageSelector || "#msg")
		this.confirmBtn = this.modal.querySelector(options.confirmSelector || "#confirm")
		this.cancelBtn = this.modal.querySelector(options.cancelSelector || "#cancel")
		this.linkSelector = options.linkSelector || '.confirm-link'
		this.messageGenerator = options.messageGenerator || this.defaultMessageGenerator.bind(this)
		this.currentUrl = null

		if (options.confirmText) this.confirmBtn.textContent = options.confirmText
		if (options.cancelText) this.cancelBtn.textContent = options.cancelText

		this.init()
	}

	init() {
		document.querySelectorAll(this.linkSelector).forEach(link => {
			link.addEventListener('click', (e) => {
				e.preventDefault()
				const message = this.messageGenerator(link)
				this.show(link.href, message)
			})
		})

		this.confirmBtn.addEventListener('click', () => this.confirm())
		this.cancelBtn.addEventListener('click', () => this.hide())

		this.modal.addEventListener('click', (e) => {
			if (e.target === this.modal) this.hide()
		})

		document.addEventListener('keydown', (e) => {
			if (e.key === 'Escape' && this.modal.style.display === 'block') {
				this.hide()
			}
		})
	}

	defaultMessageGenerator(link) {
		return link.dataset.message || 'Are you sure you want to continue?'
	}

	show(url, message) {
		this.currentUrl = url
		this.message.textContent = message
		this.modal.style.display = 'block'
		this.confirmBtn.focus()
	}

	hide() {
		this.modal.style.display = 'none'
		this.currentUrl = null
	}

	confirm() {
		if (this.currentUrl) {
			window.location.href = this.currentUrl
		}
		this.hide()
	}
}