class FormFields {
	constructor() {
		this.forms = new Map(); // Store form configurations
		this.initialized = false;
		this.stepMultiplier = 1;

		this.cache = window.jvbCache;
		this.queue = window.jvbQueue;
		this.debouncer = window.debouncer;
		this.activeOperations = new Map(); // operationId -> operation details
		this.pendingForms = new Map(); // formId -> pending operation data

		this.activeRepeaters = new Map();
		this.repeaterDelays = {
			change: 6000,
			typing: 3000,
			blur: 1500,
			add: 500,
			remove: 800,
			reorder: 1000
		};

		this.ignore = [];

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

	/**
	 * Initialize the form manager
	 */
	async init() {
		this.scanExistingForms();
		this.initListeners();
		await this.resumePendingOperations();
	}


	/**
	 * Scan page for existing forms and register them automatically
	 */
	scanExistingForms() {
		//look for forms with the save endpoint
		const managedForms = document.querySelectorAll('form[data-form-id]');

		managedForms.forEach(form => {
			try {
				this.registerForm(form);
			} catch (error) {
				this.handleError('Failed to register form:', form, error);
			}
		});
	}

	/**
	 * Register a form with configuration from data attributes
	 * @param {HTMLFormElement} formElement
	 * @param {Object} options - Override options (optional)
	 * @returns {Object} Form configuration
	 */
	registerForm(formElement, options = {}) {
		options = {
			...this.parseFormDataAttributes(formElement),
			...options
		};

		// Use existing addForm method with parsed config
		return this.addForm(formElement, options);
	}

	/**
	 * Parse form configuration from data attributes
	 * @param {HTMLFormElement} formElement
	 * @returns {Object} Configuration object
	 */
	parseFormDataAttributes(formElement) {
		const dataset = formElement.dataset;
		const config = {};

		// Basic options
		if ('autoSave' in dataset) {
			config.autoSave = dataset.autoSave !== 'false';
		}

		if ('noCache' in dataset) {
			config.noCache = true;
		}
		if ('saveDelay' in dataset) {
			config.saveDelay = parseInt(dataset.saveDelay) || 2000;
		}

		if ('save' in dataset) {
			config.api = dataset.save;
		}

		if ('itemId' in dataset) {
			config.itemID = dataset.itemId;
		}

		if ('content' in dataset) {
			config.content = dataset.content;
		}

		if ('title' in dataset) {
			config.title = dataset.title;
		}

		// Advanced options
		if ('noAutosave' in dataset) {
			config.autoSave = false;
		}

		if ('onChange' in dataset) {
			// Look for global callback function
			const callbackName = dataset.onChange;
			if (window[callbackName] && typeof window[callbackName] === 'function') {
				config.onChange = window[callbackName];
			}
		}

		if ('onSave' in dataset) {
			const callbackName = dataset.onSave;
			if (window[callbackName] && typeof window[callbackName] === 'function') {
				config.onSave = window[callbackName];
			}
		}

		if ('onSubmit' in dataset) {
			const callbackName = dataset.onSubmit;
			if (window[callbackName] && typeof window[callbackName] === 'function') {
				config.onSubmit = window[callbackName];
			}
		}

		// Headers
		config.headers = { 'action_nonce': jvbSettings?.dash };
		if ('headers' in dataset) {
			try {
				const additionalHeaders = JSON.parse(dataset.headers);
				config.headers = { ...config.headers, ...additionalHeaders };
			} catch (e) {
				console.warn('Invalid headers JSON in data-headers:', dataset.headers);
			}
		}

		return config;
	}

	/**
	 * Add a form to be managed by this instance
	 * @param {HTMLFormElement} formElement
	 * @param {Object} options
	 * @returns {Object} Form configuration
	 */
	addForm(formElement, options = {}) {

		const formConfig = {
			element: formElement,
			id: formElement.dataset.formId,
			data: this.collectFormData(formElement),
			initialized: false,

			// Default options with overrides
			options: {
				onSave: false,
				onChange: null,
				onSubmit: null,
				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,
				operationId: null,
				cached: false
			},
			dependencies: new Map(),
		};


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

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

	initFormFeatures(formConfig) {
		if (formConfig.initialized) {
			return;
		}
		formConfig.initialized = true;
		const form = formConfig.element;


		// Only initialize what exists
		const featureChecks = [
			{ selector: '[data-tab]', init: () => this.initTabs(formConfig) },
			{ selector: '.repeater', init: () => this.initRepeaterFields(form) },
			{ selector: '[data-editor="true"]', init: () => this.initQuillEditor(formConfig) },
			{ selector: '.gallery', init: () => this.initGalleryFields(formConfig) },
			{ selector: '.image', init: () => this.initImageFields(formConfig) },
			{ selector: '[data-limit]', init: () => this.initCharacterLimits(formConfig) },
			{ selector: '[data-depends-on]', init: () => this.initConditionalFields(formConfig)}
		];

		requestAnimationFrame(() => {
			featureChecks.forEach(({selector, init} ) => {
				if (form.querySelector(selector)) {
					init();
				}
			});
		});
	}

	initTabs(formConfig) {
		if (!window.jvbTabs) {
			console.warn('jvbTabs not available');
			return;
		}
		let form = formConfig.element;
		// Check if form is within a tabs container
		const tabsContainer = form.closest('[data-tab]') ||
			form.closest('.tabs-container') ||
			form.querySelector('.tabs:not(.icon)');

		if (tabsContainer) {
			// Initialize tabs with form-specific callbacks
			formConfig.tabs = new window.jvbTabs(form, {
				updateURL: false, // Disable URL updates for form tabs,
			});

			this.addTabNavigationButtons(formConfig);
		}
	}

	addTabNavigationButtons(formConfig) {
		const form = formConfig.element;
		const sections = form.querySelectorAll('section[id]');

		if (sections.length <= 1) {
			return; // No need for navigation if only one section
		}

		sections.forEach((section, index) => {
			let isLast = index === sections.length - 1;
			// Check if navigation buttons already exist
			if (section.querySelector('.tab-navigation')) {
				return;
			}

			let buttons = {
				previous: sections[index - 1]?.id ?? null,
				next: (isLast) ? null : sections[index + 1]?.id ?? null
			};

			for (var [direction, id] of Object.entries(buttons)) {
				if (id){
					let button = form.querySelector('button[type=submit]').cloneNode(true);

					button.type = 'button';
					button.className = `tab-navigation ${direction}`;
					button.innerText = window.uppercaseFirst(direction);

					let icon = (direction === 'previous') ? 'left' : 'right';
					button.prepend(window.getIcon(icon));
					button.dataset.navigateTo = id;

					if (isLast) {
						section.querySelector('.form-actions').prepend(button);
					} else {
						section.append(button);
					}
				}
			}
		});
	}

	/*********************************************************
	 *
	 * CACHE
	 *
	 *********************************************************/
	/**
	 * Cache form data with operation tracking
	 */
	async cacheFormData(formConfig) {
		if (!this.cache || !formConfig.options.cache) return false;

		try {
			const cacheData = {
				formId: formConfig.id,
				formData: this.collectFormData(formConfig.element),
				formConfig: {
					endpoint: formConfig.element.dataset.save,
					content: formConfig.options.content,
					itemID: formConfig.options.itemID,
					headers: formConfig.options.headers
				},
				timestamp: Date.now(),
				status: 'pending',
				operationId: formConfig.state.operationId
			};

			const cacheKey = `form_${formConfig.id}`;
			await this.cache.setItem(cacheKey, cacheData);

			return true;

		} catch (error) {
			this.handleError('Failed to cache form data:', error);
			return false;
		}
	}

	/**
	 * Update cached form with operation ID
	 */
	async updateCachedFormOperation(formId, operationId) {
		if (!this.cache || this.forms.get(formId).options.noCache) return;

		try {
			const cacheKey = `form_${formId}`;
			const cachedData = await this.cache.getItem(cacheKey);

			if (cachedData) {
				cachedData.operationId = operationId;
				cachedData.status = 'queued';
				await this.cache.setItem(cacheKey, cachedData);
			}
		} catch (error) {
			this.handleError('Failed to update cached form operation:', error);
		}
	}

	/**
	 * Resume pending operations from cache
	 */
	async resumePendingOperations() {
		if (!this.cache) return;

		try {
			// Get all cached form operations for current page
			const pendingForms = await this.getCachedFormsForCurrentPage();

			if (pendingForms.length > 0) {
				for (const cachedForm of pendingForms) {
					await this.resumeFormOperation(cachedForm);
				}
			}
		} catch (error) {
			this.handleError('Failed to resume pending operations:', error);
		}
	}

	/**
	 * Get cached forms for current page
	 */
	async getCachedFormsForCurrentPage() {
		if (!this.cache) return [];
		try {
			const pendingForms = [];
			for (let [key, value] of this.forms) {
				if (!value.options.cache){
					continue;
				}
				const cachedData = await this.cache.getItem(`form_${key}`);
				if (cachedData &&
					cachedData.operationId &&
					['queued', 'pending', 'processing'].includes(cachedData.status)) {
					pendingForms.push(cachedData);
				}
			}

			return pendingForms;
		} catch (error) {
			this.handleError('Failed to get cached forms:', error);
			return [];
		}
	}

	/**
	 * Resume a specific form operation
	 */
	async resumeFormOperation(cachedForm) {
		try {
			// Check if operation still exists in queue
			const operationStatus = await this.queue.getOperationStatus(cachedForm.operationId);

			if (operationStatus) {
				// Re-track the operation
				this.activeOperations.set(cachedForm.operationId, {
					formId: cachedForm.formId,
					status: operationStatus.status,
					startTime: cachedForm.timestamp,
					data: cachedForm.formConfig
				});

				// Update form config if form is registered
				const formConfig = this.forms.get(cachedForm.formId);
				if (formConfig) {
					formConfig.state.operationId = cachedForm.operationId;
					formConfig.state.cached = true;

					// Show resumption notification
					this.showFormResumptionNotification(formConfig, operationStatus.status);
				}

				// Set up completion handler
				this.queue.onOperationComplete(cachedForm.operationId, (operation) => {
					this.handleOperationComplete(operation);
				});

			} else {
				// Operation no longer exists, clean up cache
				await this.removeCachedForm(cachedForm.formId);
			}
		} catch (error) {
			this.handleError('Failed to resume form operation:', error);
			// Clean up on error
			await this.removeCachedForm(cachedForm.formId);
		}
	}

	/**
	 * Show form resumption notification
	 */
	showFormResumptionNotification(formConfig, status) {
		const form = formConfig.element;
		const notification = document.createElement('div');
		notification.className = 'form-resumption-notification';
		notification.innerHTML = `
			<div class="notification-content">
				<span class="icon">🔄</span>
				<span class="message">Resumed: ${this.getStatusMessage(status)}</span>
				<button type="button" class="dismiss">×</button>
			</div>
		`;

		// Insert notification
		form.insertBefore(notification, form.firstChild);

		// Auto-dismiss
		setTimeout(() => {
			notification.remove();
		}, 5000);

		// Manual dismiss
		notification.querySelector('.dismiss').addEventListener('click', () => {
			notification.remove();
		});
	}

	/**
	 * Remove cached form data
	 */
	async removeCachedForm(formId) {
		if (!this.cache || !this.forms.get(formId).options.cache) return;

		try {
			const cacheKey = `form_${formId}`;
			await this.cache.removeItem(cacheKey);
		} catch (error) {
			this.handleError('Failed to remove cached form:', error);
		}
	}


	/**
	 * Get form cache status
	 */
	async getFormCacheStatus(formId) {
		if (!this.cache) return null;

		try {
			const cacheKey = `form_${formId}`;
			const cachedData = await this.cache.getItem(cacheKey);

			return cachedData ? {
				formId: cachedData.formId,
				status: cachedData.status,
				operationId: cachedData.operationId,
				timestamp: cachedData.timestamp,
				hasData: !!cachedData.formData
			} : null;
		} catch (error) {
			this.handleError('Failed to get form cache status:', error);
			return null;
		}
	}
	/**
	 * Track form operation
	 */
	trackOperation(formId, operationId, operationData) {
		this.activeOperations.set(operationId, {
			formId: formId,
			status: 'queued',
			startTime: Date.now(),
			data: operationData
		});

		// Update form config
		const formConfig = this.forms.get(formId);
		if (formConfig) {
			formConfig.state.operationId = operationId;
			formConfig.state.cached = true;
		}
	}

	/**
	 * Handle operation updates from queue
	 */
	handleOperationUpdate(operation) {
		const activeOp = this.activeOperations.get(operation.id);
		if (!activeOp) return;

		// Update operation status
		activeOp.status = operation.status;
		this.activeOperations.set(operation.id, activeOp);

		// Update form UI if needed
		const formConfig = this.forms.get(activeOp.formId);
		if (formConfig) {
			// Show progress or status updates in form UI
			this.updateFormStatus(formConfig, operation.status);
		}
	}

	/**
	 * Handle operation completion
	 */
	async handleOperationComplete(operation) {
		const activeOp = this.activeOperations.get(operation.id);
		if (!activeOp) return;

		const formId = activeOp.formId;
		const formConfig = this.forms.get(formId);

		if (formConfig) {
			// Clear operation tracking
			formConfig.state.operationId = null;
			formConfig.state.cached = false;
			formConfig.state.isDirty = false;

			// Update last saved data
			formConfig.data = this.collectFormData(formConfig.element);

			// Update form UI
			this.updateFormStatus(formConfig, 'completed');
		}

		// Clean up
		this.activeOperations.delete(operation.id);
		await this.removeCachedForm(formId);
	}
	/**
	 * Update form status in UI
	 */
	updateFormStatus(formConfig, status) {
		// Add status indicator to form or show notification
		const statusElement = formConfig.element.querySelector('.form-status');
		if (statusElement) {
			statusElement.className = `form-status ${status}`;
			statusElement.textContent = this.getStatusMessage(status);
		}
	}

	/**
	 * Get human-readable status message
	 */
	getStatusMessage(status) {
		const messages = {
			'queued': 'Queued for saving...',
			'pending': 'Waiting to save...',
			'processing': 'Saving...',
			'completed': 'Saved successfully',
			'failed': 'Save failed'
		};
		return messages[status] || status;
	}
	/*********************************************************
	 *
	 *   EVENT HANDLERS
	 *
	 *********************************************************/
	handleSubmit(event) {
		const form = event.target.closest('form');
		if (!form || !this.forms.has(form.dataset.formId)) return;

		this.checkHiddenTabs(this.forms.get(form.dataset.formId));
		event.preventDefault();
		const formConfig = this.forms.get(form.dataset.formId);

		// Call form-specific submit callback if provided
		if (formConfig.options.onSubmit) {
			formConfig.options.onSubmit(event, this.collectFormData(formConfig.element));
		} else {
			// Default submit behavior
			this.handleSave(this.collectFormData(formConfig.element), formConfig);
		}
	}

	checkHiddenTabs(formConfig) {
		if (!('tabs' in formConfig)) {
			return;
		}
		let sections = formConfig.element.querySelectorAll('section');
		for (let section of sections) {
			let requiredInputs = section.querySelector('[required]');
			if (requiredInputs) {
				formConfig.tabs.switchTab(section.id);
				return;
			}
		}
	}

	handleChange(event) {
		// Cache target checks
		const target = event.target;
		const form = target.form || target.closest('form');
		console.log('[form]Handling change');

		// Early return if not a managed form
		if (!form?.dataset.formId || !this.forms.has(form.dataset.formId)) return;
		console.log('[form]Managing this form');
		// Image fields handled separately
		if (window.targetCheck(event, '.image.field')) {
			return;
		}
		console.log('[form] Not image field');

		const formConfig = this.forms.get(form.dataset.formId);
		const fieldName = event.target.name;

		// Check conditionals immediately for all fields
		this.checkConditionals(fieldName, formConfig);
		console.log('[form]Conditionals checked');

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


		// Skip autosave if disabled
		if ('noautosave' in form.dataset) {
			console.log('No Autosave set');
			return;
		}

		if (fieldName.includes('::')) {
			const groupName = fieldName.split('::')[0];
			this.scheduleSave(formConfig, {
				type: 'field',
				fieldName: groupName,
				reason: event.type,
				delay: 3000
			});
		} else if (fieldName.includes(':')) {
			const row = target.closest('.repeater-row');
			if (row) {
				const repeater = row.closest('.field.repeater');
				const repeaterName = repeater.dataset.field;
				const delay = this.getRepeaterChangeDelay(event.target, event.type);

				this.scheduleSave(formConfig, {
					type: 'field',
					fieldName: repeaterName,
					reason: event.type,
					delay: delay
				});
			}
		} else {
			// Schedule form-wide save
			this.scheduleSave(formConfig, {
				type: 'form',
				reason: 'change'
			});
		}
	}

	handleClick(event) {
		const form = event.target.closest('form');
		if (!form || !this.forms.has(form.dataset.formId)) return;

		const formConfig = this.forms.get(form.dataset.formId);

		if (window.targetCheck(event, '.add-repeater-row')) {
			const repeater = event.target.closest('.repeater');
			this.addRepeaterRow(repeater, formConfig);

			// Schedule save after add
			this.scheduleSave(formConfig, {
				type: 'field',
				fieldName: repeater.dataset.field,
				reason: 'add',
				delay: this.repeaterDelays.add
			});

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

			// Schedule save after remove
			this.scheduleSave(formConfig, {
				type: 'field',
				fieldName: repeater.dataset.field,
				reason: 'remove',
				delay: this.repeaterDelays.remove
			});

		} else if (window.targetCheck(event, '.remove-image')) {
			this.handleImageRemove(event.target.closest('.field'));
		} else if (window.targetCheck(event, '.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);
		} else if (window.targetCheck(event, '.tab-navigation')) {
			formConfig.tabs.switchTab(event.target.dataset.navigateTo);
		}
	}

	handleFocus(event) {
		const form = event.target.closest('form');
		if (!form || !this.forms.has(form.dataset.formId)) return;

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

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

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

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

		// Handle repeater field blur with shorter delay
		const repeaterRow = event.target.closest('.repeater-row');
		if (repeaterRow) {
			const repeater = repeaterRow.closest('.field.repeater');

			this.scheduleSave(this.forms.get(form.dataset.formId), {
				type: 'field',
				fieldName: repeater.dataset.field,
				reason: 'blur',
				delay: this.repeaterDelays.blur
			});
		}
	}

	handleKeys(e) {
		const MAX_MULTIPLIER = 10000;

		if (e.ctrlKey && e.shiftKey) {
			this.stepMultiplier = Math.min(
				Math.max(this.stepMultiplier * 100, 1000),
				MAX_MULTIPLIER
			);
		} else if (e.shiftKey) {
			this.stepMultiplier = Math.min(
				Math.max(this.stepMultiplier * 10, 100),
				MAX_MULTIPLIER
			);
		} else if (e.key === 'Escape') {
			this.stepMultiplier = 1;
		}
	}
	/**
	 * 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('focusout', this.blurHandler);

		this.initialized = true;
	}

	removeChangeListener() {
		document.removeEventListener('change', this.changeHandler);
	}
	addChangeListener() {
		document.addEventListener('change', this.changeHandler);
	}

	/*******************************************************************
	 *
	 * 	Data Processing
	 *
	 *******************************************************************/
	// collectFormData(form) {
	// 	const formData = new FormData(form);
	// 	let data = {};
	// 	//push any fields that need all parts to a 'sendAll' property
	// 	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] ?? {};
	// 		}
	//
	// 		// Check if this is a repeater field (3 parts: field:index:name)
	// 		const keyParts = key.split(':');
	// 		if (keyParts.length === 3) {
	// 			// Handle repeater fields (field:index:name)
	// 			let [fieldName, index, rawSubField] = keyParts;
	//
	// 			// 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 if (keyParts.length === 2) {
	// 			// Handle group fields (group:field)
	// 			let [groupName, fieldName] = keyParts;
	//
	// 			// Initialize group structure if needed
	// 			if (!data[groupName]) {
	// 				data[groupName] = {};
	// 			}
	//
	// 			// Handle array values for group fields (checkboxes, etc.)
	// 			if (data[groupName][fieldName]) {
	// 				if (!Array.isArray(data[groupName][fieldName])) {
	// 					data[groupName][fieldName] = [data[groupName][fieldName]];
	// 				}
	// 				data[groupName][fieldName].push(value);
	// 			} else {
	// 				data[groupName][fieldName] = value;
	// 			}
	//
	// 		} else if (key.includes('[')) {
	// 			let [fieldKey, v ] = key.split('[');
	// 			v = v.replace(']','');
	// 			if (!Object.hasOwn(data, fieldKey)) {
	// 				data[fieldKey] = {};
	//
	// 				if (!Object.hasOwn(data, 'sendAll')) {
	// 					data['sendAll'] = [fieldKey];
	// 				} else if (!data['sendAll'].includes(fieldKey)) {
	// 					data['sendAll'].push(fieldKey);
	// 				}
	// 			}
	// 			data[fieldKey][v] = value;
	//
	// 		} else {
	// 			// Handle regular fields (no colons or single field name)
	// 			// 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;
	// 		}
	// 	}
	//
	// 	return data;
	// }

	collectFormData(form) {
		const formData = new FormData(form);
		let data = {};
		const repeaterData = {};
		const postData = {};

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

			const processor = this.getFieldProcessor(key);
			processor(key, value, data, repeaterData, postData, form);
		}
		if (!window.isEmptyObject(postData)) {
			data = this.mergeRepeaterData(data, repeaterData);
			return this.mergePostData(data, postData);
		}

		return this.mergeRepeaterData(data, repeaterData);
	}

	getFieldProcessor(key) {
		if (key.includes('|')) return this.processTableField;
		if (key.includes('::')) return this.processGroupField;
		if (key.includes(':')) return this.processRepeaterField;
		if (key.includes('[')) return this.processLocationField;
		return this.processRegularField;
	}

	mergeRepeaterData(data, repeaterData) {
		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;
	}

	mergePostData(data, postData) {
		for (let [postId, postData] in Object.entries(postData)) {
			data[postId] = postData;
		}
		return data;
	}

	processTableField(key, value, data, repeaterData, postData, form) {
		/***
		 * Table forms are a huge form containing multiple posts and their data
		 * Field names are prepended with  `${postID}|`
		 * Goal:
		 * 1) Separate out the post id from the field name
		 * 2) store the original data in a temporary 'original' variable
		 * 3) Process the field as normal
		 * 4) return the original data, as PostID: {$field data}
		 * Final format:
		 * {
		 *     id1: {
		 *         field1: "A title",
		 *         field3: 32
		 *     },
		 *     id2: {
		 *         field1: "Another title",
		 *         field2: "122,21,32"
		 *     }
		 * }
		 **/
		let [post, fieldKey] = key.split('|');
		if (!post in postData) {
			postData[post] = {};
		}

		const processor = this.getFieldProcessor(fieldKey);
		processor(fieldKey, value, postData, repeaterData, postData, form);

	}
	processRepeaterField(key, value, data, repeaterData, postData, form) {
		let [fieldName, index, subField] = key.split(':');

		const isArray = subField.endsWith('[]');
		subField = subField.replace('[]', '');

		//Ensure this repeater and row is in repeaterData
		if (!repeaterData[fieldName]) {
			repeaterData[fieldName] = {};
		}
		if (!repeaterData[fieldName][index]) {
			repeaterData[fieldName][index] = {};
		}

		if (isArray || 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(value);
		} else {
			// Single value field
			repeaterData[fieldName][index][subField] = value;
		}
	}
	processGroupField(key, value, data, repeaterData, postData, form) {
		const keys = key.split('::');
		const rootGroup = keys[0];

		// Initialize root group if it doesn't exist
		if (!data[rootGroup]) {
			data[rootGroup] = {};
		}

		// Build nested structure step by step
		let current = data[rootGroup];
		for (let i = 1; i < keys.length - 1; i++) {
			const groupKey = keys[i];
			if (!current[groupKey]) {
				current[groupKey] = {};
			}
			current = current[groupKey];
		}

		// Set the final field value
		const fieldKey = keys[keys.length - 1];

		// Handle array values (checkboxes, multi-selects)
		if (current[fieldKey] !== undefined) {
			if (!Array.isArray(current[fieldKey])) {
				current[fieldKey] = [current[fieldKey]];
			}
			current[fieldKey].push(value);
		} else {
			current[fieldKey] = value;
		}
	}
	processLocationField(key, value, data, repeaterData, postData, form) {
		let [fieldKey, v ] = key.split('[');
		v = v.replace(']','');
		if (!Object.hasOwn(data, fieldKey)) {
			data[fieldKey] = {};

			if (!Object.hasOwn(data, 'sendAll')) {
				data['sendAll'] = [fieldKey];
			} else if (!data['sendAll'].includes(fieldKey)) {
				data['sendAll'].push(fieldKey);
			}
		}
		data[fieldKey][v] = value;
	}

	processRegularField(key, value, data, repeaterData, postData, form) {
		//handle array values (like checkboxes/selects)
		if (data[key]) {
			if (!Array.isArray(data[key])) {
				data[key] = [data[key]];
			}
			data[key].push(value);
		} else {
			data[key] = value;
		}
	}

	/**
	 * Get differences between old and new data
	 */
	getDataChanges(newData, oldData, deep = false) {
		return window.getDifferences?.map(oldData, newData) || {};
	}

	async handleSave(changes, formConfig) {
		console.log(changes);
		if (changes.length === 0 || window.isEmptyObject(changes)) {
			return;
		}

		// Cache the current form state before operation
		await this.cacheFormData(formConfig);

		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;

			const operation = {
				endpoint: endpoint,
				headers: {
					'action_nonce': jvbSettings.dash
				},
				title: `Saving ${title}`,
				popup: `Saving ${title}...`,
				data: changes,
				formId: formConfig.id,
				onComplete: (operation) => this.handleOperationComplete(operation),
				onUpdate: (operation) => this.handleOperationUpdate(operation)
			};

			try {
				const operationId = await window.jvbQueue.addToQueue(operation);

				// Track the operation
				this.trackOperation(formConfig.id, operationId, operation);

				// Update cached data with operation ID
				await this.updateCachedFormOperation(formConfig.id, operationId);
			} catch (error) {
				this.handleError('Failed to queue form operation:', error);
				// Remove from cache if queueing failed
				await this.removeCachedForm(formConfig.id);
			}
		}
	}

	/**
	 * Unified save scheduling for both forms and specific fields
	 * @param {Object} formConfig - Form configuration
	 * @param {Object} options - Save options
	 */
	scheduleSave(formConfig, options = {}) {
		console.log('Scheduling save...');
		const opts = {
			type: 'form',           // 'form' or 'field'
			fieldName: null,        // Required for field saves
			reason: 'change',       // 'change', 'blur', 'add', 'remove', 'reorder'
			delay: null,          	// Uses form saveDelay if null
			...options
		};

		// Generate timeout key
		const timeoutKey = opts.type === 'field'
			? `${formConfig.id}-${opts.fieldName}-${opts.type}`
			: `${formConfig.id}-${opts.type}`;

		// Determine delay
		const delay = opts.delay ?? this.getSaveDelay(formConfig, opts);
		console.log(timeoutKey);
		console.log(delay);
		this.debouncer.schedule(
			timeoutKey,
			() => { this.processChanges(formConfig, opts)},
			delay
		);
	}

	/**
	 * Unified change processing for both forms and fields
	 * @param {Object} formConfig - Form configuration
	 * @param {Object} options - What to process
	 */
	processChanges(formConfig, options = {}) {
		const opts = {
			type: 'form',
			fieldName: null,
			processSave: true,
			... options
		};

		let changes;

		if (opts.type === 'field' && opts.fieldName) {
			// Process specific field changes
			changes = this.collectFieldChanges(formConfig, opts.fieldName);
		} else {
			console.log('formConfig: ', formConfig);
			// Process entire form changes
			const newData = this.collectFormData(formConfig.element);
			changes = this.getDataChanges(newData, formConfig.data);
			//Check for any fields that are flagged to send all data (mainly location fields)
			if (newData.sendAll) {
				newData.sendAll.forEach(key => {
					changes[key] = newData[key];
				});
			}
			formConfig.data = newData;
		}

		if (Object.keys(changes).length > 0) {
			formConfig.state.isDirty = true;

			if (opts.processSave) {
				console.log('Handling Save....');
				this.handleSave(changes, formConfig);
			}
		}
	}

	hasUploadsBlocking(formConfig) {
		return formConfig.state.uploadPending || this.hasActiveUploads(formConfig);
	}

	getSaveDelay(formConfig, options) {
		if (options.type === 'field') {
			// Use repeater delays for field-level saves
			switch (options.reason) {
				case 'typing': return this.repeaterDelays.typing;
				case 'blur': return this.repeaterDelays.blur;
				case 'add': return this.repeaterDelays.add;
				case 'remove': return this.repeaterDelays.remove;
				case 'reorder': return this.repeaterDelays.reorder;
				case 'change':
				default: return this.repeaterDelays.change;
			}
		}

		// Use form-level delay
		return formConfig.options.saveDelay;
	}

	/**
	 * Collect changes for a specific field (used for repeaters)
	 */
	collectFieldChanges(formConfig, fieldName) {
		const currentData = this.collectFormData(formConfig.element);

		// Return only the specified field data
		const fieldChanges = {
			[fieldName]: currentData[fieldName] || []
		};

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

		return fieldChanges;
	}
	/************************************************************
	 *
	 * CONDITIONAL LOGIC
	 *
	 ************************************************************/
	initConditionalFields(formConfig) {
		const form = formConfig.element;

		form.querySelectorAll('[data-depends-on]').forEach(field => {
			const dependsOn = field.dataset.dependsOn;
			if (!formConfig.dependencies.has(dependsOn)) {
				formConfig.dependencies.set(dependsOn, []);
			}
			formConfig.dependencies.get(dependsOn).push(field);
			const triggerValue = this.getFieldValue(form, dependsOn);

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

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

	}

	handleSpecialFields(event, formConfig) {
		// Handle repeater field changes
		if (event.target.closest('.repeater-row')) {
			this.updateRepeaterOrder(event.target.closest('.repeater'));
		}
	}
	checkConditionals(changed, formConfig) {
		const dependencies = formConfig.dependencies.get(changed);
		if (!dependencies) return;
		this.updateConditionalFields(changed, dependencies, formConfig);
	}
	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);
	}

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

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

		wrapper.hidden = !show;
		wrapper.querySelectorAll('input, select, textarea').forEach(control => {
			control.hidden = !show;
			control.disabled = !show;
		});
	}
	/**************************************************
	 *
	 * REPEATER FUNCTIONALITY
	 *
	 **************************************************/
	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);
				}
			});

		});
	}
	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 id = `${base}:${index}:${field.name}-${field.value}`;
			let name = `${base}:${index}:${field.name}`;

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

	removeRepeaterRow(removeButton, formConfig) {
		let repeater = removeButton.closest('.repeater');
		removeButton.closest('.repeater-row').remove();
		this.updateRepeaterOrder(repeater);
	}
	updateRepeaterOrder(repeater) {
		requestAnimationFrame(() => {
			let items = repeater.querySelector('.repeater-items');
			let updates = [];

			let base = repeater.dataset.field;
			const form = repeater.closest('form');
			const formConfig = this.forms.get(form.dataset.formId);

			// Update field names and row numbers
			items.querySelectorAll('.repeater-row').forEach((row, index) => {
				updates.push(() => {
					[
						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.value}`;
						[
							field.name,
							field.id
						] = [
							newName,
							newId
						];
						let label = field.closest('.field').querySelector('label');
						if (label) {
							label.htmlFor = newId;
						}
					});
				});
			});

			updates.forEach(update => update());

			// Schedule save after reorder
			this.scheduleSave(formConfig, {
				type: 'field',
				fieldName: base,
				reason: 'reorder',
				delay: this.repeaterDelays.reorder
			});
		});
	}

	getRepeaterChangeDelay(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 get shorter delay
		if (eventType === 'blur') {
			return this.repeaterDelays.blur;
		}

		return this.repeaterDelays.change;
	}

	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.dataset.formId}-${repeaterId}-row-${index}`;
		repeaterRow.id = generatedId;
		return generatedId;
	}
	/*****************************************************
	 *
	 * FIELD POPULATION (used by CRUD edit/bulk-edit modals and table view)
	 *
	 *****************************************************/
	/**
	 * 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 = {}) {
		const formConfig = this.forms.get(form.dataset.formId);

		// Build field type cache once
		if (!formConfig.fieldTypeCache) {
			formConfig.fieldTypeCache = new Map();
			form.querySelectorAll('.field').forEach(field => {
				const fieldName = field.dataset.field;
				if (fieldName) {
					formConfig.fieldTypeCache.set(fieldName, this.getFieldType(field));
				}
			});
		}

		// Use cached types
		for (let [fieldName, fieldValue] of Object.entries(fieldsData)) {
			let fieldWrapper = form.querySelector(`[data-field=${fieldName}]`);
			if (fieldWrapper) {
				this.populateFieldValue(fieldWrapper, fieldName, fieldValue, imagesData, 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
	 */
	populateFieldValue(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(',');
		}

		// 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}-${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 || '');
		}
	}
	/*****************************************************
	 *
	 * QUILL
	 *
	 *****************************************************/
	initQuillEditor(formConfig) {
		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) {
										this.handleError('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 }));
			});
		});
	}

	/*****************************************************
	 *
	 * CHARACTER LIMITS
	 *
	 *****************************************************/
	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
			}
		})
	}
	/*****************************************************
	 *
	 * NUMBER FIELDS
	 *
	 *****************************************************/
	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;
		}
	}
	/*****************************************************
	 *
	 * GALLERY
	 * TODO: Does the uploader handle this on its own now?
	 *
	 *****************************************************/
	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;
				},

				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);
		});
	}
	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');
	}
	handleImageUploadSuccess(result, field) {
		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');
	}
	handleImageUploadError(error, field) {
		this.handleError('Upload error:', error);

		// Clear upload pending state
		const form = field.closest('form');
		if (form && form.dataset.formId) {
			const formConfig = this.forms.get(form.dataset.formId);
			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 = '';
		}
	}
	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) {
		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;
	}
	/*****************************************************
	 *
	 * 	UPLOAD INTEGRATION
	 * 	TODO: This may not be necessary. I believe the uploads handles any form changes in the backend
	 *
	 *****************************************************/
	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;
	}

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

	getForm(formId) {
		return this.forms.get(formId);
	}

	processForm(formId) {
		const formConfig = this.forms.get(formId);
		if (formConfig) {
			this.processChanges(formConfig);
		}
	}
	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
		};
	}

	// 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 upload fields
		if (formConfig.uploadFields && window.jvbUploadManager) {
			formConfig.uploadFields.forEach(fieldId => {
				console.log(`Cleaning up upload field: ${fieldId}`);
			});
		}

		// Clean up cached data
		this.removeCachedForm(formId);

		// Clean up active operations
		if (formConfig.state.operationId) {
			this.activeOperations.delete(formConfig.state.operationId);
		}

		this.forms.delete(formId);
	}

	cleanup() {
		// Clean up debouncer
		if (this.debouncer) {
			this.debouncer.cleanup();
		}

		// Clear all maps
		this.activeRepeaters.clear();
		this.activeOperations.clear();
		this.pendingForms.clear();

		// Clean up all forms
		for (let [formId, formConfig] of this.forms) {
			this.removeForm(formId);
		}

		// Remove event listeners
		if (this.initialized) {
			document.removeEventListener('submit', this.submitHandler);
			document.removeEventListener('change', this.changeHandler);
			document.removeEventListener('click', this.clickHandler);
			document.removeEventListener('keydown', this.keyHandler);
			document.removeEventListener('focusin', this.focusHandler);
			document.removeEventListener('focusout', this.blurHandler);
			this.initialized = false;
		}
	}

	handleError(error, context) {
		// In production, send to error tracking service
		if (window.jvbError) {
			window.jvbError.log(error, context);
		}

		// In development only
		if (jvbSettings.debug) {
			console.error(context, error);
		}
	}
}

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


window.addEventListener('beforeunload', () => window.jvbForm?.cleanup());