/**
 * This separates out all create logic from the base TaxonomySelector.js
 * Updated to work with centralized DataStore architecture
 */

class TaxonomyCreator {

	constructor(selector) {
		this.selector = selector;

		// Only initialize modal elements if modal exists
		if (selector.modal) {
			this.createNew = selector.modal.querySelector('.create-new-term');
			this.toggle = selector.modal.querySelector('.new-term-toggle');
			this.form = this.createNew?.querySelector('.create-new-term-section');
		}

		this.initListeners();

		// Only init term creation UI if we have modal elements
		if (this.form) {
			this.initTermCreation();
		}
	}

	initListeners() {
		this.clickHandler = this.handleClick.bind(this);
		document.addEventListener('click', this.clickHandler);
	}

	handleClick(e) {
		if (window.targetCheck(e, '.create-new-term summary')) {
			if (this.createNew.open) {
				this.createNew.querySelector('input[name="term_name"]').focus();
			}
			this.resetParentOptions();
		}

		if (window.targetCheck(e, '.submit-term')) {
			this.handleTermCreation(e);
		}

		// Handle autocomplete create button
		if (window.targetCheck(e, '.create-term')) {
			this.handleAutocompleteCreate(e);
		}
	}

	async handleTermCreation(e) {
		const taxonomy = this.selector.currentConfig?.taxonomy;
		if (!taxonomy) return;

		const termName = this.form.querySelector('input[name="term_name"]').value.trim();
		const parentId = parseInt(this.form.querySelector('input#select_parent')?.value) || 0;

		if (!termName) return;

		try {
			this.form.querySelector('button').disabled = true;
			const response = await this.createTerm(termName, parentId, taxonomy);

			if (response.success && response.term) {
				let term = response.term;

				this.createNew.open = false;
				await this.selector.store.clearCache();

				// Add to store's data BEFORE display update
				this.selector.store.data.set(term.id, {
					id: term.id,
					name: term.name,
					path: termPath,
					taxonomy: field.taxonomy,
					parent: 0,
					count: 0,
					hasChildren: false,
					slug: term.slug || termName.toLowerCase().replace(/\s+/g, '-')
				});

				this.selector.addSelectedTermToModal(term.id, term.name, term.path || term.name);

				const currentParent = this.selector.store.filters.parent || 0;
				if (currentParent === parentId) {
					await this.selector.store.setFilters({
						taxonomy,
						parent: parentId,
						page: 1,
						search: ''
					});
				}

				this.form.querySelector('input[name="term_name"]').value = '';
				const suggestionContainer = this.createNew.querySelector('.term-suggestions');
				if (suggestionContainer) {
					suggestionContainer.hidden = true;
				}
				this.selector.store.cache.clear();
			}
		} catch (error) {
			console.error('Error creating term:', error);
			this.selector.error?.log(error, {
				component: 'TaxonomyCreator',
				action: 'handleTermCreation'
			});
		} finally {
			this.form.querySelector('button').disabled = false;
		}
	}

	async handleAutocompleteCreate(e) {
		const button = e.target.closest('.create-term');
		const fieldId = this.selector.getFieldId(button);
		const field = this.selector.fields.get(fieldId);

		if (!field) return;

		const input = field.container.querySelector('input[data-autocomplete]');
		const termName = input?.value.trim() || button.dataset.query;

		if (!termName) return;

		const originalHTML = button.innerHTML;

		try {
			button.disabled = true;
			button.textContent = 'Creating...';

			const response = await this.createTerm(termName, 0, field.taxonomy);

			if (response.success && response.term) {
				const term = response.term;
				const termPath = term.path || term.name;

				field.selectedTerms.add(parseInt(term.id));
				// Add to store's data BEFORE display update
				this.selector.store.data.set(term.id, {
					id: term.id,
					name: term.name,
					path: termPath,
					taxonomy: field.taxonomy,
					parent: 0,
					count: 0,
					hasChildren: false,
					slug: term.slug || termName.toLowerCase().replace(/\s+/g, '-')
				});
				this.selector.addTermToDisplay(field.id, term.id, term.name, termPath);

				field.input.value = Array.from(field.selectedTerms).join(',');
				field.input.dispatchEvent(new Event('change', { bubbles: true }));

				field.autocompleteDropdown.hidden = true;
				if (input) input.value = '';

				this.selector.store.clearCache();
				await this.selector.store.setFilters({
					taxonomy: field.taxonomy,
					page: 1,
					search: '',
					parent: 0
				});
			} else if (response.reason === 'exists' && response.term) {
				// Term already exists - just add it
				const term = response.term;
				field.selectedTerms.add(parseInt(term.id));
				this.selector.addTermToDisplay(field.id, term.id, term.name, term.path || term.name);

				field.input.value = Array.from(field.selectedTerms).join(',');
				field.input.dispatchEvent(new Event('change', { bubbles: true }));

				field.autocompleteDropdown.hidden = true;
				if (input) input.value = '';
			}
		} catch (error) {
			console.error('Error creating term:', error);
			button.innerHTML = originalHTML;
			button.disabled = false;
			this.selector.error?.log(error, {
				component: 'TaxonomyCreator',
				action: 'handleAutocompleteCreate'
			});
		}
	}

	initTermCreation() {
		if (!this.form) {
			return;
		}

		this.form.addEventListener('change', (e) => {
			e.preventDefault();
			e.stopPropagation();
		});
	}

	resetParentOptions() {
		const taxonomy = this.selector.currentConfig?.taxonomy;
		if (!taxonomy) return;

		let select = this.createNew.querySelector('#select_parent');
		if (!select) return;

		let defaultOption = select.querySelector('option');
		if (!defaultOption) return;

		// Clear existing options
		window.removeChildren(select);
		select.append(defaultOption.cloneNode(true));

		// Get current parent from store filters
		const currentParent = this.selector.store.filters.parent || 0;

		// If we're in a sub-category, add the current parent as an option
		if (currentParent !== 0) {
			const parentTerm = this.selector.store.data.get(currentParent);
			if (parentTerm) {
				let parentOption = defaultOption.cloneNode(true);
				parentOption.value = parentTerm.id;
				parentOption.textContent = parentTerm.name;
				select.append(parentOption);
			}
		}

		// Add all terms currently visible in the taxonomy (from store cache)
		const visibleTerms = [];
		this.selector.store.data.forEach(term => {
			if (term.taxonomy === taxonomy && term.parent === currentParent) {
				visibleTerms.push(term);
			}
		});

		// Sort by name
		visibleTerms.sort((a, b) => a.name.localeCompare(b.name));

		// Add to select
		visibleTerms.forEach(term => {
			let option = defaultOption.cloneNode(true);
			option.id = `select-parent-${term.id}`;
			option.value = term.id;
			option.textContent = '  — ' + term.name;
			select.append(option);
		});
	}

	async createTerm(name, parent = 0, taxonomy) {
		try {
			// Search for the exact term first
			await this.selector.store.setFilters({
				taxonomy: taxonomy,
				search: name,
				page: 1,
				parent: 0
			});

			// Check if exact match exists in results
			const exactMatch = Array.from(this.selector.store.data.values())
				.find(term =>
					term.taxonomy === taxonomy &&
					term.name.toLowerCase() === name.toLowerCase()
				);

			if (exactMatch) {
				// For modal context, show suggestions
				if (this.createNew) {
					this.showTermSuggestions([exactMatch], true);
				}
				return { success: false, reason: 'exists', term: exactMatch };
			}

			// Term doesn't exist, create it
			const response = await fetch(`${jvbSettings.api}terms`, {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
					'X-WP-Nonce': window.auth.getNonce()
				},
				body: JSON.stringify({
					taxonomy: taxonomy,
					name: name,
					parent: parent
				})
			});

			if (!response.ok) {
				throw new Error(`Server error: ${response.status}`);
			}

			return await response.json();

		} catch (error) {
			console.error('Error creating term:', error);
			throw error;
		}
	}

	/**
	 * Search for existing terms using the store
	 */
	async searchExistingTerms(searchQuery, taxonomy) {
		return new Promise((resolve) => {
			// Set up a one-time listener for the search results
			const handleSearchResults = (event, data) => {
				if (event === 'data-loaded') {
					this.selector.store.unsubscribe(handleSearchResults);
					resolve(data.data?.items || []);
				}
			};

			this.selector.store.subscribe(handleSearchResults);

			// Trigger search
			this.selector.store.setFilters({
				taxonomy: taxonomy,
				search: searchQuery,
				page: 1,
				parent: 0
			});
		});
	}

	/**
	 * Show term suggestions when similar terms exist
	 */
	showTermSuggestions(suggestions, isExact = false) {
		const suggestionContainer = this.createNew.querySelector('.term-suggestions') ||
			this.createSuggestionContainer();

		// Clear existing suggestions
		window.removeChildren(suggestionContainer);

		// Add heading
		const heading = document.createElement('h4');
		heading.textContent = isExact ?
			'This term already exists:' :
			'Similar terms already exist:';
		suggestionContainer.appendChild(heading);

		// Create list of suggestions
		const list = document.createElement('ul');
		list.className = 'term-suggestion-list';

		suggestions.forEach(term => {
			const item = document.createElement('li');

			const button = document.createElement('button');
			button.type = 'button';
			button.className = 'use-existing-term';
			button.setAttribute('data-id', term.id);
			button.textContent = term.path || term.name;

			button.addEventListener('click', () => {
				// Add this term to modal selection
				this.selector.addSelectedTermToModal(term.id, term.name, term.path || term.name);

				// Close the create new section
				this.createNew.open = false;

				// Clear suggestions
				suggestionContainer.hidden = true;

				// Clear the form
				this.form.querySelector('input[name="term_name"]').value = '';
			});

			item.appendChild(button);
			list.appendChild(item);
		});

		suggestionContainer.appendChild(list);
		suggestionContainer.hidden = false;
	}

	/**
	 * Create container for term suggestions if it doesn't exist
	 */
	createSuggestionContainer() {
		const container = document.createElement('div');
		container.className = 'term-suggestions';
		container.hidden = true;

		// Insert after the form
		this.createNew.querySelector('form').after(container);
		return container;
	}


	/**
	 * Clean up when modal closes
	 */
	destroy() {
		// Remove event listeners
		if (this.clickHandler) {
			document.removeEventListener('click', this.clickHandler);
		}

		// Clear any pending operations
		const loadingMessage = this.createNew?.querySelector('.loading-message.create-term');
		if (loadingMessage) {
			loadingMessage.hidden = true;
		}

		// Clear suggestions
		const suggestionContainer = this.createNew?.querySelector('.term-suggestions');
		if (suggestionContainer) {
			suggestionContainer.hidden = true;
		}
	}
}

window.jvbTaxCreator = TaxonomyCreator;