class FormFieldsOld {
	constructor() {
		this.forms = new Map(); // Store form configurations
		this.formIndex = 0;     // Auto-generate IDs
		this.initialized = false;
		this.hasRepeaters = false;
		this.hasNumberFields = false;
		this.stepMultiplier = 1;

		console.log(jvbSettings.icons);
		this.timeouts = new Map();
		this.activeRepeaters = new Map();
		this.repeaterTimeouts = new Map(); // Form-level repeater timeouts
		this.repeaterDelays = {
			change: 6000,      // Delay after field change (longer than current 4250ms)
			typing: 3000,      // Delay for text inputs while typing
			blur: 1500,        // Delay after field loses focus
			add: 500,          // Delay after adding row
			remove: 800,       // Delay after removing row
			reorder: 1000      // Delay after reordering rows
		};

		this.ignore = [
			'image_temp',
			'post_thumbnail_temp'
		];

		// Bind methods for event delegation
		this.submitHandler = this.handleSubmit.bind(this);
		this.changeHandler = this.handleChange.bind(this);
		this.clickHandler = this.handleClick.bind(this);
		this.focusHandler = this.handleFocus.bind(this);
		this.keyHandler = this.handleKeys.bind(this);
		this.blurHandler = this.handleBlur.bind(this);

		this.initListeners();
	}

	/**
	 * Add a form to be managed by this instance
	 * @param {HTMLFormElement} formElement
	 * @param {Object} options
	 * @returns {Object} Form configuration
	 */
	addForm(formElement, options = {}) {
		console.log('addingForm:', formElement);
		// Ensure form has an ID
		if (!formElement.id) {
			formElement.id = `form-${this.formIndex++}`;
		}

		const formConfig = {
			element: formElement,
			id: formElement.id,
			data: this.collectFormData(formElement),

			// Default options with overrides
			options: {
				onSave: false,
				onChange: null,           // Optional change callback
				onSubmit: null,          // Optional submit callback
				itemID: null,
				content: null,
				saveDelay: 2000,
				autoSave: true,
				api: formElement.dataset.save || null,
				headers: { 'action_nonce': jvbSettings?.dash },
				...options
			},

			// Form-specific state
			state: {
				saveTimeout: null,
				lastData: null,
				isDirty: false
			},
			dependencies: new Map(),
		};

		// Store the configuration
		this.forms.set(formElement.id, formConfig);

		// Initialize form-specific features
		this.initFormFeatures(formConfig);
		return formConfig;
	}

	/**
	 * Initialize global event listeners (single delegation point)
	 */
	initListeners() {
		if (this.initialized) return;

		// Use event delegation for all forms
		document.addEventListener('submit', this.submitHandler);
		document.addEventListener('change', this.changeHandler);


		document.addEventListener('click', this.clickHandler);

		document.addEventListener('keydown', this.keyHandler);

		document.addEventListener('focusin', this.focusHandler);
		document.addEventListener('focousout', this.blurHandler);

		this.initialized = true;
	}

	handleKeys(e) {
		if (!this.hasNumberFields) {
			return;
		}
		if (e.ctrlKey && e.shiftKey) {
			this.stepMultiplier = Math.max(parseInt(this.stepMultiplier) * 100, 1000);
		} else if (e.shiftKey) {
			this.stepMultiplier = Math.max(parseInt(this.stepMultiplier) * 10, 1000);
		} else if (e.key === 'Escape') {
			this.stepMultiplier = 1;
		}

	}

	/**
	 * Global submit handler - routes to appropriate form
	 */
	handleSubmit(event) {
		const form = event.target.closest('form');
		if (!form || !this.forms.has(form.id)) return;

		event.preventDefault();
		const formConfig = this.forms.get(form.id);

		// Call form-specific submit callback if provided
		if (formConfig.options.onSubmit) {
			console.log('sending data back to onSubmit...');
			formConfig.options.onSubmit(event, this.collectFormData(formConfig.element));
		} else {
			console.log('processing Form Changes on submit...');
			// Default submit behavior
			this.processFormChanges(formConfig);
		}
	}

	/**
	 * Global change handler - routes to appropriate form
	 */
	handleChange(event) {
		//Image fields handled separately
		if (window.targetCheck(event, '.image.field')) {
			return;
		}

		if (event.target.closest('.repeater-row')) {
			this.handleRepeaterChange(event);
			return;
		}
		// if (event.target.closest('.repeater-row')) {
		// 	const repeaterRow = event.target.closest('.repeater-row');
		// 	const row = repeaterRow.closest('.field.repeater');
		// 	const form = event.target.closest('form');
		// 	const formConfig = this.forms.get(form.id);
		// 	const rowId = repeaterRow.id || this.generateRowId(repeaterRow);
		//
		// 	// Clear existing timeout for this row
		// 	if (this.timeouts.has(rowId)) {
		// 		clearTimeout(this.timeouts.get(rowId));
		// 	}
		//
		// 	// Set longer timeout as fallback
		// 	this.timeouts.set(rowId, setTimeout(() => {
		// 		this.saveRepeaterChanges(form.id, row, 'timeout');
		// 		this.timeouts.delete(rowId);
		// 	}, 4250));
		//
		// 	// Check conditionals immediately
		// 	let changed = event.target.name;
		// 	this.checkConditionals(changed, formConfig);
		//
		// 	return;
		// }
		// if (!event.isTrusted) {
		// 	return;
		// }
		const form = event.target.closest('form');
		if (!form || !this.forms.has(form.id)) return;

		const formConfig = this.forms.get(form.id);

		let changed = event.target.name;
		this.checkConditionals(changed, formConfig);

		// Handle specific field types
		this.handleSpecialFields(event, formConfig);

		if ('noautosave' in form.dataset) {
			return;
		}

		// Auto-save if enabled
		if (formConfig.options.autoSave) {
			this.scheduleAutoSave(formConfig);
		}
	}

	handleRepeaterChange(event) {
		const repeaterRow = event.target.closest('.repeater-row');
		const repeater = repeaterRow.closest('.field.repeater');
		const form = event.target.closest('form');
		const formConfig = this.forms.get(form.id);

		if (!formConfig) return;

		const fieldName = repeater.dataset.field;
		const formId = form.id;

		// Check conditionals immediately
		const changed = event.target.name;
		this.checkConditionals(changed, formConfig);

		// Determine appropriate delay based on field type and interaction
		let delay = this.getRepeaterDelay(event.target, event.type);

		// Clear existing timeout for this repeater field in this form
		const timeoutKey = `${formId}-${fieldName}`;
		if (this.repeaterTimeouts.has(timeoutKey)) {
			clearTimeout(this.repeaterTimeouts.get(timeoutKey));
		}

		// Set new timeout with appropriate delay
		this.repeaterTimeouts.set(timeoutKey, setTimeout(() => {
			this.saveRepeaterChanges(formId, repeater, `${event.type}-timeout`);
			this.repeaterTimeouts.delete(timeoutKey);
		}, delay));

		console.log(`Scheduled repeater save for ${fieldName} in ${delay}ms (reason: ${event.type})`);
	}

	/**
	 * Force immediate save of all repeater changes for a form
	 */
	forceRepeaterSave(formId) {
		const formConfig = this.forms.get(formId);
		if (!formConfig) return;

		const form = formConfig.element;
		const repeaters = form.querySelectorAll('.field.repeater');

		// Clear all pending timeouts
		this.clearFormRepeaterTimeouts(formId);

		// Process each repeater immediately
		repeaters.forEach(repeater => {
			this.processRepeaterChanges(formConfig, repeater);
		});
	}

	/**
	 * Determine appropriate delay for repeater changes
	 */
	getRepeaterDelay(field, eventType) {
		// Text inputs get longer delays to allow for typing
		if ((field.type === 'text' || field.type === 'textarea') && eventType === 'input') {
			return this.repeaterDelays.typing;
		}

		// Other input types get standard change delay
		if (eventType === 'change') {
			return this.repeaterDelays.change;
		}

		// Blur events (when user leaves field) get shorter delay
		if (eventType === 'blur') {
			return this.repeaterDelays.blur;
		}

		// Default to change delay
		return this.repeaterDelays.change;
	}

	/**
	 * Global click handler - routes to appropriate form
	 */
	handleClick(event) {
		const form = event.target.closest('form');
		if (!form || !this.forms.has(form.id)) return;

		const formConfig = this.forms.get(form.id);

		// Handle repeater actions
		if (event.target.matches('.add-repeater-row')) {
			const repeater = event.target.closest('.repeater');
			this.addRepeaterRow(repeater, formConfig);

			// Schedule save after add
			this.scheduleRepeaterSave(form.id, repeater, 'add', this.repeaterDelays.add);

		} else if (event.target.matches('.remove-row')) {
			const repeater = event.target.closest('.repeater');
			this.removeRepeaterRow(event.target, formConfig);

			// Schedule save after remove
			this.scheduleRepeaterSave(form.id, repeater, 'remove', this.repeaterDelays.remove);

		}  else if (event.target.matches('.remove-image')) {
			this.handleImageRemove(event.target.closest('.field'));
		} else if (event.target.matches('.replace-image')) {
			let fileInput = event.closest('.image').querySelector('input[type="file"]');
			fileInput.click();
		} else if (window.targetCheck(event, 'div.quantity')) {
			let quantity = window.targetCheck(event, 'div.quantity');
			this.handleNumberClick(event, quantity);
		}
		// Add other click handlers as needed
	}

	/**
	 * Schedule repeater save with specific timing
	 */
	scheduleRepeaterSave(formId, repeater, reason, delay) {
		const fieldName = repeater.dataset.field;
		const timeoutKey = `${formId}-${fieldName}`;

		// Clear existing timeout
		if (this.repeaterTimeouts.has(timeoutKey)) {
			clearTimeout(this.repeaterTimeouts.get(timeoutKey));
		}

		// Set new timeout
		this.repeaterTimeouts.set(timeoutKey, setTimeout(() => {
			this.saveRepeaterChanges(formId, repeater, reason);
			this.repeaterTimeouts.delete(timeoutKey);
		}, delay));

		console.log(`Scheduled repeater save for ${fieldName} in ${delay}ms (reason: ${reason})`);
	}

	/**
	 * Handle focus events - track when we enter repeater fields
	 */
	handleFocus(event) {
		const form = event.target.closest('form');
		if (!form || !this.forms.has(form.id)) return;

		const repeaterRow = event.target.closest('.repeater-row');
		if (!repeaterRow) return;

		const formConfig = this.forms.get(form.id);
		const rowId = repeaterRow.id || this.generateRowId(repeaterRow);

		// Store the currently active repeater field
		this.activeRepeaters.set(form.id, {
			rowId: rowId,
			element: event.target,
			formConfig: formConfig
		});
	}

	handleBlur(event) {
		const form = event.target.closest('form');
		if (!form || !this.forms.has(form.id)) return;

		// Handle repeater field blur with shorter delay
		if (event.target.closest('.repeater-row')) {
			const repeater = event.target.closest('.field.repeater');
			this.scheduleRepeaterSave(form.id, repeater, 'blur', this.repeaterDelays.blur);
		}
	}


	/**
	 * Schedule auto-save with debouncing per form
	 */
	scheduleAutoSave(formConfig) {
		// Don't autosave if uploads are pending
		if (formConfig.state.uploadPending) {
			console.log('Skipping autosave - uploads pending');
			return;
		}

		// Also check global upload status
		if (this.hasActiveUploads(formConfig)) {
			console.log('Skipping autosave - active uploads detected');
			return;
		}

		// Clear existing timeout for this specific form
		if (formConfig.state.saveTimeout) {
			clearTimeout(formConfig.state.saveTimeout);
		}

		// Set new timeout for this form
		formConfig.state.saveTimeout = setTimeout(() => {
			// Double-check upload status before saving
			if (!formConfig.state.uploadPending && !this.hasActiveUploads(formConfig)) {
				this.processFormChanges(formConfig);
			}
		}, formConfig.options.saveDelay);
	}

	hasActiveUploads(formConfig) {
		if (!formConfig.uploadFields || !window.jvbUploadManager) {
			return false;
		}

		// Check each upload field for active uploads
		for (const fieldId of formConfig.uploadFields) {
			const status = window.jvbUploadManager.getFieldStatus(fieldId);
			if (status && (status.uploading > 0 || status.ready > 0)) {
				return true;
			}
		}

		return false;
	}

	/**
	 * Process changes for a specific form
	 */
	processFormChanges(formConfig, processSave = true) {
		console.log('Processing changes...');
		// Skip if uploads are pending
		if (formConfig.state.uploadPending || this.hasActiveUploads(formConfig)) {
			console.log('Skipping form changes processing - uploads pending');

			// Schedule a retry
			setTimeout(() => {
				this.processFormChanges(formConfig, processSave);
			}, 2000);

			return;
		}

		const newData = this.collectFormData(formConfig.element);
		const changes = this.getDataChanges(newData, formConfig.data);

		console.log(newData);
		console.log(changes);

		if (Object.keys(changes).length > 0) {
			// Update stored data
			formConfig.data = newData;
			formConfig.state.isDirty = true;

			// Call the form's save callback
			if (processSave) {
				this.handleSave(changes, formConfig);
			}
		}
	}


	handleSave(changes, formConfig) {
		console.log(changes);
		if (changes.length === 0 || window.isEmptyObject(changes)) {
			return;
		}
		if (typeof formConfig.options.onSave === "function") {
			formConfig.options.onSave(changes, formConfig);
		} else if (formConfig.element.dataset.save) {
			let endpoint = formConfig.element.dataset.save;
			let title = formConfig.element.dataset.title??endpoint;
			let operation = {
				endpoint: endpoint,
				headers: {
					'action_nonce': jvbSettings.dash
				},
				title: `Adding ${title} to Queue`,
				popup: `Queueing ${title}...`,
				data: this.collectFormData(formConfig.element)
			}
			window.jvbQueue.addToQueue(operation);
		}
	}

	/**
	 * Initialize form-specific features
	 */
	initFormFeatures(formConfig) {
		const form = formConfig.element;

		// Initialize conditional fields
		this.initConditionalFields(formConfig);

		// Initialize repeater fields
		this.initRepeaterFields(form);

		// Initialize special field types
		if (form.querySelector('[data-editor="true"]')) {
			this.initQuillEditor(formConfig, formConfig.options.itemID);
		}

		if (form.querySelector('.gallery')) {
			this.initGalleryFields(formConfig);
		}

		if (form.querySelector('.image')) {
			this.initImageFields(formConfig);
		}

		if (form.querySelector('[data-limit]')) {
			this.initCharacterLimits(formConfig);
		}

		if (form.querySelector('input[type="number"]')) {
			this.initNumberFields(formConfig);
		}
	}

	/**
	 * Collect form data into a structured object
	 */
	collectFormData(form) {
		const formData = new FormData(form);
		let data = {};
		let repeaterData = {};


		for (let [key, value] of formData.entries()) {
			if (this.ignore.includes(key) || key.endsWith('_temp')) {
				continue;
			}

			let post = null;
			let original = null;

			//If we're on a table view, we need to organize this by post ID
			if (key.includes('|')) {
				[post, key] = key.split('|');
				//Temporarily store data to merge later
				original = data;
				data = original[post]??{};
			}
			if (key.includes(':')) {
				// Handle repeater fields (field:index:name)
				let [fieldName, index, rawSubField] = key.split(':');

				// Handle array fields (remove [] brackets)
				const isArrayField = rawSubField.endsWith('[]');
				const subField = rawSubField.replace('[]', '');

				// Initialize repeater structure
				if (!repeaterData[fieldName]) {
					repeaterData[fieldName] = {};
				}
				if (!repeaterData[fieldName][index]) {
					repeaterData[fieldName][index] = {};
				}

				// Handle different field types for repeater
				let fieldValue = value;

				// Only check radio buttons since FormData handles checkboxes correctly
				const fieldElement = form.querySelector(`[name="${key}"]`);
				if (fieldElement && fieldElement.type === 'radio' && !fieldElement.checked) {
					continue; // Skip unchecked radios
				}

				// Handle array fields (like checkbox groups)
				if (isArrayField || repeaterData[fieldName][index][subField]) {
					// Initialize as array if not already
					if (!repeaterData[fieldName][index][subField]) {
						repeaterData[fieldName][index][subField] = [];
					} else if (!Array.isArray(repeaterData[fieldName][index][subField])) {
						repeaterData[fieldName][index][subField] = [repeaterData[fieldName][index][subField]];
					}
					repeaterData[fieldName][index][subField].push(fieldValue);
				} else {
					// Single value field
					repeaterData[fieldName][index][subField] = fieldValue;
				}

			}  else {
				// Handle array values (multiple checkboxes/selects)
				if (data[key]) {
					if (!Array.isArray(data[key])) {
						data[key] = [data[key]];
					}
					data[key].push(value);
				} else {
					data[key] = value;
				}
			}
			if (post) {
				//Merge back with original
				original[post] = data;
				data = original;
			}
		}

		// Merge repeater data into main data structure
		Object.keys(repeaterData).forEach(fieldName => {
			// Clean up empty rows and convert to array format
			const cleanedRows = {};
			Object.keys(repeaterData[fieldName]).forEach(index => {
				const rowData = repeaterData[fieldName][index];
				if (Object.keys(rowData).length > 0) {
					cleanedRows[index] = rowData;
				}
			});

			// Convert to sequential array
			data[fieldName] = Object.values(cleanedRows);
		});

		return data;
	}

	/**
	 * Get differences between old and new data
	 */
	getDataChanges(newData, oldData, deep = false) {
		// Use your existing getDifferences utility or implement comparison logic
		return window.getDifferences?.map(oldData, newData) || {};
	}

	/**
	 * Handle special field types (repeaters, conditionals, etc.)
	 */
	handleSpecialFields(event, formConfig) {
		// Handle repeater field changes
		if (event.target.closest('.repeater-row')) {
			this.updateRepeaterOrder(event.target.closest('.repeater'));
		}

		// Handle conditional field triggers
		const triggerName = event.target.name;
		this.checkConditionals(triggerName, formConfig);
	}

	/**
	 * Initialize conditional fields for a specific form
	 */
	initConditionalFields(formConfig) {
		const form = formConfig.element;
		const conditionalFields = form.querySelectorAll('[data-depends-on]');

		conditionalFields.forEach(field => {
			const changed = field.dataset.dependsOn;
			const triggerValue = this.getFieldValue(form, changed);

			const requiredValue = field.dataset.dependsValue;
			const operator = field.dataset.dependsOperator || '==';
			const shouldShow = this.evaluateCondition(triggerValue, requiredValue, operator);

			this.toggleFieldVisibility(field, shouldShow);
		});
	}

	checkConditionals(changed, formConfig) {
		if (formConfig.dependencies.has(changed) && formConfig.dependencies.get(changed)=== false) {
			return;
		}
		let dependencies = formConfig.element.querySelectorAll(`[data-depends-on="${changed}"]`);
		formConfig.dependencies.set(changed, (dependencies.length > 0) ? dependencies : false);
		if (dependencies.length === 0) {
			return;
		}
		this.updateConditionalFields(changed, dependencies, formConfig);
	}
	/**
	 * Update conditional fields based on trigger values
	 */
	updateConditionalFields(changed, dependencies, formConfig) {

		const triggerValue = this.getFieldValue(formConfig.element, changed);

		dependencies.forEach(field => {
			this.checkDependencies(field, triggerValue);
		});
	}

	checkDependencies(field, value) {
		const requiredValue = field.dataset.dependsValue;
		const operator = field.dataset.dependsOperator || '==';
		const shouldShow = this.evaluateCondition(value, requiredValue, operator);
		this.toggleFieldVisibility(field, shouldShow);
	}

	/**
	 * Get field value considering different input types
	 */
	getFieldValue(form, fieldName) {
		const field = form.querySelector(`[name="${fieldName}"]`);
		if (!field) return null;

		if (field.type === 'radio') {
			const checked = form.querySelector(`[name="${fieldName}"]:checked`);
			return checked ? checked.value : null;
		} else if (field.type === 'checkbox') {
			return field.checked ? (field.value || '1') : '';
		}

		return field.value;
	}

	/**
	 * Evaluate conditional logic
	 */
	evaluateCondition(fieldValue, requiredValue, operator) {
		// Handle null/undefined values
		if (fieldValue === null || fieldValue === undefined) {
			fieldValue = '';
		}
		if (requiredValue === null || requiredValue === undefined) {
			requiredValue = '';
		}

		// Convert both to strings for consistent comparison (since form values are always strings)
		const fieldStr = String(fieldValue);
		const requiredStr = String(requiredValue);

		switch (operator) {
			case '==':
				return fieldStr == requiredStr; // Loose equality
			case '!=':
				return fieldStr != requiredStr; // Loose inequality
			case '===':
				return fieldStr === requiredStr; // Strict equality (if needed)
			case '!==':
				return fieldStr !== requiredStr; // Strict inequality (if needed)
			case '>':
				return Number(fieldValue) > Number(requiredValue);
			case '>=':
				return Number(fieldValue) >= Number(requiredValue);
			case '<':
				return Number(fieldValue) < Number(requiredValue);
			case '<=':
				return Number(fieldValue) <= Number(requiredValue);
			case 'contains':
				return fieldStr.toLowerCase().includes(requiredStr.toLowerCase());
			case 'not_contains':
				return !fieldStr.toLowerCase().includes(requiredStr.toLowerCase());
			case 'starts_with':
				return fieldStr.toLowerCase().startsWith(requiredStr.toLowerCase());
			case 'ends_with':
				return fieldStr.toLowerCase().endsWith(requiredStr.toLowerCase());
			case 'empty':
				return fieldStr.trim() === '';
			case 'not_empty':
				return fieldStr.trim() !== '';
			case 'in':
				// For array/comma-separated values: requiredValue = "option1,option2,option3"
				const options = requiredStr.split(',').map(opt => opt.trim());
				return options.includes(fieldStr);
			case 'not_in':
				const notOptions = requiredStr.split(',').map(opt => opt.trim());
				return !notOptions.includes(fieldStr);
			default:
				return false;
		}
	}


	/**
	 * Debug helper to see what's happening
	 */
	debugCondition(fieldValue, requiredValue, operator) {
		console.group('🔍 Conditional Field Debug');
		console.log('Field Value:', fieldValue, typeof fieldValue);
		console.log('Required Value:', requiredValue, typeof requiredValue);
		console.log('Operator:', operator);
		console.log('String Field:', String(fieldValue));
		console.log('String Required:', String(requiredValue));
		console.log('=== comparison:', String(fieldValue) === String(requiredValue));
		console.log('== comparison:', String(fieldValue) == String(requiredValue));
		console.log('!== comparison:', String(fieldValue) !== String(requiredValue));
		console.log('!= comparison:', String(fieldValue) != String(requiredValue));

		const result = this.evaluateCondition(fieldValue, requiredValue, operator);
		console.log('Final Result:', result);
		console.groupEnd();

		return result;
	}

	/**
	 * Toggle field visibility
	 */
	toggleFieldVisibility(field, show) {
		const wrapper = field.closest('.field, fieldset');
		if (!wrapper) return;

		wrapper.hidden = !show;
		wrapper.querySelectorAll('input, select, textarea').forEach(control => {
			control.disabled = !show;
		});
	}

	// Stub methods for specific field types
	initRepeaterFields(form) {
		form.querySelectorAll('.repeater').forEach(repeater => {
			this.hasRepeaters = true;
			const addButton = repeater.querySelector('.add-repeater-row');
			let temp = repeater.querySelector('template').className;
			let template = window.getTemplate(temp);
			const container = repeater.querySelector('.repeater-items');

			if (!addButton || !template || !container) {
				console.warn('Missing required repeater elements:',
					{addButton, template, container});
				return;
			}

			// Initialize Sortable
			new Sortable(container, {
				handle: '.repeater-row-header',
				animation: 150,
				onEnd: () => {
					this.updateRepeaterOrder(repeater);
				}
			});

		});
	}

	initQuillEditor(formConfig, itemID) {
		let form = formConfig.element;
		const textareas = form.querySelectorAll('textarea[data-editor=true]');

		textareas.forEach(textarea => {
			let container, editor, toolbar;
			//create it if it doesn't exist
			if(!textarea.parentNode.querySelector('.editor-container')){
				container = document.createElement('div');
				container.className = 'editor-container';

				editor = document.createElement('div');
				editor.className = 'editor';
				toolbar = document.createElement('div');
				toolbar.className = 'toolbar';
				const image = textarea.dataset.allowimage === true ? `<button type="button" class="ql-jvb_image">\n                    ${dashboardSettings.icons.image}\n                </button>` : '';
				toolbar.id = `toolbar-${textarea.id}`;
				toolbar.innerHTML = `
                <span class="ql-formats">
                    <button type="button" class="ql-p">
                        ${jvbSettings.icons.paragraph}
                    </button>
                    <button type="button" class="ql-h1">
                        ${jvbSettings.icons.h1}
                    </button>
                    <button type="button" class="ql-h2">
                        ${jvbSettings.icons.h2}
                    </button>
                    <button type="button" class="ql-h3">
                        ${jvbSettings.icons.h3}
                    </button>
                </span>
                <span class="ql-formats">
                    <button type="button" class="ql-jvb_bold">
                        ${jvbSettings.icons['bold']}
                    </button>
                    <button type="button" class="ql-jvb_italic">
                        ${jvbSettings.icons['italic']}
                    </button>
                    <button type="button" class="ql-jvb_underline">
                        ${jvbSettings.icons['underline']}
                    </button>
                    <button type="button" class="ql-jvb_strike">
                        ${jvbSettings.icons['strike']}
                    </button>
                </span>
                <span class="ql-formats">
                     <button type="button" class="ql-jvb_list" value="bullet">
                        ${jvbSettings.icons['list-bullets']}
                    </button>
                    <button type="button" class="ql-jvb_list" value="ordered">
                        ${jvbSettings.icons['list-numbers']}
                    </button>
                </span>
                <span class="ql-formats">
                     <button type="button" class="ql-jvb_align" value="left">
                        ${jvbSettings.icons['align-left']}
                    </button>
                     <button type="button" class="ql-jvb_align" value="center">
                        ${jvbSettings.icons['align-center']}
                    </button>
                     <button type="button" class="ql-jvb_align" value="right">
                        ${jvbSettings.icons['align-right']}
                    </button>
                </span>
                <span class="ql-formats">
                     <button type="button" class="ql-jvb_link">
                        ${jvbSettings.icons.link}
                    </button>
                    ${image}
                </span>
            `;

				container.appendChild(toolbar);
				container.appendChild(editor);
				textarea.parentNode.insertBefore(container, textarea);
				textarea.style.display = 'none';
				editor.innerHTML = textarea.value;
			}else{
				container = textarea.parentNode.querySelector('.editor-container');
				editor = container.querySelector('.editor');
				toolbar = container.querySelector('.toolbar');
			}



			const quill = new Quill(editor, {
				theme: 'snow',
				modules: {
					toolbar: {
						container: toolbar,
						handlers: {
							p: function() { this.quill.format('header', false); },
							h1: function() { this.quill.format('header', 1); },
							h2: function() { this.quill.format('header', 2); },
							h3: function() { this.quill.format('header', 3); },
							jvb_bold: function() {this.quill.format('bold', true)},
							jvb_italic: function() {this.quill.format('italic', true)},
							jvb_strike: function() {this.quill.format('strike', true)},
							jvb_underline: function() {this.quill.format('underline', true)},
							'jvb_align': function(value) {
								this.quill.format('align', value === this.quill.getFormat().list ? false : value);
							},
							'jvb_list': function(value) {
								this.quill.format('list', value === this.quill.getFormat().list ? false : value);
							},
							'jvb_link': function(value) {
								if (value) {
									const range = this.quill.getSelection();
									if (range == null || range.length === 0) return;
									// Get the existing link if any
									const preview = this.quill.getText(range.index, range.length);
									const existingLink = this.quill.getFormat(range).link;

									// Create modal for link input
									const modal = document.createElement('dialog');
									modal.className = 'quill-link-modal';
									modal.innerHTML = `
                                    <div class="quill-link-modal-content ">
                                        <label for="link">Enter URL</label>
                                        <input type="url" id="link" placeholder="Enter URL" value="${existingLink || ''}" />
                                        <div class="buttons">
                                            <button type="button" class="save">Save</button>
                                            ${existingLink ? '<button type="button" class="remove">Remove</button>' : ''}
                                            <button type="button" class="cancel">Cancel</button>
                                        </div>
                                    </div>
                                `;

									document.body.appendChild(modal);
									modal.showModal();
									const input = modal.querySelector('input');
									input.focus();

									// Handle save
									modal.querySelector('.save').addEventListener('click', () => {
										const url = input.value;
										if (url) {
											this.quill.format('link', url);
										}
										modal.remove();
									});

									// Handle remove if link exists
									const removeBtn = modal.querySelector('.remove');
									if (removeBtn) {
										removeBtn.addEventListener('click', () => {
											this.quill.format('link', false);
											modal.remove();
										});
									}

									// Handle cancel
									modal.querySelector('.cancel').addEventListener('click', () => {
										modal.remove();
									});

									// Handle Enter key
									input.addEventListener('keyup', (e) => {
										if (e.key === 'Enter') {
											const url = input.value;
											if (url) {
												this.quill.format('link', url);
											}
											modal.remove();
										}
									});
								}
							},
							'jvb_image': function() {
								const input = document.createElement('input');
								input.setAttribute('type', 'file');
								input.setAttribute('accept', 'image/jpeg,image/png,image/gif,image/webp');
								input.style.display = 'none';
								document.body.appendChild(input);

								input.onchange = async (e) => {
									const file = e.target.files?.[0];
									if (!file) return;

									// Validate file
									const maxSize = 5242880; // 5MB
									if (file.size > maxSize) {
										this.quill.insertText(range.index, 'File too large. Maximum size is 5MB', {
											'color': '#f00',
											'italic': true
										}, true);
										input.remove();
										return;
									}

									const range = this.quill.getSelection(true);
									const formData = new FormData();
									formData.append('image', file);

									if (objectID) {
										formData.append('post_id', objectID);
									}

									// Show loading state
									if (window.jvbLoading) {
										window.jvbLoading.showLoading('Uploading image...', 'Processing Upload');
									}

									try {
										const response = await fetch(
											`${jvbSettings.api}uploads/`,
											{
												method: 'POST',
												headers: {
													'X-WP-Nonce': jvbSettings.nonce
												},
												body: formData
											}
										);

										if (!response.ok) {
											throw new Error('Upload failed');
										}

										const result = await response.json();

										// Insert the image at cursor position
										this.quill.insertEmbed(range.index, 'image', result.url);

									} catch (error) {
										console.error('Upload error:', error);
										this.quill.insertText(range.index, 'Failed to upload image. Please try again.', {
											'color': '#f00',
											'italic': true
										}, true);
									} finally {
										if (window.jvbLoading) {
											window.jvbLoading.hide();
										}
										input.remove();
									}
								};

								input.click();
							}
						}
					},
					history: {
						delay: 2000,
						maxStack: 500
					},
					clipboard: {
						matchVisual: false
					}
				}
			});

			quill.on('selection-change', function(range) {
				const alignmentTools = toolbar.querySelector('.ql-align');
				if (alignmentTools) {
					if (range && range.length === 0) {
						// Get the focused element
						const [leaf] = this.quill.getLeaf(range.index);
						if (leaf && leaf.domNode && leaf.domNode.tagName === 'IMG') {
							alignmentTools.style.display = 'inline-block';
							return;
						}
					}
					alignmentTools.style.display = 'none';
				}
			});
			// Update hidden textarea and trigger form change
			quill.on('text-change', () => {
				textarea.value = quill.root.innerHTML;
				textarea.dispatchEvent(new Event('change', { bubbles: true }));
			});
		});
	}
	initGalleryFields(formConfig) {
		formConfig.element.querySelectorAll('.gallery').forEach(field => {
			const fieldName = field.querySelector('input[type="hidden"]').name;
			const previewGrid = field.querySelector('.gallery-preview');

			// Pre-populate existing images
			if (field.dataset.images) {
				const urls = field.dataset.images.split(',');
				urls.forEach(url => {
					this.addToGalleryPreview(url, previewGrid);
				});
			}

			// Register with centralized upload manager
			const fieldId = window.jvbUploadManager.registerUploader(field, {
				content: formConfig.options.content,
				postId: formConfig.options.itemID,
				mode: 'gallery',
				uploadType: 'image_upload',
				fieldName: fieldName,
				maxFiles: 20,
				allowMultiple: true,
				groupable: true,

				onUploadComplete: (result) => {
					this.handleGalleryUploadSuccess(result, field);
				},
			});

			// Store field reference
			if (!formConfig.uploadFields) {
				formConfig.uploadFields = new Set();
			}
			formConfig.uploadFields.add(fieldId);
		});
	}

	handleGalleryUploadSuccess(result, field) {
		console.log('Gallery Upload success!', result);

		if (!result.data || !result.data.length) return;

		const hiddenInput = field.querySelector('input[type="hidden"]');
		const previewGrid = field.querySelector('.gallery-preview');
		const currentIds = hiddenInput.value ? hiddenInput.value.split(',') : [];

		result.data.forEach(file => {
			currentIds.push(file.attachment_id);
			this.addToGalleryPreview(file.url, previewGrid);
		});

		hiddenInput.value = currentIds.join(',');
		hiddenInput.dispatchEvent(new Event('change', { bubbles: true }));

		this.showNotification(`Added ${result.data.length} image(s) to gallery`);
	}
	addToGalleryPreview(url, grid) {
		let preview = window.getTemplate('galleryPreview');
		let img = preview.querySelector('img');
		img.src = url;

		grid.appendChild(preview);
		return preview;
	}
	initImageFields(formConfig) {
		formConfig.element.querySelectorAll('.image').forEach(field => {
			const fieldName = field.querySelector('input[type="hidden"]').name;
			const fileInput = field.querySelector('input[type="file"]');

			if (!fileInput) return;

			// Register with centralized upload manager
			const fieldId = window.jvbUploadManager.registerUploader(field, {
				content: formConfig.options.content,
				postId: formConfig.options.itemID,
				mode: 'direct',
				uploadType: 'image_upload',
				fieldName: fieldName,
				maxFiles: 1,
				autoSubmit: true,

				// Custom callbacks for this field type
				onUploadStart: () => {
					formConfig.state.uploadPending = true;
					console.log('Image upload started - pausing autosave');
				},

				onUploadComplete: (result) => {
					formConfig.state.uploadPending = false;
					this.handleImageUploadSuccess(result, field);
				},

				onUploadError: (error) => {
					formConfig.state.uploadPending = false;
					this.handleImageUploadError(error, field);
				}
			});

			// Store field reference for cleanup
			if (!formConfig.uploadFields) {
				formConfig.uploadFields = new Set();
			}
			formConfig.uploadFields.add(fieldId);
		});
	}


	handleImageUploadSuccess(result, field) {
		console.log('Image Upload success!', result);

		if (!result.data || !result.data.length) return;

		const imageDisplay = field.querySelector('.image-display');
		removeChildren(imageDisplay);
		imageDisplay.classList.add('has-image');

		let ids = [];
		result.data.forEach(file => {
			let img = new Image();
			img.src = file.url;
			ids.push(file.attachment_id);
			imageDisplay.appendChild(img);
		});

		const hiddenInput = field.querySelector('input[type="hidden"]');
		hiddenInput.value = ids.join(',');

		const uploadContainer = field.querySelector('.file-upload-container');
		uploadContainer.hidden = true;

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

		this.showNotification('Image updated successfully');
	}

	hasUploadsPending(formConfig) {
		return formConfig.state.uploadPending || false;
	}
	forceSaveAfterUploads(formId) {
		const formConfig = this.forms.get(formId);
		if (!formConfig) return;

		// Check periodically if uploads are done
		const checkUploads = () => {
			if (!formConfig.state.uploadPending && !this.hasActiveUploads(formConfig)) {
				console.log('All uploads complete, processing form changes');
				this.processFormChanges(formConfig);
				return;
			}

			console.log('Still waiting for uploads to complete...');
			setTimeout(checkUploads, 500);
		};

		checkUploads();
	}
	getUploadStatus(formId) {
		const formConfig = this.forms.get(formId);
		if (!formConfig) return null;

		return {
			uploadPending: formConfig.state.uploadPending,
			isDirty: formConfig.state.isDirty,
			hasTimeout: !!formConfig.state.saveTimeout
		};
	}
	handleImageUploadError(error, field) {
		console.error('Upload error:', error);

		// Clear upload pending state
		const form = field.closest('form');
		if (form && form.id) {
			const formConfig = this.forms.get(form.id);
			if (formConfig) {
				formConfig.state.uploadPending = false;
			}
		}

		this.showNotification('Failed to upload image', 'error');

		// Reset field if needed
		const uploadContainer = field.querySelector('.file-upload-container');
		uploadContainer.hidden = false;

		// Clear any error states
		const errorElement = field.querySelector('.file-error');
		if (errorElement) {
			errorElement.textContent = '';
		}
	}
	handleImageRemove(field) {
		const imageDisplay = field.querySelector('.image-display');
		const img = imageDisplay.querySelector('img');
		const hiddenInput = field.querySelector('input[type="hidden"]');
		const uploadContainer = field.querySelector('.file-upload-container');

		// Clear the hidden input
		hiddenInput.value = '';

		// Reset UI
		img.src = '';
		imageDisplay.classList.remove('has-image');
		uploadContainer.hidden = false;

		// Show notification
		this.showNotification('Image removed');
	}
	initCharacterLimits(formConfig) {
		formConfig.element.querySelectorAll('input[data-limit], textarea[data-limit]').forEach(input => {
			const counter = input.closest('.field').querySelector('.char-count .current');
			if (counter) {
				const updateCount = () => {
					const limit = parseInt(input.dataset.limit, 10);

					// Update the counter
					counter.textContent = input.value.length;

					// If length exceeds limit, truncate the input value
					if (input.value.length > limit) {
						input.closest('.field').classList.add('reached');
						input.value = input.value.substring(0, limit);
						counter.textContent = limit; // Update counter after truncation
					}else {
						input.closest('.field').classList.remove('reached');
					}
				};

				input.addEventListener('input', updateCount);
				updateCount(); // Initial count
			}
		})
	}

	initNumberFields(formConfig) {
		this.hasNumberFields = true;
	}
	handleNumberClick(e, container) {
		let change = 0;
		if (e.target.closest('.increase')) {
			change += 1;
		} else if (e.target.closest('.decrease')) {
			change -=1;
		}
		if (change !== 0) {
			let [
				step,
				input
			] = [
				parseInt(container.dataset.step),
				container.querySelector('input'),
			];

			let value = (input.value === '') ? 0 : parseInt(input.value);

			input.value = (value + (step * change * this.stepMultiplier));
			this.handleNumberLimits(container);
		}
	}

	handleNumberLimits(container) {
		let [
			min,
			max,
			input,
			increase,
			decrease
		] = [
			container.dataset.min,
			container.dataset.max,
			container.querySelector('input'),
			container.querySelector('.increase'),
			container.querySelector('.decrease')
		];
		let value = parseInt(input.value);
		if (value < min) {
			input.value = min;
			decrease.disabled = true;
		} else if (value > max) {
			input.value = max;
			increase.disabled = false;
		} else if (increase.disabled) {
			increase.disabled = false;
		} else if (decrease.disabled) {
			decrease.disabled = false;
		}
	}
	addRepeaterRow(repeater, formConfig) {
		let rows = repeater.querySelector('.repeater-items');
		let index = rows.children.length;

		let row = window.getTemplate(repeater.querySelector('template').className);

		// Set a proper ID for the row
		row.id = `${formConfig.id}-${repeater.dataset.field}-row-${index}`;

		let base = repeater.dataset.field;
		row.querySelectorAll('input, select, textarea').forEach((field) => {
			let label = field.nextElementSibling;
			if (!label || label.tagName !== 'LABEL') {
				label = field.closest('.field')?.querySelector(`label`);
			}
			let name = `${base}:${index}:${field.name}`;
			let id = `${base}:${index}:${field.name}-${field.value}`;

			[field.name, field.id, label.htmlFor] = [name, id, id];
		});

		[row.dataset.index, row.querySelector('.row-number').textContent] = [index, `#${index + 1}`];
		rows.append(row);

		// Focus the first input in the new row
		const firstInput = row.querySelector('input, select, textarea');
		if (firstInput) {
			firstInput.focus();
		}
	}

	/**
	 * Save repeater changes with reason tracking
	 */
	saveRepeaterChanges(formId, repeater, reason = 'manual') {
		console.log(`Saving repeater changes due to: ${reason}`);

		const formConfig = this.forms.get(formId);
		if (!formConfig) return;

		// Clear any other pending timeouts for this form's repeaters
		this.clearFormRepeaterTimeouts(formId);

		// Use the main form processing pipeline for consistency
		// but process only repeater changes
		this.processRepeaterChanges(formConfig, repeater);

		// Clean up active field tracking
		this.activeRepeaters.delete(formId);
	}

	processRepeaterChanges(formConfig, repeater) {
		// Skip if uploads are pending
		if (formConfig.state.uploadPending || this.hasActiveUploads(formConfig)) {
			console.log('Skipping repeater save - uploads pending');

			// Schedule a retry
			setTimeout(() => {
				this.processRepeaterChanges(formConfig, repeater);
			}, 2000);
			return;
		}

		const fieldName = repeater.dataset.field;

		// Get the complete current form data (including all repeaters)
		const currentData = this.collectFormData(formConfig.element);

		// Create a change object containing only the repeater field
		// This ensures we send the complete repeater data
		const repeaterChanges = {
			[fieldName]: currentData[fieldName] || []
		};

		console.log(`Repeater ${fieldName} complete data:`, repeaterChanges);

		// Update stored data for this field only
		if (!formConfig.data) {
			formConfig.data = {};
		}
		formConfig.data[fieldName] = currentData[fieldName];
		formConfig.state.isDirty = true;

		// Send the complete repeater data
		this.handleSave(repeaterChanges, formConfig);
	}

	/**
	 * Clear all repeater timeouts for a specific form
	 */
	clearFormRepeaterTimeouts(formId) {
		const form = document.getElementById(formId);
		if (!form) return;

		// Clear timeouts by form and field pattern
		for (let [timeoutKey, timeout] of this.repeaterTimeouts) {
			if (timeoutKey.startsWith(formId + '-')) {
				clearTimeout(timeout);
				this.repeaterTimeouts.delete(timeoutKey);
			}
		}

		// Also clear the old individual row timeouts for backwards compatibility
		const repeaterRows = form.querySelectorAll('.repeater-row');
		repeaterRows.forEach(row => {
			const rowId = row.id || this.generateRowId(row);
			if (this.timeouts.has(rowId)) {
				clearTimeout(this.timeouts.get(rowId));
				this.timeouts.delete(rowId);
			}
		});
	}

	/**
	 * Generate a consistent ID for repeater rows
	 */
	generateRowId(repeaterRow) {
		if (repeaterRow.id) return repeaterRow.id;

		// Generate ID based on form and row position
		const form = repeaterRow.closest('form');
		const repeater = repeaterRow.closest('.repeater');
		const index = Array.from(repeater.querySelectorAll('.repeater-row')).indexOf(repeaterRow);
		const repeaterId = repeater.dataset.field || 'repeater';

		const generatedId = `${form.id}-${repeaterId}-row-${index}`;
		repeaterRow.id = generatedId;
		return generatedId;
	}
	removeRepeaterRow(removeButton, formConfig) {
		let repeater = removeButton.closest('.repeater');
		removeButton.closest('.repeater-row').remove();
		this.updateRepeaterOrder(repeater);
	}
	updateRepeaterOrder(repeater) {
		let items = repeater.querySelector('.repeater-items');
		let base = repeater.dataset.field;
		const form = repeater.closest('form');
		const formConfig = this.forms.get(form.id);

		items.querySelectorAll('.repeater-row').forEach((row, index) => {
			[
				row.dataset.index,
				row.querySelector('.row-number').textContent
			] = [
				index,
				`#${index + 1}`
			];

			row.querySelectorAll('[name]').forEach(field => {
				let name = field.name.split(':').pop();
				let newName = `${base}:${index}:${name}`;
				let newId = `${base}-${index}-${name}`;
				[
					field.name,
					field.id
				] = [
					newName,
					newId
				];
				let label = field.closest('.field').querySelector('label');
				if (label) {
					label.htmlFor = newId;
				}
			});
		});

		// Schedule save after reorder with appropriate delay
		this.scheduleRepeaterSave(form.id, repeater, 'reorder', this.repeaterDelays.reorder);
	}


	showNotification(msg, type){
		window.jvbNotifications.showToast(msg, type);
	}
	/**
	 * Public API methods
	 */

	// Get form configuration
	getForm(formId) {
		return this.forms.get(formId);
	}

	// Manually trigger form processing
	processForm(formId) {
		const formConfig = this.forms.get(formId);
		if (formConfig) {
			this.processFormChanges(formConfig);
		}
	}

	submitFormUploads(formId) {
		const formConfig = this.forms.get(formId);
		if (!formConfig || !formConfig.uploadFields) return;

		console.log(`Submitting uploads for form: ${formId}`);

		// Submit each upload field
		formConfig.uploadFields.forEach(fieldId => {
			window.jvbUploadManager.submitFieldUploads(fieldId);
		});
	}

	isFormReadyToSave(formId) {
		const formConfig = this.forms.get(formId);
		if (!formConfig) return true;

		return !formConfig.state.uploadPending && !this.hasActiveUploads(formConfig);
	}

	getFormUploadProgress(formId) {
		const formConfig = this.forms.get(formId);
		if (!formConfig || !formConfig.uploadFields) return null;

		let totalUploads = 0;
		let completedUploads = 0;
		let failedUploads = 0;

		formConfig.uploadFields.forEach(fieldId => {
			const status = window.jvbUploadManager.getFieldStatus(fieldId);
			if (status) {
				totalUploads += status.uploadCount;
				completedUploads += status.completed;
				failedUploads += status.failed;
			}
		});

		return {
			total: totalUploads,
			completed: completedUploads,
			failed: failedUploads,
			pending: totalUploads - completedUploads - failedUploads,
			progress: totalUploads > 0 ? (completedUploads / totalUploads) * 100 : 0
		};
	}
	showFormUploadStatus(formId) {
		const progress = this.getFormUploadProgress(formId);
		if (!progress || progress.total === 0) return;

		const message = `Uploads: ${progress.completed}/${progress.total} complete` +
			(progress.failed > 0 ? `, ${progress.failed} failed` : '') +
			(progress.pending > 0 ? `, ${progress.pending} pending` : '');

		this.showNotification(message, progress.failed > 0 ? 'warning' : 'info');
	}
	getFormStatus(formId) {
		const formConfig = this.forms.get(formId);
		if (!formConfig) return null;

		const baseStatus = {
			formId,
			isDirty: formConfig.state.isDirty,
			uploadPending: formConfig.state.uploadPending,
			hasTimeout: !!formConfig.state.saveTimeout
		};

		// Add upload status if upload fields exist
		if (formConfig.uploadFields && window.jvbUploadManager) {
			baseStatus.uploads = {};
			formConfig.uploadFields.forEach(fieldId => {
				baseStatus.uploads[fieldId] = window.jvbUploadManager.getFieldStatus(fieldId);
			});
		}

		return baseStatus;
	}

	// Remove form from management
	removeForm(formId) {
		const formConfig = this.forms.get(formId);
		if (!formConfig) return;

		// Clean up regular timeouts
		if (formConfig.state.saveTimeout) {
			clearTimeout(formConfig.state.saveTimeout);
		}

		// Clean up repeater timeouts
		this.clearFormRepeaterTimeouts(formId);

		// Clean up upload fields
		if (formConfig.uploadFields && window.jvbUploadManager) {
			formConfig.uploadFields.forEach(fieldId => {
				console.log(`Cleaning up upload field: ${fieldId}`);
			});
		}

		this.forms.delete(formId);
	}

	/***************************************************
	 *
	 * Field rendering from json data
	 *
	 **************************************************/
	populatePostsTableFields(form, postsData) {
		if (!form || !postsData) {
			return;
		}
		const formConfig = this.forms.get(form.id);
		form.querySelectorAll('tr').forEach(row => {
			let base = row.dataset.id;
			let fields = JSON.parse(row.dataset.fields);
			let images = JSON.parse(row.dataset.images);

			this.populateFieldValue(fieldWrapper, fieldName, fieldValue, imagesData, options);
		});
	}
	/**
	 * Populate form fields with data values
	 * @param {HTMLFormElement} form - The form element
	 * @param {Object} fieldsData - Field values from API
	 * @param {Object} imagesData - Image metadata (optional)
	 * @param {Object} options - Additional options
	 */
	populateFormFields(form, fieldsData, imagesData = {}, options = {}) {
		if (!form || !fieldsData) {
			console.warn('FormFields: Missing form or data for population');
			return;
		}

		console.log('Populating form fields:', { fieldsData, imagesData });
		console.log('Form element:', form);
		console.log('Form fields found:', form.querySelectorAll('.field').length);

		// Get form configuration
		const formConfig = this.forms.get(form.id);

		// Debug: List all fields in form
		const allFields = form.querySelectorAll('.field');

		// Try alternative approach if no .field elements found
		if (allFields.length === 0) {

			// Try finding fields by name attribute instead
			Object.keys(fieldsData).forEach(fieldName => {
				const input = form.querySelector(`[name="${fieldName}"]`);
				if (input) {
					const fieldWrapper = input.closest('.field') || input.parentElement;
					console.log(`Found field ${fieldName} via name attribute:`, fieldWrapper);

					if (fieldWrapper) {
						this.populateFieldValue(fieldWrapper, fieldName, fieldsData[fieldName], imagesData, options);
					}
				}
			});

			return;
		}

		// Process each field in the form
		allFields.forEach((fieldWrapper, index) => {
			console.log(`Processing field ${index}:`, {
				element: fieldWrapper,
				tagName: fieldWrapper.tagName,
				className: fieldWrapper.className,
				dataset: fieldWrapper.dataset
			});

			const fieldName = fieldWrapper.dataset.field;
			console.log(`Field ${index} name:`, fieldName);

			if (!fieldName) {
				console.warn(`Field ${index} has no data-field attribute`);
				return;
			}

			if (!(fieldName in fieldsData)) {
				console.log(`Field ${fieldName} not in data, skipping`);
				return;
			}

			const fieldValue = fieldsData[fieldName];
			console.log(`About to populate field ${fieldName}:`, { fieldWrapper, fieldValue });

			this.populateFieldValue(fieldWrapper, fieldName, fieldValue, imagesData, options);
		});

		// Process form changes to update any conditional fields
		if (formConfig) {
			this.processFormChanges(formConfig, false);
		}
	}

	/**
	 * 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
	 */
	populateFieldValue(fieldWrapper, fieldName, fieldValue, imagesData = {}, options = {}) {
		if (!fieldWrapper || fieldValue === undefined || fieldValue === null) {
			return;
		}

		console.log(`Populating field: ${fieldName}`, { fieldValue, fieldWrapper });

		// 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) {
		console.log(`📝 populateTextareaField called for ${fieldName}:`, {
			fieldWrapper,
			fieldName,
			fieldValue
		});

		const textarea = fieldWrapper.querySelector(`textarea[name="${fieldName}"]`) ||
			fieldWrapper.querySelector('textarea:not([data-editor="true"])');

		console.log(`Found textarea for ${fieldName}:`, textarea);

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

			console.log(`Set textarea value for ${fieldName}:`, {
				oldValue,
				newValue: textarea.value,
				actualValue: textarea.value
			});

			// 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');
					}

					console.log(`Updated character counter for ${fieldName}:`, {
						length: textarea.value.length,
						limit,
						counterText: counter.textContent
					});
				}
			}
		} else {
			console.warn(`❌ No textarea found for field ${fieldName} in wrapper:`, fieldWrapper);

			// Debug what's actually in the wrapper
			const allTextareas = fieldWrapper.querySelectorAll('textarea');
			const allInputs = fieldWrapper.querySelectorAll('input, textarea, select');

			console.log('Debug - all textareas in wrapper:', allTextareas);
			console.log('Debug - all inputs in wrapper:', allInputs);
			console.log('Debug - wrapper innerHTML:', fieldWrapper.innerHTML);
		}
	}



	/**
	 * 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) {
				console.log(`Found Quill instance for ${fieldName}, setting content`);
				// 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(',');
		}

		// Update taxonomy selector if present
		if (fieldWrapper.dataset.fieldId && window.jvbSelector) {
			window.jvbSelector.updateFieldFromInput(fieldWrapper.dataset.fieldId);
		}
	}

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

		if (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 = {}) {
		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}`;

				// 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 || '');
		}
	}
}

// Initialize singleton
document.addEventListener('DOMContentLoaded', () => {
	if (!window.jvbForm) {
		window.jvbForm = new FormFields();
	}
});

/*
USAGE EXAMPLES:

// Basic form with save callback
window.jvbForm.addForm(document.querySelector('#contact-form'), {
    onSave: (changes) => {
        console.log('Contact form saved:', changes);
        // Send to API, show notification, etc.
    },
    autoSave: true,
    saveDelay: 1000
});

// Form with multiple callbacks
window.jvbForm.addForm(document.querySelector('#profile-form'), {
    onSave: (changes, formConfig) => {
        // Handle save
        window.jvbQueue.addToQueue({
            endpoint: '/api/profile',
            data: changes
        });
    },
    onChange: (event, formConfig) => {
        // Handle individual field changes
        if (event.target.name === 'username') {
            validateUsername(event.target.value);
        }
    },
    onSubmit: (event, formConfig) => {
        // Custom submit logic
        event.preventDefault();
        validateAndSubmitProfile(formConfig);
    },
    itemID: 123,
    api: '/api/profile'
});

// Table row form
window.jvbForm.addForm(document.querySelector('#row-edit-form'), {
    onSave: (changes, formConfig) => {
        updateTableRow(formConfig.options.rowId, changes);
    },
    isRow: true,
    rowId: 'row-456'
});

*/