/**
 * 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;

		// Get taxonomy from current active field config
		this.taxonomy = selector.currentConfig?.taxonomy;
		if (!this.taxonomy) {
			console.error('TaxonomyCreator: No active field or taxonomy found');
			return;
		}

		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();
		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);
		}
	}

	async handleTermCreation(e) {
		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);

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

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

				// Invalidate the cache for this taxonomy
				await this.selector.store.invalidate({ taxonomy: this.taxonomy });

				// Add to current modal selection
				this.selector.addSelectedTermToModal(term.id, term.name, term.path || term.name);

				// If we're viewing the parent category where this was created, refresh the list
				const currentParent = this.selector.store.filters.parent || 0;
				if (currentParent === parentId) {
					await this.selector.store.setFilters({
						taxonomy: this.taxonomy,
						parent: parentId,
						page: 1,
						search: ''
					});
				}

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

				// Clear suggestions
				const suggestionContainer = this.createNew.querySelector('.term-suggestions');
				if (suggestionContainer) {
					suggestionContainer.hidden = true;
				}
			}
		} catch (error) {
			console.error('Error creating term:', error);
			this.selector.error?.log(error, {
				component: 'TaxonomyCreator',
				action: 'handleTermCreation'
			}) || console.error('Failed to create term');
		} finally {
			this.form.querySelector('button').disabled = false;
		}
	}

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

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

	resetParentOptions() {
		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 === this.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) {
		let loadingMessage = this.createNew.querySelector('.loading-message.create-term');
		let text = loadingMessage?.querySelector('span');

		try {
			if (loadingMessage) {
				loadingMessage.hidden = false;
			}

			if (text && window.typeText) {
				window.typeText(text, 'Checking term...');
			} else if (text) {
				text.textContent = 'Checking term...';
			}

			// Search for existing terms with this name
			const searchResults = await this.searchExistingTerms(name);

			// Check for exact matches
			const exactMatches = searchResults.filter(term =>
				term.name.toLowerCase() === name.toLowerCase()
			);

			if (exactMatches.length > 0) {
				this.showTermSuggestions(exactMatches, true);
				return { success: false, reason: 'exists' };
			}

			// Show similar terms if found
			if (searchResults.length > 0) {
				this.showTermSuggestions(searchResults, false);
				return { success: false, reason: 'similar' };
			}

			// Term doesn't exist, create it
			if (text) {
				text.textContent = 'Creating term...';
			}

			const response = await fetch(`${jvbSettings.api}terms`, {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
					'X-WP-Nonce': jvbSettings.nonce
				},
				body: JSON.stringify({
					taxonomy: this.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;
		} finally {
			this.form.querySelector('button').disabled = false;
			if (loadingMessage) {
				loadingMessage.hidden = true;
			}
		}
	}

	/**
	 * Search for existing terms using the store
	 */
	async searchExistingTerms(searchQuery) {
		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: this.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;
	}

	/**
	 * Create "Create new term" option for autocomplete dropdown
	 */
	createAutocompleteOption(query, field) {
		const button = document.createElement('button');
		button.type = 'button';
		button.className = 'autocomplete-item create-term';
		button.innerHTML = `<span>Create "${query}"</span>`;
		button.dataset.query = query;
		button.dataset.fieldId = field.id;

		button.addEventListener('click', async () => {
			await this.handleAutocompleteCreate(button, query, field);
		});

		return button;
	}

	/**
	 * Handle term creation from autocomplete
	 */
	async handleAutocompleteCreate(button, termName, field) {
		if (!field) return;

		const originalHTML = button.innerHTML;

		try {
			button.disabled = true;
			button.innerHTML = '<span>Creating...</span>';

			const parentId = 0; // Autocomplete always creates at root level
			const result = await this.createTerm(termName, parentId);

			if (result.success && result.term) {
				const term = result.term;

				// Add to field
				field.selectedTerms.add(parseInt(term.id));
				this.selector.addTermToDisplay(field.id, term.id, term.name, term.path || term.name);

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

				// Invalidate cache
				await this.selector.store.invalidate({ taxonomy: field.taxonomy });

				// Clear and hide dropdown
				field.autocompleteDropdown.hidden = true;
				const input = field.container.querySelector('input[data-autocomplete]');
				if (input) input.value = '';
			}
			// If result.success is false, suggestions are already shown

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

	/**
	 * 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;