/**
 * Enhanced FormController - Manages forms with special fields, caching, and queue integration
 * Works with DataStore for CRUD operations and standalone for front-end forms
 */
class FormController {
	constructor(store = null) {
		this.store = store; // Optional - for CRUD operations
		if (!store) {
			this.store = new window.jvbStore({name:'forms', TTL: 604800});
		}
		this.debouncer = window.debouncer;

		this.ignore = [];

		this.populateForm = window.jvbPopulate;

		this.subscribers = new Set();
		this.forms = new Map();
		this.specialFields = new Map();
		this.dependencies = new Map();

		// Auto-save configuration
		this.autoSaveDefaults = {
			delay: 3000, // 3 seconds
			typingDelay: 1500, // 1.5 seconds for text fields
			enabled: true
		};

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

		// Bind handlers
		this.clickHandler = this.handleClick.bind(this);
		this.changeHandler = this.handleChange.bind(this);
		this.submitHandler = this.handleSubmit.bind(this);
		this.inputHandler = this.handleInput.bind(this);
		this.focusHandler = this.handleFocus.bind(this);
		this.blurHandler = this.handleBlur.bind(this);

		this.init();
	}

	async init() {
		// Check for pending operations on page load
		await this.checkPendingOperations();

		// Set up global form handlers for standalone forms
		this.initListeners();
	}

	/**
	 * Check for pending operations from previous session
	 */
	async checkPendingOperations() {
		if (!this.store) return;
		try {
			let pending = this.store.getAllForms();

		} catch (error) {
			console.error('Failed to load pending forms:', error);
		}
	}

	/**
	 * Show notification for pending changes
	 */
	showPendingNotification(pendingData) {
		const formElement = document.querySelector(`[data-form-id="${pendingData.formId}"]`);
		if (!formElement) return;

		const notification = document.createElement('div');
		notification.className = 'pending-changes-notification';
		notification.innerHTML = `
			<p>We noticed unsaved changes from last time. Would you like to restore them?</p>
			<button class="restore-changes" data-form-id="${pendingData.formId}">Restore</button>
			<button class="discard-changes" data-form-id="${pendingData.formId}">Discard</button>
		`;

		formElement.insertBefore(notification, formElement.firstChild);

		// Add handlers
		notification.querySelector('.restore-changes').addEventListener('click', () => {
			this.restorePendingForm(pendingData);
			notification.remove();
		});

		notification.querySelector('.discard-changes').addEventListener('click', () => {
			this.discardPendingForm(pendingData.formId);
			notification.remove();
		});
	}

	/**
	 * Restore pending form data
	 */
	restorePendingForm(pendingData) {
		const form = document.querySelector(`[data-form-id="${pendingData.formId}"]`);
		if (!form) return;

		// Populate form with cached data
		new this.populateForm(form, pendingData.formData);

		// Mark as restored
		pendingData.status = 'restored';
		this.pendingForms.set(pendingData.formId, pendingData);

		if (window.jvbA11y) {
			window.jvbA11y.announce('Previous changes restored');
		}
	}

	/**
	 * Discard pending form data
	 */
	async discardPendingForm(formId) {
		this.store.clearForm(formId);

		if (window.jvbA11y) {
			window.jvbA11y.announce('Previous changes discarded');
		}
	}

	/**
	 * Setup global handlers for standalone forms
	 */
	initListeners() {
		// Only add if not already added
		if (!this.globalHandlersAdded) {
			document.addEventListener('submit', this.submitHandler);
			document.addEventListener('click', this.clickHandler);
			document.addEventListener('change', this.changeHandler);
			document.addEventListener('focus', this.focusHandler, true);
			document.addEventListener('blur', this.blurHandler, true);
			this.globalHandlersAdded = true;
		}
	}

	/**
	 * Register a standalone form (for front-end forms)
	 */
	registerForm(formElement, options = {}) {
		const formId = formElement.dataset.formId || `form_${Date.now()}`;
		formElement.dataset.formId = formId;

		const formConfig = {
			element: formElement,
			id: formId,
			options: {
				autoSave: true,
				saveDelay: this.autoSaveDefaults.delay,
				endpoint: formElement.dataset.save,
				cache: true,
				...options
			},
			dependencies: new Map(),
			data: this.collectFormData(formElement),
			isDirty: false
		};

		// Initialize special fields
		this.initializeFormFields(formElement, formConfig);

		// Store form config
		this.forms.set(formId, formConfig);

		// Check for pending data
		if (this.store && formConfig.options.cache) {
			const cached = this.store.getForm(formId);
			if (cached && cached.formData) {
				this.showPendingNotification(cached);
			}
		}

		return formConfig;
	}

	/**
	 * Initialize all special fields in a form
	 */
	initializeFormFields(form, formConfig = null) {
		// Initialize Quill editors
		this.initQuillEditors(form);

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

		// Initialize conditional fields
		if (formConfig) {
			this.initConditionalFields(form, formConfig);
		}

		// Initialize character limits
		this.initCharacterLimits(form);

		// Initialize image upload fields
		this.initImageUploadFields(form);

		// Initialize tabs if present
		if (window.jvbTabs && form.querySelector('nav.tabs')) {
			new window.jvbTabs(form);
		}

		// Scan for existing selector fields
		if (window.jvbSelector) {
			window.jvbSelector.scanExistingFields();
		}
	}

	/**
	 * Initialize Quill editors
	 */
	initQuillEditors(form) {
		window.jvbQuill(form);
	}

	/**
	 * Initialize repeater fields
	 */
	initRepeaterFields(form, formConfig) {
		form.querySelectorAll('.repeater').forEach(repeater => {
			const addButton = repeater.querySelector('.add-repeater-row');
			const container = repeater.querySelector('.repeater-items');
			const template = repeater.querySelector('template');

			if (!addButton || !template || !container) return;

			// Initialize Sortable for drag-and-drop
			if (window.Sortable) {
				new Sortable(container, {
					handle: '.repeater-row-header',
					animation: 150,
					onEnd: () => {
						this.updateRepeaterOrder(repeater, formConfig);
					}
				});
			}

			// Add row handler
			addButton.addEventListener('click', () => {
				this.addRepeaterRow(repeater, formConfig);
			});

			// Remove row handlers
			container.addEventListener('click', (e) => {
				if (e.target.closest('.remove-row')) {
					this.removeRepeaterRow(e.target.closest('.repeater-row'), formConfig);
				}
			});
		});
	}

	/**
	 * Add repeater row
	 */
	addRepeaterRow(repeater, formConfig) {
		const container = repeater.querySelector('.repeater-items');
		const template = repeater.querySelector('template');
		const index = container.children.length;
		const fieldName = repeater.dataset.field;

		// Clone template
		const row = template.content.cloneNode(true).firstElementChild;
		row.dataset.index = index;

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

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

		container.appendChild(row);

		// Schedule save if auto-save enabled
		if (formConfig && formConfig.options.autoSave) {
			this.scheduleSave(formConfig, {
				type: 'repeater',
				action: 'add',
				fieldName: fieldName,
				delay: this.repeaterDelays.add
			});
		}

		if (window.jvbA11y) {
			window.jvbA11y.announce('Row added');
		}
	}

	/**
	 * Remove repeater row
	 */
	removeRepeaterRow(row, formConfig) {
		const repeater = row.closest('.repeater');
		const fieldName = repeater.dataset.field;

		row.remove();

		// Reindex remaining rows
		this.updateRepeaterOrder(repeater, formConfig);

		// Schedule save
		if (formConfig && formConfig.options.autoSave) {
			this.scheduleSave(formConfig, {
				type: 'repeater',
				action: 'remove',
				fieldName: fieldName,
				delay: this.repeaterDelays.remove
			});
		}

		if (window.jvbA11y) {
			window.jvbA11y.announce('Row removed');
		}
	}

	/**
	 * Update repeater order after sorting
	 */
	updateRepeaterOrder(repeater, formConfig) {
		const container = repeater.querySelector('.repeater-items');
		const fieldName = repeater.dataset.field;

		// Reindex all rows
		Array.from(container.children).forEach((row, index) => {
			row.dataset.index = index;

			// Update field names
			row.querySelectorAll('input, select, textarea').forEach(field => {
				const parts = field.name.split(':');
				if (parts.length === 3) {
					const originalName = parts[2];
					field.name = `${fieldName}:${index}:${originalName}`;
					field.id = `${fieldName}-${index}-${originalName}`;

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

		// Schedule save
		if (formConfig && formConfig.options.autoSave) {
			this.scheduleSave(formConfig, {
				type: 'repeater',
				action: 'reorder',
				fieldName: fieldName,
				delay: this.repeaterDelays.reorder
			});
		}
	}

	/**
	 * Initialize conditional fields
	 */
	initConditionalFields(form, formConfig) {
		form.querySelectorAll('[data-depends-on]').forEach(field => {
			const dependsOn = field.dataset.dependsOn;
			const requiredValue = field.dataset.dependsValue;
			const operator = field.dataset.dependsOperator || '==';

			// Store dependency
			if (!formConfig.dependencies.has(dependsOn)) {
				formConfig.dependencies.set(dependsOn, []);
			}
			formConfig.dependencies.get(dependsOn).push({
				field: field,
				requiredValue: requiredValue,
				operator: operator
			});

			// Check initial state
			this.checkFieldDependency(form, field, dependsOn, requiredValue, operator);
		});
	}

	/**
	 * Check field dependency
	 */
	checkFieldDependency(form, field, dependsOn, requiredValue, operator) {
		const triggerField = form.querySelector(`[name="${dependsOn}"]`);
		if (!triggerField) return;

		const value = this.getFieldValue(triggerField);
		const shouldShow = this.evaluateCondition(value, requiredValue, operator);

		this.toggleFieldVisibility(field, shouldShow);
	}

	/**
	 * Evaluate conditional operator
	 */
	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;
		}
	}

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

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

	/**
	 * Initialize character limits
	 */
	initCharacterLimits(form) {
		form.querySelectorAll('[data-limit]').forEach(input => {
			const limit = parseInt(input.dataset.limit, 10);
			const field = input.closest('.field');

			// Create counter if it doesn't exist
			let counter = field?.querySelector('.char-count');
			if (!counter && field) {
				counter = document.createElement('div');
				counter.className = 'char-count';
				counter.innerHTML = `<span class="current">0</span> / <span class="limit">${limit}</span>`;
				field.appendChild(counter);
			}

			const updateCount = () => {
				const length = input.value.length;
				if (counter) {
					counter.querySelector('.current').textContent = length;
					counter.classList.toggle('exceeded', length > limit);
				}

				// Truncate if exceeds limit
				if (length > limit) {
					input.value = input.value.substring(0, limit);
					if (counter) {
						counter.querySelector('.current').textContent = limit;
					}
				}
			};

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

	/**
	 * Initialize image upload fields
	 */
	initImageUploadFields() {
		window.jvbUploads.scanFields();
	}

	/* ========== Event Handlers ========== */

	handleSubmit(event) {
		if (this.subscribers.size > 0 ){
			const form = event.target;
			if (!form.dataset.formId) return;

			event.preventDefault();

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

			const formData = this.collectFormData(form);

			event.preventDefault();
			this.notify('form-submit', {
				formId: formConfig.id,
				data: formData,
				config: formConfig
			});
		}
	}

	handleClick(e) {
		if (window.targetCheck(e, 'div.quantity')) {
			let container = window.targetCheck(e, 'div.quantity');
			this.handleNumberClick(e, container.querySelector('input'));
		}
	}

	handleNumberClick(e, input) {
		let change = 0;

		if (e.target.closest('.increase')) {
			change += 1;
		} else if (e.target.closest('.decrease')) {
			change -=1;
		}
		if (change !== 0) {
			let step = parseFloat(input.step);
			//Allow for cents, but default to increasing by 1
			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 = (input.value === '') ? 0 : parseFloat(input.value);

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

	handleNumberLimits(input) {
		let [
			min,
			max,
			increase,
			decrease
		] = [
			input.min,
			input.max,
			input.closest('.quantity')?.querySelector('.increase'),
			input.closest('.quantity')?.querySelector('.decrease')
		];
		let value = parseFloat(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;
		}
	}

	handleChange(event) {
		if (this.subscribers.size > 0) {
			const target = event.target;
			const form = target.form || target.closest('form');

			if (!form) return;

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

			// Check conditional fields
			const dependencies = formConfig.dependencies.get(target.name);
			if (dependencies) {
				dependencies.forEach(dep => {
					this.checkFieldDependency(form, dep.field, target.name, dep.requiredValue, dep.operator);
				});
			}

			// Schedule auto-save if enabled
			if (formConfig.options.autoSave && !form.dataset.noautosave) {
				const delay = this.getDelayForField(target);
				this.scheduleSave(formConfig, delay);
			}
		}
	}

	handleFocus(event) {
		const target = event.target;
		if (target.matches('input, textarea, select')) {
			// Track focus for better UX
			this.currentFocus = target;
		}
	}

	handleBlur(event) {
		const target = event.target;
		const form = target.form || target.closest('form');

		if (!form) return;

		const formConfig = this.forms?.get(form.dataset.formId);
		if (formConfig && formConfig.options.autoSave && !form.dataset.noautosave) {
			// Shorter delay on blur
			this.scheduleSave(formConfig, {
				type: 'blur',
				fieldName: target.name,
				delay: 1500
			});
		}
	}

	/* ========== Auto-save functionality ========== */
	/**
	 * Get appropriate delay based on field type and context
	 */
	getDelayForField(field) {
		console.log('Get Delay for Field', field);
		// Text fields get longer delay for typing
		if (field.type === 'text' || field.type === 'textarea') {
			return this.autoSaveDefaults.typingDelay;
		}

		// Checkboxes, radios, selects get shorter delay
		if (['checkbox', 'radio', 'select-one', 'select-multiple'].includes(field.type)) {
			return 1000;
		}

		// Default delay
		return this.autoSaveDefaults.delay;
	}
	scheduleSave(formConfig, delay = this.autoSaveDefaults.delay) {
		document.addEventListener('input', this.handleInput, {passive: true});
		const saveKey = `autosave_${formConfig.id}`;

		this.debouncer.schedule(
			saveKey,
			() => this.autosave(formConfig),
			delay
		);
	}

	//Extend delay if user is currently typing
	handleInput(e) {
		let form = e.target.closest('form[data-id]');
		if (!form) {
			return;
		}
		this.scheduleSave(this.forms.get(form.dataset.id));
	}

	async autosave(formConfig) {
		const formData = this.collectFormData(formConfig.element);
		this.cacheFormData(formConfig, formData);

		// Get only changed fields
		const changes = this.getChangedFields(formConfig.data, formData);
		if (Object.keys(changes).length === 0) return;

		// Update stored data
		formConfig.data = formData;
		this.forms.set(formConfig.id, formConfig);
		document.removeEventListener('input', this.handleInput);

		for (let [key,  value] of Object.entries(formData)) {
			//We want all data for complex fields, like group, repeater, or location
			if (typeof value === 'object') {
				changes[key] = value;
			}
		}
		// Notify instead of callback
		this.notify('form-autosave', {
			formId: formConfig.id,
			changes: changes,
			fullData: formData,
			config: formConfig
		});
	}

	cacheFormData(formConfig, formData) {
		try {
			this.store.storeForm(formConfig.id, {
				formId: formConfig.id,
				formData: formData,
				timestamp: Date.now(),
				status: 'pending',
				operationId: null
			});
		} catch (error) {
			console.error('Failed to cache form data:', error);
		}
	}

	/**
	 * Check if form has unsaved changes
	 */
	hasUnsavedChanges(formId) {
		const formConfig = this.forms.get(formId);
		if (!formConfig) return false;

		// Check if there are pending operations
		if (formConfig.operations?.size > 0) return true;

		// Check if current data differs from snapshot
		const currentData = this.collectFormData(formConfig.element);
		const changes = this.getChangedFields(formConfig.lastSnapshot, currentData);

		return Object.keys(changes).length > 0;
	}

	showFormStatus(form, status) {
		// Remove existing status
		const existingStatus = form.querySelector('.form-status');
		if (existingStatus) {
			existingStatus.remove();
		}

		// Add new status
		const statusElement = document.createElement('div');
		statusElement.className = `form-status status-${status}`;

		const messages = {
			'saving': 'Saving changes...',
			'saved': 'Changes saved',
			'error': 'Failed to save changes',
			'offline': 'Changes will be saved when online'
		};

		statusElement.textContent = messages[status] || status;
		form.insertBefore(statusElement, form.firstChild);

		// Auto-hide success messages
		if (status === 'saved') {
			setTimeout(() => statusElement.remove(), 3000);
		}
	}

	cleanupSpecialFields() {
		this.specialFields.forEach(field => {
			if (field.type === 'quill' && field.instance) {
				// Remove Quill toolbar
				const toolbar = field.instance.container.previousSibling;
				if (toolbar?.classList.contains('ql-toolbar')) {
					toolbar.remove();
				}
			}
		});

		this.uploader?.destroy();

		this.specialFields.clear();
	}

	/* ========== Form Data Methods ========== */

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

	getFieldValue(field) {
		if (!field) return '';

		if (field.type === 'checkbox') {
			return field.checked ? field.value || '1' : '';
		} else if (field.type === 'radio') {
			const checked = field.form.querySelector(`[name="${field.name}"]:checked`);
			return checked ? checked.value : '';
		} else if (field.type === 'select-multiple') {
			return Array.from(field.selectedOptions).map(o => o.value);
		} else {
			return field.value;
		}
	}

	getChangedFields(original, current) {
		return window.getDifferences?.map(original, current) || {};
	}

	/**
	 * Event system
	 */
	subscribe(callback) {
		this.subscribers.add(callback);
		return () => this.subscribers.delete(callback);
	}

	notify(event, data) {
		this.subscribers.forEach(cb => cb(event, data));
	}

	/**
	 * Cleanup when form is closed/destroyed
	 */
	cleanupForm(formId) {
		const formConfig = this.forms.get(formId);
		if (!formConfig) return;
		console.log('Cleaning up form', formConfig);

		// Check for unsaved changes
		if (this.hasUnsavedChanges(formId)) {
			this.autosave(formConfig);
		}

		// Clean up special fields
		this.cleanupSpecialFields();

		// Remove form config
		this.forms.delete(formId);
	}

	/**
	 * Cleanup
	 */
	destroy() {
		// Remove global handlers
		if (this.globalHandlersAdded) {
			document.removeEventListener('submit', this.submitHandler);
			document.removeEventListener('change', this.changeHandler);
			document.removeEventListener('focus', this.focusHandler, true);
			document.removeEventListener('blur', this.blurHandler, true);
		}

		// Clear maps
		this.specialFields.clear();
		this.forms.clear();
		this.activeRepeaters.clear();

		if (this.forms) {
			this.forms.clear();
		}
	}
}

document.addEventListener('DOMContentLoaded', () => {
	window.jvbForm = FormController;
});