/**
	 * Centralized Upload Manager
	 * Handles all file inputs on the page from a single location
	 */
	class UploadManager {
		constructor(store = null) {
			this.store = store || new window.jvbStore({
				name: 'uploads',
				cacheTTL: 604800, // 7 days
				useIndexedDB: true
			});

			this.queue = window.jvbQueue;
			this.a11y = window.jvbA11y;
			this.error = window.jvbError;
			this.notifications = window.jvbNotifications;

			// Central state management
			this.fields = new Map();           // fieldId -> field configuration
			this.uploads = new Map();          // uploadId -> upload state
			this.subscribers = new Set();

			this.performanceMonitor = new UploadPerformanceMonitor();
			this.compressionWorker = null;


			// Global settings
			this.settings = {
				allowedTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/avif'],
				maxFileSize: 5242880,          // 5MB

				// Field type configurations
				fieldTypes: {
					'single': { maxFiles: 1, allowMultiple: false },
					'gallery': { maxFiles: 20, allowMultiple: true },
					'groupable': {maxFiles: 20, allowMultiple: true }
				},
				smartCompression: true,
			};

			this.statusMapping = {
				'queued': { status: 'queued', message: 'Waiting in queue...' },
				'pending': { status: 'pending', message: 'Waiting for server...' },
				'processing': { status: 'processing', message: 'Processing on server...' },
				'uploading': { status: 'uploading', message: 'Uploading files...' },
				'completed': { status: 'completed', message: 'Upload complete!' },
				'failed': { status: 'failed', message: 'Upload failed (will retry)' },
				'failed_permanent': { status: 'failed_permanent', message: 'Upload failed permanently' }
			};

			//Groups!
			this.groups = new Map();           // groupId -> Set of uploadIds
			this.groupMetadata = new Map();    // groupId -> group metadata (name, etc.)
			this.initializeDragState();

			this.init();
		}

		/**
		 * Initialize the upload manager
		 */
		async init() {
			// Check for unfinished uploads from previous session
			await this.checkUnfinishedUploads();

			// Set up event listeners
			this.initListeners();

			// Scan for existing fields
			this.scanFields();
		}

		/**
		 * Check for unfinished uploads using DataStore
		 */
		async checkUnfinishedUploads() {
			try {
				console.log('Checking for unfinished uploads...');

				// Get all forms that might contain upload data
				const allForms = this.store.getAllForms();
				const unfinishedUploads = new Map();

				// Look for upload-related form data
				for (const [formId, formData] of allForms) {
					if (formData.status === 'pending' && formData.uploadData) {
						const fieldId = formData.uploadData.fieldId;
						if (!unfinishedUploads.has(fieldId)) {
							unfinishedUploads.set(fieldId, []);
						}
						unfinishedUploads.get(fieldId).push(formData);
					}
				}

				// Show restore notifications for fields with unfinished uploads
				for (const [fieldId, uploads] of unfinishedUploads) {
					await this.showRestoreNotification(fieldId, uploads);
				}

			} catch (error) {
				console.error('Failed to check unfinished uploads:', error);
			}
		}

		/**
		 * Store upload progress and data using DataStore
		 */
		cacheUploadProgress(fieldId, uploadId, data) {
			const cacheKey = `upload_${fieldId}_${uploadId}`;

			const uploadData = {
				formId: cacheKey,
				fieldId,
				uploadId,
				uploadData: {
					...data,
					fieldId,
					timestamp: Date.now()
				},
				status: 'pending',
				operationId: data.operationId || null
			};

			// Store using DataStore's form methods
			this.store.storeForm(cacheKey, uploadData);
		}

		/**
		 * Get cached upload data
		 */
		getCachedUpload(fieldId, uploadId) {
			const cacheKey = `upload_${fieldId}_${uploadId}`;
			return this.store.getForm(cacheKey);
		}

		/**
		 * Clear upload cache for a specific field
		 */
		async clearFieldCache(fieldId) {
			try {
				console.log(`Clearing cache for field: ${fieldId}`);

				// Get all forms and filter for this field's uploads
				const allForms = this.store.getAllForms();
				const keysToDelete = [];

				for (const [formId, formData] of allForms) {
					if (formData.uploadData && formData.uploadData.fieldId === fieldId) {
						keysToDelete.push(formId);
					}
				}

				// Clear all related form data
				keysToDelete.forEach(key => {
					this.store.clearForm(key);
				});

				// Clear any cached field data
				this.clearFieldMemoryCache(fieldId);

				console.log(`Cleared cache for field ${fieldId}: ${keysToDelete.length} items removed`);

			} catch (error) {
				console.error(`Failed to clear field cache for ${fieldId}:`, error);
				throw error;
			}
		}

		/**
		 * Clear memory cache data related to a field
		 */
		clearFieldMemoryCache(fieldId) {
			// Clear uploads related to this field
			const uploadsToRemove = [];

			for (const [uploadId, upload] of this.uploads) {
				if (upload.fieldId === fieldId) {
					// Clean up blob URLs
					if (upload.preview && upload.preview.startsWith('blob:')) {
						URL.revokeObjectURL(upload.preview);
					}
					uploadsToRemove.push(uploadId);
				}
			}

			// Remove uploads from memory
			uploadsToRemove.forEach(uploadId => {
				this.uploads.delete(uploadId);
			});

			console.log(`Cleared ${uploadsToRemove.length} uploads from memory for field: ${fieldId}`);
		}

		/**
		 * Show restore notification for unfinished uploads
		 */
		async showRestoreNotification(fieldId, cachedUploads) {
			const field = this.fields.get(fieldId);
			if (!field) {
				console.warn(`Cannot show restore for unknown field: ${fieldId}`);
				return;
			}

			// Create restore notification
			const notification = this.createSelectiveRestoreNotification(fieldId, cachedUploads);

			// Insert into field container
			field.container.insertBefore(notification, field.container.firstChild);
		}

		/**
		 * Create selective restore notification UI
		 */
		createSelectiveRestoreNotification(fieldId, cachedUploads) {
			const template = window.getTemplate('restoreNotification');
			if (!template) {
				console.error('restoreNotification template not found');
				return null;
			}

			const notification = template.cloneNode(true);
			const details = notification.querySelector('.restore-details');
			const container = notification.querySelector('.item-grid.restore');

			// Update message
			details.textContent = `Found ${cachedUploads.length} unfinished upload(s) for this field.`;

			// Create restore items
			cachedUploads.forEach(upload => {
				const item = this.createRestoreItem(upload);
				container.append(item);
			});

			// Attach event listeners
			this.attachRestoreEventListeners(notification, fieldId, cachedUploads);

			return notification;
		}

		/**
		 * Create individual restore item
		 */
		createRestoreItem(uploadData) {
			const template = window.getTemplate('restoreItem');
			if (!template) {
				console.error('restoreItem template not found');
				return null;
			}

			const item = template.cloneNode(true);
			const checkbox = item.querySelector('.restore-checkbox');
			const img = item.querySelector('img');
			const name = item.querySelector('.item-name');

			// Set up item data
			checkbox.id = `restore-${uploadData.uploadId}`;
			checkbox.value = uploadData.uploadId;

			// Use cached preview or create placeholder
			if (uploadData.uploadData.preview) {
				img.src = uploadData.uploadData.preview;
				img.alt = uploadData.uploadData.originalName || 'Upload preview';
			} else {
				img.style.display = 'none';
				item.querySelector('.image-placeholder').style.display = 'block';
			}

			if (name) {
				name.textContent = uploadData.uploadData.originalName || 'Untitled upload';
			}

			return item;
		}

		/**
		 * Attach event listeners to restore notification
		 */
		attachRestoreEventListeners(notification, fieldId, cachedUploads) {
			const selectAll = notification.querySelector('.select-all-restore');
			const selectNone = notification.querySelector('.select-none-restore');
			const restoreSelected = notification.querySelector('.restore-selected');
			const clearCache = notification.querySelector('.restart-uploads');
			const dismiss = notification.querySelector('.dismiss-cache-check');

			// Select all/none functionality
			selectAll?.addEventListener('click', () => {
				notification.querySelectorAll('.restore-checkbox').forEach(cb => cb.checked = true);
			});

			selectNone?.addEventListener('click', () => {
				notification.querySelectorAll('.restore-checkbox').forEach(cb => cb.checked = false);
			});

			// Restore selected items
			restoreSelected?.addEventListener('click', async () => {
				const selectedCheckboxes = notification.querySelectorAll('.restore-checkbox:checked');
				const selectedIds = Array.from(selectedCheckboxes).map(cb => cb.value);

				if (selectedIds.length === 0) {
					this.notify('No items selected for restore', 'warning');
					return;
				}

				// Restore selected uploads
				const selectedUploads = cachedUploads.filter(upload =>
					selectedIds.includes(upload.uploadId)
				);

				await this.restoreSelectedUploads(fieldId, selectedUploads);
				notification.remove();
				this.notify(`Restored ${selectedIds.length} item(s)`, 'success');
			});

			// Clear cache
			clearCache?.addEventListener('click', async () => {
				if (confirm('This will permanently delete all cached data. Are you sure?')) {
					await this.clearFieldCache(fieldId);
					notification.remove();
					this.notify('Cache cleared', 'info');
				}
			});

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

		/**
		 * Restore selected uploads
		 */
		async restoreSelectedUploads(fieldId, selectedUploads) {
			const field = this.fields.get(fieldId);
			if (!field) return;

			let operations = new Set();

			for (const cachedUpload of selectedUploads) {
				try {
					const upload = await this.restoreUploadFromCache(cachedUpload);

					if (upload) {
						operations.add(upload.operationId);

						// Add to field
						if (!field.uploads) field.uploads = new Set();
						field.uploads.add(upload.id);

						// Add to main preview
						this.addImageToPost(upload.id, field.previewGrid, true);
					}

				} catch (error) {
					console.error(`Failed to restore upload ${cachedUpload.uploadId}:`, error);
				}
			}

			field.operationId = operations;
			this.fields.set(fieldId, field);

			// Update field UI
			this.maybeLockUploads(fieldId);

			if (field.type === 'groupable') {
				field.container.querySelector('.group-display').hidden = false;
			}
		}

		/**
		 * Restore individual upload from cached data
		 */
		async restoreUploadFromCache(cachedUpload) {
			try {
				const upload = {
					id: cachedUpload.uploadId,
					fieldId: cachedUpload.fieldId,
					status: 'cached',
					progress: { percent: 100, message: 'Restored from cache' },
					meta: cachedUpload.uploadData.meta || {},
					preview: cachedUpload.uploadData.preview || null,
					createdAt: cachedUpload.uploadData.timestamp || Date.now(),
					operationId: cachedUpload.operationId
				};

				// If we have processed file data, restore it
				if (cachedUpload.uploadData.processedFile) {
					upload.processedFile = cachedUpload.uploadData.processedFile;
				}

				if (cachedUpload.uploadData.originalFile) {
					upload.originalFile = cachedUpload.uploadData.originalFile;
				}

				// Store upload in memory
				this.uploads.set(upload.id, upload);

				return upload;

			} catch (error) {
				console.error('Failed to restore upload from cache:', error);
				throw error;
			}
		}

		/**
		 * Save upload progress during processing
		 */
		saveUploadProgress(fieldId, uploadId, progressData) {
			const upload = this.uploads.get(uploadId);
			if (!upload) return;

			// Update upload progress
			upload.progress = progressData.progress || upload.progress;
			upload.status = progressData.status || upload.status;

			// Cache the updated data
			this.cacheUploadProgress(fieldId, uploadId, {
				...upload,
				originalFile: upload.originalFile ? {
					name: upload.originalFile.name,
					type: upload.originalFile.type,
					size: upload.originalFile.size,
					lastModified: upload.originalFile.lastModified
				} : null,
				processedFile: null, // Don't store the actual file data in cache
				operationId: upload.operationId,
				meta: upload.meta,
				originalName: upload.originalFile?.name
			});
		}

		/**
		 * Mark upload as completed and clean up cache
		 */
		completeUpload(fieldId, uploadId) {
			const cacheKey = `upload_${fieldId}_${uploadId}`;

			// Remove from cache since upload is complete
			this.store.clearForm(cacheKey);

			// Update upload status in memory
			const upload = this.uploads.get(uploadId);
			if (upload) {
				upload.status = 'completed';
			}
		}

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

		notify(message, type = 'info') {
			this.subscribers.forEach(cb => {
				if (typeof cb === 'function') {
					cb('notification', { message, type });
				}
			});

			// Also log to console
			console.log(`[BatchFileUploader] ${message}`);
		}


		/**************************************************************
		 EVENTS
		**************************************************************/


		initializeDragState() {
			this.dragState = {
				// What's being dragged
				primaryItem: null,
				draggedItems: [],
				isDragging: false,
				isMultiDrag: false,

				// Drag context
				fieldId: null,
				sourceType: null, // 'drag' or 'touch'
				startTime: null,

				// Position tracking
				startPosition: null, // { x, y }
				currentPosition: null, // { x, y }

				// Target tracking
				currentTarget: null,
				validTarget: null,

				// Visual elements
				dragPreview: null,

				// Touch-specific
				touchId: null,
				touchMoved: false
			};
		}

		/**
		 * Set up global event delegation
		 */
		initEventListeners() {
			this.paste = window.debouncer.schedule(
				'image-paste',
				() => this.handlePaste.bind(this),
				300
			);

			this.clickHandler = this.handleClick.bind(this);
			this.changeHandler = this.handleChange.bind(this);
			this.dragStartHandler = this.handleDragStart.bind(this);
			this.dragEndHandler = this.handleDragEnd.bind(this);
			this.dragEnterHandler = this.handleDragEnter.bind(this);
			this.dragOverHandler = this.handleDragOver.bind(this);
			this.dragLeaveHandler = this.handleDragLeave.bind(this);
			this.dropHandler = this.handleDrop.bind(this);
			this.touchStartHandler = this.handleTouchStart.bind(this);
			this.touchMoveHandler = this.handleTouchMove.bind(this);
			this.touchEndHandler = this.handleTouchEnd.bind(this);
			this.touchCancelHandler = this.handleTouchCancel.bind(this);


			document.addEventListener('click', this.clickHandler);
			document.addEventListener('change', this.changeHandler);
			document.addEventListener('paste', this.paste);
			window.addEventListener('beforeunload', this.handleBeforeUnload.bind(this));
			//Groups
			document.addEventListener('dragstart', this.dragStartHandler);
			document.addEventListener('dragend', this.dragEndHandler);
			document.addEventListener('dragenter', this.dragEnterHandler);
			document.addEventListener('dragover', this.dragOverHandler);
			document.addEventListener('dragleave', this.dragLeaveHandler);
			document.addEventListener('drop', this.dropHandler);

			document.addEventListener('touchstart', this.touchStartHandler, { passive: false });
			document.addEventListener('touchmove', this.touchMoveHandler, { passive: false });
			document.addEventListener('touchend', this.touchEndHandler, { passive: false });
			document.addEventListener('touchcancel', this.touchCancelHandler, { passive: false });
		}

		/****************************************************************
		 *
		 * Scanning, registering, and validating page uploaders
		 *
		 ***************************************************************/
		/**
		 * Scan page for existing upload fields and register them
		 */
		scanExistingFields() {
			const uploaders = document.querySelectorAll('.field.image');
			uploaders.forEach(uploader => {
				try {
					this.registerUploader(uploader);
				} catch (error) {
					this.error.log(error, {
						component: 'UploadManager',
						action: 'scanExistingFields',
						container: uploader.dataset.name
					});
				}
			});
		}

		registerUploader(uploader, options = {}) {
			let input = uploader.querySelector('input[type=file]');
			if (!input) {
				return;
			}

			if (!('fieldId' in uploader.dataset)) {
				uploader.dataset.fieldId = this.createFieldId(uploader);
			}
			let fieldId = uploader.dataset.fieldId;

			let typeConfig = this.settings.fieldTypes[uploader.dataset.type] || this.settings.fieldTypes['single'];
			let config = {
				id: fieldId,
				input: input,
				container: uploader,
				type: uploader.dataset.type,
				name: uploader.dataset.name,
				operationId: new Set(),

				posts: new Map(),

				maxFiles: typeConfig.maxFiles,
				allowMultiple: typeConfig.allowMultiple,
				groupsContainer: uploader.querySelector('.item-grid.groups')??false,
				groupDisplay: uploader.querySelector('.group-display')??false,
				selectAll: uploader.querySelector('#select-all-uploads'),
				selectActions: uploader.querySelector('.selection-actions'),
				selectInfo: uploader.querySelector('.selection-controls .info'),
				selectCount: uploader.querySelector('.selection-count'),

				content: uploader.dataset.content || 'options',
				contentFields: uploader.dataset.fields ?? {}, //If this is a content creation uploader, we can add its fields here
				postId: uploader.dataset.postId??false,
				termId: uploader.dataset.termId??false,

				mode: uploader.dataset.mode??'direct',
				hiddenValue: uploader.querySelector('input[type="hidden"]'),
				fields: {
					title: { label: 'Image Title', type: 'text', required: false },
					alt: { label: 'Alt Text', type: 'text', required: true },
					caption: { label: 'Image Caption', type: 'textarea', required: false }
				},
				dropZone: uploader.querySelector('.file-upload-container'),
				previewGrid: uploader.querySelector('.item-grid.preview'),

				uploads: new Set(),
				status: 'ready',
				... options
			};

			this.fields.set(fieldId, config);

			return fieldId;
		}

		/*******************************************************************
		 *
		 * Event Listeners
		 *
		 ******************************************************************/
		/**
		 * Handle file input changes
		 */
		handleChange(e) {

			//Only run on uploader changes
			if (!window.targetCheck(e, '.field.image')) {
				return;
			}
			e.preventDefault();

			if (window.targetCheck(e, 'input[type="file"]')) {
				const fieldId = this.getFieldId(e.target);
				const field = this.fields.get (fieldId);

				if (!field) {
					console.warn('File change on unregistered field: ', fieldId);
					return;
				}

				const files = Array.from(e.target.files);
				if (files.length === 0) return;

				this.processFiles(fieldId, files);

				e.target.value = '';
			} else if (e.target.closest('.upload-group') || e.target.name === 'featured') {

				this.addMetaToPost(e.target);
			} else if (e.target.closest('.upload-meta')) {

				this.addMetaToImage(e.target);
				this.maybeUpdateImageMeta();
			}
		}

		handleClick(e) {
			if (!window.targetCheck(e, '.image.field')) return;

			let [
				restart,
				dismissCacheCheck,
				selectAll,
				selectOne,
				createFromSelection,
				removeSelection,
				addToPost,
				removePost,
				remove,
				submitUploads,
				retry,
			] = [
				window.targetCheck(e, '.restart-uploads'),
				window.targetCheck(e, '.dismiss-cache-check'),
				window.targetCheck(e, '#select-all-uploads'),
				window.targetCheck(e, '.upload-select'),
				window.targetCheck(e, '.create-from-selection'),
				window.targetCheck(e, '.remove-selection'),
				window.targetCheck(e, '.add-to-group')??window.targetCheck(e,'.add-selection-to-group'),
				window.targetCheck(e, '.remove-group'),
				window.targetCheck(e, '.remove'), //handle remove from group and removal
				window.targetCheck(e, '.submit-uploads'),
				window.targetCheck(e, '.retry-upload'),
			];

			if (this.isUploadTrigger(e.target)) {
				this.triggerFileSelection(this.getFieldId(e.target));
			} else if (restart) {
				this.clearCache(this.getFieldId(restart));
			} else if (dismissCacheCheck) {
				this.dismissCacheCheck(this.getFieldId(dismissCacheCheck));
			} else if (selectAll) {
				this.handleSelectAll(selectAll);
			} else if (selectOne) {
				if (e.shiftKey && this.lastClickedUpload) {
					this.handleRangeSelection(selectOne, e);
				} else {
					this.handleUploadSelection(selectOne);
					// Track last clicked upload for range selection
					this.lastClickedUpload = this.getUploadId(selectOne);
				}
			} else if (createFromSelection) {
				this.createPostFromSelection(createFromSelection);
			}else if (removeSelection) {
				this.removeSelection(removeSelection);
			} else if (addToPost) {
				let group = addToPost.closest('.upload-group')?.querySelector('.item-grid')??false;
				if (!group) {
					group = this.createPostElement(this.getFieldId(addToPost));
				}
				this.getSelectedUploads(addToPost).forEach(upload => {
					this.addImageToPost(upload, group);
				});
			} else if (removePost) {
				this.removePost(removePost);
			} else if (remove) {
				this.removeImageFromPost(remove, this.getUploadId(remove));
			} else if (submitUploads) {
				this.submitPostData(submitUploads);
			} else if (retry) {
				this.retryUpload(this.getFieldId(retry), this.getUploadId(retry));
			}
		}

		async retryUpload(fieldId, uploadId) {
			const upload = this.uploads.get(uploadId);
			if (!upload || upload.status !== 'error') return;

			this.a11y.announce(`Retrying upload for ${upload.originalFile.name}`);
			await this.queueUpload(uploadId);
		}

		/**
		 * Handle page unload
		 */
		handleBeforeUnload(e) {
			const activeUploads = Array.from(this.uploads.values())
				.filter(upload => ['processing', 'uploading'].includes(upload.status));

			if (activeUploads.length > 0) {
				e.preventDefault();
				e.returnValue = `You have ${activeUploads.length} upload(s) in progress. Are you sure you want to leave?`;
				return e.returnValue;
			}

			//TODO: Check for unsaved field changes
		}

		/**
		 * Handle paste events (for image paste support)
		 */
		handlePaste(e) {
			const activeField = document.activeElement?.closest('[data-upload-field]');
			if (!activeField) return;

			const items = Array.from(e.clipboardData.items);
			const imageItems = items.filter(item => item.type.startsWith('image/'));

			if (imageItems.length === 0) return;

			e.preventDefault();

			const fieldId = this.getFieldId(activeField);
			if (!fieldId) return;

			// Convert clipboard items to files
			const files = [];
			imageItems.forEach((item, index) => {
				const file = item.getAsFile();
				if (file) {
					// Rename for clarity
					const newFile = new File([file], `pasted_image_${index + 1}.png`, {
						type: file.type,
						lastModified: Date.now()
					});
					files.push(newFile);
				}
			});

			if (files.length > 0) {
				this.processFiles(fieldId, files);
			}
		}
		/***************************************************************
		 *
		 *  Information Handling
		 *
		 ***************************************************************/
		/**
		 *
		 * @param {string} uploadId the referred uploadId, as set by the this.uploads logic
		 * @param element the target element the image is 'dropping' to
		 * @param {boolean} isPreviewGrid
		 * @returns {string|boolean}
		 */
		addImageToPost(uploadId, element, isPreviewGrid = true) {
			let field = this.checkField(element);
			if (!field) return false;

			let upload = this.uploads.get(uploadId);
			if (!upload) {
				return false;
			}

			const previousLocation = this.removeImageFromCurrentLocation(uploadId, field);

			if (isPreviewGrid) {
				const postId = this.generateID();
				const post = {
					id: postId,
					images: new Set([uploadId]), // This post only contains this one image
					fields: {}
				};

				this.addImageElementTo(uploadId, element, false, postId);

				// Store the individual post
				field.posts.set(postId, post);
				this.fields.set(field.id, field);

				// Announce the move
				if (previousLocation) {
					this.a11y.announce(`Image moved from ${previousLocation} back to main area`);
				}

				// Cache the field data
				this.cachePostData(field.id);
				return postId;
			} else {
				let post = this.getPostDataFromElement(element);

				post.images.add(uploadId);

				// Handle .empty-group drops by creating the group element here
				if (element.classList.contains('empty-group')) {
					element = this.createPostElement(field.id, post.id);
				}
				this.addImageElementTo(uploadId, element);
				element.dataset.postId = post.id;

				// Announce the move
				const groupNumber = Array.from(field.posts.keys()).indexOf(post.id) + 1;
				if (previousLocation === 'preview') {
					this.a11y.announce(`Image moved from main area to group ${groupNumber}`);
				} else if (previousLocation) {
					this.a11y.announce(`Image moved from ${previousLocation} to group ${groupNumber}`);
				} else {
					this.a11y.announce(`Image added to group ${groupNumber}`);
				}

				//update field data
				field.posts.set(post.id, post);
				this.fields.set(field.id, field);
				this.cachePostData(field.id);

				return post.id;
			}
		}

		/**
		 * Remove an image from its current location (preview grid or another group)
		 * @param {string} uploadId - The upload ID to remove
		 * @param {Object} field - The field object
		 * @returns {string|null} - Description of where image was removed from
		 */
		removeImageFromCurrentLocation(uploadId, field) {
			// Find which post/group currently contains this image
			let currentPostId = null;
			let currentPost = null;
			for (const [postId, post] of field.posts) {
				if (post.images.has(uploadId)) {
					currentPostId = postId;
					currentPost = post;
					break;
				}
			}

			console.log('current post id: ', currentPostId);
			console.log('current post: ', currentPost);

			if (currentPostId && currentPost) {
				// Remove from the current post
				currentPost.images.delete(uploadId);

				// Find the DOM element
				let item = document.querySelector(`[data-upload-id="${uploadId}"]`);

				if (!item) {
					console.warn(`Element not found for upload ${uploadId} - may have been moved already`);
					// Still clean up the data structure even if DOM element is missing
					if (currentPost.images.size === 0) {
						this.removeEmptyGroup(currentPostId, field);
					} else {
						field.posts.set(currentPostId, currentPost);
					}
					this.cachePostData(field.id);
					return 'unknown location';
				}

				let parent = item.closest('.upload-group, .item-grid.preview');
				let type = (parent && parent.classList.contains('preview')) ? 'preview' : 'group ' + (Array.from(field.posts.keys()).indexOf(currentPostId) + 1);

				if (currentPost.images.size === 0) {
					this.removeEmptyGroup(currentPostId, field);
				} else {
					field.posts.set(currentPostId, currentPost);
				}

				// Remove the DOM element
				item.remove();
				this.cachePostData(field.id);

				return type;
			}

			return null; // Image wasn't found in any location
		}

		/**
		 * Remove an empty group from the field
		 * @param {string} postId - The post ID of the group to remove
		 * @param {Object} field - The field object
		 */
		removeEmptyGroup(postId, field) {
			// Remove from data structure
			field.posts.delete(postId);

			// Remove DOM element
			const groupElement = field.container.querySelector(`[data-post-id="${postId}"]`);
			if (groupElement) {
				groupElement.remove();
				this.a11y.announce('Empty group removed');
			}

			// Update field
			this.fields.set(field.id, field);
			this.cachePostData(field.id);
		}


		checkField(element) {
			let fieldId = this.getFieldId(element);
			return this.fields.get(fieldId);
		}

		getPostDataFromElement(element) {
			let field = this.checkField(element);
			if (!field) return;

			let postId = element.dataset.postId??element.closest('.upload-group').dataset.postId??field.postId??field.termId;
			let post;

			//If this isn't a groupable post, we can just add the information to  the post id
			if (postId && !field.posts.has(postId)) {
				post = {
					id: postId,
					images: new Set(),
					fields: {}
				};
			} else if (postId && field.posts.has(postId)) {
				post = field.posts.get(postId);
			} else {
				post = this.createPost(element);
			}

			return post;
		}

		removeImageFromPost(element, uploadId) {
			let field = this.checkField(element);
			if (!field) return;

			let postId = element.dataset.postId;
			if (!postId) {
				postId = this.getPostIdFromUpload(field, uploadId);
				if (!postId) {
					console.warn('Could not find post for upload:', uploadId);
					return;
				}
			}

			const post = field.posts.get(postId);
			if (!post) return;

			// Remove from data structure
			post.images.delete(uploadId);

			// Remove DOM element
			const imageElement = element.closest('.upload-group, .item-grid.preview').querySelector(`[data-upload-id="${uploadId}"]`);
			if (imageElement) {
				imageElement.remove();
			}

			// If group is empty, remove it; otherwise update it
			if (post.images.size === 0) {
				this.removeEmptyGroup(postId, field);
			} else {
				// Update the post data and move image back to preview
				field.posts.set(postId, post);
				this.addImageToPost(uploadId, field.previewGrid, true);
				this.fields.set(field.id, field);
				this.cachePostData(field.id);
			}

			return true;
		}

		removePost(element, cache = true) {
			element = element.closest('.upload-group, .upload-item') ?? element;
			let field = this.getField(element);
			let postId = element.dataset.postId;

			if (field.posts.has(postId)) {
				let post = field.posts.get(postId);
				post.images.forEach(uploadId => {
					let upload = this.uploads.get(uploadId);
					if (upload) {
						this.addImageToPost(uploadId, field.previewGrid, true);
					}
				});
				field.posts.delete(postId);
				this.fields.set(field.id, field);
				if (cache) {
					this.cachePostData(field.id);
				}
			}
			element.remove();
			this.a11y.announce('Group deleted and images moved back to main area');
		}

		getPostIdFromUpload(field, uploadId) {
			for (const [id, post] of field.posts) {
				if (post.images.has(uploadId)) {
					return id;
				}
			}
			return null;
		}

		addMetaToImage(element) {
			let field = this.checkField(element);
			if (!field) return;

			let item = element.closest('.upload-item');
			let uploadId = item?.dataset.uploadId;

			if (!uploadId) return;

			const upload = this.uploads.get(uploadId);
			if (!upload) return;
			if (!upload.meta) {
				upload.meta = {};
			}

			upload.meta[element.name] = element.value;
			this.uploads.set(uploadId, upload);

			this.cacheUpload(upload);
		}

		addMetaToPost(element) {
			console.log('Adding meta to post: ');
			let field = this.checkField(element);
			console.log('Field:', field);
			if (!field || field.type !== 'groupable') return;

			let post = this.getPostDataFromElement(element);
			console.log('Post: ',post);

			console.log('element: ', element);

			post.fields[element.name] = element.value;
			field.posts.set(post.id, post);
			this.fields.set(field.id, field);
			this.cachePostData(field.id);
			return post.id;
		}

		createPost(element) {
			let id = this.generateID();

			if (!element.classList.contains('empty-group')) {
				element.dataset.postId = id;
			}

			const post = {
				id: id,
				images: new Set(),
				fields: {}
			};

			// Cache the new post immediately
			const field = this.checkField(element);
			if (field) {
				field.posts.set(id, post);
				this.fields.set(field.id, field);
				this.cachePostData(field.id);
			}

			return post;
		}

		createPostFromSelection(element) {
			const fieldId = this.getFieldId(element);
			const selected = this.getSelectedUploads(element);

			if (selected.length === 0) {
				this.notify('No uploads selected', 'warning');
				return;
			}

			// Create new post element
			const postElement = this.createPostElement(fieldId);

			selected.forEach(uploadId => {
				this.addImageToPost(uploadId, postElement, false);
				// Clear selection
				const uploadItem = document.querySelector(`[data-upload-id="${uploadId}"]`);
				const checkbox = uploadItem?.querySelector('[name*="select-item"]');
				if (checkbox) checkbox.checked = false;
			});

			this.updateSelectAll(element);
			this.a11y.announce(`Created new group with ${selected.length} images.`);
		}

		async submitPostData(element) {
			let field = this.checkField(element);
			if (!field) return;

			let length = field.posts.size;

			const operation = {
				endpoint: 'uploads/groups',
				method: "POST",
				title: `Uploading ${length} ${field.plural}`,
				popup: `Sending ${length} ${field.plural} to server...`,
				canMerge: true,
				type: 'image_groups',
				headers: { 'action_nonce': jvbSettings.dash },
				user: jvbSettings.currentUser,
				field: field.id,
				onComplete: (operation) => this.handleFinalCompletion(operation)
			};

			// Convert Map to plain object with proper structure
			let data = {};
			let dependencies = new Set();
			let index = 0;
			data.posts = {};
			for (const [postId, post] of field.posts) {
				let images = [];
				for (const uploadId of post.images) {
					const upload = this.uploads.get(uploadId);
					if (upload) {
						images.push({
							upload_id: uploadId,
							meta: upload.meta,
							operationId: upload.operationId
						});
						dependencies.add(upload.operationId);
					}
				}

				data.posts[index] = {
					...post,
					images: images
				};
				index++;
			}

			data.content = field.content;

			operation.data = data;
			operation['depends_on'] = [...dependencies];

			try {
				await this.queue.addToQueue(operation);
				this.notify(`Sent ${field.plural} to server`);
			} catch (error) {
				throw error;
			}
		}

		handleFinalCompletion	(operation) {
			if(operation.field) {
				let field = this.fields.get(operation.field);
				if (field.onGroupingComplete && typeof field.onGroupingComplete === "function") {
					field.onGroupingComplete(operation);
				}
				field.container.querySelector('.group-display').hidden = true;
				field.container.closest('details').open = false;
				this.cleanField(operation.field);
			}

		}
		cleanField(fieldId) {
			let field = this.fields.get(fieldId);
			if(!field) return;
			if (field.previewGrid) {
				window.removeChildren(field.previewGrid);
			}
			if (field.groupsContainer) {
				window.removeChildren(field.groupsContainer);
			}

			this.clearFieldCache(fieldId);
		}
		/***************************************************************
		 *
		 * 	UI HANDLING
		 *
		***************************************************************/
		addImageElementTo(upload, element, prepend = true, postId = null) {
			upload = (typeof upload === 'string') ? this.uploads.get(upload) : upload;
			if (!upload) {
				console.warn('Upload not found:', upload);
				return;
			}

			let image = window.getTemplate('uploadItem');
			if (!image) {
				console.error('uploadItem template not found');
				return;
			}

			image.dataset.uploadId = upload.id;
			if (postId) {
				image.dataset['postId'] = postId;
			} else {
				image.querySelector('.item-actions').remove();
				let groupActions = window.getTemplate('groupActions');
				groupActions.querySelector('input[name="featured"]').value = upload.id;
				image.querySelector('.actions').append(groupActions);

			}

			const img = image.querySelector('img');
			if (img) {
				img.src = upload.preview;
				img.alt = upload.originalFile?.name ?? upload.meta?.originalName ?? 'Unknown File';
			}

			// Safely add metadata template
			const details = image.querySelector('details');
			if (details) {
				const metaTemplate = window.getTemplate('uploadMeta');
				if (metaTemplate) {
					details.append(metaTemplate);
				}
			}

			let field = this.getField(element);
			if (field && field.type === 'groupable') {
				image.draggable = true;
			}



			// Update input IDs safely
			image.querySelectorAll('input').forEach(input => {
				let id = input.id;
				if (id) {
					let newId = id + upload.id;
					let label = input.parentNode.querySelector(`label[for="${id}"]`);
					input.id = newId;
					if (label) {
						label.htmlFor = newId;
					}
				}
			});

			if (prepend) {
				element.prepend(image);
			} else {
				element.append(image);
			}

			this.updateImageUI(upload.id, element);
		}
		removeImageElementFrom(uploadId, element, moveBackToPreview = null) {
			element = (typeof element === 'string') ? field.container.querySelector(element) : element;
			element.querySelector(`[data-upload-id=${uploadId}]`).remove();

			if (moveBackToPreview) {
				this.addImageToPost(uploadId, this.getField(element).previewGrid, true);
			}
		}
		updateImageUI(uploadId, element = null) {
			const upload = this.uploads.get(uploadId);
			if (!upload) return;

			element = (element) ? element : this.getField(document.querySelector(`[data-upload-id="${uploadId}"]`))?.container;
			if (!element) return;

			const item = element.querySelector(`[data-upload-id="${uploadId}"]`);
			if (!item) return;

			item.dataset.status = upload.status;

			// Safely update progress elements
			if (upload.progress) {
				const fillElement = item.querySelector('.fill');
				const textElement = item.querySelector('.details');

				if (fillElement) {
					fillElement.style.width = `${upload.progress.percent || 0}%`;
				}

				if (textElement) {
					textElement.textContent = upload.progress.message ?? '';
				}
			}

			// Safely update status indicator
			const statusElement = item.querySelector('.status');
			if (statusElement && !statusElement.classList.contains(upload.status)) {
				window.removeChildren(statusElement);
				statusElement.className = `status ${upload.status}`;
				statusElement.append(this.getStatusIcon(upload.status));
			}

			// Safely hide/show progress
			const progressElement = item.querySelector('.progress');
			if (progressElement) {
				progressElement.hidden = ['completed'].includes(upload.status);
			}
		}

		createPostElement(fieldId, id = null) {
			let field = this.fields.get(fieldId);
			if (!field) return;

			let post = window.getTemplate('imageGroup');
			const postId = id || this.generateID();

			post.dataset.fieldId = fieldId;
			post.dataset.postId = postId;

			let meta = post.querySelector('.fields');
			let fields = window.getTemplate('groupMetadata');
			meta.append(fields);

			field.groupsContainer.insertBefore(post, field.groupsContainer.querySelector('.empty-group').nextElementSibling);

			// Return the grid element, not the post container
			return field.container.querySelector(`[data-post-id="${postId}"] .item-grid`);
		}
		/**
		 * Hide the uploader drop zone if we have reached our limit
		 */
		maybeLockUploads(fieldId) {
			const field = this.fields.get(fieldId);
			if (!field) return;

			// Hide/show drop zone based on file count
			if (field.dropZone) {
				const isAtCapacity = field.uploads && field.uploads.size >= field.maxFiles;
				field.dropZone.style.hidden = isAtCapacity;
			}
		}

		/***************************************************************
		 *
		 * Image Processing
		 *
		 **************************************************************/
		/**
		 * Process files for a specific field
		 */
		async processFiles(fieldId, files) {
			const field = this.fields.get(fieldId);
			if (!field) return;

			// Validate files
			const validFiles = files.filter(file => this.validateFile(file, field));
			if (validFiles.length === 0) return;

			// Check field limits
			if (!this.checkFieldLimits(fieldId, validFiles.length)) {
				this.notify(`Cannot add ${validFiles.length} files. Field limit exceeded.`, 'warning');
				return;
			}

			const processedUploads = await this.processBatch(fieldId, validFiles, {
				batchSize: 3, // Process 3 files simultaneously
				showProgress: true,
			});
			this.maybeLockUploads(fieldId);

			if (field.groupDisplay) {
				field.groupDisplay.hidden = false;
			}
			await this.queueUpload(fieldId);



			this.a11y.announce(`Processed ${processedUploads.length} of ${validFiles.length} files`);
		}

		/**
		 * Process a single file
		 */
		async processFile(fieldId, file) {
			const field = this.fields.get(fieldId);

			try {
				let upload = this.storeUpload(fieldId, file);
				let uploadId = upload.id;
				if (!field.uploads) field.uploads = new Set();
				field.uploads.add(uploadId);

				this.addImageToPost(uploadId, field.previewGrid, true);

				// Process image with better error context
				upload.processedFile = await this.processImage(file, {
					uploadId,
					retries: 2
				});

				upload.status = 'processed';

				if (upload.preview && upload.preview.startsWith('blob:')) {
					URL.revokeObjectURL(upload.preview);
				}

				// Create new preview URL for processed file
				upload.preview = URL.createObjectURL(upload.processedFile);

				this.cacheUpload(upload);
				this.updateImageUI(uploadId);

				// Announce completion (only for small batches)
				if (this.uploads.size <= 3) {
					this.a11y.announce(`${file.name} processed and ready`);
				}

				return upload;

			} catch (error) {
				this.updateUploadStatus(uploadId, 'error', 'Processing failed');

				// Enhanced error context for batch processing
				this.error.log(error, {
					component: 'UploadManager',
					action: 'processFile',
					uploadId,
					fileName: file.name,
					fileSize: file.size,
					batchProcessing: true
				});

				// Don't spam error announcements for large batches
				if (this.uploads.size <= 3) {
					this.a11y.announce(`${file.name} processing failed`);
				}

				return null;
			}
		}

		/**
		 * Stores file in our uploads Map
		 * @param fieldId
		 * @param file
		 * @returns {object}
		 */
		storeUpload(fieldId, file) {
			let uploadId = this.generateUploadId();
			const upload = {
				id: uploadId,
				fieldId: fieldId,
				originalFile: file,
				status: 'processing',
				progress: { percent: 0, message: 'Processing...' },
				preview: URL.createObjectURL(file),
				createdAt: Date.now(),
				meta: {
					originalName: file.name,
					originalType: file.type,
					originalSize: file.size
				}
			};

			this.uploads.set(uploadId, upload);
			return upload;
		}

		async processImage(file, options = {}) {
			if (!file.type.startsWith('image/')) {
				return file;
			}

			const startTime = performance.now();
			this.performanceMonitor?.startTiming(options.uploadId, 'processing');

			try {
				const maxDimension = this.getMaxDimension();
				const quality = options.quality || 0.85;

				let processedFile;

				if (this.shouldUseWorker(file) && this.compressionWorker) {
					processedFile = await this.processWithWorker(file, maxDimension, quality);
				} else {
					processedFile = await this.processOnMainThread(file, maxDimension, quality);
				}

				if (!this.isValidProcessedFile(processedFile, file)) {
					console.warn(`Processing failed for ${file.name}, using original`);
					return file;
				}

				const processingTime = performance.now() - startTime;

				this.performanceMonitor?.endTiming(options.uploadId, 'processing');
				return processedFile;

			} catch (error) {
				this.performanceMonitor?.endTiming(options.uploadId, 'processing');

				// Let ErrorHandler deal with the error classification and user notification
				this.error.log(error, {
					component: 'UploadManager',
					action: 'processImage',
					fileName: file.name,
					fileSize: file.size,
					fileType: file.type,
					uploadId: options.uploadId
				});

				return file; // Fallback to original
			}
		}

		/**
		 * Validate processed file
		 */
		isValidProcessedFile(processedFile, originalFile) {
			if (!processedFile || !(processedFile instanceof File)) {
				return false;
			}

			if (processedFile.size === 0) {
				return false;
			}

			// Check if processing actually reduced file size (for large files)
			if (originalFile.size > 2 * 1024 * 1024 && processedFile.size >= originalFile.size) {
				console.warn(`Processing didn't reduce file size: ${originalFile.size} → ${processedFile.size}`);
				// Still valid, just not optimal
			}

			return true;
		}


		/**
		 * Process image on main thread with better error handling
		 */
		async processOnMainThread(file, maxDimension, quality) {
			return new Promise((resolve, reject) => {
				const img = new Image();
				const canvas = document.createElement('canvas');
				const ctx = canvas.getContext('2d');
				let objectUrl = null;

				const cleanup = () => {
					img.onload = null;
					img.onerror = null;
					if (objectUrl) {
						URL.revokeObjectURL(objectUrl);
						objectUrl = null;
					}
					// Explicitly clean up canvas
					canvas.width = 1;
					canvas.height = 1;
					ctx.clearRect(0, 0, 1, 1);
				};

				img.onload = () => {
					try {
						const { width, height } = this.calculateOptimalDimensions(img, maxDimension);
						canvas.width = width;
						canvas.height = height;

						// Enhanced image smoothing
						ctx.imageSmoothingEnabled = true;
						ctx.imageSmoothingQuality = 'high';
						ctx.drawImage(img, 0, 0, width, height);

						const outputFormat = this.getOptimalFormat(file);
						const outputQuality = this.getOptimalQuality(file, quality);

						canvas.toBlob(
							(blob) => {
								cleanup();
								if (blob) {
									const processedFile = new File(
										[blob],
										this.getProcessedFileName(file, outputFormat),
										{ type: outputFormat, lastModified: Date.now() }
									);
									resolve(processedFile);
								} else {
									reject(new Error('Canvas toBlob failed'));
								}
							},
							outputFormat,
							outputQuality
						);

					} catch (error) {
						cleanup();
						reject(new Error(`Canvas processing failed: ${error.message}`));
					}
				};

				img.onerror = () => {
					cleanup();
					reject(new Error(`Failed to load image: ${file.name}`));
				};

				try {
					objectUrl = URL.createObjectURL(file);
					img.src = objectUrl;
				} catch (error) {
					cleanup();
					reject(new Error(`Failed to create object URL: ${error.message}`));
				}
			});
		}

		/**
		 * Get optimal output format
		 */
		getOptimalFormat(file) {
			// Keep original format for certain types
			if (file.type === 'image/gif' || file.type === 'image/svg+xml') {
				return file.type;
			}

			// Use WebP if supported, otherwise JPEG
			return this.supportsWebP() ? 'image/webp' : 'image/jpeg';
		}

		/**
		 * Get optimal quality setting
		 */
		getOptimalQuality(file, requestedQuality) {
			// Higher quality for smaller files
			if (file.size < 500 * 1024) return Math.max(requestedQuality, 0.9);
			if (file.size < 2 * 1024 * 1024) return requestedQuality;

			// Lower quality for very large files
			return Math.min(requestedQuality, 0.8);
		}

		/**
		 * Generate processed file name
		 */
		getProcessedFileName(originalFile, outputFormat) {
			const baseName = originalFile.name.replace(/\.[^/.]+$/, '');

			const extensions = {
				'image/webp': '.webp',
				'image/jpeg': '.jpg',
				'image/png': '.png',
				'image/gif': '.gif'
			};

			return baseName + (extensions[outputFormat] || '.jpg');
		}

		/**
		 * Get maximum dimension based on device capabilities
		 */
		getMaxDimension() {
			const screenWidth = window.screen.width;
			const devicePixelRatio = window.devicePixelRatio || 1;

			// Scale based on device capabilities
			if (screenWidth * devicePixelRatio > 2560) return 2400;
			if (screenWidth * devicePixelRatio > 1920) return 1920;
			return 1200;
		}

		/**
		 * Determine if we should use Web Worker
		 */
		shouldUseWorker(file) {
			// Use worker for large files or when available
			return this.compressionWorker &&
				file.size > 1024 * 1024 && // > 1MB
				typeof OffscreenCanvas !== 'undefined';
		}

		async processWithWorker(file, maxDimension, quality) {
			if (!this.compressionWorker) {
				throw new Error('Worker not available');
			}

			return new Promise((resolve, reject) => {
				const timeout = setTimeout(() => {
					reject(new Error('Worker processing timeout'));
				}, 30000); // 30 second timeout

				this.compressionWorker.onmessage = (e) => {
					clearTimeout(timeout);

					if (e.data.success) {
						const processedFile = new File(
							[e.data.blob],
							this.getProcessedFileName(file, e.data.format || 'image/webp'),
							{ type: e.data.format || 'image/webp', lastModified: Date.now() }
						);
						resolve(processedFile);
					} else {
						reject(new Error(e.data.error || 'Worker processing failed'));
					}
				};

				this.compressionWorker.onerror = (error) => {
					clearTimeout(timeout);
					reject(new Error(`Worker error: ${error.message}`));
				};

				// Send file to worker
				this.compressionWorker.postMessage({
					file: file,
					maxDimension: maxDimension,
					quality: quality,
					outputFormat: this.getOptimalFormat(file)
				});
			});
		}

		/**
		 * Initialize Web Worker for image compression
		 */
		initCompressionWorker() {
			if (this.compressionWorker || typeof Worker === 'undefined') return;

			try {
				const workerScript = `
				self.onmessage = async function(e) {
					const { file, maxDimension, quality, outputFormat } = e.data;

					try {
						// Create ImageBitmap from file
						const bitmap = await createImageBitmap(file);

						// Calculate dimensions
						const scale = Math.min(maxDimension / bitmap.width, maxDimension / bitmap.height, 1);
						const width = Math.round(bitmap.width * scale);
						const height = Math.round(bitmap.height * scale);

						// Create OffscreenCanvas
						const canvas = new OffscreenCanvas(width, height);
						const ctx = canvas.getContext('2d');

						// Draw and resize
						ctx.imageSmoothingEnabled = true;
						ctx.imageSmoothingQuality = 'high';
						ctx.drawImage(bitmap, 0, 0, width, height);

						// Convert to blob
						const blob = await canvas.convertToBlob({
							type: outputFormat,
							quality: quality
						});

						self.postMessage({
							success: true,
							blob: blob,
							format: outputFormat
						});

					} catch (error) {
						self.postMessage({
							success: false,
							error: error.message
						});
					}
				};
			`;

				const blob = new Blob([workerScript], { type: 'application/javascript' });
				this.compressionWorker = new Worker(URL.createObjectURL(blob));

			} catch (error) {
				console.warn('Failed to initialize compression worker:', error);
				this.compressionWorker = null;
			}
		}

		async processBatch(fieldId, files, options = {}) {
			const {
				batchSize = 3,
				showProgress = true,
				onBatchComplete = null,
				delayBetweenBatches = 100
			} = options;

			const results = [];
			const totalFiles = files.length;
			let processedCount = 0;

			// Show initial progress
			if (showProgress) {
				this.updateUploadProgress(fieldId, 0, totalFiles, 'Starting batch processing...');
			}

			// Process files in batches
			for (let i = 0; i < files.length; i += batchSize) {
				const batch = files.slice(i, i + batchSize);

				// Process current batch (parallel processing within batch)
				const batchPromises = batch.map(async (file, index) => {
					try {
						const upload = await this.processFile(fieldId, file);

						// Update progress for individual file
						processedCount++;
						if (showProgress) {
							this.updateUploadProgress(
								fieldId,
								processedCount,
								totalFiles,
								`Processed ${file.name}`
							);
						}

						return upload;
					} catch (error) {
						console.error(`Failed to process file ${file.name}:`, error);
						processedCount++; // Still count as processed (failed)

						if (showProgress) {
							this.updateUploadProgress(
								fieldId,
								processedCount,
								totalFiles,
								`Failed: ${file.name}`
							);
						}

						return null; // Return null for failed files
					}
				});

				// Wait for current batch to complete
				const batchResults = await Promise.all(batchPromises);

				// Filter out null results (failed files)
				const successfulUploads = batchResults.filter(upload => upload !== null);
				results.push(...successfulUploads);

				// Call batch completion callback
				if (onBatchComplete) {
					onBatchComplete(successfulUploads);
				}

				// Small delay between batches to prevent browser overload
				if (i + batchSize < files.length && delayBetweenBatches > 0) {
					await new Promise(resolve => setTimeout(resolve, delayBetweenBatches));
				}
			}

			// Final progress update
			if (showProgress) {
				this.updateUploadProgress(
					fieldId,
					totalFiles,
					totalFiles,
					`Completed! ${results.length}/${totalFiles} files processed successfully`
				);

				// Hide progress after a delay
				setTimeout(() => {
					this.hideUploadProgress(fieldId);
				}, 2000);
			}

			return results;
		}

		updateUploadProgress(fieldId, current, total, message) {
			const field = this.fields.get(fieldId);
			if (!field) return;

			let progressBar = field.container.querySelector('.progress');

			// Create progress bar if it doesn't exist
			if (!progressBar) {
				progressBar = window.getTemplate('imageProgress');

				// Insert after drop zone or at top of container
				const insertAfter = field.dropZone || field.container.firstElementChild;
				if (insertAfter) {
					insertAfter.insertAdjacentElement('afterend', progressBar);
				} else {
					field.container.prepend(progressBar);
				}
			}

			// Update progress bar
			const progressPercent = total > 0 ? Math.round((current / total) * 100) : 0;
			const progressFill = progressBar.querySelector('.fill');
			const progressMessage = progressBar.querySelector('.details');
			const progressCount = progressBar.querySelector('.count');

			if (progressFill) {
				progressFill.style.width = `${progressPercent}%`;
			}

			if (progressMessage) {
				progressMessage.textContent = message;
			}

			if (progressCount) {
				progressCount.textContent = `${current}/${total}`;
			}

			// Add completion styling
			if (current === total) {
				progressBar.classList.add('completed');
			}
		}

		hideUploadProgress(fieldId) {
			const field = this.fields.get(fieldId);
			if (!field) return;

			const progressBar = field.container.querySelector('.progress');
			if (progressBar) {
				progressBar.style.opacity = '0';
				setTimeout(() => {
					progressBar.remove();
				}, 300);
			}
		}

		/**
		 * Calculate optimal dimensions with aspect ratio preservation
		 */
		calculateOptimalDimensions(img, maxDimension) {
			let { width, height } = img;

			// Don't upscale
			if (width <= maxDimension && height <= maxDimension) {
				return { width, height };
			}

			// Calculate scale factor
			const scale = Math.min(maxDimension / width, maxDimension / height);

			return {
				width: Math.round(width * scale),
				height: Math.round(height * scale)
			};
		}


		/**
		 * Check WebP support
		 */
		supportsWebP() {
			const canvas = document.createElement('canvas');
			return canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0;
		}


		/*****************************************
		 *
		 * TOUCH, DRAG, and DROP
		 *
		 * Shared handlers, then individual listener handlers
		 *
		 ****************************************/
		startDragOperation(config) {
			const {
				primaryElement,
				sourceType,
				startPosition,
				event
			} = config;

			const uploadId = this.getUploadId(primaryElement);
			const fieldId = this.getFieldId(primaryElement);

			// Determine what items to drag
			const draggedItems = this.getDraggedItems(primaryElement);

			// Initialize drag state
			this.dragState = {
				primaryItem: uploadId,
				draggedItems: draggedItems,
				isDragging: true,
				isMultiDrag: draggedItems.length > 1,
				fieldId: fieldId,
				sourceType: sourceType,
				startTime: Date.now(),
				startPosition: startPosition,
				currentPosition: startPosition,
				currentTarget: null,
				validTarget: null,
				dragPreview: null,
				touchId: sourceType === 'touch' ? event.touches[0]?.identifier : null,
				touchMoved: false
			};

			// Create drag preview
			this.createDragPreview(primaryElement);

			// Apply dragging state
			this.applyDraggingState(true);

			const announceText = this.dragState.isMultiDrag
				? `Started dragging ${draggedItems.length} items`
				: 'Started dragging item';

			this.a11y.announce(announceText);
			this.provideDragFeedback('start');

			return true;
		}

		updateDragOperation(position, elementUnderPointer) {
			if (!this.dragState.isDragging) return;

			const { sourceType, startPosition } = this.dragState;

			// Update position
			this.dragState.currentPosition = position;

			// Check for significant movement (touch)
			if (sourceType === 'touch' && !this.dragState.touchMoved) {
				const deltaX = Math.abs(position.x - startPosition.x);
				const deltaY = Math.abs(position.y - startPosition.y);

				if (deltaX > 10 || deltaY > 10) {
					this.dragState.touchMoved = true;
				}
			}

			// Update preview and target
			this.updateDragPreview(position);
			this.updateDropTarget(elementUnderPointer);
		}

		endDragOperation(elementUnderPointer = null) {
			if (!this.dragState.isDragging) return;

			const wasSuccessful = (this.dragState.sourceType === 'drag' || this.dragState.touchMoved) &&
				this.dragState.validTarget;

			// Process drop if valid - but only here, not in handleDrop
			if (wasSuccessful && this.dragState.validTarget) {
				this.processItemDrop({
					itemIds: this.dragState.draggedItems,
					targetElement: this.dragState.validTarget,
					fieldId: this.dragState.fieldId,
					dropType: this.dragState.isMultiDrag ? 'multiple' : 'single',
					sourceType: this.dragState.sourceType
				});
			}

			// Cleanup
			this.cleanupDragOperation();

			const announceText = wasSuccessful
				? (this.dragState.isMultiDrag ? `Moved ${this.dragState.draggedItems.length} items` : 'Item moved')
				: 'Drag cancelled';

			this.a11y.announce(announceText);
		}

		/**
		 * Shared method to process any drop operation (drag or touch)
		 * @param {Object} dropData - Standardized drop data
		 * @returns {boolean} Success status
		 */
		processItemDrop(dropData) {
			const {
				itemIds,
				targetElement,
				fieldId,
				dropType,
				sourceType
			} = dropData;

			if (!itemIds?.length || !targetElement || !fieldId) {
				return false;
			}

			// Determine if it's a preview drop
			let isPreviewDrop = targetElement.classList.contains('item-grid') && targetElement.classList.contains('preview');

			// Handle empty group drops by creating the group element
			let actualTarget = targetElement;
			if (targetElement.classList.contains('empty-group')) {
				actualTarget = this.createPostElement(fieldId);
				isPreviewDrop = false;
			}

			// Use existing addImageToPost method for each item
			// This method already handles:
			// - removeImageFromCurrentLocation (cleanup of old location)
			// - Adding to new location
			// - Updating field.posts data structure
			// - Caching the data
			itemIds.forEach(uploadId => {
				this.addImageToPost(uploadId, actualTarget, isPreviewDrop);
			});

			// Clear selections for multi-drops
			if (dropType === 'multiple') {
				const field = this.fields.get(fieldId);
				this.clearAllSelections(field);
			}

			// Announce completion
			const announceText = dropType === 'multiple'
				? `Moved ${itemIds.length} images to ${isPreviewDrop ? 'main area' : 'group'}`
				: `Image moved to ${isPreviewDrop ? 'main area' : 'group'}`;

			this.a11y.announce(announceText);
			this.provideFeedback(sourceType, 'success', {
				count: itemIds.length,
				isMultiple: dropType === 'multiple'
			});

			return true;
		}

		clearAllSelections(field) {
			// Clear all selection checkboxes in the entire field container
			const allCheckboxes = field.container.querySelectorAll('[name*="select-item"]');
			allCheckboxes.forEach(checkbox => {
				checkbox.checked = false;
			});

			// Update the select all state
			if (field.selectAll) {
				field.selectAll.checked = false;
				const label = field.selectAll.nextElementSibling;
				if (label) {
					label.textContent = 'Select All';
				}
			}

			// Hide selection controls
			if (field.selectActions) field.selectActions.hidden = true;
			if (field.selectInfo) field.selectInfo.hidden = true;
		}

		cleanupDragOperation() {
			if (this.dragState.dragPreview) {
				this.dragState.dragPreview.remove();
			}

			this.applyDraggingState(false);
			this.clearDropTargetStates();

			// Reset state
			this.dragState.isDragging = false;
			this.dragState.dragPreview = null;
			this.dragState.draggedItems = [];
		}

		/**
		 * Validate if drag can start
		 */
		validateDragStart(element) {
			//TODO: Likely remove. We are already only listening to [draggable] items
			return { canDrag: true };
		}

		/**
		 * Determine what items to drag (single or multiple selection)
		 */
		getDraggedItems(element) {
			const selectedUploads = this.getSelectedUploads(element);
			const primaryUploadId = element.dataset.uploadId;

			// If we have multiple selections and primary is selected, drag all
			if (selectedUploads.length > 1 && selectedUploads.includes(primaryUploadId)) {
				return selectedUploads;
			}

			// Otherwise, just drag the primary item
			return [primaryUploadId];
		}

		/**
		 * Apply/remove dragging visual state to items
		 */
		applyDraggingState(isDragging) {
			this.dragState.draggedItems.forEach(uploadId => {
				const element = document.querySelector(`[data-upload-id="${uploadId}"]`);
				if (element) {
					element.classList.toggle('dragging', isDragging);
				}
			});
		}

		/**
		 * Create drag preview element
		 */
		createDragPreview(originalElement) {
			const { isMultiDrag, draggedItems } = this.dragState;

			if (isMultiDrag) {
				this.dragState.dragPreview = this.createMultiDragPreview(originalElement, draggedItems);
			} else {
				this.dragState.dragPreview = this.createSingleDragPreview(originalElement);
			}

			this.updateDragPreview(this.dragState.startPosition);
			document.body.appendChild(this.dragState.dragPreview);
		}

		/**
		 * Create single item drag preview
		 */
		createSingleDragPreview(originalElement) {
			const preview = originalElement.cloneNode(true);
			preview.dataset.uploadId = preview.dataset.uploadId+'-dragging';
			this.styleDragPreview(preview, false);
			return preview;
		}

		/**
		 * Create multiple items drag preview
		 */
		createMultiDragPreview(originalElement, draggedItems) {
			const container = document.createElement('div');
			container.className = 'drag-preview multi-item';

			// Create stacked effect with up to 3 items
			const displayCount = Math.min(draggedItems.length, 3);

			for (let i = 0; i < displayCount; i++) {
				const uploadId = draggedItems[i];
				const uploadElement = document.querySelector(`[data-upload-id="${uploadId}"]`);

				if (uploadElement) {
					const stackedItem = uploadElement.cloneNode(true);
					stackedItem.dataset.uploadId = uploadId + '_dragging';

					stackedItem.style.cssText = `
				position: absolute;
				top: ${i * 4}px;
				left: ${i * 4}px;
				width: calc(100% - ${i * 4}px);
				height: calc(100% - ${i * 4}px);
				opacity: ${1 - (i * 0.15)};
				transform: rotate(${(i - 1) * 2}deg);
				z-index: ${10 - i};
				border-radius: 4px;
				overflow: hidden;
			`;
					container.appendChild(stackedItem);
				}
			}

			// Add count badge
			if (draggedItems.length > 1) {
				const badge = this.createCountBadge(draggedItems.length);
				container.appendChild(badge);
			}

			this.styleDragPreview(container, true);
			return container;
		}

		isElementInViewport(element) {
			const rect = element.getBoundingClientRect();
			return (
				rect.top >= 0 &&
				rect.left >= 0 &&
				rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
				rect.right <= (window.innerWidth || document.documentElement.clientWidth)
			);
		}


		/**
		 * Style drag preview element
		 */
		styleDragPreview(element, isMulti) {
			const primaryItem = document.querySelector(`[data-upload-id="${this.dragState.primaryItem}"]`);
			const rect = primaryItem?.getBoundingClientRect();

			element.className = `drag-preview${isMulti ? ' multi-item' : ''}`;

			// For multi-item previews, use a consistent size rather than original element size
			const previewSize = isMulti ? { width: 120, height: 120 } : {
				width: rect?.width || 100,
				height: rect?.height || 100
			};

			element.style.cssText = `
		position: fixed;
		top: ${rect?.top || 0}px;
		left: ${rect?.left || 0}px;
		width: ${previewSize.width}px;
		height: ${previewSize.height}px;
		pointer-events: none;
		z-index: 9999;
		opacity: 0.8;
		transform: scale(1.05);
		transition: none;
		box-shadow: 0 8px 25px rgba(0,0,0,0.3);
		border-radius: 8px;
	`;
		}
		/**
		 * Update drag preview position
		 */
		updateDragPreview(position) {
			if (!this.dragState.dragPreview) return;

			// Calculate offset based on preview type and source
			let offset;
			if (this.dragState.sourceType === 'touch') {
				offset = this.dragState.isMultiDrag ? { x: -60, y: -80 } : { x: -50, y: -60 };
			} else {
				offset = this.dragState.isMultiDrag ? { x: 15, y: 15 } : { x: 10, y: 10 };
			}

			const deltaX = position.x - this.dragState.startPosition.x;
			const deltaY = position.y - this.dragState.startPosition.y;

			this.dragState.dragPreview.style.transform = `translate(${deltaX + offset.x}px, ${deltaY + offset.y}px) scale(1.05)`;
		}

		/**
		 * Update drop target highlighting
		 */
		updateDropTarget(elementUnderPointer) {
			// Clear previous target
			if (this.dragState.currentTarget) {
				this.clearDropTargetState(this.dragState.currentTarget);
			}

			// Find valid drop target
			const validTarget = this.findValidDropTarget(elementUnderPointer);

			// Update state
			this.dragState.currentTarget = elementUnderPointer;
			this.dragState.validTarget = validTarget;

			// Apply visual feedback
			if (validTarget) {
				this.applyDropTargetState(validTarget);

				// Haptic feedback for touch
				if (this.dragState.sourceType === 'touch' && navigator.vibrate) {
					const pattern = this.dragState.isMultiDrag ? [25, 10, 25] : [25];
					navigator.vibrate(pattern);
				}
			}
		}

		/**
		 * Find valid drop target from element
		 */
		findValidDropTarget(element) {
			if (!element) return null;

			const postContainer = element.closest('.item-grid.group, .empty-group, .item-grid.preview');
			if (postContainer) {
				const fieldId = this.getFieldId(postContainer);
				if (fieldId === this.dragState.fieldId) {
					return postContainer;
				}
			}

			return null;
		}

		/**
		 * Apply drop target visual state
		 */
		applyDropTargetState(target) {
			target.classList.add('dragover');

			if (this.dragState.isMultiDrag) {
				target.classList.add('multi-drop');
				target.setAttribute('data-item-count', this.dragState.draggedItems.length);
			}
		}

		/**
		 * Clear drop target state from element
		 */
		clearDropTargetState(target) {
			target.classList.remove('dragover', 'multi-drop');
			target.removeAttribute('data-item-count');
		}

		/**
		 * Clear all drop target states
		 */
		clearDropTargetStates() {
			document.querySelectorAll('.dragover').forEach(el => {
				el.classList.remove('dragover', 'multi-drop');
				el.removeAttribute('data-item-count');
			});
		}

		/**
		 * Create count badge for multi-item preview
		 */
		createCountBadge(count) {
			const badge = document.createElement('div');
			badge.className = 'selection-count-badge';
			badge.textContent = count.toString();
			badge.style.cssText = `
			position: absolute;
			top: -8px;
			right: -8px;
			background: var(--accent-primary);
			color: white;
			border-radius: 50%;
			width: 24px;
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			font-weight: bold;
			box-shadow: 0 2px 8px rgba(0,0,0,0.3);
			z-index: 20;
		`;
			return badge;
		}

		/**
		 * Provide feedback for drag operations
		 */
		provideDragFeedback(type) {
			const hapticPatterns = {
				start: [50],
				success: this.dragState.isMultiDrag ? [50, 25, 50, 25, 50] : [50, 25, 50],
				cancel: [100]
			};

			if (this.dragState.sourceType === 'touch' && navigator.vibrate && hapticPatterns[type]) {
				navigator.vibrate(hapticPatterns[type]);
			}
		}

		/**
		 * Provide consistent feedback for different input methods
		 */
		provideFeedback(sourceType, feedbackType, data = {}) {
			const hapticPatterns = {
				success: data.isMultiple ? [50, 25, 50, 25, 50] : [50, 25, 50],
				error: [100, 50, 100]
			};

			if (sourceType === 'touch' && navigator.vibrate && hapticPatterns[feedbackType]) {
				navigator.vibrate(hapticPatterns[feedbackType]);
			}
		}

		handleExternalFileDrop(e, files) {
			const uploadContainer = e.target.closest('.file-upload-container');
			if (uploadContainer && files.length > 0) {
				const fieldId = this.getFieldId(uploadContainer);
				if (fieldId) {
					this.processFiles(fieldId, files);
					this.a11y.announce(`${files.length} file(s) dropped for upload`);
				}
			}
		}

		clearDragoverStates() {
			document.querySelectorAll('.dragover').forEach(el => {
				el.classList.remove('dragover', 'multi-drop');
				el.removeAttribute('data-item-count');
			});
		}
		/*********
		 *  DRAG HANDLERS
		 ********/
		handleDragEnter(e) {
			if (!window.targetCheck(e, '.image.field')) return;

			// Only handle external files
			if (e.dataTransfer.types.includes('Files')) {
				e.preventDefault();
				const uploadContainer = e.target.closest('.file-upload-container');
				if (uploadContainer) {
					uploadContainer.classList.add('dragover');
				}
			}
		}
		handleDragLeave(e) {
			if (!window.targetCheck(e, '.image.field')) return;

			const uploadContainer = e.target.closest('.file-upload-container');
			if (uploadContainer && !uploadContainer.contains(e.relatedTarget)) {
				uploadContainer.classList.remove('dragover');
			}
		}
		handleDragStart(e) {
			if (!window.targetCheck(e, '.image.field')) return;

			const uploadItem = e.target.closest('[data-upload-id]');
			if (!uploadItem) return;

			const result = this.startDragOperation({
				primaryElement: uploadItem,
				sourceType: 'drag',
				startPosition: { x: e.clientX, y: e.clientY },
				event: e
			});

			if (result) {
				e.dataTransfer.setData('text/plain', this.dragState.primaryItem);
				e.dataTransfer.effectAllowed = 'move';
			} else {
				e.preventDefault();
			}
		}

		handleDragOver(e) {
			if (!this.dragState.isDragging) return;
			if (!window.targetCheck(e, '.image.field')) return;

			e.preventDefault();
			this.updateDragOperation({ x: e.clientX, y: e.clientY }, e.target);
		}

		handleDrop(e) {
			if (!window.targetCheck(e, '.image.field')) return;

			e.preventDefault();
			this.clearDragoverStates();

			// Handle external files (new uploads)
			const uploadContainer = e.target.closest('.file-upload-container');
			if (uploadContainer) {
				const files = Array.from(e.dataTransfer.files);
				if (files.length > 0) {
					const fieldId = this.getFieldId(uploadContainer);
					if (fieldId) {
						this.processFiles(fieldId, files);
						this.a11y.announce(`${files.length} file(s) dropped for upload`);
					}
				}
				return;
			}

			// DON'T handle internal drops here - let endDragOperation handle them
			// This prevents double processing
		}

		handleDragEnd(e) {
			if (!this.dragState.isDragging) return;

			// Find the element under the final drop position
			const elementUnderDrop = document.elementFromPoint(
				this.dragState.currentPosition?.x || e.clientX,
				this.dragState.currentPosition?.y || e.clientY
			);

			this.endDragOperation(elementUnderDrop);
		}
		/*********
		 * TOUCH HANDLERS
		 ********/
		handleTouchStart(e) {
			if (!window.targetCheck(e, '.image.field')) return;
			if (this.isTouchOnFormElement(e.target)) {
				return;
			}

			const uploadItem = e.target.closest('[data-upload-id]');
			if (!uploadItem) return;

			const touch = e.touches[0];

			const result = this.startDragOperation({
				primaryElement: uploadItem,
				sourceType: 'touch',
				startPosition: { x: touch.clientX, y: touch.clientY },
				event: e
			});

			if (result) {
				e.preventDefault(); // Prevent scrolling
			}
		}

		isTouchOnFormElement(target) {
			// Check if target is a form element or inside one
			const formElements = [
				'input', 'button', 'label', 'select', 'textarea',
				'.upload-select', '.item-select', '[type="checkbox"]',
				'[type="radio"]', '.form-control'
			];

			return formElements.some(selector => {
				return target.matches(selector) || target.closest(selector);
			});
		}

		handleTouchMove(e) {
			if (!this.dragState.isDragging) return;

			e.preventDefault();
			const touch = e.touches[0];
			const elementUnderTouch = document.elementFromPoint(touch.clientX, touch.clientY);

			this.updateDragOperation({ x: touch.clientX, y: touch.clientY }, elementUnderTouch);
		}

		handleTouchEnd(e) {
			if (!this.dragState.isDragging) return;

			e.preventDefault();
			const touch = e.changedTouches[0];
			const elementUnderTouch = document.elementFromPoint(touch.clientX, touch.clientY);

			this.endDragOperation(elementUnderTouch);
		}

		handleTouchCancel(e) {
			if (this.dragState.isDragging) {
				this.cleanupDragOperation();
				this.a11y.announce('Drag cancelled');
			}
		}


		/*****************************************************
		 *
		 * Handle upload selection
		 *
		 ****************************************************/
		/**
		 * Handle select all functionality
		 */
		handleSelectAll(element, checked = null) {
			const field = this.getField(element);
			if (!field) return;

			// Use element's checked state if not provided
			if (checked === null) {
				checked = element.checked;
			}

			const target = field.previewGrid;
			const previewItems = target.querySelectorAll('[data-upload-id]') || [];

			previewItems.forEach(item => {
				const checkbox = item.querySelector('[name*="select-item"]');
				if (checkbox) {
					checkbox.checked = checked;
				}
			});

			this.updateSelectAll(element);
			this.a11y.announce(checked ? 'All uploads selected' : 'All uploads deselected');

			// Clear last clicked since we're selecting/deselecting all
			this.lastClickedUpload = null;
		}

		updateSelectAll(element) {
			const field = this.getField(element);
			if (!field) return;

			const selected = this.getSelectedUploads(element);
			if (selected.length > 0 ) {
				field.selectActions.hidden = false;
				field.selectInfo.hidden = false;
				field.selectCount.textContent = `${selected.length}`;
			} else {
				field.selectActions.hidden = true;
				field.selectInfo.hidden = true;
			}
			let selectAll = selected.length === field.container.querySelectorAll('.item-grid.preview .upload-item').length;
			field.selectAll.checked = selectAll;
			field.selectAll.nextElementSibling.textContent = (selectAll) ? 'Clear Selection' : 'Select All';
		}

		getSelectedUploads(element) {
			// Starting from the provided element, we get the closest container of items
			let grid = element.closest(':has(.item-grid)')?.querySelector('.item-grid') ??
				(element.classList.contains('item-grid') ? element : this.getField(element).previewGrid);

			// We check for any selected checkboxes, and return an array of uploadIds
			let uploads = [];
			grid.querySelectorAll('[name*="select-item"]:checked').forEach(checkbox => {
				let uploadItem = checkbox.closest('[data-upload-id]'); // FIX 6: Get the element, not ID
				if (uploadItem) {
					uploads.push(uploadItem.dataset.uploadId); // FIX 7: Get the ID from dataset
				}
			});
			return uploads;
		}

		/**
		 * Handle individual upload selection
		 */
		handleUploadSelection(element) {
			// Update the select all state
			this.updateSelectAll(element);

			// Track this as the last clicked upload
			this.lastClickedUpload = this.getUploadId(element);

		}

		handleRangeSelection(currentElement, event) {
			const field = this.getField(currentElement);
			if (!field) return;

			const currentUploadId = this.getUploadId(currentElement);
			if (!currentUploadId || !this.lastClickedUpload) return;

			// Get all upload items in the preview grid
			const previewGrid = field.previewGrid;
			const allItems = Array.from(previewGrid.querySelectorAll('[data-upload-id]'));

			// Find indices of first and current items
			const firstIndex = allItems.findIndex(item =>
				item.dataset.uploadId === this.lastClickedUpload
			);
			const currentIndex = allItems.findIndex(item =>
				item.dataset.uploadId === currentUploadId
			);

			if (firstIndex === -1 || currentIndex === -1) return;

			// Determine range (handle both directions)
			const startIndex = Math.min(firstIndex, currentIndex);
			const endIndex = Math.max(firstIndex, currentIndex);

			// Select all items in range (including the clicked one!)
			for (let i = startIndex; i <= endIndex; i++) {
				const item = allItems[i];
				const checkbox = item.querySelector('[name*="select-item"]');
				if (checkbox) {
					checkbox.checked = true;
				}
			}

			currentElement.checked = true;
			// Update selection UI
			this.updateSelectAll(currentElement);

			// Announce the range selection
			const selectedCount = endIndex - startIndex + 1;
			this.a11y.announce(`Selected ${selectedCount} items in range`);

			// Update the last clicked item to the current one
			this.lastClickedUpload = currentUploadId;
		}

		removeSelection(button) {
			let fieldId = this.getFieldId(button);

			const selectedUploads = this.getSelectedUploads(button);
			if (selectedUploads.length === 0) {
				this.notify('No uploads selected', 'warning');
				return;
			}

			selectedUploads.forEach(upload => {
				this.removeUpload(fieldId, upload);
			});
		}


		/*****************************************
		 *
		 *		META
		 *
		 ****************************************/
		/**
		 * Schedule debounced metadata update
		 */

		/**
		 * Send metadata update to server
		 */
		getUploadMeta() {
			let meta = {};
			this.uploads.forEach(upload => {
				let item = {
					id: upload.id,		//either the generated ID, or the attachment id
					meta: upload.meta
				};
				if (upload.operationId) {
					item.operationId = upload.operationId;
				}
				meta[upload.id] = item;
			});
			return meta;
		}
		async maybeUpdateImageMeta() {
			let metaData = this.getUploadMeta();
			let changes = window.getDifferences.map(this.oldUploads, metaData);


			if (window.isEmptyObject(changes)) return;

			try {
				const operation = {
					endpoint: 'uploads/meta',
					method: 'POST',
					title: 'Saving image meta',
					popup: `Sending ${changes.length} changes to server...`,
					canMerge: true,
					type: 'image_meta',
					headers: { 'action_nonce': jvbSettings.dash},
					user: jvbSettings.currentUser,
					field: field.id,
					data: changes,
				}

				let dependencies = new Set();
				for (const [uploadId, settings] of metaData) {
					if (settings.operationId) {
						dependencies.add(settings.operationId);
					}
				}
				if (dependencies.size > 0) {
					operation['depends_on'] = [ ... dependencies];
				}

				let operationId = this.queue.addToQueue(operation);

			} catch (error) {
				throw error;
			} finally {
				this.oldUploads = this.uploads;
			}
		}

		/**
		 * Process pending metadata when upload completes
		 */
		processPendingMetadata(uploadId) {
			if (!this.metadataPending.has(uploadId)) return;

			const pendingMetadata = this.metadataPending.get(uploadId);
			if (Object.keys(pendingMetadata).length === 0) return;

			// Send all pending metadata at once
			this.sendMetadataUpdate(uploadId, pendingMetadata);
			this.metadataPending.delete(uploadId);
		}
		/********************************************************************
		 *
		 * Queueing and Updates
		 *
		 *******************************************************************/

		async queueUpload(fieldId) {
			// Cache data before queuing
			this.cachePostData(fieldId);

			const field = this.fields.get(fieldId);
			if (!field?.uploads) return;

			const operationData = this.prepareUploadData(fieldId);

			if (!operationData || !operationData.data) {
				console.warn('No operation data prepared for field:', fieldId);
				return;
			}

			// At this point, we're in the initial upload phase - just use field.uploads
			let uploadIds = [];

			if (field.uploads && field.uploads.size > 0) {
				uploadIds = Array.from(field.uploads);
			} else {
				console.warn('No uploads found in field.uploads for field:', fieldId);
			}

			// Validate we have uploads to process
			if (uploadIds.length === 0) {
				console.warn('No uploads found to queue for field:', fieldId);
				return;
			}

			uploadIds.forEach(upload => {
				this.updateUploadStatus(upload, 'uploading', 'Uploading image');
			});
			this.a11y.announce(`Queuing for upload`);

			const operation = {
				endpoint: "uploads",
				method: "POST",
				data: operationData.data,
				title: this.getOperationTitle(field, uploadIds),
				popup: `Uploading ${uploadIds.length} file(s)...`,
				canMerge: false,
				type: field.groupable ? 'batch_creation' : 'image_upload',
				headers: { 'action_nonce': jvbSettings.dash },
				user: jvbSettings.currentUser,
				append: '_upload',
				onUpdate: (operation) => this.handleUpdate(operation),
				onComplete: (operation) => this.handleCompletion(operation)
			};

			try {
				const operationId = await this.queue.addToQueue(operation);

				this.activeOperations.set(operationId, {
					uploadIds: uploadIds,
					fieldId: field.id,
					status: 'queued',
					type: field.groupable ? 'batch_creation' : 'image_upload',
					startTime: Date.now(),
					retryCount: 0,
				});

				// Store operation ID in uploads
				for (const uploadId of uploadIds) {
					const upload = this.uploads.get(uploadId);
					upload.operationId = operationId;
					upload.attachmentId = null;
					this.cacheUpload(upload);
				}

				if (!field.operationId) {
					field.operationId = new Set();
				}
				field.operationId.add(operationId);
				this.fields.set(field.id, field);
				this.cachePostData(fieldId);

				this.notify(`Queued ${uploadIds.length} file(s) for upload`, 'info');
				return operationId;
			} catch (error) {
				throw error;
			}
		}

		prepareUploadData(fieldId) {
			const field = this.fields.get(fieldId);
			const formData = new FormData();

			// Standard field metadata
			formData.append('content', field.content);
			formData.append('mode', field.mode);
			formData.append('field_name', field.container.dataset.field);
			formData.append('field_id', field.id);
			formData.append('type', field.type);
			if (field.container.dataset.postId) {
				formData.append('post_id', field.container.dataset.postId);
			} else if (field.container.dataset.termId) {
				formData.append('term_id', field.container.dataset.termId);
			}

			let index = 0;

			let uploadMap = [];
			if (field.uploads && field.uploads.size > 0) {
				field.uploads.forEach(uploadId => {
					const upload = this.uploads.get(uploadId);
					if (upload) {
						const file = upload.processedFile || upload.originalFile;
						formData.append(`files[${index}]`, file);
						uploadMap.push(uploadId);

						index++;
					}
				});
			} else {
				console.warn('No uploads found in field.uploads for field:', fieldId);
			}

			formData.append('upload_map', uploadMap);
			console.log('Gathered data:');
			for (var [key, value] of formData.entries()) {
				console.log(key, value);
			}
			return {data: formData};
		}

		/**
		 * Handle queue updates
		 */
		handleUpdate(queueItem) {
			console.log('Updating item in Uploader...', queueItem);

			const operation = this.activeOperations.get(queueItem.id);

			if (queueItem.status !== operation.status) {
				const mapping = this.statusMapping[queueItem.status] || {
					status: queueItem.status,
					message: queueItem.status
				};

				// Update progress calculation
				const progress = this.calculateProgress(queueItem);
				operation.status = queueItem.status;
				operation.uploadIds.forEach(id => {
					const upload = this.uploads.get(id);
					upload.status = mapping.status;
					upload.progress = {
						percent: progress,
						message: mapping.message,
						serverStatus: queueItem.status
					};

					this.uploads.set(id, upload);
					this.cacheUpload(upload);
					this.updateImageUI(id);
				});

				if (operation.type === 'image_upload') {
					//TODO: Gather any metadata changes
					//TODO: Add changes to queue
					//TODO: Remove preview items
					//TODO: Send onUpdate to caller
				}
			}
		}


		/**
		 * Handle operation completion
		 */
		handleCompletion(queueItem) {
			console.log('Completion item: ', queueItem);
			const operation = this.activeOperations.get(queueItem.id);
			const mapping = this.statusMapping['completed'] || {
				status: 'completed',
				message: 'Everything\'s ready!'
			};

			console.log('Grabbed operation: ', operation);
			// Update progress calculation
			const progress = this.calculateProgress(queueItem);
			operation.status = 'completed';
			operation.uploadIds.forEach(id => {
				const upload = this.uploads.get(id);

				upload.status = mapping.status;
				upload.progress = {
					percent: progress,
					message: mapping.message,
					serverStatus: 'completed'
				};

				this.uploads.set(id, upload);
				this.cacheUpload(upload);
				this.updateImageUI(id);
			});


			if (operation.type === 'image_upload') {
				//TODO: Gather any metadata changes
				//TODO: Add changes to queue
				//TODO: Remove preview items
				//TODO: Send onUpdate to caller
			}
			// const operation = this.activeOperations.get(item.id);
			// if (!operation || operation.type !== 'batch') return;
			//
			// if (item.status === 'completed' && item.result?.success) {
			// 	const responseData = item.result.data || [];
			// 	const isArray = Array.isArray(responseData);
			//
			// 	operation.uploadIds.forEach((uploadId, index) => {
			// 		const upload = this.uploads.get(uploadId);
			// 		if (upload) {
			// 			const fileData = isArray ? responseData[index] : responseData;
			//
			// 			if (fileData) {
			// 				upload.uploadedData = {
			// 					attachment_id: fileData.attachment_id,
			// 					url: fileData.url,
			// 					file_path: fileData.file_path,
			// 					metadata: fileData.metadata || {}
			// 				};
			//
			// 				// Store attachment ID and clear operation ID
			// 				upload.attachmentId = fileData.attachment_id;
			// 				upload.operationId = null; // Clear since upload is complete
			//
			// 				this.updateUploadStatus(upload.id, 'uploaded', 'Upload complete!');
			// 				this.updateFieldValue(operation.fieldId, upload);
			//
			// 				// Process any pending metadata updates
			// 				this.processPendingMetadata(uploadId);
			// 			} else {
			// 				this.updateUploadStatus(upload.id, 'error', 'No data received from server');
			// 			}
			// 		}
			// 	});
			//
			// 	const successCount = operation.uploadIds.filter(id =>
			// 		this.uploads.get(id)?.status === 'uploaded'
			// 	).length;
			//
			// 	this.a11y.announce(`Successfully uploaded ${successCount} of ${operation.uploadIds.length} files`);
			// 	this.notify(`Successfully uploaded ${successCount} file(s)`, 'success');
			//
			// 	const field = this.fields.get(operation.fieldId);
			// 	if (field?.onUploadComplete) {
			// 		field.onUploadComplete({
			// 			...item.result,
			// 			uploadedFiles: responseData,
			// 			fieldId: operation.fieldId
			// 		});
			// 	}
			// }
			//
			this.activeOperations.delete(queueItem.id);
			// this.updateFieldUI(operation.fieldId);
		}



		/**
		 * Calculate progress from queue item
		 */
		calculateProgress(queueItem) {
			const progressMap = {
				'queued': 5,
				'pending': 15,
				'processing': 50,
				'uploading': 75,
				'completed': 100,
				'failed': 0,
				'failed_permanent': 0
			};

			let baseProgress = progressMap[queueItem.status] || 0;

			// Add incremental progress if available
			if (queueItem.progress) {
				const increment = queueItem.progress.percentage || 0;
				baseProgress = Math.min(100, baseProgress + (increment * 0.8));
			}

			return Math.round(baseProgress);
		}

		/**
		 * Generate operation title for UI
		 */
		getOperationTitle(field, uploads) {
			const fileCount = uploads.length;
			const fieldTypeNames = {
				'single': 'Image',
				'gallery': 'Gallery',
			};

			const typeName = fieldTypeNames[field.type] || 'File';

			if (fileCount === 1) {
				return `Uploading ${typeName}`;
			} else {
				return `Uploading ${fileCount} ${typeName}s`;
			}
		}


		/******************************************************************
		 *
		 * UI
		 *
		 *****************************************************************/



		/**
		 * Update upload status
		 */
		updateUploadStatus(uploadId, status, message = '') {
			console.log('Updating upload status');
			const upload = this.uploads.get(uploadId);
			if (!upload) return;
			console.log('Updating ', upload);
			console.log('Status: ', status);
			console.log('Message: ', message);

			upload.status = status;
			upload.progress = upload.progress || {};
			upload.progress.message = message;

			if (status === 'uploaded') {
				upload.progress.percent = 100;
			} else if (status === 'error') {
				upload.error = message;
			}

			this.updateImageUI(uploadId);
		}

		/**
		 * Get status icon
		 */
		getStatusIcon(status) {
			return window.getIcon(this.queue.icons[status]);
		}

		/*******************************************************************
		 *
		 * Cache Handling
		 *
		 ******************************************************************/

		/**
		 * Resume pending uploads from previous session
		 */
		async resumePendingUploads() {
			return;
			//TODO: Old system
			try {
				console.log('Checking for pending uploads...');
				const pendingUploads = await this.cache.getImagesPendingByOperation();

				if (pendingUploads.length > 0) {
					console.log(`Found ${pendingUploads.length} pending uploads`);

					// Group by field
					const fieldGroups = new Map();
					pendingUploads.forEach(upload => {
						const fieldId = upload.metadata?.uploadConfig?.fieldId;
						if (fieldId) {
							if (!fieldGroups.has(fieldId)) {
								fieldGroups.set(fieldId, []);
							}
							fieldGroups.get(fieldId).push(upload);
						}
					});

					// Show selective restore for each field
					for (const [fieldId, uploads] of fieldGroups) {
						await this.showRestoreNotification(fieldId, uploads);
					}
				}
			} catch (error) {
				console.error('Failed to resume pending uploads:', error);
			}
		}

		async showRestoreNotification(fieldId, cachedUploads) {
			const field = this.fields.get(fieldId);
			if (!field) {
				console.warn(`Cannot show restore for unknown field: ${fieldId}`);
				return;
			}

			// Pre-fetch preview images for all cached uploads
			console.log(`Pre-fetching ${cachedUploads.length} preview images...`);
			const uploadsWithPreviews = await this.fetchPreviewsForCachedUploads(cachedUploads);

			// Create restore notification with actual preview images
			const notification = this.createSelectiveRestoreNotification(fieldId, uploadsWithPreviews);

			// Insert into field container
			field.container.insertBefore(notification, field.container.firstChild);

			// Auto-hide after 60 seconds if no interaction
			// setTimeout(() => {
			// 	if (notification.parentNode) {
			// 		this.dismissCacheCheck(fieldId);
			// 	}
			// }, 60000);
		}

		async fetchPreviewsForCachedUploads(cachedUploads) {
			const uploadsWithPreviews = [];

			for (const upload of cachedUploads) {
				const uploadWithPreview = { ...upload };

				try {
					// Get cached image data
					const cachedFile = await this.cache.getImagePending(upload.id);

					if (cachedFile && cachedFile.imageData) {
						// Create blob from cached data
						const blob = new Blob([cachedFile.imageData], {
							type: cachedFile.metadata?.type || 'image/jpeg'
						});

						// Create preview URL
						uploadWithPreview.previewUrl = URL.createObjectURL(blob);

						console.log(`Created preview for ${upload.metadata?.originalName || upload.id}`);
					} else {
						console.warn(`No cached image data found for upload ${upload.id}`);
						uploadWithPreview.previewUrl = null;
					}
				} catch (error) {
					console.error(`Failed to fetch preview for upload ${upload.id}:`, error);
					uploadWithPreview.previewUrl = null;
				}

				uploadsWithPreviews.push(uploadWithPreview);
			}

			return uploadsWithPreviews;
		}

		createSelectiveRestoreNotification(fieldId, cachedUploads) {
			let notification = window.getTemplate('restoreNotification');
			notification.dataset.fieldId = fieldId;

			notification.querySelector('.restore-details').textContent = `We found ${cachedUploads.length} image(s) from your previous session. You can restore them here if you'd like, or you can start over.`;

			let field = this.fields.get(fieldId);

			let container = notification.querySelector('.item-grid');
			// ${cachedUploads.map((upload, index) => this.createRestoreItemHTML(upload, index)).join('')}
			cachedUploads.forEach((upload, index) => {
				let item = window.getTemplate('restoreItem');

				const fileName = upload.metadata?.originalName || `Upload ${index + 1}`;
				const fileSize = upload.metadata?.originalSize || 0;
				const hasPreview = upload.previewUrl;

				let preview = item.querySelector('.preview');
				if (hasPreview) {
					preview.querySelector('div').remove();
					let img = preview.querySelector('img');
					[
						img.src,
						img.alt
					] = [
						upload.previewUrl,
						fileName
					];
				} else {
					preview.querySelector('img').remove();
				}

				[
					item.dataset.id,
					item.querySelector('.name').textContent,
					item.querySelector('input').id,
					item.querySelector('input').name,
					item.htmlFor
				] = [
					upload.id,
					fileName,
					`restore-${upload.id}`,
					`restore-${upload.id}`,
					`restore-${upload.id}`,
				];

				container.append(item);
			});

			// Attach event listeners
			this.attachRestoreEventListeners(notification, fieldId, cachedUploads);

			return notification;
		}


		attachRestoreEventListeners(notification, fieldId, cachedUploads) {
			const selectAll = notification.querySelector('.select-all-restore');
			const selectNone = notification.querySelector('.select-none-restore');
			const restoreSelected = notification.querySelector('.restore-selected');
			const deleteCache = notification.querySelector('.delete-cache');
			const dismiss = notification.querySelector('.dismiss-cache-check');

			// Cleanup function for preview URLs
			const cleanupPreviewUrls = () => {
				cachedUploads.forEach(upload => {
					if (upload.previewUrl && upload.previewUrl.startsWith('blob:')) {
						URL.revokeObjectURL(upload.previewUrl);
					}
				});
			};

			// Select all/none functionality
			selectAll?.addEventListener('click', () => {
				notification.querySelectorAll('.restore-checkbox').forEach(cb => cb.checked = true);
			});

			selectNone?.addEventListener('click', () => {
				notification.querySelectorAll('.restore-checkbox').forEach(cb => cb.checked = false);
			});

			// Restore selected items
			restoreSelected?.addEventListener('click', async () => {
				const selectedCheckboxes = notification.querySelectorAll('.restore-checkbox:checked');
				const selectedIds = Array.from(selectedCheckboxes).map(cb =>
					cb.id.replace('restore-', '')
				);

				if (selectedIds.length === 0) {
					this.notify('No items selected for restore', 'warning');
					return;
				}

				// Restore selected uploads
				const selectedUploads = cachedUploads.filter(upload =>
					selectedIds.includes(upload.id)
				);

				await this.restoreSelectedUploads(fieldId, selectedUploads);

				// Cleanup preview URLs
				cleanupPreviewUrls();

				// Remove notification
				notification.remove();

				this.notify(`Restored ${selectedIds.length} item(s)`, 'success');
			});

			// Delete all cache
			deleteCache?.addEventListener('click', async () => {
				if (confirm('This will permanently delete all cached data. Are you sure?')) {
					await this.clearFieldCache(fieldId);

					// Cleanup preview URLs
					cleanupPreviewUrls();

					notification.remove();
					this.notify('Cache cleared', 'info');
				}
			});

			// Dismiss notification
			dismiss?.addEventListener('click', () => {
				// Cleanup preview URLs
				cleanupPreviewUrls();

				notification.remove();
			});
		}

		async restoreSelectedUploads(fieldId, selectedUploads) {
			const field = this.fields.get(fieldId);
			if (!field) return;

			let operations = new Set();
			for (const cachedUpload of selectedUploads) {
				try {
					console.log('upload', cachedUpload);
					const upload = await this.getCachedUpload(fieldId, cachedUpload);
					operations.add(upload.operationId);

					// Add to field
					if (!field.uploads) field.uploads = new Set();
					field.uploads.add(upload.id);


					// Add to main preview (not auto-grouped)
					this.addImageToPost(upload.id, field.previewGrid, true);

				} catch (error) {
					console.error(`Failed to restore upload ${cachedUpload.id}:`, error);
				}
			}
			field.operationId = operations;
			this.fields.set(fieldId, field);

			// Update field UI
			this.maybeLockUploads(fieldId);

			if (field.type === 'groupable') {
				field.container.querySelector('.group-display').hidden = false;
			}
		}

		async clearFieldCache(fieldId) {
			const field = this.fields.get(fieldId);
			if (!field) return;

			try {
				// 1. Clear IndexedDB stores for this field
				await this.clearFieldIndexedDB(fieldId);

				// 2. Clear memory cache for field-related data
				this.clearFieldMemoryCache(fieldId);

				// 3. Clear HTTP headers related to field uploads
				this.clearFieldHttpHeaders(fieldId);

				// 4. Clear any pending metadata updates
				this.clearFieldMetadata(fieldId);

				// 5. Clear performance monitoring data
				this.clearFieldPerformanceData(fieldId);

				console.log(`Comprehensive cache clearing completed for field: ${fieldId}`);

			} catch (error) {
				console.error(`Failed to clear field cache for ${fieldId}:`, error);
				throw error;
			}
		}

		/**
		 * Clear IndexedDB data specific to a field
		 */
		async clearFieldIndexedDB(fieldId) {
			if (!this.cache.imageDB) return;

			try {
				// Clear pending images for this field
				const pendingImages = await this.cache.getImagesPendingByField(fieldId);

				for (const image of pendingImages) {
					await this.cache.removeImagePending(image.id);
				}

				// Clear group data for this field
				await this.cache.clearGroupsForField(fieldId);

				// Clear any cached field groups
				const cacheKey = `field_groups_${fieldId}`;
				await this.cache.removeCacheItem(cacheKey);

				console.log(`Cleared IndexedDB data for field: ${fieldId}`);

			} catch (error) {
				console.error(`Failed to clear IndexedDB for field ${fieldId}:`, error);
			}
		}

		/**
		 * Clear memory cache data related to a field
		 */
		clearFieldMemoryCache(fieldId) {
			if (!this.cache._memoryCache) return;

			const keysToRemove = [];

			// Find all memory cache keys related to this field
			for (const [key, value] of this.cache._memoryCache) {
				// Check for field-specific cache keys
				if (key.includes(fieldId) ||
					key.startsWith(`pending_image_`) ||
					key.startsWith(`post_${fieldId}_`) ||
					key.startsWith(`upload_${fieldId}_`) ||
					(value && value.fieldId === fieldId)) {
					keysToRemove.push(key);
				}
			}

			// Remove identified keys
			keysToRemove.forEach(key => {
				this.cache._memoryCache.delete(key);
			});

			console.log(`Cleared ${keysToRemove.length} memory cache entries for field: ${fieldId}`);
		}

		/**
		 * Clear HTTP headers related to field operations
		 */
		clearFieldHttpHeaders(fieldId) {
			if (!this.cache.httpHeaders) return;

			const headersToRemove = [];

			// Find HTTP headers related to upload operations for this field
			for (const [key, headerData] of this.cache.httpHeaders) {
				if (key.includes('uploads') ||
					key.includes(fieldId) ||
					headerData.url?.includes('uploads')) {
					headersToRemove.push(key);
				}
			}

			// Remove identified headers
			headersToRemove.forEach(key => {
				this.cache.httpHeaders.delete(key);
			});

			// Force save the updated headers
			if (headersToRemove.length > 0) {
				this.cache.saveHttpHeaders();
				console.log(`Cleared ${headersToRemove.length} HTTP headers for field: ${fieldId}`);
			}
		}

		/**
		 * Clear pending metadata updates for a field
		 */
		clearFieldMetadata(fieldId) {
			if (!this.metadataUpdateTimers || !this.metadataPending || !this.metadataQueue) return;

			const field = this.fields.get(fieldId);
			if (!field || !field.uploads) return;

			// Clear metadata timers for uploads in this field
			for (const uploadId of field.uploads) {
				// Clear update timers
				for (const [timerKey, timer] of this.metadataUpdateTimers) {
					if (timerKey.startsWith(uploadId)) {
						clearTimeout(timer);
						this.metadataUpdateTimers.delete(timerKey);
					}
				}

				// Clear pending metadata
				this.metadataPending.delete(uploadId);
				this.metadataQueue.delete(uploadId);
			}

			console.log(`Cleared metadata updates for field: ${fieldId}`);
		}

		/**
		 * Clear performance monitoring data for a field
		 */
		clearFieldPerformanceData(fieldId) {
			if (!this.performanceMonitor || !this.performanceMonitor.metrics) return;

			const field = this.fields.get(fieldId);
			if (!field || !field.uploads) return;

			// Clear performance metrics for uploads in this field
			for (const uploadId of field.uploads) {
				this.performanceMonitor.metrics.delete(uploadId);
			}

			console.log(`Cleared performance data for field: ${fieldId}`);
		}

		/**
		 * Reset field to its initial state
		 */
		resetFieldToInitialState(fieldId) {
			const field = this.fields.get(fieldId);
			if (!field) return;

			// Reset field properties to initial values
			field.uploads = new Set();
			field.posts = new Map(); // Replace groups with posts
			field.status = 'ready';

			// Clear any operation IDs
			for (const [operationId, operation] of this.activeOperations) {
				if (operation.fieldId === fieldId) {
					this.activeOperations.delete(operationId);
				}
			}

			// Reset file input
			if (field.input) {
				field.input.value = '';
			}

			// Reset hidden value input
			if (field.hiddenValue) {
				field.hiddenValue.value = '';
			}

			// Clear any progress indicators
			const progressBars = field.container.querySelectorAll('.progress');
			progressBars.forEach(bar => bar.remove());

			// Reset drag state for this field
			this.initializeDragState();

			console.log(`Reset field ${fieldId} to initial state`);
		}


		/**
		 * Handle start over action
		 */
		async clearCache(fieldId) {
			// Show confirmation dialog
			const confirmed = await this.showStartOverConfirmation();

			if (!confirmed) return;

			try {
				this.a11y.announce('Starting over - clearing all cached data');

				// Clear all uploads for this field (existing functionality)
				this.cleanField(fieldId);

				// Remove notification
				this.dismissCacheCheck(fieldId);

				// Hide group display
				const field = this.fields.get(fieldId);
				const groupDisplay = field?.container.querySelector('.group-display');
				if (groupDisplay) {
					groupDisplay.hidden = true;
				}

				// Reset field to initial state
				this.resetFieldToInitialState(fieldId);

				this.notify('Started fresh - all cached data cleared', 'success');

			} catch (error) {
				this.error.log(error, {
					component: 'UploadManager',
					action: 'clearCache',
					fieldId: fieldId
				});

				this.notify('Failed to clear cache - please try again', 'error');
			}
		}

		/**
		 * Show confirmation dialog for start over
		 */
		async showStartOverConfirmation() {
			return new Promise((resolve) => {
				let dialog;

				if (window.getTemplate) {
					dialog = window.getTemplate('startOverConfirmation');
				} else {
					// Fallback if template system not available
					dialog = document.createElement('dialog');
					dialog.className = 'start-over-confirmation';
					dialog.innerHTML = `
					<div class="confirmation-content">
						<h3>Start Over?</h3>
						<p>This will permanently delete:</p>
						<ul>
							<li>All uploaded images</li>
							<li>All created groups</li>
							<li>All metadata and settings</li>
						</ul>
						<p><strong>This cannot be undone!</strong></p>
						<div class="confirmation-actions">
							<button type="button" class="cancel-start-over">Cancel</button>
							<button type="button" class="confirm-start-over danger">Yes, Start Over</button>
						</div>
					</div>
				`;
				}

				document.body.appendChild(dialog);
				dialog.showModal();

				// Handle buttons
				dialog.querySelector('.confirm-start-over').addEventListener('click', () => {
					dialog.close();
					dialog.remove();
					resolve(true);
				});

				dialog.querySelector('.cancel-start-over').addEventListener('click', () => {
					dialog.close();
					dialog.remove();
					resolve(false);
				});

				// Handle escape key and backdrop click
				dialog.addEventListener('close', () => {
					dialog.remove();
					resolve(false);
				});

				// Focus the cancel button by default (safer option)
				dialog.querySelector('.cancel-start-over').focus();
			});
		}

		/**
		 * Dismiss restore notification
		 */
		dismissCacheCheck(fieldId) {
			const field = this.fields.get(fieldId);
			const notification = field?.container.querySelector('.restore-notification');

			if (notification) {
				// Cleanup any preview URLs before removing
				const previewImages = notification.querySelectorAll('.restore-preview-image');
				previewImages.forEach(img => {
					if (img.src && img.src.startsWith('blob:')) {
						URL.revokeObjectURL(img.src);
					}
				});

				// Fade out animation
				notification.style.opacity = '0';
				notification.style.transform = 'translateY(-10px)';

				setTimeout(() => {
					notification.remove();
				}, 300);
			}
		}
		/**
		 * Cache upload
		 */
		async cacheUpload(upload) {
			return;
			//TODO: from old cache
			try {
				// Store group relationships alongside upload
				const fieldId = upload.fieldId;
				const field = this.fields.get(fieldId);

				const cacheData = {
					...upload.metadata,
					uploadConfig: {
						fieldId: upload.fieldId,
						content: field?.content,
						isGroupable: field?.type === 'groupable'
					},
					originalName: upload.originalFile?.name || 'unknown_file',
					originalType: upload.originalFile?.type || 'image/jpeg',
					originalSize: upload.originalFile?.size || 0
				};

				return await this.cache.storeImagePending(
					upload.id,
					upload.processedFile,
					cacheData,
					upload.operationId
				);
			} catch (error) {
				console.error('Failed to cache upload:', error);
				return false;
			}
		}
		async getCachedUpload(fieldId, cachedUpload) {
			return;
			//TODO: from old cache
			try {
				let operation;
				if (this.queue.queue.has(cachedUpload.operationId)) {
					operation = this.queue.queue.get(cachedUpload.operationId);
				} else {
					operation = await this.queue.fetchOperation(cachedUpload.operationId);
				}

				// Recreate upload object with proper structure
				const upload = {
					id: cachedUpload.id,
					fieldId: fieldId,
					originalFile: null, // Will be set below
					status: operation?.status ?? 'cached',
					progress: { percent: 100, message: 'Restored from cache' },
					meta: cachedUpload.meta || {}, // Use 'meta' instead of 'metadata'
					preview: null, // Will be regenerated
					createdAt: cachedUpload.timestamp || Date.now(),
					cachedData: cachedUpload,
					operationId: cachedUpload.operationId
				};

				// Retrieve actual file data from cache
				const cachedFile = await this.cache.getImagePending(cachedUpload.id);

				if (cachedFile && cachedFile.imageData) {
					const fileName = cachedUpload.metadata?.originalName ||
						cachedFile.metadata?.originalName ||
						'restored_file';
					const fileType = cachedFile.metadata?.type || 'image/jpeg';

					// Convert cached data back to File object
					upload.processedFile = new File(
						[cachedFile.imageData],
						fileName,
						{
							type: fileType,
							lastModified: cachedUpload.timestamp || Date.now()
						}
					);

					// Create a minimal originalFile object for UI compatibility
					upload.originalFile = {
						name: fileName,
						type: fileType,
						size: cachedFile.imageData.byteLength || cachedFile.imageData.size || 0,
						lastModified: cachedUpload.timestamp || Date.now()
					};

					// Create preview URL for immediate display
					upload.preview = URL.createObjectURL(upload.processedFile);
				} else {
					// If we can't get the cached file, create minimal fallback
					const fileName = cachedUpload.metadata?.originalName || 'restored_file';
					upload.originalFile = {
						name: fileName,
						type: 'image/jpeg',
						size: 0,
						lastModified: cachedUpload.timestamp || Date.now()
					};

					// Create a placeholder preview
					upload.preview = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2Y1ZjVmNSIvPjx0ZXh0IHg9IjUwIiB5PSI1MCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEyIiBmaWxsPSIjOTk5IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSI+Tm8gUHJldmlldz48L3RleHQ+PC9zdmc+';
				}

				// Store upload in the uploads map
				this.uploads.set(upload.id, upload);

				return upload;
			} catch (error) {
				console.error('Failed to get cached upload:', error);
				throw error;
			}
		}

		async cachePostData(fieldId) {
			return;
			//TODO: From old cache
			let field = this.fields.get(fieldId);
			if (!field || field.type !== 'groupable') return;

			const key = `image_field_${fieldId}`;
			await this.cache.setItem(key, field.posts);
		}

		async getCachedPostData(fieldId) {
			const key = `image_field_${fieldId}`;
			return await this.cache.getItem(key);
		}

		async deleteCachedPostData(fieldId) {
			const key = `image_field_${fieldId}`;
			return await this.cache.removeCacheItem(key);
		}

		/**
		 * Cleanup upload
		 */
		async cleanupUpload(upload) {
			try {
				if (this.cache) {
					await this.cache.removeImagePending(upload.id);

					// Clear field groups cache if needed
					if (upload.fieldId) {
						const field = this.fields.get(upload.fieldId);
						if (field?.type === 'groupable') {
							await this.cacheFieldGroups(upload.fieldId);
						}
					}
				}
			} catch (error) {
				console.error('Failed to cleanup upload:', error);
			}
		}

		/******************************************************************
		 *
		 * Utility Methods
		 *
		 *****************************************************************/

		/**
		 * Helper: Check if an upload item is currently selected
		 */
		isUploadSelected(uploadId) {
			return document.querySelector(`[data-upload-id="${uploadId}"]`).checked;
		}

		getField(element) {
			return this.fields.get(this.getFieldId(element));
		}

		/**
		 * Get field ID from any element within the field
		 */
		getFieldId(element) {
			// Try multiple approaches to find the field ID

			// 1. Direct data attribute
			if (element.dataset.fieldId) {
				return element.dataset.fieldId;
			}

			// 2. Look up the DOM tree for field containers
			const fieldContainer = element.closest('[data-field-id]');
			if (fieldContainer) {
				return fieldContainer.dataset.fieldId ||
					fieldContainer.dataset.field ||
					fieldContainer.dataset.name;
			}
			return null;
		}

		getFieldStatus(fieldId) {
			const field = this.fields.get(fieldId);
			if (!field) return null;

			const uploads = Array.from(field.uploads || []).map(id => this.uploads.get(id));

			return {
				fieldId,
				type: field.type,
				uploadCount: uploads.length,
				ready: uploads.filter(u => u.status === 'processed').length,
				uploading: uploads.filter(u => u.status === 'uploading').length,
				completed: uploads.filter(u => u.status === 'uploaded').length,
				failed: uploads.filter(u => u.status === 'error').length
			};
		}

		/**
		 * Get upload ID from element
		 */
		getUploadId(element) {
			const uploadItem = element.closest('[data-upload-id]');
			return uploadItem?.dataset.uploadId;
		}

		createFieldId(field) {
			let input = field.querySelector('input[type=file]');
			return input.id || input.name || `img_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`;
		}

		generateUploadId() {
			return `upload_${this.generateID()}`;
		}
		generateID() {
			return `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
		}

		validateFile(file, field) {
			// Type validation
			if (!this.settings.allowedTypes.includes(file.type)) {
				this.notify(`Invalid file type: ${file.type}`, 'error');
				return false;
			}

			// Size validation
			if (file.size > this.settings.maxFileSize) {
				this.notify(`File too large: ${this.formatBytes(file.size)}`, 'error');
				return false;
			}

			return true;
		}

		checkFieldLimits(fieldId, newFileCount) {
			const field = this.fields.get(fieldId);
			const currentCount = field.uploads ? field.uploads.size : 0;

			return (currentCount + newFileCount) <= field.maxFiles;
		}

		/**
		 * Show notification
		 */
		notify(message, type = 'info') {
			this.notifications.showToast(message, type);
		}

		formatBytes(bytes) {
			const sizes = ['Bytes', 'KB', 'MB'];
			if (bytes === 0) return '0 Bytes';
			const i = Math.floor(Math.log(bytes) / Math.log(1024));
			return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`;
		}

		/**
		 * Check if element is an upload trigger
		 */
		isUploadTrigger(element) {
			if (element.type === 'file' || element.tagName === 'LABEL') {
				return false;
			}

			if (element.matches('.upload-trigger, .file-upload-button, [data-upload-trigger]')) {
				return true;
			}

			const uploadContainer = element.closest('.file-upload-container');
			if (uploadContainer) {
				return !element.closest('input, label, button, a');
			}

			return false;
		}


		/**
		 * Trigger file selection for a field
		 */
		triggerFileSelection(fieldId) {
			const field = this.fields.get(fieldId);
			if (!field) {
				console.error('Field not found:', fieldId);
				return;
			}

			if (!field.input) {
				console.error('Field input not found for field:', fieldId, field);
				return;
			}

			// Check if field is at capacity
			if (field.uploads && field.uploads.size >= field.maxFiles) {
				this.notify(`Maximum ${field.maxFiles} files allowed for this field`, 'warning');
				return;
			}

			console.log('Triggering file selection for field:', fieldId, field.input);

			// Make sure the input is not disabled or hidden
			if (field.input.disabled) {
				console.warn('Cannot trigger disabled input:', field.input);
				return;
			}

			// Trigger the click
			try {
				field.input.click();
			} catch (error) {
				console.error('Failed to trigger file input click:', error);
			}
		}

		/**
		 * Remove an upload
		 */
		removeUpload(fieldId, uploadId) {
			const field = this.fields.get(fieldId);
			const upload = this.uploads.get(uploadId);

			if (!field || !upload) return;

			// Remove from field's upload set
			field.uploads.delete(uploadId);

			// CRITICAL FIX: Clean up ALL object URLs
			if (upload.preview && upload.preview.startsWith('blob:')) {
				URL.revokeObjectURL(upload.preview);
			}

			// Remove from cache
			this.cleanupUpload(upload);

			// Remove from uploads map
			this.uploads.delete(uploadId);

			// Remove from UI
			this.removeUploadFromUI(uploadId);

			// Update field UI
			this.maybeLockUploads(fieldId);

			console.log(`Removed upload ${uploadId} from field ${fieldId}`);
		}

		/********************************************************************
		 *
		 * Cleanup
		 *
		 *******************************************************************/
		destroy() {
			// Remove event listeners
			document.removeEventListener('click', this.handleClick);
			document.removeEventListener('change', this.handleChange);
			document.removeEventListener('paste', this.paste);
			document.removeEventListener('dragstart', this.handleDragStart);
			document.removeEventListener('dragend', this.handleDragEnd);
			document.removeEventListener('dragenter', this.handleDragEnter);
			document.removeEventListener('dragover', this.handleDragOver);
			document.removeEventListener('dragleave', this.handleDragLeave);
			document.removeEventListener('drop', this.handleDrop);
			document.removeEventListener('touchstart', this.handleTouchStart);
			document.removeEventListener('touchmove', this.handleTouchMove);
			document.removeEventListener('touchend', this.handleTouchEnd);
			document.removeEventListener('touchcancel', this.handleTouchCancel);
			window.removeEventListener('beforeunload', this.handleBeforeUnload);

			this.uploads.forEach(upload => {
				if (upload.preview && upload.preview.startsWith('blob:')) {
					URL.revokeObjectURL(upload.preview);
				}
			});

			// Terminate and cleanup worker
			if (this.compressionWorker) {
				this.compressionWorker.terminate();
				this.compressionWorker = null;
			}

			// Clear performance monitor metrics to prevent memory accumulation
			if (this.performanceMonitor && this.performanceMonitor.metrics) {
				this.performanceMonitor.metrics.clear();
			}

			// Clear drag state
			this.initializeDragState();

			// Clear all maps
			this.fields.clear();
			this.uploads.clear();
			this.activeOperations.clear();
			this.oldUploads.clear();

			// Force garbage collection if available
			if (window.gc) {
				window.gc();
			}
		}

		recordUploadAnalytics(uploadId, success, processingTime = 0) {
			if (!this.settings.analyticsEnabled) return;

			const upload = this.uploads.get(uploadId);
			if (!upload) return;

			const analytics = {
				fieldType: this.fields.get(upload.fieldId)?.type,
				fileName: upload.originalFile.name,
				fileSize: upload.originalFile.size,
				processedSize: upload.processedFile?.size || upload.originalFile.size,
				processingTime,
				success,
				compressionRatio: upload.processedFile ?
					upload.originalFile.size / upload.processedFile.size : 1,
				timestamp: Date.now()
			};

			// Send analytics (could be batched)
			this.sendUploadAnalytics(analytics);
		}

		async sendUploadAnalytics(analytics) {
			try {
				await fetch(`${jvbSettings.api}analytics/uploads`, {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json',
						'action_nonce': jvbSettings.dash
					},
					body: JSON.stringify({ analytics })
				});
			} catch (error) {
				console.warn('Failed to send upload analytics:', error);
			}
		}

	}

	// Initialize singleton
	document.addEventListener('DOMContentLoaded', () => {
		if (!window.jvbUploadManager) {
			window.jvbUploadManager = new UploadManager();
			console.log('Centralized Upload Manager initialized');
		}
	});

	// Export for use
	window.UploadManager = UploadManager;


	class UploadPerformanceMonitor {
		constructor() {
			this.metrics = new Map();
			this.averages = {
				processingTime: 0,
				uploadSpeed: 0,
				successRate: 95
			};
		}

		startTiming(uploadId, phase) {
			if (!this.metrics.has(uploadId)) {
				this.metrics.set(uploadId, {});
			}
			this.metrics.get(uploadId)[`${phase}_start`] = performance.now();
		}

		endTiming(uploadId, phase) {
			const metrics = this.metrics.get(uploadId);
			if (metrics && metrics[`${phase}_start`]) {
				metrics[`${phase}_duration`] = performance.now() - metrics[`${phase}_start`];
			}
		}

		recordUploadMetrics(uploadId, fileSize, success) {
			const metrics = this.metrics.get(uploadId);
			if (!metrics) return;

			// Calculate upload speed (bytes per second)
			const totalTime = (metrics.upload_duration || 0) / 1000; // Convert to seconds
			const uploadSpeed = totalTime > 0 ? fileSize / totalTime : 0;

			// Update running averages
			this.updateAverages(metrics, uploadSpeed, success);

			// Clean up old metrics (keep last 100)
			if (this.metrics.size > 100) {
				const oldestKey = this.metrics.keys().next().value;
				this.metrics.delete(oldestKey);
			}
		}

		updateAverages(metrics, uploadSpeed, success) {
			// Exponential moving average for responsiveness
			const alpha = 0.1;

			if (metrics.processing_duration) {
				this.averages.processingTime = (1 - alpha) * this.averages.processingTime +
					alpha * metrics.processing_duration;
			}

			if (uploadSpeed > 0) {
				this.averages.uploadSpeed = (1 - alpha) * this.averages.uploadSpeed +
					alpha * uploadSpeed;
			}

			this.averages.successRate = (1 - alpha) * this.averages.successRate +
				alpha * (success ? 100 : 0);
		}

		getOptimalBatchSize() {
			// Adjust batch size based on performance
			if (this.averages.uploadSpeed > 1000000) { // > 1MB/s
				return 5;
			} else if (this.averages.uploadSpeed > 500000) { // > 500KB/s
				return 3;
			} else {
				return 1; // Slow connection, upload one at a time
			}
		}

		/**
		 * Clean up resources
		 */
		destroy() {
			// Clean up blob URLs
			for (const [uploadId, upload] of this.uploads) {
				if (upload.preview && upload.preview.startsWith('blob:')) {
					URL.revokeObjectURL(upload.preview);
				}
			}

			// Clear maps
			this.uploads.clear();
			this.fields.clear();
			this.subscribers.clear();

			// Remove event listeners
			document.removeEventListener('click', this.clickHandler);
			document.removeEventListener('change', this.handleChange);
			document.removeEventListener('paste', this.paste);
			document.removeEventListener('dragstart', this.handleDragStart);
			document.removeEventListener('dragend', this.handleDragEnd);
			document.removeEventListener('dragenter', this.handleDragEnter);
			document.removeEventListener('dragover', this.handleDragOver);
			document.removeEventListener('dragleave', this.handleDragLeave);
			document.removeEventListener('drop', this.handleDrop);
		}
	}