class FormController {
	constructor() {
		this.a11y = window.jvbA11y;
		this.error = window.jvbError;
		this.queue = window.jvbQueue;
		this.populate = window.jvbPopulate;

		this.changes = new Map();
		this.forms = new Map();
		this.inputs = new Map();
		this.repeaters = new Map();
		this.tagLists = new Map();
		this.locations = new Map();
		this.charLimits = new Map();
		this.quantityFields = new Map();
		this.quillInstances = new Map(); // formId -> Set of quill instances
		this.dependencies = new Map();

		this.subscribers = new Set();

		this.isRestoring = false;
		this.hasListeners = false;
		this.hasUploads = false;
		this.summaryTemplate = false;

		this.init();

	}
	init() {
		this.templates = window.jvbTemplates;
		this.defineSummaryTemplate();
		this.initElements();
		this.initListeners();
		this.initStore();
		this.initValidators();
		this.initUploadSubscription();
	}

	initUploadSubscription() {
		window.jvbUploads.subscribe((event, data) => {
			if (!this.hasUploads) return;
			if (event === 'upload-received') {
				let form = this.getForm(data.field);
				if (form) {
					this.updateItem(`${data.field.dataset.field}_tempUpload`, data.id, form);
				}

			}
		});
	}
	initElements() {
		this.inputSelectors = 'input, textarea, select';
		this.selectors = {
			tabs: {
				nav: 'nav.tabs',
				sections: '.tab-content',			//querySelectorAll
				progress: {
					progress: '.progress',
					fill: '.progress .fill',
					details: '.progress .details',
					icon: '.progress .icon'
				},
				buttons: 'nav.tabs button',
			},
			dependsOn: '[data-depends-on]',
			forms: {
				status: {
					status: '.fstatus',
					message: '.fstatus .message',
					icon: '.fstatus .icon',
					actions: '.fstatus .actions',
				},
				restore: {
					container: '.restore-form',
					restore: '[data-action="restore"]',
					clear: '[data-action="clear"]',
				}
			},
			inputs: this.inputSelectors,					//querySelectorAll
			fields: {
				field: '.field',					//querySelectorAll
				label: 'label',
				success: '.success',
				error: '.error',
				message: '.validation-message',
			},
			repeater: {
				repeater: '.repeater',				//querySelectorAll
				row: '.repeater-row',
				handle: '.drag-handle',
				header: '.repeater-row-header',
				remove: '.remove-row',
				add: '.add-repeater-row',
				template: 'template',
				items: '.repeater-items',
				inputs: this.inputSelectors					//querySelectorAll
			},
			tagList: {
				tagList: '.field.tag-list',			//querySelectorAll
				input: '.row',
				add: '.add-tag',
				remove: '.remove-tag',
				label: '.tag-label',
				items: '.tag-items',
				item: '.tag-item',
				inputs: this.inputSelectors,				//querySelectorAll
				value: 'input[type="hidden"]'		//querySelectorAll
			},
			location: {
				location: '[data-field-type="location"]',	//querySelectorAll
				search: '[data-location-search]',
				results: '.search-results',
				message: '.message',
				preview: '.location-preview',
				fields: 'fieldset.location input',
			},
			tag: {
				label: '.tag-label'
			},
			number: {
				number: '.field div.quantity',
				increase: 'button.increase',
				decrease: 'button.decrease',
				input: 'input[type="number"]'
			},
			limits: {
				hasLimit: '[data-maxlength]',
				limit: '.limit',
				current: '.current',
			}
		};
	}
	initListeners() {
		this.clickHandler = this.handleClick.bind(this);
		this.changeHandler = this.handleChange.bind(this);
		this.blurHandler =  this.handleBlur.bind(this);
		this.inputHandler = this.handleInput.bind(this);
		this.submitHandler = this.handleSubmit.bind(this);
		this.quantityClick = this.handleQuantityClick.bind(this);
		this.repeaterClick = this.handleRepeaterClick.bind(this);
		this.tagListClick = this.handleTagListClick.bind(this);
		this.tagListInput = this.handleTagListInput.bind(this);
	}
	addFormListeners(form) {
		form.addEventListener('click', this.clickHandler);
		form.addEventListener('change', this.changeHandler);
		form.addEventListener('input', this.inputHandler);
		form.addEventListener('blur', this.blurHandler);
		form.addEventListener('submit', this.submitHandler);
	}
	removeFormListeners(form) {
		form.removeEventListener('click', this.clickHandler);
		form.removeEventListener('change', this.changeHandler);
		form.removeEventListener('input', this.inputHandler);
		form.removeEventListener('blur', this.blurHandler);
		form.removeEventListener('submit', this.submitHandler);
	}
	initStore() {
		const store = window.jvbStore.register(
			'forms',
			{
				storeName: 'forms',
				keyPath: 'id',
				indexes: [
					{ name: 'src', keyPath: 'src'},
					{ name: 'timestamp', keyPath: 'timestamp' },
					{ name: 'formType', keyPath: 'type' }
				],
				TTL: 7 * 24 * 60 * 1000, //7 days
			});
		this.store = store.forms;

		this.store.subscribe((event, data)=> {
			if (event === 'data-ready') {
				let stored = this.store.getFiltered();

				let pending = stored.filter(form=> form.src ===  window.location.pathname);
				for (let form of pending) {
					this.showPendingNotification(form.id, form.changes);
				}
			} else if (event === 'operation-status' && data.status === 'completed') {
				if (data.config) {
					this.store.delete(data.config.id);
				}
			}
		});
	}
	showPendingNotification(formId, changes) {
		let form = this.forms.get(formId);
		if (!form) return;
		let element = form.element;
		if (!element) {
			console.warn(`Form element not found for: ${formId}`);
			return;
		}

		form.ui.restore.container.hidden = false;
		const handleRestore = async (changes, element) => {
			this.isRestoring = true;
			let theChanges = {['fields']: changes};
			await this.checkStoredUploads(changes, element);
			this.populate.populate(element, theChanges);
			this.a11y.announce('Previous changes restored');
			this.isRestoring = false;
			form.ui.restore.container.remove();
		};
		const clearRestore = async (formId) => {
			await this.checkStoredUploads(changes, element, false);
			await this.store.delete(formId);
			this.a11y.announce('Previous changes discarded');
			form.ui.restore.container.remove();
		};
		form.ui.restore.restore.addEventListener('click', () => handleRestore(changes, element));
		form.ui.restore.clear.addEventListener('click', async ()  => clearRestore(formId));
	}
		async checkStoredUploads(changes, element, restore = true) {
			let form = this.forms.get(element.dataset.formId);
			if (!form) return;
			let uploads = [];
			for (let [key, value] of Object.entries(changes)) {
				if (key.includes('_tempUpload')) {
					let field = key.replace('_tempUpload', '');

					if (Object.hasOwn(form.ui.uploads, field)) {
						uploads = [
							... uploads,
							... value
						];
					}
				}
			}

			if (uploads.length > 0) {
				if (restore) {
					await window.jvbUploads.restoreUploads(uploads);
				} else {
					await window.jvbUploads.clearUploads(uploads);
				}

			}
		}
	initValidators() {
		this.validators = {
			email: {
				pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
				message: 'Please enter a valid email address'
			},
			url: {
				pattern: /^https?:\/\/.+\..+/,
				message: 'Please enter a valid URL starting with https://'
			},
			phone: {
				pattern: /^[\d\s\-+().]+$/,
				message: 'Please enter a valid phone number'
			},
			number: {
				test: (value, fieldWrapper) => {
					const num = parseFloat(value);
					if (isNaN(num)) return 'Please enter a valid number';

					const min = fieldWrapper.dataset.min;
					const max = fieldWrapper.dataset.max;

					if (min !== undefined && num < parseFloat(min)) {
						return `Value must be at least ${min}`;
					}
					if (max !== undefined && num > parseFloat(max)) {
						return `Value must be at most ${max}`;
					}
					return true;
				}
			},
			text: {
				test: (value, fieldWrapper) => {
					const minLength = fieldWrapper.dataset.minlength;
					const maxLength = fieldWrapper.dataset.maxlength;

					if (minLength && value.length < parseInt(minLength)) {
						return `Must be at least ${minLength} characters`;
					}
					if (maxLength && value.length > parseInt(maxLength)) {
						return `Must be no more than ${maxLength} characters`;
					}
					return true;
				}
			}
		};
	}
	validateField(input) {
		const result = this.performValidation(input);
		this.updateValidationUI(input, result);
		return result.isValid;
	}
	performValidation(input) {
		const field = input.closest('.field');
		const value = this.getFieldCheckedValue(input);

		if (!value && !input.required) {
			return { isValid: true, message: '' };
		}

		if (input.required) {
			if (input.type === 'checkbox') {
				if (!input.checked) {
					return { isValid: false, message: 'This field is required' };
				}
			} else if (input.type === 'radio') {
				const radioGroup = document.querySelectorAll(`input[name="${input.name}"]`);
				const anyChecked = Array.from(radioGroup).some(r => r.checked);
				if (!anyChecked) {
					return { isValid: false, message: 'Please select an option' };
				}
			} else if (!value) {
				return { isValid: false, message: 'This field is required' };
			}
		}

		if(input.checkValidity && !input.checkValidity()){
			return {isValid: false, message: input.validationMessage};
		}

		if (value && Object.hasOwn(field.dataset, 'pattern')) {
			const regex = new RegExp(field.dataset.pattern);
			if (!regex.test(value)) {
				return {isValid: false, message: field.dataset.validationMessage || 'Invalid format'};
			}
		}

		if (Object.hasOwn(field.dataset, 'validate') || input.type) {
			const validator = this.validators[field.dataset.validate||input.type];

			if (validator && validator.pattern && !validator.pattern.test(value)) {
				return {isValid: false, message: validator.message};
			}

			if (validator && validator.test) {
				const result = validator.test(value, field);
				if (result !== true) {
					return {isValid: false, message: result};
				}
			}
		}

		return {isValid: true, message: ''};
	}
	updateValidationUI(input, result) {
		if (result.isValid) {
			this.showSuccess(input, result.message);
		} else {
			this.showError(input, result.message);
		}
	}

	handleClick(e) {
		let form = this.getForm(e.target);
		if (!form) return;

		const itemAction = window.targetCheck(e, '[data-action]');
		if (itemAction) {
			let action = itemAction.dataset.action;
			switch (action) {
				case 'clear-form':
					this.store.delete(form.id);
					form.element.reset();
					form.ui.status.status.hidden = true;
					this.a11y.announce('Form cleared, starting fresh');
					break;
				case 'dismiss-restore':
					form.ui.status.status.hidden = true;
					break;
				case 'next-step':
					e.preventDefault();
					form.tabs.ui.buttons.forEach((btn, index) => {
						if (btn.dataset.tab === form.tabs.activeTab) {
							let next = form.tabs.ui.buttons[index + 1]??false;
							if (next) {
								window.jvbTabs.switchTab(next.dataset.tab, window.jvbTabs.getConfig(next));
							}
						}
					});
					break;
				case 'prev-step':
					e.preventDefault();
					form.tabs.ui.buttons.forEach((btn, index) => {
						if (btn.dataset.tab === form.tabs.activeTab) {
							let prev = form.tabs.ui.buttons[index - 1]??false;
							if (prev) {
								window.jvbTabs.switchTab(prev.dataset.tab, window.jvbTabs.getConfig(prev));
							}
						}
					});
					break;
			}
		}
	}

	handleChange(e) {
		if (e.target.closest('[data-ignore]') || this.isRestoring) return;

		let field = this.getField(e.target);

		// Check if this input lives inside a collection field
		const collectionField = e.target.closest('[data-field-type="repeater"], [data-field-type="tag-list"]');
		if (collectionField) {
			// Dependencies still need checking
			if (this.dependencies.has(field.dataset.field)) {
				let dependency = this.dependencies.get(field.dataset.field);
				dependency.forEach(item => {
					this.checkFieldDependency(item, field.dataset.field);
				});
			}
			const collectionName = collectionField.dataset.field;
			this.maybeUpdateCollectionDisplay(field);
			window.debouncer.schedule(
				`collection:${collectionName}`,
				() => this.updateCollectionField(collectionField),
				150
			);
			return;
		}

		//Dependencies
		if (this.dependencies.has(field.dataset.field)) {
			let dependency = this.dependencies.get(field.dataset.field);
			dependency.forEach(item => {
				this.checkFieldDependency(item, field.dataset.field);
			});
		}

		let form = this.getForm(e.target);
		console.log(this.getFieldValue(e.target), 'value');
		this.updateItem(field.dataset.field, this.getFieldValue(e.target), form);
	}

	handleBlur(e) {
		if (e.target.closest('[data-ignore]') || this.isRestoring) return;
		let form = this.getForm(e.target);
		if (!form) return;

		let field = this.getField(e.target);
		let fieldName = field.dataset.field;
		window.debouncer.cancel(`form:${form.id}:validate:${fieldName}`);
		this.validateField(e.target);

		// If inside a collection, update the whole collection instead
		const collectionField = e.target.closest('[data-field-type="repeater"], [data-field-type="tag-list"]');
		if (collectionField) {
			this.updateCollectionField(collectionField);
			return;
		}

		this.updateItem(fieldName, this.getFieldValue(e.target), form);
	}

	handleInput(e){
		if (e.target.closest('[data-ignore]') || this.isRestoring) return;
		let form = this.getForm(e.target);
		if (!form) return;

		let field = this.getField(e.target);
		if (!field) return;

		const input = e.target;  // Capture reference
		const fieldName = field.dataset.field;

		// Show pending status regardless of cache
		this.showFormStatus(form.id, 'pending');

		// Debounce validation
		window.debouncer.schedule(
			`form:${form.id}:validate:${fieldName}`,
			() => this.validateField(input),
			500
		);
	}

	async handleSubmit(e) {
		let form = this.getForm(e.target);
		if (!form) return;

		if (this.subscribers.size > 0) {
			e.preventDefault();

			if (form.options.cache) {
				this.cancelBackup();
				await this.backup();
				const storedData = await this.store.get(form.id);

				this.notify('form-submit', {
					config: form,
					data: storedData.changes
				});
			} else {
				this.notify('form-submit', {
					config: form,
					data: this.changes.get(form.id)?.changes ?? {},
				});
			}
		}
		if (form.options.endpoint && !form.options.handled) {
			e.preventDefault();
			console.log('Submitting form...', this.changes.get(form.id)?.changes ?? {});
			await this.handleServerSave(form, this.changes.get(form.id)?.changes ?? {});

		}

		if (form.options.showSummary) {
			const storedData = await this.store.get(form.id);
			this.showSummary({config: form, changes: storedData?.changes});
		}
	}

	/**
	 * Updates the item, schedules caching if
	 * @param name
	 * @param value
	 * @param form
	 */
	updateItem(name, value, form) {
		console.log('Updating field');
		console.log(name,'name');
		console.log(value,'value');
		if (value === undefined) return;
		if (!this.changes.has(form.id)) {
			this.changes.set(form.id, {
				id: form.id,
				timestamp: Date.now(),
				src: window.location.pathname,
				changes: {},
			});
		}
		let changes = this.changes.get(form.id);
		//If it is temporary uploads, we need to store them all
		if (name.includes('_tempUpload')) {
			if (!Object.hasOwn(changes.changes, name)) {
				changes.changes[name] = [];
			}
			changes.changes[name].push(value);
		} else {
			changes.changes[name] = value;
		}

		if (form.tabs) {
			this.updateStepProgress(form);
		}

		this.changes.set(form.id, changes);
		if (form.options.cache) {
			this.scheduleBackup();
		}

		if (form.options.endpoint && !form.options.handled) {
			this.scheduleServerSave(form, changes);
		}
	}
		updateStepProgress(form) {
			console.log('First check in updateStepProgress');
			if (!form.tabs) return;
			let currentStep = this.getCurrentStep(form);
			console.log('Current step: ', currentStep);
			if (!currentStep) return;

			//The progress root will be 1 less than whatever the current step is
			currentStep = currentStep - 1;

			let section = this.getCurrentSection(form);
			console.log('Current section: ', section);
			if (!section) return;

			let total = 0;
			let filled = 0;
			section.childNodes.forEach(f => {
				console.log('Child node: ', f);
				if (f.classList.contains('field')) {
					total++;
					let value = this.getFieldValue(f.querySelector(this.inputSelectors));
					console.log('Value', value);
					if (value.length > 0) {
						filled++;
					}
				}
			});
			//Shouldn't happen, but simplifies things if it does
			if (total === 0) return;
			let current = currentStep + (filled / total);

			let totalSteps = form.ui.tabs.sections.length;
			window.showProgress(
				form.ui.tabs.progress,
				current,
				totalSteps,
				`Step ${currentStep +1} of ${totalSteps}`
			);
		}
			getCurrentStep(form) {
				let step = null;
				form.tabs.ui.buttons.forEach(btn => {
					if (btn.dataset.tab === form.tabs.activeTab) {
						step = btn.dataset.step;
					}
				});
				return step;
			}

			getCurrentSection(form) {
				console.log('Getting current section: ', form.tabs.ui.sections);
				let section = null;
				form.tabs.ui.sections.forEach(s => {
					if (s.dataset.tab === form.tabs.activeTab) {
						section = s;
					}
				});
				return section;
			}

	scheduleBackup() {
		window.debouncer.schedule(
			`form_changes`,
			async () => {
				if (this.changes.size > 0) {
					await this.backup();
				}
			},
			2000
		);
	}
	cancelBackup() {
		window.debouncer.cancel('form_changes');
	}
	async backup() {
		// Merge with existing stored data
		const toSave = new Map();

		for (let [formId, newData] of this.changes.entries()) {
			const stored = await this.store.get(formId);

			if (stored) {
				// Merge changes
				toSave.set(formId, {
					...stored,
					...newData,
					changes: {
						...stored.changes,
						...newData.changes
					},
					timestamp: Date.now()
				});
			} else {
				toSave.set(formId, newData);
			}
		}

		await this.store.saveMany(toSave);

		for (let formId of this.changes.keys()) {
			this.showFormStatus(formId, 'autosaved');
		}
		this.changes.clear();
	}

	saveCache(formId) {
		if (!this.changes.has(formId)) return;
		let changes = this.changes.get(formId);
		if (changes.size === 0) return;
		this.store.save(changes).then(()=>{});
		this.changes.delete(formId);
	}

	scheduleServerSave(form, changes){

		window.debouncer.schedule(
			`form_${form.id}_server_save`,
			async () => {
				await this.handleServerSave(form, changes);
			},
			1500
		);
	}
	cancelServerSave(formId) {
		window.debouncer.cancel(`form_${formId}_server_save`);
	}
	async handleServerSave(form, changes) {
		this.cancelServerSave(form.id);

		if (form.useQueue && window.jvbQueue) {
			// changes.user = window.auth.getUser();
			window.jvbQueue.addToQueue({
				endpoint: form.options.endpoint,
				data: changes,
				headers: form.options.headers??{},
			});
		} else {
			try {
				let response = await window.auth.fetch(jvbSettings.api+form.options.endpoint, {
					body: changes,
					headers: form.options.headers??{},
					method: 'POST',
				});

				if (!response.ok) {
					let errorDetails;
					try {
						// Attempt to parse the server's error payload as JSON
						errorDetails = await response.json();
					} catch {
						// Fallback if the error response isn't JSON (e.g., HTML error page)
						errorDetails = { message: response.statusText || 'Unknown HTTP error' };
					}
					this.notify('form-error', {
						config: form,
						data: errorDetails
					});
					return;
				}
				let result = await response.json();
				this.notify('form-success', {
					config: form,
					result: result
				});
			} catch (error) {
				if (error.status) {
					this.notify('form-error', {
						config: form,
						data: error
					});
					// This is an HTTP error thrown manually (e.g., 404, 500)
				} else if (error instanceof SyntaxError) {
					this.notify('form-error', {
						config: form,
						data: {
							status: 'error',
							success: false,
							message: 'Something went wrong'
						}
					});
					// This happens if response.json() fails on a successful 200 OK response
					console.error('Data Error: Server returned invalid JSON format.');
				} else {
					this.notify('form-error', {
						config: form,
						data: {
							status: 'network_error',
							message: 'Network error: could not connect to the server'
						}
					});
				}
			}

		}
	}


	/**
	 * Register a form for handling
	 * @param {HTMLElement} form
	 * @param {object} options
	 */
	registerForm(form, options) {
		options = {
			autoUpload: false,
			imageMeta: true,
			delay: 1500,
			useQueue: true,
			endpoint: Object.hasOwn(form.dataset, 'save') ? form.dataset.save: '',
			showStatus: true,
			showSummary: false,
			handled: Object.hasOwn(form.dataset, 'handled'),
			cache: true,
			ignore: [],
			... options
		};

		//Bail if form already registered
		if (Object.hasOwn(form.dataset, 'formId') && this.forms.has(form.dataset.formId)) return;

		if (!Object.hasOwn(form.dataset, 'formId')) {
			form.dataset.formId = window.generateID('form_');
		}
		if (Object.hasOwn(form.dataset, 'action')) {
			options.headers = window.auth.getHeader(form.dataset.action);
		}
		const formId = form.dataset.formId;

		this.addFormListeners(form);

		const config = {
			element: form,
			id: formId,
			status: '',
			options: options,
			ui: window.uiFromSelectors(this.selectors.forms, form)
		};

		config.ui.fields = {};
		form.querySelectorAll('[data-field]').forEach((field) => {
			config.ui.fields[field.dataset.field] = field;
		});

		this.initializeFields(form, config);
		this.forms.set(formId, config);
		return config;
	}
	clearForm(formId) {
		const config = this.forms.get(formId);
		if (!config) return;

		if (config.unsubscribeTabs) {
			config.unsubscribeTabs();
		}
		if(config.tabs) {
			window.jvbTabs.removeTab(config.element);
		}

		if (config.cache && this.changes.has(formId)) this.saveCache(formId);

		// Cleanup items
		for (let [id, input] of this.inputs.entries()) {
			if (input.form === formId) {
				this.inputs.delete(id);
			}
		}
		// Clean up dependencies for this form
		this.dependencies.forEach((dependency, fieldName) => {
			dependency = dependency.filter(item => item.form !== formId);

			// Remove the dependency entry entirely if no items left
			if (dependency.length === 0) {
				this.dependencies.delete(fieldName);
			}
		});

		if (Object.hasOwn(config, 'hasQuill') && this.quillInstances.has(formId)) {
			const instances = this.quillInstances.get(formId);
			instances.forEach(quillInstance => {
				// Disable the editor
				quillInstance.disable();

				// Remove all event listeners
				quillInstance.off('text-change');
				quillInstance.off('selection-change');

				// Get the container elements
				const container = quillInstance.container.parentElement;
				const toolbar = container?.querySelector('.ql-toolbar');

				// Remove toolbar
				if (toolbar) {
					toolbar.remove();
				}

				// Clear the editor content
				quillInstance.setText('');

				// Remove container
				if (container && container.classList.contains('editor-container')) {
					const textarea = container.nextElementSibling;
					if (textarea?.tagName === 'TEXTAREA') {
						textarea.style.display = '';
					}
					container.remove();
				}
			});

			this.quillInstances.delete(formId);
		}
		let checks = {
			repeater: this.repeaters,
			tagList: this.tagLists,
			charLimit: this.charLimits,
			quantity: this.quantityFields,
			location: this.locations
		};
		for (let [type, check] of Object.entries(checks)) {
			if (check.size === 0) continue;
			let hasAny = Array.from(check.values()).filter(item => item.form === formId);
			if (hasAny.length > 0) {
				hasAny.forEach(item => {
					switch (type) {
						case 'repeater':
							this.removeRepeaterListeners(item.element);
							break;
						case 'tagList':
							this.removeTagListListeners(item.element);
							break;
						case 'charLimit':
							this.removeCharacterLimitListeners(item.element);
							break;
						case 'quantity':
							this.removeQuantityListeners(item.element);
							break;
						case 'location':
							this.removeLocationListeners(item.element);
							break;
					}

					if (check.has(item.id)) {
						check.delete(item.id);
					}
				});
			}
		}


		this.removeFormListeners(config.element);
		this.forms.delete(formId);

		window.debouncer.cancel(`form_changes`);
	}
	defineSummaryTemplate() {
		this.summaryTemplate = true;
		let form = this;
		this.templates.define(
			'formSummary',
			{
				refs: {
					result: '.result',
					h3: 'h3',
					p: 'p',
				},
				setup({ el, refs, manyRefs, data }) {
					const skipFields = ['sendAll', ...data?.config?.options?.ignore??[]];

					for (let [key, value] of Object.entries(data.changes)) {
						if (skipFields.includes(key) || form.isEmptyValue(value)) continue;

						let input = Array.from(form.inputs.values())
							.find(temp => temp.field?.dataset.field === key);
						if (!input) continue;

						let entry = refs.result.cloneNode(true);
						let title = entry.querySelector('h3');
						let p = entry.querySelector('p');

						// Get field label - prioritize legend for fieldsets, then label
						const legend = input.field?.querySelector('legend');
						title.textContent = legend
							? legend.textContent.replace('*', '').trim()
							: input.ui.label?.textContent.replace('*', '').trim();


						const formattedValue = form.formatValueForSummary(value, input);

						if (formattedValue instanceof HTMLElement) {
							// If it's an HTML element (repeater, tag-list, etc.), replace <p>
							p.replaceWith(formattedValue);
						} else {
							// If it's a string, set text content
							p.textContent = formattedValue;
						}

						el.append(entry);
					}
					let uploads = data.config?.element?.querySelectorAll('[data-upload-field]');
					if (uploads) {
						uploads.forEach(upload => {
							let label = upload.querySelector('h2')?.textContent??'Upload:';
							let imgs = upload.querySelectorAll('.item-grid.preview img');
							let field = refs.result.cloneNode(true);
							if (imgs) {
								let entry = refs.result.cloneNode(true);
								let title = field.querySelector('h3');
								let p = field.querySelector('p');
								p?.remove();
								if (title) title.textContent = label;
								imgs.forEach(img => {
									img = img.cloneNode(true);
									entry.append(img);
								});
								el.append(entry);
							}
						});
					}

					refs.result?.remove();
				}
			}
		);
	}


	initializeFields(container, config = null) {
		const fieldHandlers = {
			'[data-editor]': () => this.checkForQuill(container,config),
			'[data-field-type="location"]': () => this.checkForLocationFields(container, config),
			'div.quantity': () => this.checkForQuantity(container),
			'.repeater': () => this.checkForRepeaters(container, config),
			'.field.tag-list': () => this.checkForTagLists(container),
			'[data-depends-on]': () => this.checkForConditionalFields(container),
			'[data-limit]': () => this.checkForCharacterLimits(container),
			'[data-uploader],[data-upload-field]': () => this.checkForImageUploads(container, config),
			'nav.tabs': () => this.checkForTabs(container, config),
			'[data-type="selector"]': () => this.checkForSelectors(container)
		};

		for (const [selector, handler] of Object.entries(fieldHandlers)) {
			if (container.querySelector(selector)) {
				handler();
			}
		}

		let inputs = Array.from(container.querySelectorAll(this.inputSelectors))
			.filter(input => !input.closest('.ql-clipboard'));
		inputs.map(input => {
			this.getItem(input, config?.id);
		});
	}
	checkForQuill(form, config) {
		if (!form.querySelector('[data-editor]')) return;
		if (config && !Object.hasOwn(config, 'hasQuill')){
			config.hasQuill = true;
			this.forms.set(config.id, config);
		}

		if (!this.quillInstances.has(config.id)) {
			this.quillInstances.set(config.id, new Set());
		}

		const instances = window.jvbQuill(form);
		instances.forEach(instance => {
			this.quillInstances.get(config.id).add(instance);
		});
	}
	checkForQuantity(form) {
		if (!form.querySelector(this.selectors.number.number)) return;
		form.querySelectorAll(this.selectors.number.number).forEach(num => {
			let config = {
				id: window.generateID('quant'),
				form: form.dataset.formId,
				ui: window.uiFromSelectors(this.selectors.number, num),
				element: num
			};
			num.dataset.numId = config.id;
			this.quantityFields.set(config.id, config);
			this.addQuantityListeners(num);
		});
	}
	addQuantityListeners(el) {
		el.addEventListener('click', this.quantityClick);
	}
	removeQuantityListeners(el) {
		el.removeEventListener('click', this.quantityClick);
	}
	handleQuantityClick(e) {
		let conf = this.quantityFields.get(e.target.closest('[data-num-id]')?.dataset.numId);
		if(!conf) return;
		let change = 0;
		if (conf.ui.increase.contains(e.target)) {
			change++;
		} else if (conf.ui.decrease.contains(e.target)) {
			change--;
		}
		if (change === 0) return;
		let field = this.getField(e.target);
		let step = conf.ui.input.step;
		step = Math.max(step, 1);
		if (e.ctrlKey && e.shiftKey) {
			step = step * 50;
		} else if (e.ctrlKey) {
			step = step *5;
		} else if (e.shiftKey) {
			step = step * 10;
		}
		let value = (conf.ui.input.value === '') ? 0 : parseFloat(conf.ui.input.value);
		conf.ui.input.value = (value + (step * change));

		value = parseFloat(conf.ui.input.value);

		if (conf.ui.input.min && value < conf.ui.input.min) {
			conf.ui.input.value = conf.ui.input.min;
			conf.ui.decrease.disabled = true;
		} else if (conf.ui.input.max && value > conf.ui.input.max) {
			conf.ui.input.value = conf.ui.input.max;
			conf.ui.increase.disabled = true;
		} else {
			if (conf.ui.decrease.disabled) conf.ui.decrease.disabled = false;
			if (conf.ui.increase.disabled) conf.ui.increase.disabled = false;
		}
	}
	checkForRepeaters(form) {
		if (!form.querySelector(this.selectors.repeater.repeater)) return;
		form.querySelectorAll(this.selectors.repeater.repeater).forEach(repeater => {
			let config = {
				id: repeater.querySelector('template').className??window.generateID('repeater'),
				ui: window.uiFromSelectors(this.selectors.repeater, repeater),
				form: form.dataset.formId,
				element: repeater,
				field: this.getField(repeater),
				sortable: false,
				rows: []
			};

			if (!config.ui.add) return;

			let template = repeater.querySelector('template');
			this.templates.define(
				template.className,
				{
					manyRefs: {
						inputs: this.inputSelectors,
					},
					setup({el, refs, manyRefs, data}) {
						let index = config.ui.items?.children?.length??0;
						el.dataset.index = index;

						manyRefs.inputs?.forEach(input => {
							window.prefixInput(input, `${data.repeater.dataset.field}:${index}:`, el, false, true);
						});
					}
				},
			);

			if (window.Sortable) {
				config.sortable = new Sortable(config.ui.items, {
					animation: 150,
					draggable: this.selectors.repeater.row,
					handle: this.selectors.repeater.handle,
					ghostClass: 'repeater-row-ghost',
					chosenClass: 'repeater-row-chosen',
					dragClass: 'dragging',
					onEnd: () => {
						this.reindexList(config.ui.items);
					}
				});
			}

			repeater.dataset.repeaterId = config.id;
			this.addRepeaterListeners(repeater);
			this.repeaters.set(config.id, config);
		});

	}
	addRepeaterListeners(el) {
		el.addEventListener('click', this.repeaterClick);
	}
	removeRepeaterListeners(el) {
		el.removeEventListener('click', this.repeaterClick);
	}
	handleRepeaterClick(e) {
		if (e.target.matches(this.selectors.repeater.add)) {
			this.addRepeaterRow(e.target.closest('[data-repeater-id]'));
		} else if (e.target.matches(this.selectors.repeater.remove)) {
			this.removeRepeaterRow(e.target.closest('[data-index]'));
		}
	}
	addRepeaterRow(repeater) {
		let data = {};
		data.repeater = repeater;
		let config = this.repeaters.get(repeater.dataset.repeaterId);

		let row = this.templates.create(repeater.dataset.repeaterId, data);
		config.rows.push({
			element: row,
			fields: Array.from(row.querySelectorAll('[data-field]'))
		});
		this.repeaters.set(config.id, config);
		config.ui.items.append(row);

		let form = this.getForm(repeater);
		this.initializeFields(repeater, form);
		this.reindexList(config.ui.items);
		this.a11y.announce('Row added');
	}
	removeRepeaterRow(row) {
		let repeater = row.closest('[data-repeater-id]');
		row.remove();
		let items = this.repeaters.get(repeater);
		if (items) {
			this.reindexList(items.ui.items);
		}

		this.a11y.announce('Row removed');
	}
	checkForTagLists(form) {
		form.querySelectorAll(this.selectors.tagList.tagList)?.forEach(field=> {
			let config = {
				id: field.querySelector('template').className??window.generateID('tagList'),
				ui: window.uiFromSelectors(this.selectors.tagList, field),
				element: field,
				form: form.dataset.formId,
				format: field.dataset.tagFormat??'first_field'
			};
			if (!config.ui.input || !config.ui.add || !config.ui.items) return;

			field.dataset.tagListId = config.id;
			config.fieldName = field.dataset.field;

			let template = field.querySelector('template');
			this.templates.define(
				template.className,
				{
					refs: {
						label: this.selectors.tagList.label,
					},
					manyRefs: {
						inputs: this.inputSelectors,
					},
					setup({el, refs, manyRefs, data}) {
						let index = config.ui.items?.children?.length??0;
						el.dataset.index = index;
						manyRefs.inputs?.forEach(input => {
							let wrapper = input.closest('.tag-item');
							window.prefixInput(input, `${data.fieldName}:${index}:`, wrapper, false, true)
						});

						if (refs.label) {
							refs.label.textContent = data.label;
						}
					}
				},
			);
			config.ui.inputs = Array.from(field.querySelectorAll(this.selectors.tagList.inputs));
			config.ui.value = Array.from(field.querySelectorAll(this.selectors.tagList.value));
			this.tagLists.set(config.id, config);
			this.addTagListListeners(field);
		});

	}
	addTagListListeners(el) {
		el.addEventListener('click', this.tagListClick);
		el.addEventListener('keypress', this.tagListInput);
	}
	removeTagListListeners(el) {
		el.removeEventListener('click', this.tagListClick);
		el.removeEventListener('keypress', this.tagListInput);
	}

	handleTagListClick(e) {
		if (window.targetCheck(e,this.selectors.tagList.add)) {
			this.addTagListItem(e.target.closest('[data-tag-list-id]'));
		} else if (window.targetCheck(e, this.selectors.tagList.remove)) {
			this.removeTagListItem(e.target.closest(this.selectors.tagList.item));
		}
	}
	addTagListItem(tagList) {
		let config = this.tagLists.get(tagList.dataset.tagListId);
		if (!config) return;

		let data = {};
		let hasValue = false;
		let isValid = true;

		// First pass: validate all inputs
		for (let input of config.ui.inputs) {
			const isRequired = input.required || input.dataset.required === 'true';
			const value = this.getFieldValue(input);

			if (value) hasValue = true;

			// Validate and check for errors
			const valid = this.validateField(input);

			if (isRequired && !value) {
				this.showError(input, 'This field is required');
				isValid = false;
			} else if (!valid) {
				isValid = false;
			}

			const fieldName = input.name.replace('new_','');
			data[fieldName] = value;
		}

		// Stop if validation failed
		if (!isValid) {
			this.a11y.announce('Please correct the errors before adding');
			const firstInvalid = config.ui.inputs.find(input => {
				const isRequired = input.required || input.dataset.required === 'true';
				return (isRequired && !this.getFieldValue(input));
			});
			if (firstInvalid) firstInvalid.focus();
			return;
		}

		if (!hasValue) {
			this.a11y.announce('Please fill in at least one field');
			config.ui.inputs[0].focus();
			return;
		}

		// Build label
		let label;
		switch (config.format) {
			case 'first_field':
				label = Object.values(data)[0];
				break;
			case 'all_fields':
				label = Object.values(data).join(', ');
				break;
			default:
				if (config.format.includes('{')) {
					label = config.format;
					for (const [key, value] of Object.entries(data)) {
						label = label.replace(`{${key}}`, value);
					}
				} else {
					label = data[config.format]??Object.values(data)[0];
				}
				break;
		}

		let newItem = this.templates.create(tagList.dataset.tagListId, {
			label: label,
			fieldName: config.fieldName
		});

		const index = config.ui.items?.children?.length ?? 0;
		newItem?.querySelectorAll('input[type=hidden]')?.forEach(input => {
			const fieldKey = input.dataset.field;
			input.name = `${config.fieldName}:${index}:${fieldKey}`;
			input.id = `${config.fieldName}:${index}:${fieldKey}`;
			input.value = data[fieldKey] || '';
		});

		config.ui.items.append(newItem);

		// Clear inputs AFTER success
		for (let input of config.ui.inputs) {
			if (['checkbox', 'radio'].includes(input.type)) {
				input.checked = false;
			} else {
				input.value = '';
			}
			this.clearValidation(input);
		}

		config.ui.inputs[0]?.focus();
		this.updateCollectionField(tagList);
		this.a11y.announce('Item added');
	}
	removeTagListItem(item) {
		let tagList = item.closest('[data-tag-list-id]');
		if (!tagList) return;
		item.remove();
		this.reindexList(tagList);
		this.updateCollectionField(tagList);
		this.a11y.announce('Item removed');
	}
	handleTagListInput(e) {
		let target = e.target;
		let field = target.closest('[data-tag-list-id]');
		if (!field) return;
		let config = this.tagLists.get(field.dataset.tagListId);
		if (!config) return;

		if (e.key === 'Enter') {
			if (target === config.ui.inputs[config.ui.inputs.length - 1]) {
				e.preventDefault();
				this.addTagListItem(target.closest('[data-tag-list-id]'));
			} else {
				e.preventDefault();
				let index = config.ui.inputs.indexOf(target);
				config.ui.inputs[index+1].focus();
			}
		}

	}

	checkForLocationFields(form, config) {
		form.querySelectorAll(this.selectors.location.location).forEach(field => {
			let ui = window.uiFromSelectors(this.selectors.location, field);
			if (!ui.search) return;

			ui.fields = {};
			field.querySelectorAll(this.selectors.location.fields).forEach(f => {
				ui.fields[f.dataset.fieldName] = f;
			});

			let id = window.generateID('location');
			field.dataset.locationId = id;

			this.locations.set(id, {
				id: id,
				form: config?.id,
				element: field,
				ui: ui,
				results: []
			});

			this.addLocationListeners(field);
		});
	}
		addLocationListeners(el) {
			el.addEventListener('input', this.locationInputHandler ??= this.handleLocationInput.bind(this));
			el.addEventListener('click', this.locationClickHandler ??= this.handleLocationClick.bind(this));
		}
		removeLocationListeners(el) {
			el.removeEventListener('input', this.locationInputHandler);
			el.removeEventListener('click', this.locationClickHandler);
		}
		handleLocationInput(e) {
			if (!e.target.matches(this.selectors.location.search)) return;
			let field = e.target.closest('[data-location-id]');
			if (!field) return;
			let conf = this.locations.get(field.dataset.locationId);
			if (!conf) return;

			let query = e.target.value.trim();
			if (query.length < 3) {
				conf.ui.results.replaceChildren();
				return;
			}

			window.debouncer.schedule(
				`location:${conf.id}`,
				() => this.searchLocation(conf, query),
				400
			);
		}
		async searchLocation(conf, query) {
			conf.ui.message.hidden = false;
			try {
				let response = await window.auth.fetch(
					`${jvbSettings.api}geocode?q=${encodeURIComponent(query)}`,
					{ method: 'GET' }
				);

				conf.results = response.ok ? await response.json() : [];
			} catch (err) {
				console.error('Geocode error:', err);
				conf.results = [];
			}
			conf.ui.message.hidden = true;
			this.renderLocationResults(conf);
		}
		renderLocationResults(conf) {
			conf.ui.results.replaceChildren();
			if (conf.results.length === 0) {
				conf.ui.results.innerHTML = '<li>No results found</li>';
				return;
			}
			conf.results.forEach((result, index) => {
				let li = document.createElement('li');
				li.className = 'autocomplete item btn';
				li.dataset.resultIndex = index;
				li.textContent = result.display_name;
				conf.ui.results.append(li);
			});
		}
		handleLocationClick(e) {
			let item = e.target.closest('[data-result-index]');
			if (!item) return;
			let field = e.target.closest('[data-location-id]');
			if (!field) return;
			let conf = this.locations.get(field.dataset.locationId);
			if (!conf) return;

			let result = conf.results[item.dataset.resultIndex];
			if (!result) return;

			this.populateLocationFromResult(conf, result);
			conf.ui.results.replaceChildren();
			conf.ui.search.value = result.display_name;

			let form = this.getForm(field);
			if (form) this.updateItem(field.dataset.field, this.getLocationValue(field), form);
		}
		populateLocationFromResult(conf, result) {
			const addr = result.address ?? {};
			const map = {
				address: addr.house_number || '',
				lat: result.lat,
				lng: result.lon,
				street: addr.road || '',
				city: addr.city || addr.town || addr.village || '',
				province: addr.state || '',
				postal_code: addr.postcode || '',
				country: addr.country || '',
			};
			for (let [field, input] of Object.entries(conf.ui.fields)) {
				input.value = map[field]??'';
			}

			if (conf.ui.preview) {
				conf.ui.preview.dataset.lat = map.lat;
				conf.ui.preview.dataset.lng = map.lng;
			}
		}

	checkForConditionalFields(form) {
		form.querySelectorAll(this.selectors.dependsOn).forEach( field => {
			const dependsOn = field.dataset.dependsOn;
			const requiredValue = field.dataset.dependsValue;
			const operator = field.dataset.dependsOperatior??'==';

			let formData = this.forms.get(form.dataset.formId);

			if (!this.dependencies.has(dependsOn)) {
				if (Object.hasOwn(formData.ui.fields, dependsOn)) {
					this.dependencies.set(dependsOn, []);
				}
			}
			let dependency = this.dependencies.get(dependsOn);
			if (dependency) {
				dependency.push({
					field:	field,
					form: form.dataset.formId,
					requiredValue: requiredValue,
					operator: operator
				});
				this.dependencies.set(dependsOn, dependency);
			}

			this.checkFieldDependency(field, dependsOn);
		});
	}
	checkFieldDependency(dependentField, controlFieldName) {
		const form = this.getForm(dependentField);
		const controlField = this.dependencies.get(controlFieldName);
		if (!controlField) return;


		const controlValue = this.getFieldValue(form.ui.fields[controlFieldName]);
		const shouldShow = this.evaluateCondition(
			controlValue,
			dependentField.dataset.dependsValue,
			dependentField.dataset.dependsOperatior
		);

		this.toggleFieldVisibility(dependentField, shouldShow);
	}
	evaluateCondition(value, requiredValue, operator) {
		const fieldStr = String(value || '');
		const requiredStr = String(requiredValue || '');

		switch (operator) {
			case '==': return fieldStr === requiredStr;
			case '!=': return fieldStr !== requiredStr;
			case '>': return parseFloat(fieldStr) > parseFloat(requiredStr);
			case '<': return parseFloat(fieldStr) < parseFloat(requiredStr);
			case '>=': return parseFloat(fieldStr) >= parseFloat(requiredStr);
			case '<=': return parseFloat(fieldStr) <= parseFloat(requiredStr);
			case 'contains': return fieldStr.includes(requiredStr);
			case 'empty': return fieldStr === '';
			case 'not_empty': return fieldStr !== '';
			default: return fieldStr === requiredStr;
		}
	}
	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;
			if (!show && control.hasAttribute('required')) {
				control.dataset.wasRequired = 'true';
				control.removeAttribute('required');
			} else if (show && control.dataset.wasRequired === 'true') {
				control.setAttribute('required', '');
				delete control.dataset.wasRequired;
			}
		});
	}
	checkForCharacterLimits(form) {
		if (!form.querySelector(this.selectors.limits.hasLimit)) return;
		this.countUpdaters = this.updateCount.bind(this);

		form.querySelectorAll(this.selectors.limits.hasLimit).forEach(field => {
			const input = this.getFieldInput(field);
			if (!input) return;

			let id = window.generateID('limit');
			input.dataset.charLimitId = id;
			input.dataset.limit = field.dataset.maxlength;

			let config = {
				element: input,
				form: form.dataset.formId,
				ui: window.uiFromSelectors(this.selectors.limits, field)
			};

			if (config.ui.limit) {
				config.ui.limit.textContent = field.dataset.maxlength;
			}

			this.charLimits.set(id, config);
			this.addCharacterLimitListeners(input);
		});
	}
	addCharacterLimitListeners(input) {
		input.addEventListener('input', this.countUpdaters, {passive: true});
	}
	removeCharacterLimitListeners(input) {
		input.removeEventListener('input', this.countUpdaters, {passive: true});
	}
	updateCount(e) {
		let target = e.target;
		let config = this.charLimits.get(target.dataset.charLimitId);
		if (!config) return;
		let length = target.value.length;
		let limit = target.dataset.limit;
		if (config.ui.current) {
			config.ui.current.textContent = length;
			config.ui.current.classList.toggle('exceeded', length >= limit);
		}
		if (length > limit) {
			target.value = target.value.slice(0, limit);
		}
	}
	checkForImageUploads(form, config) {
		this.hasUploads = true;
		window.jvbUploads.scanFields(form, config.options.autoUpload, config.options.imageMeta);
		let uploads = form.querySelectorAll('[data-field-type="upload"]');
		if (uploads) {
			config.ui.uploads = {};
			uploads.forEach(upload => {
				config.ui.uploads[upload.dataset.field] = upload;
			});
		}
	}

	checkForTabs(form, config) {
		if (window.jvbTabs && form.querySelector('nav.tabs')) {

			config.tabs = window.jvbTabs.registerTab(form, {
				preCheck: (activeSection, switchTo, tabConfig) => {
					return this.validateStep(activeSection, switchTo, tabConfig);
				}
			});
			config.ui.tabs = window.uiFromSelectors(this.selectors.tabs, form);
			config.ui.tabs.sections = Array.from(form.querySelectorAll(this.selectors.tabs.sections));
			config.ui.tabs.inputs = {};
			config.ui.tabs.sections.forEach(section => {
				config.ui.tabs.inputs[section.dataset.tab] = Array.from(section.querySelectorAll(this.inputSelectors));
			});
			config.ui.tabs.buttons = Array.from(form.querySelectorAll(this.selectors.tabs.buttons));

			config.unsubscribeTabs = window.jvbTabs.subscribe((event, data) => {
				if (event === 'tab-switched') {
					if (config.ui.tabs.progress) {
						const section = config.ui.tabs.sections.filter(section => section.dataset.tab === data.current)[0]??false;
						if (!section) return;
						const step = section.dataset.step - 1;
						const total = config.ui.tabs.sections.length;

						window.showProgress(
							config.ui.tabs.progress,
							step,
							total,
							`Step ${step + 1} of ${total}`
						);
					}
				}
			});
			this.forms.set(config.id, config);
		}
	}
	validateStep(currentSection, switchTo, config) {
		let doit = false;
		if (config.ui.sections) {
			config.ui.sections.forEach((section, index) => {
				if (section === currentSection) {
					let prev = index -1;
					if (prev >= 0) {
						let prevSection = config.ui.sections[prev];
						if (prevSection && prevSection.dataset.tab === switchTo) {
							doit = true;
						}
					}
				}
			});
		}
		if (doit) return true;

		const formId = currentSection.closest('[data-form-id]')?.dataset.formId;
		if (!formId) return true;

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

		const inputs = Array.from(this.inputs.values())
			.filter(item =>
				item &&
				item.form === formId &&
				item.section === currentSection.dataset.tab &&
				!item.element.closest('[hidden]')
			);

		return inputs.every(item => this.validateField(item.element) === true);
	}
	checkForSelectors(form) {
		if (window.jvbSelector) window.jvbSelector.scanExistingFields(form);
	}
	/**
	 * Mainly for repeaters or taglist
	 * @param {HTMLElement} container
	 */
	reindexList(container) {
		let fieldName = container.dataset.field || container.dataset.repeaterId || container.dataset.tagListId;
		if (!fieldName) {
			let parent = container.closest('[data-field]');
			fieldName = parent.dataset.field || parent.dataset.repeaterId || parent.dataset.tagListId;
		}

		Array.from(container.children).forEach((item, index) => {
			item.dataset.index = `${index}`;

			let rowNum = item.querySelector('.row-number');
			if (rowNum) {
				rowNum.textContent = `#${index + 1}`;
			}
			let rowTitle = item.querySelector('.row-title');
			let rowLabel = rowTitle ? rowTitle.dataset.label : null;
			// Find ALL inputs within this item, not just direct children
			const inputs = item.querySelectorAll('input, select, textarea');

			inputs.forEach(input => {
				// Skip inputs that shouldn't be re-indexed (like file inputs)
				if (input.type === 'file') return;

				// Get the field name from the input's data-field or name
				const inputField = Object.hasOwn(input.dataset, 'field') ? input.dataset.field : input.name.split(':').pop();
				if (inputField === rowLabel) {
					rowTitle.textContent = window.escapeHtml(input.value);
				}

				// Re-prefix with the new index, passing item as wrapper
				window.prefixInput(
					input,
					`${fieldName}:${index}:${inputField}`,
					item,
					true,
					true
				);
			});
		});


		this.updateCollectionField(container);
	}

	/**
	 * Update the entire repeater/tagList field data
	 * Call this whenever rows are added, removed, or reordered
	 */
	updateCollectionField(element) {
		const field = element.closest('[data-field]');
		if (!field) return;

		const fieldType = field.dataset.fieldType;
		if (!['repeater', 'tag-list'].includes(fieldType)) return;

		const form = this.getForm(element);
		if (!form) return;

		// Get all current data for the collection
		const value = this.getFieldValue(field);
		this.updateItem(field.dataset.field, value, form);
	}

	//TODO: Store these selectors in the repeater object maybe?
	maybeUpdateCollectionDisplay(field) {
		let parent = field.closest('[data-repeater-id],[data-tag-list-id]');
		if (!parent) {
			return;
		}
		if (parent.dataset.fieldType === 'repeater') {
			let row = field.closest('.repeater-row');
			if (!row) return;

			let title = row.querySelector('.row-title');
			if (!title || !title.dataset.label) return;
			console.log(field.dataset.field.split(':').pop());
			console.log(title.dataset.label);
			if (field.dataset.field.split(':').pop() === title.dataset.label) {
				title.textContent = this.getFieldValue(field.querySelector(this.inputSelectors));
			}
		}

	}
	/**********************************************************************
	 VALIDATION
	 **********************************************************************/
	//text, email, url, tel, date, time, datetime, number
	//select, checkbox, radio, true_false
	//textarea
	//repeater: subfields validation; no submission until all required are entered
	//tag fields: similar to repeater; each separate field is its own hidden field
	//upload: comma separated ints
	//selector: comma separated ints
	//location: hidden inputs for address, lat, lng, street, city, province, postal_code, country

	clearValidation(input) {
		let field = this.getField(input);
		if (!field) return;
		let item = this.getItem(input);
		if (!item) return;

		field.classList.remove('has-error', 'has-success');

		if (item.ui.success) item.ui.success.hidden = true;
		if (item.ui.error) item.ui.error.hidden = true;
		if (item.ui.message) {
			item.ui.message.hidden = true;
			item.ui.message.textContent = '';
		}
	}

	showError(input, message = 'Invalid field') {
		let field = this.getField(input);
		if (!field) return;
		let item = this.getItem(input);
		if (!item) return;

		field.classList.remove('has-success');
		field.classList.add('has-error');
		field.scrollIntoView({
			behavior: "smooth",
			block: "center",
			inline: "nearest"
		});
		field.querySelector(this.inputSelectors)?.focus();

		if (item.ui.message) {
			item.ui.message.hidden = false;
			item.ui.message.textContent = message;
		}
	}

	showSuccess(input, message = '') {
		let field = this.getField(input);
		if (!field) return;
		let item = this.getItem(input);
		if (!item) return;

		field.classList.remove('has-error');
		field.classList.add('has-success');

		if (item.ui.message) {
			item.ui.message.hidden = message=== '';
			item.ui.message.textContent = message;
		}
	}

	handleFormSuccess(form, data) {
		// Clear previous errors
		form.querySelectorAll('.error-message').forEach(el => el.remove());
		form.querySelectorAll('.field-error').forEach(el =>
			el.classList.remove('field-error')
		);

		// Add success class to form
		form.classList.add('form-success');

		// Show success message if provided
		if (data.message) {
			const success = document.createElement('div');
			success.className = 'form-success-message success-message';
			success.textContent = data.message;
			form.insertBefore(success, form.firstChild);

			const icon = window.getIcon?.('check-circle');
			if (icon) {
				icon.classList.add('success-icon');
				success.prepend(icon);
			}
		}

		// If there's a title/description (for registration success)
		if (data.title || data.description) {
			const successBox = document.createElement('div');
			successBox.className = 'success-box';

			if (data.title) {
				const title = document.createElement('h3');
				title.textContent = data.title;
				successBox.appendChild(title);
			}

			if (data.description) {
				const descriptions = Array.isArray(data.description)
					? data.description
					: [data.description];

				descriptions.forEach(desc => {
					const p = document.createElement('p');
					p.textContent = desc;
					successBox.appendChild(p);
				});
			}

			form.insertBefore(successBox, form.firstChild);
		}

		//  DELETE CACHED FORM DATA ON SUCCESS
		if (form.dataset.formId) {
			this.store.delete(form.dataset.formId).catch(err => {
				console.warn('Failed to clear form cache:', err);
			});

			// Clear form config dirty state
			const formConfig = this.forms.get(form.dataset.formId);
			if (formConfig) {
				formConfig.isDirty = false;
				formConfig.lastSaved = Date.now();
				formConfig.data = {}; // Clear cached data
			}
		}

		// Announce success for accessibility
		if (window.jvbA11y) {
			window.jvbA11y.announce(data.message || 'Form submitted successfully');
		}
	}

	handleFormError(form, data) {
		// Clear all previous errors
		form.querySelectorAll('.error-message').forEach(el => el.remove());
		form.querySelectorAll('.field-error, .has-error').forEach(el => {
			el.classList.remove('field-error', 'has-error');
		});

		// Clear validation states using existing method
		form.querySelectorAll('.field').forEach(fieldWrapper => {
			this.clearValidation(fieldWrapper);
		});

		// Handle field-specific errors
		if (data.field) {
			const fieldWrapper = form.querySelector(`[data-field="${data.field}"]`);
			if (fieldWrapper) {
				this.showError(fieldWrapper, data.message);

				fieldWrapper.scrollIntoView({ behavior: 'smooth', block: 'center' });

				const input = fieldWrapper.querySelector('input, textarea, select');
				if (input) {
					input.focus();
				}
			}
		} else {
			const error = document.createElement('div');
			error.className = 'form-error error-message';
			error.textContent = data.message;

			const icon = window.getIcon?.('close-circle');
			if (icon) {
				icon.classList.add('error-icon');
				error.prepend(icon);
			}

			form.insertBefore(error, form.firstChild);
			form.scrollIntoView({ behavior: 'smooth', block: 'start' });
		}

		if (window.jvbA11y) {
			const announcement = data.field
				? `Error in ${data.field}: ${data.message}`
				: `Form error: ${data.message}`;
			window.jvbA11y.announce(announcement);
		}

		form.dispatchEvent(new CustomEvent('jvb-form-error', {
			detail: data
		}));
	}

	/**********************************************************************
	STATUS
	 **********************************************************************/
	showFormStatus(formId, status, message ='') {
		let form = this.forms.get(formId);
		if (!form || !form.options.showStatus || !form.ui?.status?.status) return;
		if (form.status === status) return;


		form.status = status;
		form.ui.status.status.hidden = false;
		form.ui.status.status.classList.toggle('loading', ['uploading', 'saving'].includes(status));

		form.ui.status.message.textContent = message === '' ? this.getDefaultMessage(status) : message;

		form.ui.status.icon.className = 'icon icon-'+this.getDefaultIcon(status);
		setTimeout(()=> form.ui.status.status.hidden = true, (status === 'submitted') ? 3000 : 10000);
	}
	getDefaultMessage(status) {
		const messages = {
			'saving': 'Saving changes...',
			'autosaved': 'Changes saved locally. Submit form to send to server.',
			'uploading': 'Uploading your form to server',
			'submitted': 'Successfully sent to server',
			'pending': 'Unsaved changes',
			'restored': 'Welcome back! We\'ve restored your previous entry.',
			'error': 'Failed to save changes. Refresh and try again?',
			'offline': 'Changes will be saved when online'
		};
		return messages[status]??status;
	}
	getDefaultIcon(status) {
		const icons = {
			'autosaved': 'check-circle',
			'submitted': 'check-circle',
			'restored': 'history',
			'error': 'close-circle',
			'offline': 'cloud-slash',
			'pending': 'exclamation-mark'
		}
		return icons[status]??'';
	}


	/**********************************************************************
	 SUMMARY
	 **********************************************************************/
	showSummary(data) {
		let summary = this.templates.create('formSummary', data);
		data.config.element.after(summary);
		window.fade(data.config.element, false);
	}
	/**********************************************************************
	 UTILITY
	 **********************************************************************/
	getForm(element) {
		let form = element.closest('[data-form-id]');
		if (!form) return false;
		let id = form.dataset.formId;
		if (!id) return false;
		let config = this.forms.get(id);
		if (!config) return false;
		return config;
	}
	getField(element) {
		return element.closest('[data-field]');
	}
	getFieldType(element) {
		let field = this.getField(element);
		if (!field) return;
		return field.dataset.fieldType;
	}
	getFieldValue(element) {
		let type = this.getFieldType(element);
		let conf = this.getItem(element);

		let fieldName = conf.field?.dataset.field??false;

		if (!fieldName) return false;

		switch (type) {
			case 'repeater':
				return this.getRepeaterValue(element, conf);

			case 'tag-list':
				return this.getTagListValue(element, conf);

			case 'group':
				return null;
			//Do we actually need anything here? I think each subfield just

			case 'location':
				return this.getLocationValue(element);

			case 'selector':
			case 'upload':
			case 'gallery':
			case 'image':
				return this.getHiddenInputValue(element, conf, fieldName);

			case 'true-false':
			case 'toggle-text':
				return element.checked;
			case 'checkbox':
				// Handle multi-checkbox (name ends with [])
				if (element.name.endsWith('[]')) {
					return this.getCheckboxGroupValue(element, conf);
				}
				return element.checked ? element.value : '';
			default:
				return element.value;
		}
	}

	/**
	 * Get all checked values for a checkbox group
	 */
	getCheckboxGroupValue(element, conf) {
		if (!conf.checkboxGroup) {
			conf.checkboxGroup = conf.field?.querySelectorAll(`input[type="checkbox"][name="${element.name}"]`);
			this.saveItem(conf);
		}

		return Array.from(conf.checkboxGroup)
			.filter(cb => cb.checked)
			.map(cb => cb.value);
	}
	/**
	 * Get the actual user-facing value (for validation and submission)
	 */
	getFieldCheckedValue(element) {
		// Handle checkboxes and radios based on checked state
		if (element.type === 'checkbox') {
			const type = this.getFieldType(element);
			if (type === 'true-false') {
				return element.checked;
			}
			return element.checked ? element.value : '';
		}

		if (element.type === 'radio') {
			const radioGroup = document.querySelectorAll(`input[name="${element.name}"]`);
			const checked = Array.from(radioGroup).find(r => r.checked);
			return checked ? checked.value : '';
		}

		// For everything else, use existing logic
		return this.getFieldValue(element);
	}

	isEmptyValue(value) {
		if (value === null || value === undefined || value === '') return true;
		if (Array.isArray(value) && value.length === 0) return true;
		return typeof value === 'object' && Object.keys(value).length === 0;
	}
	getRepeaterValue(element, conf) {
		const items = element.querySelector('.repeater-items');
		if (!items) return [];
		let ignore = ['image_data','image-title','image-caption','image-description','image-alt-text']
		let value = [];
		Array.from(items.children).forEach(row => {
			let rowData = {};
			row.querySelectorAll('input[type="hidden"]').forEach(hidden => {
				rowData[hidden.name] = hidden.value;
			});

			row.querySelectorAll('[data-field]').forEach(field => {
				if (!ignore.includes(field.dataset.field)) {
					const input = this.getFieldInput(field);
					if (input) {
						rowData[field.dataset.field] = this.getFieldValue(input);
					}
				}
			});
			value.push(rowData);
		});
		return value;
	}
	getFieldInput(field) {
		// For quill fields, target the specific editor textarea
		const quillTextarea = field.querySelector('textarea[data-editor]');
		if (quillTextarea) return quillTextarea;

		return field.querySelector(this.inputSelectors);
	}
	getTagListValue(element, conf) {
		if (!conf.container) {
			conf.container = conf.field?.querySelector('.tag-items');
			this.saveItem(conf);
		}
		let value = [];
		Array.from(conf.container.children).forEach(item => {
			let inputs = item.querySelectorAll('input[type="hidden"]');
			let fieldData = {};
			inputs.forEach(input => {
				fieldData[input.dataset.field] = input.value;
			});
			value.push(fieldData);
		});
		return value;
	}
	getLocationValue(element) {
		let field = this.getField(element);
		let conf = this.locations.get(field.dataset.locationId);
		if (!conf) return;

		let value = {};
		for (let [field, input] of Object.entries(conf.ui.fields)) {
			value[field] = input.value;
		}
		return value;
	}
	getHiddenInputValue(element, conf, fieldName) {
		if (element.tagName !== 'INPUT' || element.type !== 'hidden'){
			element = element.querySelector('input[type="hidden"][name="'+fieldName+'"]');
			if (!element) {
				return null;
			}
		}

		if (conf.value === undefined || conf.value !== element.value) {
			conf.value = element.value;
			this.saveItem(conf);
		}
		return conf.value;
	}

	/**
	 * Format field value for display in summary
	 * @param {*} value - The field value
	 * @param {Object} input - The input config
	 * @returns {HTMLElement|string} - Formatted display element or string
	 */
	formatValueForSummary(value, input) {
		const fieldType = this.getFieldType(input.element);

		// Handle empty values
		if (this.isEmptyValue(value)) {
			return '';
		}

		// Handle different field types
		switch (fieldType) {
			case 'repeater':
				return this.formatRepeaterForSummary(value, input);

			case 'tag-list':
				return this.formatTagListForSummary(value, input);

			case 'location':
				return this.formatLocationForSummary(value);

			case 'true-false':
				return value ? 'Yes' : 'No';

			case 'checkbox':
				// Handle multi-checkbox arrays
				if (Array.isArray(value)) {
					return this.formatCheckboxGroupForSummary(value, input);
				}
				// Single checkbox - get display label
				return this.getDisplayLabel(input, value);

			case 'selector':
			case 'upload':
			case 'image':	//legacy, shouldn't be needed
			case 'gallery':	//legacy, shouldn't be needed
							   // These might need special handling depending on your needs
				return this.formatHiddenFieldForSummary(value, input, fieldType);

			default:
				// For radio/checkbox, get the display label
				if (typeof value === 'string') {
					return this.getDisplayLabel(input, value);
				}
				// For textarea or any multi-line text, convert line breaks
				if (typeof value === 'string' && value.includes('\n')) {
					return this.convertLineBreaks(value);
				}
				return value;
		}
	}

	/**
	 * Format checkbox group values with labels
	 */
	formatCheckboxGroupForSummary(values, input) {
		const labels = values.map(value => this.getDisplayLabel(input, value));
		return labels.join(', ');
	}

	/**
	 * Convert \n line breaks to HTML
	 */
	convertLineBreaks(text) {
		const container = document.createElement('span');
		container.innerHTML = text.split('\n').join('<br>');
		return container;
	}

	/**
	 * Format repeater data as a list
	 */
	formatRepeaterForSummary(rows, input) {
		const container = document.createElement('div');
		container.className = 'summary-repeater';

		rows.forEach((row, index) => {
			const rowDiv = document.createElement('div');
			rowDiv.className = 'summary-repeater-row';

			const rowTitle = document.createElement('strong');
			rowTitle.textContent = `Entry ${index + 1}:`;
			rowDiv.appendChild(rowTitle);

			const fieldsList = document.createElement('ul');
			fieldsList.className = 'summary-repeater-fields';

			for (const [fieldName, fieldValue] of Object.entries(row)) {
				if (this.isEmptyValue(fieldValue)) continue;

				const li = document.createElement('li');

				// Try to find the label for this subfield
				const subFieldElement = input.field?.querySelector(`[data-field="${fieldName}"]`);
				const label = subFieldElement?.closest('.field')?.querySelector('label')?.textContent.replace('*', '').trim() || fieldName;

				li.innerHTML = `<span class="field-label">${label}:</span> <span class="field-value">${fieldValue}</span>`;
				fieldsList.appendChild(li);
			}

			rowDiv.appendChild(fieldsList);
			container.appendChild(rowDiv);
		});

		return container;
	}

	/**
	 * Format tag-list data
	 */
	formatTagListForSummary(tags, input) {
		const container = document.createElement('div');
		container.className = 'summary-taglist';

		const tagsList = document.createElement('ul');
		tagsList.className = 'summary-tags';

		tags.forEach(tag => {
			const li = document.createElement('li');
			li.className = 'summary-tag';

			// Get the primary display value (first non-empty field)
			const displayValue = Object.values(tag).find(v => !this.isEmptyValue(v)) || '';

			// If there are multiple fields, show them all
			const fields = Object.entries(tag).filter(([k, v]) => !this.isEmptyValue(v));
			if (fields.length > 1) {
				li.textContent = fields.map(([k, v]) => v).join(', ');
			} else {
				li.textContent = displayValue;
			}

			tagsList.appendChild(li);
		});

		container.appendChild(tagsList);
		return container;
	}

	/**
	 * Format location data
	 */
	formatLocationForSummary(location) {
		const parts = [];

		if (location.street) parts.push(location.street);
		if (location.city) parts.push(location.city);
		if (location.province) parts.push(location.province);
		if (location.postal_code) parts.push(location.postal_code);
		if (location.country) parts.push(location.country);

		return parts.length > 0 ? parts.join(', ') : location.address || '';
	}

	/**
	 * Format hidden field types (upload, selector)
	 */
	formatHiddenFieldForSummary(value, input, fieldType) {
		if (['upload', 'gallery', 'image'].includes(fieldType)) {
			// Get upload preview images if available
			const uploadField = input.field?.querySelector('[data-upload-field]');
			if (uploadField) {
				const previews = uploadField.querySelectorAll('.item-grid.preview img');
				if (previews.length > 0) {
					const container = document.createElement('div');
					container.className = 'summary-uploads';
					previews.forEach(img => {
						const clone = img.cloneNode(true);
						clone.style.maxWidth = '100px';
						clone.style.maxHeight = '100px';
						container.appendChild(clone);
					});
					return container;
				}
			}
			return `${value.split(',').length} file(s) uploaded`;
		}

		if (fieldType === 'selector') {
			// Could enhance this to show selected item names if available
			return value;
		}

		return value;
	}

	/**
	 * Get the display label for an input value (especially for radio/checkbox)
	 * @param {Object} input - The input config from this.inputs
	 * @param {*} value - The field value
	 * @returns {string} - The display label or original value
	 */
	getDisplayLabel(input, value) {
		if (!input.element) return value;

		const inputType = input.element.type;

		// Handle radio buttons
		if (inputType === 'radio') {
			const radioGroup = input.field.querySelectorAll(`input[type="radio"][name="${input.element.name}"]`);
			const selectedRadio = Array.from(radioGroup).find(radio => radio.value === value);
			if (selectedRadio) {
				const label = selectedRadio.closest('label') ||
					input.field.querySelector(`label[for="${selectedRadio.id}"]`);
				if (label) {
					return label.textContent.replace('*', '').trim();
				}
			}
		}

		// Handle checkboxes (including groups)
		if (inputType === 'checkbox' && this.getFieldType(input.element) !== 'true-false') {
			// Find checkbox with this value in the field
			const checkbox = input.field.querySelector(`input[type="checkbox"][value="${value}"]`);
			if (checkbox) {
				const label = checkbox.closest('label') ||
					input.field.querySelector(`label[for="${checkbox.id}"]`);
				if (label) {
					// Get just the span content to avoid getting nested elements
					const span = label.querySelector('span');
					return span ? span.textContent.trim() : label.textContent.replace('*', '').trim();
				}
			}
		}

		return value;
	}
	getItem(element, formId = null) {
		const hasID = Object.hasOwn(element.dataset, 'ref');
		let id = (hasID) ? element.dataset.ref : window.generateID('input');
		if (!hasID) element.dataset.ref = id;

		//check if we have it already
		if (!this.inputs.has(id)) {
			if (!formId) {
				formId = element.closest('[data-form-id]')?.dataset.formId??false;
			}
			let field = this.getField(element);

			this.inputs.set(id, {
				id: id,
				element: element,
				form: formId,
				field: field,
				section: element.closest('[data-tab]')?.dataset.tab ?? false,
				ui: window.uiFromSelectors(this.selectors.fields, field)
			});
		}

		return this.inputs.get(id);
	}
	saveItem(config) {
		this.inputs.set(config.id, config);
	}
	/**********************************************************************
	 Subscription
	 **********************************************************************/
	subscribe(callback) {
		this.subscribers.add(callback);
		return () => this.subscribers.delete(callback);
	}

	notify(event, data) {
		this.subscribers.forEach(cb => {
			try {
				cb(event, data);
			} catch (e) {
				console.error('HandleSelection subscriber error:', e);
			}
		});
	}
	/**********************************************************************
	 Cleanup
	 **********************************************************************/
	destroy() {
		if (this.forms.size > 0) {
			Array.from(this.forms.values()).forEach(form => {
				this.removeFormListeners(form);
			});
			this.forms.clear();
		}
		if (this.repeaters.size > 0) {
			Array.from(this.repeaters.values()).forEach(repeater => {
				this.removeRepeaterListeners(repeater.element);
				repeater.sortable?.destroy();
			});
			this.repeaters.clear();
		}
		if (this.quantityFields.size > 0) {
			Array.from(this.quantityFields.values()).forEach(num => {
				this.removeQuantityListeners(num.element);
			});
			this.quantityFields.clear();
		}
		if (this.tagLists.size > 0) {
			Array.from(this.tagLists.values()).forEach(tagList => {
				this.removeTagListListeners(tagList.element);
			});
			this.tagLists.clear();
		}
		if (this.charLimits.size > 0) {
			Array.from(this.charLimits.values()).forEach(charLimit => {
				charLimit.element.removeEventListener('input', this.countUpdaters);
			});
		}
		this.inputs.clear();
		this.forms.clear();
		this.charLimits.clear();

	}
}


document.addEventListener('DOMContentLoaded', async function () {
	window.auth.subscribe(event => {
		if (event === 'auth-loaded') {
			window.jvbForm = new FormController();
			document.dispatchEvent(new CustomEvent('jvbFormLoaded'));
			document.querySelectorAll('form[data-auto]').forEach(form => {
				window.jvbForm.registerForm(form, {});
			});
		}
	});
});