class TaxonomySelector {
	constructor() {
		this.container = document.querySelector('dialog#jvb-selector');
		if (!this.container) return;

		this.a11y = window.jvbA11y;
		this.error = window.jvbError;

		this.subscribers = new Set();
		this.fields = new Map();
		this.selectedTerms = new Map();  // a map of fieldId => Set of selected term Ids
		this.loadedTaxonomies = new Set(); // a set of taxonomies, to know whether we should preload a newly registered field
		this.batchFetch = new Set();

		this.activeField = null;
		this.isInitializing = true;
		this.init();
	}

	init() {
		this.initStore();
		this.initElements();
		this.initModal();
		this.scanExistingFields();
		this.initListeners();

		if (this.needsCreator() && window.jvbTaxCreator) {
			this.creator = new window.jvbTaxCreator(this);
		}
		this.isInitializing = false
		this.batchFetchTaxonomies().then(()=> {});
	}

	initStore() {
		const store = window.jvbStore.register(
			'taxonomies',
			{
				storeName: 'terms',
				keyPath: 'id',
				showLoading: false,
				indexes: [
					{name: 'taxonomy', keyPath: 'taxonomy'},
					{name: 'parent', keyPath: 'parent'},
					{name: 'slug', keyPath: 'slug', unique: true},
					{name: 'count', keyPath: 'count'},
				],
				endpoint: 'terms',
				TTL: 2 * 60 * 1000,
				filters: {
					taxonomy: '',
					page: 1,
					search: '',
					parent: 0
				},
				required: 'taxonomy',
				delayFetch: true,
			}
		);
		this.store = store.terms;

		this.store.subscribe(this.handleStoreEvent.bind(this));
	}

	/******************************************************************
	 ELEMENTS
	 ******************************************************************/
	initElements() {
		this.selectors = {
			search: {
				input: '[type=search]',
				clear: '.clear-search',
				container: '.search-wrapper',
				results: '.search-results'
			},
			terms: {
				list: '.items-container',
				wrap: '.items-wrap',
				sentinel: '.scroll-sentinel',
			},
			nav: {
				nav: 'nav.term-navigation',
				back: '.back-to-parent',
				child: '.toggle-children',
				pathLevel: '.path-level',
			},
			loading: {
				loading: '.loading',
				text: '.loading span',
			},
			selected: '.selected-items',
			modal: {
				title: '#modal-title',
				content: '.modal-content',
				count: '.selection-count'
			},
			favourites: '.favourite-terms',
			field: {
				toggle: 'button.taxonomy-toggle',
				value: 'input[type="hidden"]',
				selected: '.selected-items',
				dropdown: '.search-results',
				search: '[data-autocomplete]',
			}
		}

		this.ui = window.uiFromSelectors(this.selectors);
	}

	initListeners() {
		this.observer = new IntersectionObserver((entries) => {
			entries.forEach(entry => {
				if (entry.isIntersecting) {
					this.nextPage();
				}
			});
		}, {
			root: this.ui.terms.sentinel,
			threshold: 0.5
		});

		this.clickHandler = this.handleClick.bind(this);
		this.changeHandler = this.handleChange.bind(this);
		this.inputHandler = this.handleInput.bind(this);
		this.focusHandler = this.handleFocus.bind(this);
		this.blurHandler = this.handleBlur.bind(this);

		document.addEventListener('click', this.clickHandler);
		document.addEventListener('change', this.changeHandler);
		document.addEventListener('input', this.inputHandler);
		document.addEventListener('focus', this.focusHandler, true);
		document.addEventListener('blur', this.blurHandler, true);
	}

	handleClick(e) {
		const fieldId = this.getFieldId(e.target);
		const field = this.fields.get(fieldId);
		if (!fieldId || !field) return;

		const autoComplete = window.targetCheck(e, '[data-autocomplete-select]');
		if (autoComplete) {
			let termId = parseInt(autoComplete.dataset.id);
			this.addSelected(termId, fieldId);
			if (field.ui.dropdown) {
				field.ui.dropdown.hidden = true;
			}

			if (field.ui.search) {
				field.ui.search.value = '';
			}
		}

		const toggleButton = window.targetCheck(e, field.ui.toggle);
		if (toggleButton) {
			e.preventDefault();
			this.openModal(fieldId);
			return;
		}

		const removeButton = window.targetCheck(e, 'button.remove-item');
		if (removeButton) {
			const fieldId = this.getFieldId(removeButton);
			const termId = removeButton.closest('.selected-item').dataset.id??false;
			if (fieldId && termId) {
				this.removeSelected(termId, fieldId);
			}
			return;
		}

		if (e.target.matches('.modal-close')) {
			this.modal?.handleClose();
			return;
		}

		const backToParent = window.targetCheck(e, this.selectors.nav.back);
		if (backToParent) {
			this.navigateToParent();
			return;
		}

		const toChild = window.targetCheck(e, this.selectors.nav.child);
		if (toChild) {
			const termItem = e.target.closest('li');
			const termId = parseInt(termItem.dataset.id);

			if (termId) {
				this.navigateTo(termId);
			}
			return;
		}

		const pathLevel = window.targetCheck(e, this.selectors.nav.pathLevel);
		if (pathLevel) {
			const termId = parseInt(pathLevel.dataset.id)??0;
			this.navigateTo(termId);
		}

		const dropdown = window.targetCheck(e, field.selectors.dropdown);
		if (dropdown) {
			// reset the timer for hiding the dropdown
			this.scheduleHideDropdown(fieldId);
			return;
		}

		const clearSearch = window.targetCheck(e, this.selectors.search.clear);
		if (clearSearch) {
			const field = this.currentField();
			if (field && field.ui.search) {
				field.ui.search.value = '';
				this.store.setFilters({
					search: '',
					page: 1,
					parent: this.store.filters.parent || 0
				});
			}
			if (this.ui.search.input) {
				this.ui.search.input.value = '';
			}
		}

	}
	handleChange(e) {
		if (!this.container.contains(e.target)) {
			return;
		}
		if (e.target.type !== 'checkbox') return;
		e.preventDefault();
		e.stopPropagation();

		const termId = parseInt(e.target.dataset.id);
		let fieldId = this.getFieldId(e.target);
		if (e.target.checked) {
			this.addSelected(termId, fieldId);
		} else {
			this.removeSelected(termId, fieldId);
		}
	}
	//For search in modal or field autocomplete
	handleInput(e) {
		let fieldId = this.getFieldId(e.target)??this.activeField;
		if (!fieldId) return;
		const field = this.fields.get(fieldId);
		if (!field) return;

		if (!this.container.open) {
			this.activeField = fieldId;
		}

		const query = e.target.value.trim();
		window.debouncer.schedule(
			`${fieldId}-search`,
			async () => {
				await this.store.setFilters({
					taxonomy: field.taxonomy,
					search: query,
					page: 1,
					parent: query ? 0 : (this.store.filters.parent || 0)
				});
				if (this.container.open) {
					window.removeChildren(this.ui.terms.list);
				}
			},
			100
		);
	}

	handleFocus(e) {
		const fieldId = this.getFieldId(e.target);
		const field = this.fields.get(fieldId);
		if (!fieldId || !field) return;
		if (!field.hasAutocomplete && !field.hasSearch) return;

		window.debouncer.cancel(`${fieldId}-search-results`);

		if (!this.container.open){
			this.activeField = fieldId;
			this.preloadTaxonomy(field.taxonomy);
		}
	}

	//Hide autocomplete dropdown on blur
	handleBlur(e) {
		const fieldId = this.getFieldId(e.target);
		const field = this.fields.get(fieldId);
		if (!fieldId || ! field) return;
		if (!field.hasAutocomplete) return;

		this.scheduleHideDropdown(fieldId);
	}

	scheduleHideDropdown(fieldId){
		const field = this.fields.get(fieldId);
		if (!field) return;

		window.debouncer.schedule(
			`${fieldId}-search-results`,
			() => {
				this.activeField = null;
				field.ui.dropdown.hidden = true;
			},
			1500
		);
	}

	/******************************************************************
	 MODAL
	 ******************************************************************/
	initModal() {
		this.modalID = 'dialog#jvb-selector';
		this.container = document.querySelector(this.modalID);

		this.modal = new window.jvbModal(
			this.container,
			{
				handleForm: false,
				save: null,
				open: null
			}
		);
		this.modal.subscribe((event, data) => {
			switch (event) {

			}
		});
	}

	toggleModal(fieldId, open = true) {
		const field = this.fields.get(fieldId);
		if (!field) return;

		if (open) {
			this.openModal(fieldId);
		} else {
			this.closeModal();
		}
	}

	openModal(fieldId) {
		const field = this.fields.get(fieldId);
		if (!field) return;

		this.activeField = fieldId;
		this.ui.modal.title.textContent = `Select ${field.plural}`;
		if (this.ui.search.container) {
			this.ui.search.container.hidden = !field.canSearch;
		}
		if (this.ui.create.details) {
			this.ui.create.details.hidden = !field.canCreate;

			if (this.ui.create.summary) {
				this.ui.create.summary.textContent = `Add new ${field.singular}`;
			}
			if (this.ui.create.label.name) {
				this.ui.create.label.name.textContent = `Name this ${field.singular}`;
			}
			if (this.ui.create.label.parent) {
				this.ui.create.label.parent.textContent = `Nest it under`;
			}
		}
		let message = `Opened ${field.singular} selection. Choose from checkboxes, or search to filter results.`;

		window.removeChildren(this.ui.terms.list);
		this.modal.handleOpen();
		this.setLoading();

		this.store.setFilters({
			taxonomy: field.taxonomy,
			page: 1,
			search: '',
			parent: 0,
		});

		this.a11y.announce(message);
	}

	closeModal() {
		this.modal.handleClose();
		const field = this.fields.get(this.activeField);
		if (!field) return;
		this.observer.unobserve(this.ui.terms.sentinel);
		window.removeChildren(this.ui.terms.list);

		this.notify('selected-terms', {
			terms: this.selectedTerms.get(this.activeField),
			taxonomy: field.taxonomy
		});

		this.activeField = null;

		let message = `Closed ${field.singular} selector.`;
		this.a11y.announce(message);
	}

	navigateToParent() {
		const current = this.store.filters.parent;
		if (current === 0) return;
		let term = this.store.get(parseInt(current));
		if (!term) return;
		let parent = term.parent;
		this.navigateTo(parseInt(parent));
	}
	navigateTo(termId = 0) {
		termId = parseInt(termId)??0;
		this.store.setFilters({parent: termId, page: 1});
		window.removeChildren(this.ui.terms.list);
		this.updateBreadcrumbs(termId);
	}

	nextPage() {
		let current = this.store.filters.page;
		let page = Math.min(current++, this.store.lastResponse.total);
		this.store.setFilters({page:page});
	}
	prevPage() {
		let current = this.store.filters.page;
		let page = Math.max(current - 1, 1);
		this.store.setFilters({page:page});
	}

	addTermToModal(termId) {
		const term = this.store.get(termId);
		if (!term) return;

		const item = window.getTemplate('selectedTerm');
		item.dataset.id = termId;
		item.querySelector('span').textContent = term.path;
		item.querySelector('button').title = `Remove ${name}`;

		this.ui.selected.append(item);
	}
	/******************************************************************
	 FIELDS
	 ******************************************************************/
	scanExistingFields(container = document.body) {
		container.querySelectorAll('[data-type="selector"]').forEach(
			selector => {
				try {
					this.registerField(selector);
				} catch (error) {
					this.error.log(error, {
						component: 'TaxonomySelector',
						action: 'scanExistingFields',
						container: selector.dataset.name
					});
				}
			}
		);
	}

	registerField(element, options = {}) {
		let input = element.querySelector('input[type="hidden"]');
		if (!input) {
			console.warn('TaxonomySelector: No hidden input found for field', element);
			return;
		}

		if (!('fieldId' in element.dataset)) {
			element.dataset.fieldId = window.generateID('selector');
		}
		const fieldId = element.dataset.fieldId;


		let selectors = this.selectors.field;
		let button = element.querySelector('button.taxonomy-toggle');
		if (options.size === 0){
			if (!button) return;
			options = button.dataset;
			if (options.size === 0) return;
		} else if (Object.hasOwn(options, 'toggle')) {
			button = document.querySelector(options.toggle);
			selectors.toggle = options.toggle;
		}

		const config = {
			id: fieldId,
			value: input,
			element: element,
			taxonomy: options.taxonomy??false,
			singular: options.single??'',
			plural: options.plural??'',
			name: element.dataset.field,
			canSearch: Object.hasOwn(options, 'search'),
			limit: options.limit??0,
			hasAutocomplete: Object.hasOwn(options, 'autocomplete'),
			canCreate: Object.hasOwn(options, 'creatable'),
			isRequired: Object.hasOwn(options, 'required'),
			toggle: button,
			selectors: selectors,
			ui: window.uiFromSelectors(selectors, element),
			checked: false,
		};
		if (!config.taxonomy) return;
		this.fields.set(fieldId, config);

		//Check for stored selected terms in hidden input
		this.setSelectedFromValue(input);


		if (this.isInitializing) {
			this.batchFetch.add(config.taxonomy);
		}
		this.updateFieldUI(fieldId);

		return fieldId;
	}

	setSelectedFromValue(fieldId, input) {
		let selected = new Set();
		input.value.value.trim()
			.split(',')
			.map(id => parseInt(id.trim()))
			.filter(id => !isNaN(id))
			.forEach(id => selected.add(id));
		this.selectedTerms.set(fieldId, selected);
	}

	addSelected(termId, fieldId = null) {
		if (!fieldId) fieldId = this.activeField;

		const field = this.fields.get(fieldId);
		const term = this.store.get(termId);
		if (!field || !term) return;

		const selected = this.selectedTerms.get(fieldId);
		if (field.limit !== 0 && selected.size >= field.limit) return;

		selected.add(parseInt(termId));
		this.addTermToDisplay(termId, fieldId);
		this.updateFieldValue(fieldId);
		this.checkLimits(fieldId);
	}
	removeSelected(termId, fieldId = null) {
		if (!fieldId) fieldId = this.activeField;
		const field = this.fields.get(fieldId);
		const term = this.store.get(termId);
		if (!field || !term) return;
		this.selectedTerms.get(fieldId).delete(parseInt(termId));

		const selectedItem = field.ui.selected.querySelector(`[data-i"${termId}"]`);
		if (selectedItem) selectedItem.remove();
		if (this.container.open) {
			let item = this.ui.selected.querySelector(`[data-id="${termId}"]`);
			if (item) item.remove();
		}
		this.updateFieldValue(fieldId);
		this.checkLimits(fieldId);
	}
	updateFieldValue(fieldId) {
		const field = this.fields.get(fieldId);
		if (!field) return;
		let selected = Array.from(this.selectedTerms.get(fieldId));
		field.ui.value = selected.join(',');
	}

	checkLimits(fieldId) {
		if (!this.container.open) return;
		const field = this.fields.get(fieldId);
		if (!field || field.limit === 0) return;
		const disabled = this.selectedTerms.get(fieldId).size >= field.limit;
		this.setCheckboxes(disabled);
	}

	updateFieldFromInput(input) {
		const fieldId = this.getFieldId(input);
		const field = this.fields.get(fieldId);
		if (!fieldId || !field) return;

		this.setSelectedFromValue(fieldId, input);
		this.updateFieldUI(fieldId);
	}

	updateFieldUI(fieldId) {
		const field = this.fields.get(fieldId);
		let selected = this.selectedTerms.get(fieldId);
		if (!field || selected.size === 0) return;

		Array.from(selected).forEach(termId => {
			this.addTermToDisplay(termId, fieldId);
		});
	}

	updateFieldsForTaxonomy(taxonomy) {
		let fields = Array.from(this.fields.values())
			.filter(field => !field.checked && field.taxonomy === taxonomy);
		const hasItems = Array.from(this.store.data.values())
			.some(term=>term.taxonomy === taxonomy);

		fields.forEach(field => {
			field.ui.toggle.disabled = !hasItems && !field.canCreate;
			field.ui.toggle.title = !hasItems
				? `No ${field.singular} available`
				: `Select ${field.plural}`;

			field.checked = true;
		});
	}

	showModalTerms(append = true, showPath = false) {
		const terms = this.store.getFiltered();
		if (terms.size === 0) return;
		if (!append) {
			window.removeChildren(this.ui.terms.list);
		}

		const currentParent = this.store.filters.parent??0;
		this.ui.nav.back.hidden = currentParent === 0;

		const fragment = document.createDocumentFragment();
		terms.forEach(term => {
			const element = this.createTermElement({
				show: showPath,
				... term
			});
			if (element) {
				fragment.appendChild(element);
			}
		});

		this.ui.terms.list.append(fragment);
	}
	createTermElement(term) {
		if (!term || !term.name) return null;

		const item = window.getTemplate('termListItem');
		item.dataset.id = term.id;

		const isSelected = this.selectedTerms.get(this.activeField).has(term.id);
		let [
			checkbox,
			label,
			nameSpan
		] = [
			item.querySelector('input'),
			item.querySelector('label'),
			item.querySelector('span, .term-name')
		];

		let field = this.currentField();
		let limitReached = field.limit > 0 && this.selectedTerms.get(this.activeField).size >= field.limit;
		if (checkbox && label && nameSpan) {
			[
				checkbox.id,
				checkbox.name,
				checkbox.value,
				checkbox.disabled,
				checkbox.checked,
				label.htmlFor,
				label.title,
				label.dataset.path,
				nameSpan.textContent
			] = [
				`${field.element.id}-${term.id}`,
				`${field.container.id}-${field.taxonomy}-select`,
				term.id,
				!isSelected && limitReached,
				isSelected,
				`${field.element.id}-${term.id}`,
				term.path??term.name,
				term.path,
				term.show ? term.path : term.name
			];
			if (term.hasChildren) {
				const toggle = window.getTemplate('termChildrenToggle');
				if (toggle) {
					toggle.ariaLabel = `View ${field.plural} nested under ${term.name}`;
					item.append(toggle);
				}
			}
		}

		return item;
	}

	showAutocompleteTerms() {
		const field = this.currentField();
		const terms = this.currentTerms();
		if (!field || terms.size ===0) return;

		const dropdown = field.ui.dropdown;
		window.removeChildren(dropdown);
		if (terms.length === 0) {
			this.showEmptyState(`No ${field.plural} found.`, dropdown);
		} else {
			terms.forEach(term => {
				const item = this.createAutocompleteTerm(term);
				if (item) {
					dropdown.append(item);
				}
			})
		}

		const query = field.ui.search?.value;
		if (field.canCreate && query.length >= 2 && this.creator) {
			const createButton = this.createTermButton(query);
			if (createButton) {
				dropdown.append(createButton);
			}
		}

		dropdown.hidden = false;
	}
	createAutocompleteTerm(term) {
		const item = window.getTemplate('autocompleteItem');
		if (!item) return;

		item.dataset.id = term.id;
		item.textContent = term.path || term.name;
		return item;
	}
	/******************************************************************
	 UI
	 ******************************************************************/
	addTermToDisplay(termId, fieldId) {
		const term = this.store.get(termId);
		const field = this.fields.get(fieldId);
		if (!term || !field) return;
		//if the term already exists in the selected items, bail early
		if (field.ui.selected.querySelector(`[data-id="${termId}"]`)) return;

		const item = window.getTemplate('selectedTerm');
		if (!item) return;

		item.dataset.id = termId;
		item.dataset.taxonomy = field.taxonomy;
		item.querySelector('.item-name').textContent = term.path;
		item.querySelector('button').title = `Remove ${term.name}`;

		field.ui.selected.append(item);

		if (this.container.open) {
			this.addTermToModal(termId);
			const checkbox = this.ui.terms.list.querySelector(`input[value="${termId}"]`);
			if (checkbox) checkbox.checked = true;
		}
	}
	createTermButton(query) {
		const button = window.getTemplate('autocompleteButton');
		if(!button) return;

		let queryEl = button.querySelector('span');
		queryEl.textContent = `"${query}"`;

		return button;
	}

	updateBreadcrumbs(termId) {
		const nav = this.ui.nav.nav;
		if (!nav) return;
		const existingCrumb = Array.from(nav.children)
			.find(crumb => parseInt(crumb.dataset.id) === termId);

		if (existingCrumb) {
			// Remove all siblings after this crumb
			let nextSibling = existingCrumb.nextElementSibling;
			while (nextSibling) {
				const toRemove = nextSibling;
				nextSibling = nextSibling.nextElementSibling;
				toRemove.remove();
			}
		} else {
			// Add new breadcrumb
			const term = this.store.get(termId);
			if (!term) return;

			const crumb = window.getTemplate('termBreadcrumb');
			if (!crumb) return;

			crumb.dataset.id = termId;
			crumb.textContent = term.name;
			crumb.title = term.name;

			nav.append(crumb);
		}
	}

	updateSelectionCount() {
		if (!this.container.open) return;
		const field = this.fields.get(this.activeField);
		if (!field) return;

		if (this.ui.modal.count) {
			const total = this.selectedTerms.get(this.activeField).size;

			this.ui.modal.count.textContent = field.limit > 0
				? `${total} of ${field.limit} ${field.plural} selected`
				: `${total} ${field.plural} selected`;
		}

	}
	/******************************************************************
	 UTILITY
	 ******************************************************************/
	currentField() {
		return this.fields.get(this.activeField)??false;
	}
	currentTerms() {
		return this.store.getFiltered();
	}
	needsCreator() {
		return Array.from(this.fields.values()).some(field =>
			field.canCreate || field.hasAutocomplete
		);
	}

	getFieldId(element) {
		if (element.dataset.fieldId) return element.dataset.fieldId;

		const fieldContainer = element.closest('[data-field-id]');
		return fieldContainer?.dataset.fieldId || null;
	}

	/**
	 * Sets all checkbox disabled (or not)
	 * @param {Boolean} disabled
	 */
	setCheckboxes(disabled) {
		this.ui.terms.list.querySelectorAll('input[type=checkbox]').forEach(checkbox => {
			if (!checkbox.checked) {
				checkbox.disabled = disabled;
			}
		});
	}

	/******************************************************************
	 DATASTORE HELPERS
	******************************************************************/
	handleStoreEvent(event, data) {
		const handlers = {
			'data-loaded': () => this.handleDataLoaded(),
			'filters-changed': () => this.handleFiltersChanged(),
			'fetch-error': () => this.handleFetchError()
		};

		handlers[event]?.();
	}
	handleDataLoaded() {
		const taxonomy = this.store.filters.taxonomy;
		if (taxonomy?.includes(',')) {
			const taxonomies = taxonomy.split(',').map(t => t.trim());
			taxonomies.forEach(tax => this.updateFieldsForTaxonomy(tax));
		}

		if (this.container.open) {
			this.showResults();
			return;
		}
		if (this.activeField) {
			this.showResults(true);
		}
	}

	showResults(isAutoComplete = false) {
		this.setLoading(false);
		const terms = this.store.getFiltered();
		const filters = this.store.filters;
		const response = this.store.lastResponse?.page || {};
		const isSearch = filters.search && filters.search.length > 0;
		const append = filters.page > 1;
		const field = this.currentField();

		this.notify('terms-loaded', {
			terms,
			filters
		});

		if (terms.length === 0) {
			if (!append) {
				this.showEmptyState(isSearch ? `No matching ${field.plural}.` : `No ${field.plural} available.`);
			}
			this.observer.unobserve(this.ui.terms.sentinel);
		} else {
			if (!isAutoComplete) {
				this.showModalTerms(append, isSearch);

				if (response.has_more) {
					this.observer.observe(this.ui.terms.sentinel);
				} else {
					this.observer.unobserve(this.ui.terms.sentinel);
				}
			} else {
				this.showAutocompleteTerms()
			}
		}

		this.a11y.announce(terms.length, append);
	}
	handleFiltersChanged() {
		// if (this.modal?.open) {
		// 	this.setLoading();
		// }
	}

	handleFetchError(error) {
		this.setLoading(false);
	}
	async batchFetchTaxonomies() {
		if (this.batchFetch.size === 0) return;

		const taxonomies = Array.from(this.batchFetch);
		taxonomies.forEach(tax => this.loadedTaxonomies.add(tax));
		this.batchFetch.clear();

		try {
			taxonomies.forEach(tax => this.loadedTaxonomies.add(tax));

			await this.store.setFilters({
				taxonomy: taxonomies.join(','),
				page: 1,
				search: '',
				parent: 0
			});
		} catch (error) {
			console.error('Failed to batch fetch taxonomies:', error);
		}
	}

	preloadTaxonomy(taxonomy) {
		if (this.loadedTaxonomies.has(taxonomy)) return;

		this.store.setFilters( {
			taxonomy: taxonomy,
			page: 1,
			search: '',
			parent: 0
		});

		this.loadedTaxonomies.add(taxonomy);
	}

	/**************************************************
	 LOADING
	**************************************************/
	setLoading(on = true) {
		this.ui.loading.loading.hidden = on;
		this.modal.classList.toggle('loading', on);

		if (on) {
			let searchQuery = this.store.filters.search || '';
			searchQuery = searchQuery === '' ? false : searchQuery;
			const currentParent = this.store.filters.parent || 0;
			const message = searchQuery
				? `Searching for "${searchQuery} items` :
				currentParent === 0
					? 'loading items'
					: 'loading child items';

			if (window.typeLoop && this.ui.loading.text) {
				this.stopTyping = window.typeLoop(this.ui.loading.text, message);
			} else {
				this.ui.loading.text.textContenet = message;
			}
		} else {
			if (this.stopTyping) {
				this.stopTyping();
				this.stopTyping = null;
			}
		}
	}
	showEmptyState(message = 'No items found.', container = null) {
		if (!container) container = this.ui.terms.list;
		const emptyElement = window.getTemplate('noTermResults');
		const span = emptyElement.querySelector('span');
		if (message && span) {
			span.textContent = message;
		}
		container.append(emptyElement);
	}
	/**************************************************
	 SUBSCRIBERS
	**************************************************/
	subscribe(callback) {
		this.subscribers.add(callback);
		return () => this.subscribers.delete(callback);
	}
	notify(event, data={}) {
		this.subscribers.forEach(callback => {
			try {
				callback(event, data);
			} catch (error) {
				console.error('Subscriber error:', error);
			}
		});
	}
	/******************************************************
	 CLEANUP
	******************************************************/
	destroy() {
		document.removeEventListener('click', this.clickHandler);
		document.removeEventListener('change', this.changeHandler);
		document.removeEventListener('input', this.inputHandler);
		document.removeEventListener('focus', this.focusHandler);
		document.removeEventListener('blur', this.blurHandler);

		this.observer?.disconnect();
		this.subscribers.clear();
		this.fields.clear();
		this.selectedTerms.clear();
	}
}

document.addEventListener('DOMContentLoaded', function() {
	window.auth.subscribe((event) => {
		if (event === 'auth-loaded') {
			window.jvbSelector = new TaxonomySelector();
		}
	});
});