/**********************************************
 PopulateForm extracts saved data and populates the form field accordingly
**********************************************/
class PopulateForm {
	constructor(form, fieldData = {}, imageData = {}, options = {}) {
		console.log('Populating field... ', form);
		console.log('fieldData: ', fieldData);
		console.log('imageData: ', imageData);
		console.log('options: ', options);
		for (let [fieldName, fieldValue] of Object.entries(fieldData)) {
			let wrapper = form.querySelector(`[data-field="${fieldName}"]`);
			if (wrapper) {
				this.populateField(wrapper, fieldName, fieldValue, imageData, options);
			}
		}
	}

	/**
	 * Populate a single field with its value
	 * @param {HTMLElement} fieldWrapper - The field wrapper element
	 * @param {string} fieldName - Field name
	 * @param {*} fieldValue - Field value
	 * @param {Object} imagesData - Image metadata
	 * @param {Object} options - Additional options
	 */
	populateField(fieldWrapper, fieldName, fieldValue, imagesData = {}, options = {}) {
		if (!fieldWrapper || fieldValue === undefined || fieldValue === null) {
			return;
		}

		// Determine field type from classes or data attributes
		const fieldType = this.getFieldType(fieldWrapper);

		switch (fieldType) {
			case 'image':
				this.populateImageField(fieldWrapper, fieldName, fieldValue, imagesData);
				break;

			case 'gallery':
				this.populateGalleryField(fieldWrapper, fieldName, fieldValue, imagesData);
				break;

			case 'repeater':
				this.populateRepeaterField(fieldWrapper, fieldName, fieldValue, options);
				break;

			case 'taxonomy':
				this.populateTaxonomyField(fieldWrapper, fieldName, fieldValue);
				break;

			case 'user':
				this.populateUserField(fieldWrapper, fieldName, fieldValue);
				break;

			case 'location':
				this.populateLocationField(fieldWrapper, fieldName, fieldValue);
				break;

			case 'set':
			case 'checkbox':
				this.populateSetField(fieldWrapper, fieldName, fieldValue);
				break;

			case 'select':
			case 'radio':
				this.populateSelectField(fieldWrapper, fieldName, fieldValue);
				break;

			case 'true_false':
				this.populateBooleanField(fieldWrapper, fieldName, fieldValue);
				break;

			case 'date':
			case 'time':
			case 'datetime':
				this.populateDateField(fieldWrapper, fieldName, fieldValue);
				break;

			case 'number':
				this.populateNumberField(fieldWrapper, fieldName, fieldValue);
				break;
			case 'textarea':
				if (fieldWrapper.querySelector('.editor-container')) {
					this.populateEditorField(fieldWrapper, fieldName, fieldValue);
				} else {
					this.populateTextareaField(fieldWrapper, fieldName, fieldValue);
				}
				break;

			case 'text':
			case 'email':
			case 'url':
			case 'tel':
			case 'phone':
			default:
				this.populateTextField(fieldWrapper, fieldName, fieldValue);
				break;
		}
	}

	/**
	 * Determine field type from wrapper element
	 * @param {HTMLElement} fieldWrapper - Field wrapper element
	 * @returns {string} Field type
	 */
	getFieldType(fieldWrapper) {
		// Check for specific field classes
		const typeClasses = [
			'image', 'gallery', 'repeater', 'taxonomy', 'user', 'location',
			'set', 'checkbox', 'select', 'radio', 'true_false', 'date',
			'time', 'datetime', 'editor', 'number', 'text', 'textarea',
			'email', 'url', 'tel', 'phone'
		];

		for (const type of typeClasses) {
			if (fieldWrapper.classList.contains(type)) {
				return type;
			}
		}

		// Check for data attribute
		if (fieldWrapper.dataset.type) {
			return fieldWrapper.dataset.type;
		}

		// Check input type
		const input = fieldWrapper.querySelector('input, select, textarea');
		if (input) {
			if (input.tagName === 'TEXTAREA') {
				return input.dataset.editor === 'true' ? 'editor' : 'textarea';
			}
			if (input.type) {
				return input.type === 'checkbox' && !fieldWrapper.classList.contains('true_false') ? 'set' : input.type;
			}
		}

		return 'text';
	}

	/**
	 * Populate text-based fields
	 */
	populateTextField(fieldWrapper, fieldName, fieldValue) {
		const input = fieldWrapper.querySelector(`[name="${fieldName}"], input, textarea`);
		if (input) {
			input.value = String(fieldValue || '');

			// Update character counter if present
			if (input.dataset.limit) {
				const counter = fieldWrapper.querySelector('.char-count .current');
				if (counter) {
					counter.textContent = input.value.length;
				}
			}
		}
	}

	/**
	 * Populate textarea fields
	 */
	populateTextareaField(fieldWrapper, fieldName, fieldValue) {
		const textarea = fieldWrapper.querySelector(`textarea[name="${fieldName}"]`) ||
			fieldWrapper.querySelector('textarea:not([data-editor="true"])');

		if (textarea) {
			const oldValue = textarea.value;
			textarea.value = String(fieldValue || '');

			// Trigger change event to update any dependencies
			textarea.dispatchEvent(new Event('change', { bubbles: true }));

			// Update character counter if present
			if (textarea.dataset.limit) {
				const counter = fieldWrapper.querySelector('.char-count .current');
				if (counter) {
					counter.textContent = textarea.value.length;

					// Check if limit is reached
					const limit = parseInt(textarea.dataset.limit, 10);
					if (textarea.value.length >= limit) {
						fieldWrapper.classList.add('reached');
					} else {
						fieldWrapper.classList.remove('reached');
					}
				}
			}
		} else {
			console.warn(`No textarea found for field ${fieldName} in wrapper:`, fieldWrapper);
		}
	}



	/**
	 * Populate number fields
	 */
	populateNumberField(fieldWrapper, fieldName, fieldValue) {
		const input = fieldWrapper.querySelector(`[name="${fieldName}"], input[type="number"]`);
		if (input) {
			input.value = Number(fieldValue) || 0;
		}
	}

	/**
	 * Populate boolean/true_false fields
	 */
	populateBooleanField(fieldWrapper, fieldName, fieldValue) {
		const input = fieldWrapper.querySelector(`[name="${fieldName}"], input[type="checkbox"]`);
		if (input) {
			input.checked = Boolean(fieldValue);
		}
	}

	/**
	 * Populate select/radio fields
	 */
	populateSelectField(fieldWrapper, fieldName, fieldValue) {
		const value = String(fieldValue || '');

		// Try select first
		const select = fieldWrapper.querySelector(`select[name="${fieldName}"]`);
		if (select) {
			select.value = value;
			return;
		}

		// Try radio buttons
		const radio = fieldWrapper.querySelector(`input[type="radio"][name="${fieldName}"][value="${value}"]`);
		if (radio) {
			radio.checked = true;
		}
	}

	/**
	 * Populate set/checkbox fields (multiple selections)
	 */
	populateSetField(fieldWrapper, fieldName, fieldValue) {
		// Parse value if it's a string
		let values = fieldValue;
		if (typeof fieldValue === 'string') {
			try {
				values = JSON.parse(fieldValue);
			} catch (e) {
				values = fieldValue.split(',').map(v => v.trim());
			}
		}

		if (!Array.isArray(values)) {
			values = [String(values)];
		}

		// Update checkboxes
		fieldWrapper.querySelectorAll(`input[type="checkbox"][name*="${fieldName}"]`).forEach(checkbox => {
			checkbox.checked = values.includes(checkbox.value);
		});
	}

	/**
	 * Populate date/time fields
	 */
	populateDateField(fieldWrapper, fieldName, fieldValue) {
		const input = fieldWrapper.querySelector(`[name="${fieldName}"], input`);
		if (input && fieldValue) {
			// Handle different date formats
			let dateValue = fieldValue;
			if (typeof fieldValue === 'object' && fieldValue.date) {
				dateValue = fieldValue.date;
			}

			// Convert to appropriate format for input type
			try {
				const date = new Date(dateValue);
				if (!isNaN(date.getTime())) {
					switch (input.type) {
						case 'date':
							input.value = date.toISOString().split('T')[0];
							break;
						case 'time':
							input.value = date.toTimeString().slice(0, 5);
							break;
						case 'datetime-local':
							input.value = date.toISOString().slice(0, 16);
							break;
						default:
							input.value = dateValue;
					}
				}
			} catch (e) {
				input.value = dateValue;
			}
		}
	}

	/**
	 * Populate editor fields (Quill)
	 */
	populateEditorField(fieldWrapper, fieldName, fieldValue) {
		const textarea = fieldWrapper.querySelector(`textarea[name="${fieldName}"]`) ||
			fieldWrapper.querySelector('textarea[data-editor="true"]') ||
			fieldWrapper.querySelector('textarea');

		if (!textarea) {
			console.warn(`Editor field ${fieldName}: textarea not found`);
			return;
		}

		const content = String(fieldValue || '');

		// Update the textarea value
		textarea.value = content;

		// Try to find and update Quill editor
		const editorContainer = fieldWrapper.querySelector('.editor');
		if (editorContainer) {
			// Try different ways to access the Quill instance
			let quillInstance = null;

			// Method 1: Check if Quill is stored on the editor element
			if (editorContainer.__quill) {
				quillInstance = editorContainer.__quill;
			}
			// Method 2: Check if Quill is stored as quill property
			else if (editorContainer.quill) {
				quillInstance = editorContainer.quill;
			}
			// Method 3: Try to find Quill in the global registry (if you have one)
			else if (window.Quill && window.Quill.find) {
				quillInstance = window.Quill.find(editorContainer);
			}
			// Method 4: Check all Quill instances if available
			else if (window.Quill && window.Quill.instances) {
				// Some setups store instances in a registry
				for (let instance of window.Quill.instances) {
					if (instance.container === editorContainer) {
						quillInstance = instance;
						break;
					}
				}
			}

			if (quillInstance) {
				// Set the content in Quill
				quillInstance.root.innerHTML = content;
				// Store the instance reference for future use
				editorContainer.__quill = quillInstance;
			} else {
				console.warn(`Quill instance not found for ${fieldName}, setting HTML directly`);
				// Fallback: set HTML directly
				editorContainer.innerHTML = content;
			}
		} else {
			console.warn(`Editor container not found for ${fieldName}`);
		}

		// Trigger change event on textarea
		textarea.dispatchEvent(new Event('change', { bubbles: true }));
	}

	/**
	 * Populate location fields
	 */
	populateLocationField(fieldWrapper, fieldName, fieldValue) {
		if (!fieldValue || typeof fieldValue !== 'object') {
			return;
		}

		// Location fields typically have sub-fields
		const subFields = ['address', 'lat', 'lng', 'street', 'city', 'province', 'postal_code', 'country'];

		subFields.forEach(subField => {
			if (fieldValue[subField] !== undefined) {
				const input = fieldWrapper.querySelector(`[name="${fieldName}_${subField}"], [name="${subField}"]`);
				if (input) {
					input.value = String(fieldValue[subField] || '');
				}
			}
		});
	}

	/**
	 * Populate taxonomy fields
	 */
	populateTaxonomyField(fieldWrapper, fieldName, fieldValue) {
		// Handle different value formats
		let termIds = [];

		if (Array.isArray(fieldValue)) {
			termIds = fieldValue.map(v => String(v));
		} else if (typeof fieldValue === 'string') {
			try {
				const parsed = JSON.parse(fieldValue);
				termIds = Array.isArray(parsed) ? parsed.map(v => String(v)) : [String(parsed)];
			} catch (e) {
				termIds = fieldValue.split(',').map(v => v.trim());
			}
		} else if (fieldValue) {
			termIds = [String(fieldValue)];
		}

		if (termIds.length === 0) {
			return;
		}

		// Update hidden input
		const hiddenInput = fieldWrapper.querySelector(`input[type="hidden"][name="${fieldName}"]`);
		if (hiddenInput) {
			hiddenInput.value = termIds.join(',');
		}
	}

	/**
	 * Populate user fields (similar to taxonomy)
	 */
	populateUserField(fieldWrapper, fieldName, fieldValue) {
		// Similar logic to taxonomy fields
		this.populateTaxonomyField(fieldWrapper, fieldName, fieldValue);
	}

	/**
	 * Populate image fields
	 */
	populateImageField(fieldWrapper, fieldName, fieldValue, imagesData = {}) {
		if (!fieldValue) {
			return;
		}

		// Handle comma-separated IDs or single ID
		const imageIds = String(fieldValue).split(',').filter(id => parseInt(id.trim()));
		if (imageIds.length === 0) {
			return;
		}

		// Update hidden input
		const hiddenInput = fieldWrapper.querySelector(`input[type="hidden"][name="${fieldName}"]`);
		if (hiddenInput) {
			hiddenInput.value = imageIds.join(',');
		}

		// Update image display
		const grid = fieldWrapper.querySelector('.item-grid');
		const uploadContainer = fieldWrapper.querySelector('.file-upload-container');
		fieldWrapper.querySelector('.progress')?.remove();
		if (grid) {
			window.removeChildren(grid);
			imageIds.forEach(imageId => {
				let image = window.getTemplate('uploadItem');
				let img = image.querySelector('img');

				let details = image.querySelector('details');
				let meta = window.getTemplate('uploadMeta')
				details.append(meta);
				[
					img.src,
					img.alt,
					image.querySelector('[name="image-title"]').value,
					image.querySelector('[name="image-alt-text"]').value,
					image.querySelector('[name="image-caption"]').value,
				] = [
					imagesData[imageId].medium,
					imagesData[imageId].alt,
					imagesData[imageId].title,
					imagesData[imageId].alt,
					imagesData[imageId].caption,
				];

				details.querySelector('.upload-meta > .hint')?.remove();

				grid.append(image);
			});

			if (imageIds.length > 0) {
				if (uploadContainer) {
					uploadContainer.hidden = true;
				}
			}
		}
	}

	/**
	 * Populate gallery fields
	 */
	populateGalleryField(fieldWrapper, fieldName, fieldValue, imagesData = {}) {
		this.populateImageField(fieldWrapper, fieldName, fieldValue, imagesData);
	}

	/**
	 * Populate repeater fields
	 */
	populateRepeaterField(fieldWrapper, fieldName, fieldValue, options = {}) {
		console.log('fieldWrapper', fieldWrapper);
		console.log('fieldName', fieldName);
		console.log('fieldValue', fieldValue);
		console.log('options', options);
		if (!fieldValue || !Array.isArray(fieldValue)) {
			return;
		}

		const container = fieldWrapper.querySelector('.repeater-items');
		const template = fieldWrapper.querySelector('template');

		if (!container || !template) {
			console.warn(`Repeater field ${fieldName}: missing container or template`);
			return;
		}

		// Clear existing rows
		window.removeChildren(container);

		// Create rows for each data item
		fieldValue.forEach((rowData, index) => {
			if (!rowData || typeof rowData !== 'object') {
				return;
			}

			const row = window.getTemplate(template.className);
			if (!row) {
				console.warn(`Repeater field ${fieldName}: template not found`);
				return;
			}

			// Set row ID and update row number
			row.id = `${fieldWrapper.closest('form').id}-${fieldName}-row-${index}`;
			row.dataset.index = index;

			const rowNumber = row.querySelector('.row-number');
			if (rowNumber) {
				rowNumber.textContent = `#${index + 1}`;
			}

			// Update field names and populate values
			row.querySelectorAll('input, select, textarea').forEach(field => {
				const originalName = field.name;
				const newName = `${fieldName}:${index}:${originalName}`;
				const newId = `${fieldName}-${index}-${originalName}-${field.value}`;

				// Update field identifiers
				field.name = newName;
				field.id = newId;

				// Update label
				const label = field.nextElementSibling;
				if (label && label.tagName === 'LABEL') {
					label.htmlFor = newId;
				}

				// Populate field value
				if (rowData[originalName] !== undefined) {
					this.populateRepeaterFieldValue(field, originalName, rowData[originalName]);
				}
			});

			container.appendChild(row);
		});
	}

	/**
	 * Populate individual repeater field value
	 */
	populateRepeaterFieldValue(field, fieldName, fieldValue) {
		switch (field.type) {
			case 'checkbox':
				field.checked = Boolean(fieldValue);
				break;
			case 'radio':
				field.checked = field.value === String(fieldValue);
				break;
			case 'select-one':
			case 'select-multiple':
				field.value = String(fieldValue || '');
				break;
			default:
				field.value = String(fieldValue || '');
		}
	}
}

window.jvbPopulate = PopulateForm;