=PopulateForm.js and ContentRoutes.php minor changes

Jake Vanderwerf

2026-01-04 a81f7043fc44382775f9afac48e4c7a651e7ac6c

 assets/js/concise/UploadManagerOld.js

New file
@@ -0,0 +1,3141 @@
/**
 * UploadManager - Refactored for clarity
 *
 * Architecture:
 * - DataStores (fieldStore, uploadStore) = Recovery cache only, cleared after successful upload
 * - Maps (uploadElements, fieldElements) = Runtime DOM references
 * - Upload data flows: File → Process → Queue → Server → Clean up stores
 */
class UploadManager {
   constructor() {
      // Load dependencies
      this.queue = window.jvbQueue;
      this.a11y = window.jvbA11y;
      this.error = window.jvbError;
      this.fieldStoreReady = false;
      this.uploadStoreReady = false;
      this.hasCheckedForUploads = false;
      const {fields, uploads} = window.jvbStore.register(
         'uploads',
         [
            {
               storeName: 'fields',
               keyPath: 'id',
               indexes: [
                  { name: 'fieldId', keyPath: 'fieldId' },
                  { name: 'timestamp', keyPath: 'timestamp' },
                  { name: 'content', keyPath: 'content' },
                  { name: 'itemId', keyPath: 'itemId' },
                  { name: 'status', keyPath: 'status' }
               ],
               TTL: 7 * 24 * 60 * 60 * 1000, // 1 week
               delayFetch: true
            },
            {
               storeName: 'uploads',
               keyPath: 'id',
               storeBlobs: true,
               indexes: [
                  { name: 'fieldId', keyPath: 'fieldId' },
                  { name: 'status', keyPath: 'status' },
                  { name: 'groupId', keyPath: 'groupId' },
                  { name: 'attachmentId', keyPath: 'attachmentId' }
               ],
               delayFetch: true
            }
         ]
      );
      this.fieldStore = fields;
      this.uploadStore = uploads;

      window.jvbUploadBlobs = this.uploadStore;

      // Subscribe to store events
      this.fieldStore.subscribe(this.handleFieldStoreEvent.bind(this));
      this.uploadStore.subscribe(this.handleUploadStoreEvent.bind(this));

      // RUNTIME DATA - DOM references and ephemeral state
      this.uploadElements = new Map();  // uploadId → { element, preview, location }
      this.fieldElements = new Map();   // fieldId → { element, ui, config }
      this.groupElements = new Map();   // groupId → { element, grid, fieldId }

      // Selection and UI state
      this.selected = new Map();
      this.selectionHandlers = new Map();
      this.previewUrls = new Set();
      this.sortableInstances = new Map();

      // Worker for image processing
      this.initWorker();

      // Notification subscribers
      this.subscribers = new Set();

      // Selectors
      this.selectors = {
         field: {
            field: '[data-upload-field]',
            input: 'input[type="file"]',
            dropZone: '.file-upload-container',
            preview: '.item-grid.preview',
            progress: '.image-progress'
         },
         groups: {
            container: '.upload-group',
            grid: '.item-grid.group',
            header: '.group-header',
            selectAll: '[name="select-all-group"]',
            actions: '.group-actions',
            count: '.selection-controls .info'
         },
         items: {
            item: '[data-upload-id]',
            checkbox: '[name*="select-item"]',
            featured: '[name="featured"]',
            details: 'details'
         }
      };

      this.statusMapping = {
         'received': 'Image Received',
         'local_processing': 'Processing Image...',
         'queued': 'Waiting to upload...',
         'uploading': 'Uploading to Server',
         'pending': 'Successfully sent to server. In line for further processing.',
         'processing': 'Processing on server...',
         'completed': 'Upload complete!',
         'failed': 'Upload failed (will retry)',
         'failed_permanent': 'Upload failed permanently'
      };

      this.init();
   }

   async init() {
      // this.initializeFields();
      this.initListeners();

      // Queue integration - handle completion/failure
      this.queue.subscribe((event, operation) => {
         if (!['uploads', 'uploads/meta', 'uploads/groups'].includes(operation.endpoint)) {
            return;
         }

         const fieldId = operation.data instanceof FormData
            ? operation.data.get('fieldId')
            : operation.data?.fieldId;

         switch(event) {
            case 'cancel-operation':
               if (fieldId) this.handleOperationCancelled(fieldId);
               break;
            case 'operation-status':
               if (fieldId) this.updateFieldStatus(fieldId, operation.status);
               break;
            case 'operation-complete':
               this.handleOperationComplete(operation, fieldId);
               break;
            case 'operation-failed':
            case 'operation-failed-permanent':
               this.handleOperationFailed(operation, fieldId);
               break;
         }
      });

      window.addEventListener('beforeunload', () => {
         this.cleanupAllPreviewUrls();
      });
   }

   initWorker() {
      this.worker = {
         worker: null,
         timeout: null,
         tasks: new Map(),
         restart: { count: 0, max: 3 },
         settings: {
            timeout: 10000,
            batchSize: 1,
            maxConcurrent: 3,
            restartAfterTimeout: true
         }
      };
   }

   /*******************************************************************************
    * FIELD MANAGEMENT
    *******************************************************************************/
   scanFields(container, autoUpload) {
      console.log(autoUpload, 'autoUpload');
      const fields = container.querySelectorAll(this.selectors.field.field);
      fields.forEach(uploader => this.registerUploader(uploader, autoUpload));
   }

   registerUploader(uploader, autoUpload) {
      const fieldId = this.determineFieldId(uploader);
      const config = this.extractFieldConfig(uploader, autoUpload);
      const ui = this.buildFieldUI(uploader);

      console.log(config, 'registering with config');
      // Store field data with Sets for runtime
      const fieldData = {
         id: fieldId,
         config: config,
         uploads: new Set(),
         groups: [],
         state: 'ready',
         timestamp: Date.now()
      };

      // Save to store (will convert Sets to Arrays automatically)
      this.fieldStore.save(fieldData);

      // Store DOM references separately
      this.fieldElements.set(fieldId, { element: uploader, ui, config });

      uploader.dataset.uploader = fieldId;
      this.addFieldSelectionHandler(fieldId);

      if (config.type !== 'single') {
         this.initSortable(fieldId);
      }

      return fieldId;
   }

   extractFieldConfig(fieldElement, autoUpload) {
      return {
         autoUpload: autoUpload,
         destination: fieldElement.dataset.destination || 'meta',
         content: fieldElement.dataset.content || null,
         mode: fieldElement.dataset.mode || 'direct',
         type: fieldElement.dataset.type || 'single',
         name: fieldElement.dataset.field,
         itemID: fieldElement.dataset.itemId || 0,
         maxFiles: parseInt(fieldElement.dataset.maxFiles) || 999,
         subtype: fieldElement.dataset.subtype || 'image'
      };
   }

   buildFieldUI(fieldElement) {
      let UI = {
         field: fieldElement,
         input: fieldElement.querySelector(this.selectors.field.input),
         dropZone: fieldElement.querySelector(this.selectors.field.dropZone),
         preview: fieldElement.querySelector(this.selectors.field.preview),
         progress: {
            progress: fieldElement.querySelector(this.selectors.field.progress),
            bar: fieldElement.querySelector('.bar'),
            fill: fieldElement.querySelector('.fill'),
            details: fieldElement.querySelector('.details'),
            text: fieldElement.querySelector('.details .text'),
            count: fieldElement.querySelector('.details .count')
         }
      };

      let display = fieldElement.querySelector('.group-display');
      if (display) {
         UI.groups = {
            display: display,
            container: fieldElement.querySelector('.item-grid.groups'),
            empty: fieldElement.querySelector('.empty-group'),
            groups: new Map()
         };
      }

      return UI;
   }

   /*******************************************************************************
    * SORTABLE INITIALIZATION
    *******************************************************************************/
   initSortable(fieldId) {
      if (!window.Sortable) return;

      // Mount MultiDrag plugin once
      if (!Sortable._multiDragMounted && Sortable.MultiDrag) {
         Sortable.mount(new Sortable.MultiDrag());
         Sortable._multiDragMounted = true;
      }

      const fieldEl = this.fieldElements.get(fieldId);
      if (!fieldEl) return;

      // Initialize sortable on all existing grids
      const grids = fieldEl.element.querySelectorAll('.item-grid.preview, .item-grid.group');
      grids.forEach(grid => {
         const groupId = grid.classList.contains('group')
            ? grid.closest('.upload-group')?.dataset.groupId
            : null;
         this.createSortableForGrid(grid, fieldId, groupId);
      });

      // Special handler for empty-group
      const emptyGroup = fieldEl.element.querySelector('.empty-group');
      if (emptyGroup && !emptyGroup.sortableInstance) {
         emptyGroup.sortableInstance = new Sortable(emptyGroup, {
            animation: 150,
            draggable: '.item',
            multiDrag: true,
            selectedClass: 'selected-for-drag',
            avoidImplicitDeselect: true,
            group: { name: fieldId, pull: false, put: true },
            ghostClass: 'sortable-ghost',
            chosenClass: 'sortable-chosen',
            dragClass: 'sortable-drag',
            onEnd: (evt) => this.handleDrop(evt, fieldId)
         });
      }
   }

   syncSortableSelection(fieldId, selectedItems) {
      // Update Sortable's selection state to match checkboxes
      this.sortableInstances.forEach((instance, key) => {
         if (key.startsWith(fieldId)) {
            const grid = instance.el;
            const items = grid.querySelectorAll('.item');

            items.forEach(item => {
               const uploadId = item.dataset.uploadId;
               const shouldBeSelected = selectedItems.has(uploadId);

               if (shouldBeSelected) {
                  Sortable.utils.select(item);
               } else {
                  Sortable.utils.deselect(item);
               }
            });
         }
      });
   }

   handleDrop(evt, fieldId) {
      const dropTarget = evt.to;
      const sourceTarget = evt.from;
      const items = evt.items?.length > 0 ? evt.items : [evt.item];
      const uploadIds = items.map(item => item.dataset.uploadId);

      // Determine drop target type
      const targetType = this.getDropTargetType(dropTarget);

      switch (targetType) {
         case 'empty-group':
            this.handleDropToEmptyGroup(items, uploadIds, fieldId);
            break;

         case 'preview':
            this.handleDropToPreview(items, uploadIds, fieldId);
            break;

         case 'group':
            this.handleDropToGroup(items, uploadIds, dropTarget, sourceTarget, fieldId);
            break;
         default:
            // Fallback: return to preview
            this.handleDropToPreview(items, uploadIds, fieldId);
            break;
      }

      // Update UI
      this.updateSortableState(dropTarget);
      if (sourceTarget !== dropTarget) {
         this.updateSortableState(sourceTarget);
      }
   }

   /**
    * Determine what type of drop target this is
    */
   getDropTargetType(target) {
      if (target.classList.contains('empty-group')) {
         return 'empty-group';
      }

      if (target.classList.contains('preview')) {
         return 'preview';
      }

      if (target.classList.contains('group')) {
         return 'group';
      }

      return 'unknown';
   }

   /**
    * Handle drop to group: add to existing group
    */
   handleDropToGroup(items, uploadIds, dropTarget, sourceTarget, fieldId) {
      try {
         // If same container, it's just a reorder
         if (dropTarget === sourceTarget) {
            this.handleReorder({ to: dropTarget, items: items });
            return;
         }

         // Moving to different group
         uploadIds.forEach(uploadId => {
            this.addToGroup(uploadId, dropTarget, false);
         });

         this.schedulePersistance(fieldId);

         const message = items.length > 1
            ? `Moved ${items.length} items to group`
            : 'Moved item to group';
         this.a11y.announce(message);

         // Clear selection
         const handler = this.selectionHandlers.get(fieldId);
         handler?.clearSelection();
      }  catch (error) {
         this.handleDropError(items, fieldId, error);
      }
   }

   /**
    * Handle drop to preview: remove from groups
    */
   handleDropToPreview(items, uploadIds, fieldId) {
      try {
         uploadIds.forEach(uploadId => {
            this.removeFromGroup(uploadId);
         });

         this.schedulePersistance(fieldId);

         const message = items.length > 1
            ? `Moved ${items.length} items to preview`
            : 'Moved item to preview';
         this.a11y.announce(message);

         // Clear selection
         const handler = this.selectionHandlers.get(fieldId);
         handler?.clearSelection();
      } catch (error) {
         this.handleDropError(items, fieldId, error);
      }
   }

   /**
    * Handle drop errors consistently
    */
   handleDropError(items, fieldId, error, message = 'An error occurred') {
      console.error('Drop error:', error);

      // Return items to preview as fallback
      const fieldEl = this.fieldElements.get(fieldId);
      if (fieldEl?.ui?.preview) {
         items.forEach(item => fieldEl.ui.preview.appendChild(item));
      }

      this.a11y.announce(`${message}. Items returned to preview.`);
   }

   /**
    * Handle drop to group: add to existing group
    */
   handleDropToEmptyGroup(items, uploadIds, fieldId) {
      try {
         const group = this.createGroup(fieldId);
         if (!group) {
            this.handleDropError(items, fieldId, new Error('Group creation failed'), 'Failed to create group');
            return;
         }

         // Move items to new group
         items.forEach((item, index) => {
            group.grid.appendChild(item);
            this.addToGroup(uploadIds[index], group.grid, false);
         });

         this.schedulePersistance(fieldId);

         const message = items.length > 1
            ? `Created group with ${items.length} items`
            : 'Created group with item';
         this.a11y.announce(message);

         // Clear selection after move
         const handler = this.selectionHandlers.get(fieldId);
         handler?.clearSelection();
      } catch (error) {
         this.handleDropError(items, fieldId, error);
      }
   }

   /**
    * Update sortable enabled/disabled state based on item count
    */
   updateSortableState(grid) {
      const sortable = grid?.sortableInstance;
      if (!sortable) return;

      // const hasItems = grid.querySelectorAll('.item').length > 0;
      sortable.option('disabled', false);
   }

   /**
    * Refresh sortable for a field (call after adding/removing items dynamically)
    */
   refreshSortable(fieldId) {
      const fieldEl = this.fieldElements.get(fieldId);
      if (!fieldEl) return;

      const grids = fieldEl.element.querySelectorAll('.item-grid.preview, .item-grid.group');
      grids.forEach(grid => this.updateSortableState(grid));
   }

   handleReorder(evt) {
      const grid = evt.to;
      const fieldWrapper = grid.closest('.field, .upload');
      if (!fieldWrapper) return;

      // Get current order from DOM
      let items = Array.from(grid.querySelectorAll('.item:not(.sortable-ghost):not(.sortable-clone)'))
         .map(upload => upload.dataset.uploadId)
         .filter(id => id);


      // Update hidden input (for form submission)
      let hiddenInput = fieldWrapper.querySelector('input[type="hidden"]');
      if (hiddenInput && items.length > 0) {
         hiddenInput.value = items.join(',');
      }

      // Update fieldState with new order
      const fieldId = this.getFieldIdFromElement(grid);
      if (fieldId) {
         const fieldData = this.getFieldData(fieldId);

         // If reordering within a group, update that group's uploads array
         if (grid.classList.contains('group')) {
            const groupId = grid.dataset.groupId;
            const group = fieldData?.groups?.find(g => g.id === groupId);
            if (group) {
               group.uploads = items; // Update order
            }
         }
         // If reordering in preview, the order is implicit by DOM position
         // (we don't store preview order separately)

         this.schedulePersistance(fieldId);
      }

      this.a11y.announce('Item reordered');

      fieldWrapper.dispatchEvent(new CustomEvent('jvb-items-reordered', {
         detail: {
            from: evt.from,
            to: evt.to,
            oldIndex: evt.oldIndex,
            newIndex: evt.newIndex,
            items: items
         },
         bubbles: true
      }));
   }

   /*******************************************************************************
    * FILE DROP HANDLERS
    *******************************************************************************/

   initListeners() {
      this.clickHandler = this.handleClick.bind(this);
      this.changeHandler = this.handleChange.bind(this);

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

      this.dragEnterHandler = this.handleExternalDragEnter.bind(this);
      this.dragLeaveHandler = this.handleExternalDragLeave.bind(this);
      this.dragOverHandler = this.handleExternalDragOver.bind(this);
      this.dropHandler = this.handleExternalDrop.bind(this);

      document.addEventListener('dragenter', this.dragEnterHandler);
      document.addEventListener('dragleave', this.dragLeaveHandler);
      document.addEventListener('dragover', this.dragOverHandler);
      document.addEventListener('drop', this.dropHandler);
   }

   handleExternalDragLeave(e) {
      const dropZone = e.target.closest(this.selectors.field.dropZone);
      if (dropZone && !dropZone.contains(e.relatedTarget)) {
         dropZone.classList.remove('dragover');
      }
   }

   handleExternalDragEnter(e) {
      if (!e.dataTransfer.types.includes('Files')) return;
      const dropZone = e.target.closest(this.selectors.field.dropZone);
      if (dropZone) {
         e.preventDefault();
         dropZone.classList.add('dragover');
      }
   }

   handleExternalDragOver(e) {
      if (!e.dataTransfer.types.includes('Files')) return;
      const dropZone = e.target.closest(this.selectors.field.dropZone);
      if (dropZone) {
         e.preventDefault();
         e.dataTransfer.dropEffect = 'copy';
      }
   }

   handleExternalDrop(e) {
      const dropZone = e.target.closest(this.selectors.field.dropZone);
      if (!dropZone) return;

      e.preventDefault();
      dropZone.classList.remove('dragover');

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

      const fieldId = this.getFieldIdFromElement(dropZone);
      if (fieldId) {
         this.processFiles(fieldId, files);
         this.a11y.announce(`${files.length} file(s) dropped for upload`);
      }
   }

   /*******************************************************************************
    * CLICK & CHANGE HANDLERS
    *******************************************************************************/

   handleClick(e) {
      // Trigger file input
      if (e.target.matches(this.selectors.field.dropZone) ||
         e.target.closest(this.selectors.field.dropZone)) {
         const dropZone = e.target.closest(this.selectors.field.dropZone);
         if (dropZone && !e.target.matches('input, button, a')) {
            const input = dropZone.querySelector(this.selectors.field.input);
            input?.click();
         }
      }

      // Group actions
      const actionButton = e.target.closest('[data-action]');
      if (actionButton) {
         this.handleAction(actionButton);
      }
   }

   handleChange(e) {
      const fieldId = this.getFieldIdFromElement(e.target);

      // File input change
      if (e.target.matches(this.selectors.field.input)) {
         const files = Array.from(e.target.files);
         if (files.length > 0 && fieldId) {
            this.processFiles(fieldId, files);
         }
      }

      // Meta field changes
      if (fieldId) {
         const fieldData = this.getFieldData(fieldId);
         if (!fieldData.config.autoUpload) {
            return;
         }
         if (fieldData?.config.destination === 'post_group') {
            this.handleGroupMetaChange(e.target);
         } else {
            this.queueUploadMeta(e);
         }
      }
   }

   /*******************************************************************************
    * FILE PROCESSING
    *******************************************************************************/

   async processFiles(fieldId, files) {
      const fieldData = this.getFieldData(fieldId);
      const fieldEl = this.fieldElements.get(fieldId);
      if (!fieldData || !fieldEl) return;

      // Show group display, hide upload zone
      if (fieldEl.ui.dropZone) {
         fieldEl.ui.dropZone.hidden = true;
      }
      if (fieldEl.ui.groups?.display) {
         fieldEl.ui.groups.display.hidden = false;
      }

      const totalFiles = files.length;
      let processedCount = 0;

      this.updateUploadProgress(fieldId, 0, totalFiles, 'Processing files...');

      const processPromises = Array.from(files).map(async (file) => {
         try {
            const uploadId = `upload_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;

            // Create initial upload data
            const uploadData = {
               id: uploadId,
               attachmentId: null,
               fieldId: fieldId,
               status: 'local_processing',
               groupId: null,
               meta: {
                  originalName: file.name,
                  size: file.size,
                  type: file.type
               }
            };

            // Save initial data
            await this.uploadStore.save(uploadData);

            // Process file
            const preview = this.createPreviewUrl(file);
            const processedFile = file.type.startsWith('image/')
               ? await this.processImage(file, fieldData.config.subtype)
               : file;

            // Show progress
            this.showUploadProgress(uploadId, true);
            this.updateUploadItemProgress(uploadId, 50, 'local_processing');

            // Store blob data (this updates the existing uploadData)
            await this.saveBlobData(uploadId, processedFile || file);

            // Create DOM element
            const subtype = this.getSubtypeFromMime(file.type);
            const element = this.createUploadElement({
               id: uploadId,
               preview: preview,
               meta: uploadData.meta,
               subtype: subtype
            }, fieldData.config.destination === 'post_group');

            // Add to preview grid
            if (fieldEl.ui.preview) {
               fieldEl.ui.preview.appendChild(element);

               // Store runtime element data
               this.uploadElements.set(uploadId, {
                  element: element,
                  preview: preview,
                  location: fieldEl.ui.preview
               });
            }

            // Update status (gets existing data with blobData intact)
            const storedUpload = this.uploadStore.get(uploadId);
            if (storedUpload) {
               storedUpload.status = 'processed';
               await this.uploadStore.save(storedUpload);
            }

            // Add to field
            fieldData.uploads.add(uploadId);
            await this.saveFieldData(fieldData);

            // Update progress
            processedCount++;
            this.updateUploadProgress(fieldId, processedCount, totalFiles, 'Processing files...');
            this.updateUploadItemProgress(uploadId, 100, 'processed');

            // Fade out progress
            setTimeout(() => this.showUploadProgress(uploadId, false), 1000);

            return uploadId;

         } catch (error) {
            console.error('Error processing file:', file.name, error);
            processedCount++;
            this.updateUploadProgress(fieldId, processedCount, totalFiles, 'Processing files...');
            return null;
         }
      });

      await Promise.all(processPromises);

      this.updateFieldState(fieldId);
      this.refreshSortable(fieldId);

      // Queue for upload if in direct mode
      if (fieldData.config.autoUpload && fieldData.config.destination !== 'post_group') {
         await this.queueUpload(fieldId);
         this.maybeLockUploads(fieldId);
      }
   }

   /*******************************************************************************
    * IMAGE PROCESSING
    *******************************************************************************/

   async processImage(file, uploadId) {
      const timeout = this.worker.settings.timeout;

      return new Promise((resolve, reject) => {
         let timeoutId;
         let taskCompleted = false;

         timeoutId = setTimeout(() => {
            if (!taskCompleted) {
               taskCompleted = true;
               this.worker.tasks.delete(uploadId);
               if (this.worker.settings.restartAfterTimeout) {
                  this.restartCompressionWorker();
               }
               reject(new Error(`Processing timeout for ${file.name}`));
            }
         }, timeout);

         this.worker.tasks.set(uploadId, { file, timeoutId });

         this.handleProcess(file, uploadId)
            .then(result => {
               if (!taskCompleted) {
                  taskCompleted = true;
                  clearTimeout(timeoutId);
                  this.worker.tasks.delete(uploadId);
                  resolve(result);
               }
            })
            .catch(error => {
               if (!taskCompleted) {
                  taskCompleted = true;
                  clearTimeout(timeoutId);
                  this.worker.tasks.delete(uploadId);
                  reject(error);
               }
            });
      });
   }

   async handleProcess(file, uploadId) {
      if (!file.type.startsWith('image/')) {
         return file;
      }

      const maxDimension = this.getMaxDimension();
      const quality = 0.85;

      if (this.shouldUseWorker(file)) {
         try {
            if (!this.worker.worker) {
               this.initCompressionWorker();
            }
            if (this.worker.worker) {
               return await this.processWithWorker(file, uploadId, maxDimension, quality);
            }
         } catch (error) {
            console.warn('Worker processing failed, falling back to main thread:', error);
         }
      }

      return await this.processOnMainThread(file, maxDimension, quality);
   }

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

               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 = this.createPreviewUrl(file);
            img.src = objectUrl;
         } catch (error) {
            cleanup();
            reject(new Error(`Failed to create object URL: ${error.message}`));
         }
      });
   }

   getOptimalFormat(file) {
      if (file.type === 'image/gif' || file.type === 'image/svg+xml') {
         return file.type;
      }
      return this.supportsWebP() ? 'image/webp' : 'image/jpeg';
   }

   getOptimalQuality(file, requestedQuality) {
      if (file.size < 500 * 1024) return Math.max(requestedQuality, 0.9);
      if (file.size < 2 * 1024 * 1024) return requestedQuality;
      return Math.min(requestedQuality, 0.8);
   }

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

   getMaxDimension() {
      const screenWidth = window.screen.width;
      const devicePixelRatio = window.devicePixelRatio || 1;
      if (screenWidth * devicePixelRatio > 2560) return 2400;
      if (screenWidth * devicePixelRatio > 1920) return 1920;
      return 1200;
   }

   shouldUseWorker(file) {
      return this.worker.worker &&
         file.size > 1024 * 1024 &&
         typeof OffscreenCanvas !== 'undefined';
   }

   async processWithWorker(file, uploadId, maxDimension, quality) {
      return new Promise((resolve, reject) => {
         if (!this.worker.worker) {
            reject(new Error('Worker not available'));
            return;
         }

         const messageId = `${uploadId}_${Date.now()}`;

         const messageHandler = (e) => {
            if (e.data.messageId !== messageId) return;

            this.worker.worker.removeEventListener('message', messageHandler);
            this.worker.worker.removeEventListener('error', errorHandler);

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

         const errorHandler = (error) => {
            this.worker.worker.removeEventListener('message', messageHandler);
            this.worker.worker.removeEventListener('error', errorHandler);
            reject(new Error(`Worker error: ${error.message}`));
         };

         this.worker.worker.addEventListener('message', messageHandler);
         this.worker.worker.addEventListener('error', errorHandler);

         this.worker.worker.postMessage({
            messageId,
            file,
            maxDimension,
            quality,
            outputFormat: this.getOptimalFormat(file)
         });
      });
   }

   restartCompressionWorker() {
      if (this.worker.worker) {
         this.worker.worker.terminate();
         this.worker.worker = null;
      }
      this.worker.tasks.clear();
      if (this.worker.restart.count >= this.worker.restart.max) {
         console.error('Max worker restarts reached, disabling worker');
         return;
      }
      this.worker.restart.count++;
      this.initCompressionWorker();
   }

   initCompressionWorker() {
      if (this.worker.worker || typeof Worker === 'undefined') return;

      try {
         const workerScript = `
            self.onmessage = async function(e) {
               const { messageId, file, maxDimension, quality, outputFormat } = e.data;
               try {
                  const bitmap = await createImageBitmap(file);
                  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);
                  const canvas = new OffscreenCanvas(width, height);
                  const ctx = canvas.getContext('2d');
                  ctx.imageSmoothingEnabled = true;
                  ctx.imageSmoothingQuality = 'high';
                  ctx.drawImage(bitmap, 0, 0, width, height);
                  bitmap.close();
                  const blob = await canvas.convertToBlob({ type: outputFormat, quality: quality });
                  self.postMessage({ messageId, success: true, blob: blob, format: outputFormat });
               } catch (error) {
                  self.postMessage({ messageId, success: false, error: error.message });
               }
            };
         `;

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

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

   calculateOptimalDimensions(img, maxDimension) {
      let { width, height } = img;
      if (width <= maxDimension && height <= maxDimension) {
         return { width, height };
      }
      const scale = Math.min(maxDimension / width, maxDimension / height);
      return {
         width: Math.round(width * scale),
         height: Math.round(height * scale)
      };
   }

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

   createPreviewUrl(file) {
      const url = URL.createObjectURL(file);
      if (!this.previewUrls) this.previewUrls = new Set();
      this.previewUrls.add(url);
      return url;
   }

   revokePreviewUrl(url) {
      if (url?.startsWith('blob:')) {
         URL.revokeObjectURL(url);
         this.previewUrls?.delete(url);
      }
   }

   /*******************************************************************************
    * QUEUE INTEGRATION
    *******************************************************************************/

   async submitUploads(fieldId) {
      const fieldData = this.getFieldData(fieldId);
      const fieldEl = this.fieldElements.get(fieldId);
      if (!fieldData?.uploads || fieldData.uploads.size === 0) {
         return;
      }

      let uploadIds = Array.from(fieldData.uploads);
      if (uploadIds.length === 0) {
         this.error.log('No uploads to upload', {
            component: 'UploadManager',
            action: 'submitGroupedUploads',
            fieldId: fieldId
         });
         return;
      }

      const fieldGroups = this.getFieldGroups(fieldId);

      if (fieldGroups.length === 0) {
         this.error.log('No groups created for post_group upload', {
            component: 'UploadManager',
            action: 'submitGroupedUploads',
            fieldId: fieldId
         });
         return;
      }

      // Build posts array from groups
      const posts = [];
      const formData = new FormData();
      let uploadMap = [];

      // Process each group
      for (const group of fieldGroups) {
         const post = {
            images: [],
            fields: {}
         };

         // Add group metadata
         for (let [name, value] of Object.entries(group.changes)) {
            post.fields[name] = value;
         }

         // Get uploads for this group
         const groupUploadIds = uploadIds.filter(uploadId => {
            const upload = this.uploadStore.get(uploadId);
            return upload?.groupId === group.id;
         });

         // Add files for this group
         for (const uploadId of groupUploadIds) {
            const file = await this.getBlobData(uploadId);
            if (file) {
               formData.append('files[]', file);

               const imageData = {
                  upload_id: uploadId,
                  index: uploadMap.length
               };

               // Check if featured
               const uploadEl = this.uploadElements.get(uploadId);
               const radioInput = uploadEl?.element?.querySelector('[name="featured"]');
               if (radioInput?.checked) {
                  post.fields.featured = uploadId;
               }

               post.images.push(imageData);
               uploadMap.push(uploadId);
            }
         }

         posts.push(post);
      }

      // Handle remaining uploads (without groupId) - each becomes its own post
      const remainingUploadIds = uploadIds.filter(uploadId => {
         const upload = this.uploadStore.get(uploadId);
         return !upload?.groupId;
      });

      for (const uploadId of remainingUploadIds) {
         const post = {
            images: [],
            fields: {}
         };

         const file = await this.getBlobData(uploadId);
         if (file) {
            formData.append('files[]', file);

            const imageData = {
               upload_id: uploadId,
               index: uploadMap.length
            };
            post.images.push(imageData);
            uploadMap.push(uploadId);
         }

         posts.push(post);
      }

      // Add metadata to FormData
      formData.append('content', fieldData.config.content);
      formData.append('user', fieldData.config.itemID);
      formData.append('posts', JSON.stringify(posts));
      formData.append('upload_ids', JSON.stringify(uploadMap));

      const operation = {
         endpoint: 'uploads/groups',
         method: 'POST',
         data: formData,
         title: `Creating ${posts.length} ${fieldData.config.content}${posts.length > 1 ? 's' : ''} from uploads...`,
         popup: `Creating ${posts.length} post${posts.length > 1 ? 's' : ''}...`,
         canMerge: false,
         headers: {
            'action_nonce': window.auth.getNonce('dash')
         },
         append: '_upload',
      };

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

         // Update upload statuses
         uploadIds.forEach(uploadId => {
            const upload = this.uploadStore.get(uploadId);
            if (upload) {
               upload.operationId = operationId;
               upload.status = 'queued';
               this.uploadStore.save(upload);
               this.updateUploadStatus(uploadId, 'queued');
            }
         });

         fieldData.operationId = operationId;
         await this.saveFieldData(fieldData);

         this.a11y.announce(`Creating ${posts.length} post${posts.length > 1 ? 's' : ''} from your uploads`);

         return operationId;
      } catch (error) {
         this.error.log(error, {
            component: 'UploadManager',
            action: 'submitGroupedUploads',
            fieldId: fieldId
         });
         throw error;
      }
   }

   async queueUpload(fieldId) {
      const fieldData = this.getFieldData(fieldId);
      if (!fieldData?.uploads || fieldData.uploads.size === 0) return;

      const uploads = Array.from(fieldData.uploads);
      const data = this.prepareUploadData(fieldData, uploads);

      this.a11y.announce('Queuing for upload');

      const operation = {
         endpoint: 'uploads',
         method: 'POST',
         data: data,
         title: `Uploading ${uploads.length} file${uploads.length > 1 ? 's' : ''} to server...`,
         popup: `Uploading ${uploads.length} file${uploads.length > 1 ? 's' : ''}...`,
         canMerge: false,
         headers: { 'action_nonce': window.auth.getNonce('dash') },
         append: '_upload'
      };

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

         // Update upload statuses
         uploads.forEach(uploadId => {
            const upload = this.uploadStore.get(uploadId);
            if (upload) {
               upload.operationId = operationId;
               upload.status = 'queued';
               this.uploadStore.save(upload);
               this.updateUploadStatus(uploadId, 'queued');
            }
         });

         fieldData.operationId = operationId;
         await this.saveFieldData(fieldData);

         return operationId;
      } catch (error) {
         throw error;
      }
   }

   async prepareUploadData(fieldData, uploads) {
      const formData = new FormData();
      formData.append('content', fieldData.config.content);
      formData.append('mode', fieldData.config.mode);
      formData.append('field_name', fieldData.config.name);
      formData.append('fieldId', fieldData.id);
      formData.append('field_type', fieldData.config.type);
      formData.append('subtype', fieldData.config.subtype);
      formData.append('item_id', fieldData.config.itemID);
      formData.append('destination', fieldData.config.destination || 'meta');

      let uploadMap = [];


      const blobPromises = uploads.map(async (uploadId) => {
         const upload = this.uploadStore.get(uploadId);
         if (!upload) return;

         const file = await this.getBlobData(uploadId);
         if (file) {
            formData.append('files[]', file);
            uploadMap.push(upload.id);
         }
      });

      await Promise.all(blobPromises);

      formData.append('upload_ids', JSON.stringify(uploadMap));
      return formData;
   }

   async queueUploadMeta(e) {
      const uploadId = this.getUploadIdFromElement(e.target);
      const upload = this.uploadStore.get(uploadId);
      if (!upload) return;

      const fieldData = this.getFieldData(upload.fieldId);
      if (!fieldData) return;

      let data = {};
      data[e.target.name] = e.target.value;

      upload.meta = { ...upload.meta, ...data };
      await this.uploadStore.save(upload);

      let queueData = {};
      queueData[upload.attachmentId ?? upload.id] = upload.meta;

      const operation = {
         endpoint: 'uploads/meta',
         method: 'POST',
         data: queueData,
         title: 'Updating meta',
         canMerge: true,
         headers: { 'action_nonce': window.auth.getNonce('dash') }
      };

      try {
         await this.queue.addToQueue(operation);
      } catch (error) {
         this.error.log(error, {
            component: 'UploadManager',
            action: 'sendMetaUpdate',
            uploadId: upload.id
         });
      }
   }

   /*******************************************************************************
    * QUEUE EVENT HANDLERS - CLEANUP AFTER SUCCESS
    *******************************************************************************/

   /**
    * Handle successful operation completion - CLEAR STORES
    */
   async handleOperationComplete(operation, fieldId) {
      const results = operation.result?.data || operation.serverData?.data || [];

      // Update upload statuses with attachment IDs
      results.forEach(result => {
         const upload = this.uploadStore.get(result.upload_id);
         if (upload) {
            upload.attachmentId = result.attachment_id;
            upload.status = 'completed';
            this.uploadStore.save(upload);
            this.updateUploadStatus(result.upload_id, 'completed');
         }
      });

      if (!fieldId) return;

      const fieldData = this.getFieldData(fieldId);
      if (!fieldData) return;

      // Clean up completed uploads from stores
      const completedUploads = Array.from(fieldData.uploads).filter(uploadId => {
         const upload = this.uploadStore.get(uploadId);
         return upload?.status === 'completed';
      });

      for (const uploadId of completedUploads) {
         await this.clearUpload(uploadId, false);
         fieldData.uploads.delete(uploadId);
      }

      // If all uploads complete, clear entire field from stores
      if (fieldData.uploads.size === 0) {
         await this.clearFieldFromStores(fieldId);
         this.a11y.announce('All uploads completed successfully');
      } else {
         // Otherwise just update field state
         await this.saveFieldData(fieldData);
      }

      this.updateFieldState(fieldId);
   }

   /**
    * Handle operation failure
    */
   handleOperationFailed(operation, fieldId) {
      const uploadIds = operation.data instanceof FormData
         ? JSON.parse(operation.data.get('upload_ids') || '[]')
         : operation.data.upload_ids || [];

      uploadIds.forEach(uploadId => {
         const upload = this.uploadStore.get(uploadId);
         if (upload) {
            upload.status = operation.status === 'operation-failed-permanent'
               ? 'failed_permanent'
               : 'failed';
            this.uploadStore.save(upload);
            this.updateUploadStatus(uploadId, upload.status);
         }
      });

      if (fieldId) {
         this.updateFieldState(fieldId);
      }
   }

   /**
    * Handle operation cancellation
    */
   async handleOperationCancelled(fieldId) {
      const fieldData = this.getFieldData(fieldId);
      if (!fieldData) return;

      const uploadsArray = fieldData.uploads instanceof Set
         ? Array.from(fieldData.uploads)
         : fieldData.uploads;

      for (const uploadId of uploadsArray) {
         await this.clearUpload(uploadId, false);
      }

      await this.clearFieldFromStores(fieldId);
      this.updateFieldState(fieldId);
      this.a11y.announce('Upload cancelled');
   }

   getFieldGroups(fieldId) {
      const fieldData = this.getFieldData(fieldId);
      if (!fieldData?.groups) return [];

      return fieldData.groups.map(group => ({
         id: group.id,
         uploads: group.uploads || [],
         changes: group.changes || {}
      }));
   }

   getSelectedRestorationUploads(notificationEl) {
      let selected = [];
      const checkboxes = notificationEl.querySelectorAll('[type=checkbox]:checked');

      checkboxes.forEach(checkbox => {
         const item = checkbox.closest('.item');
         if (item) {
            selected.push({
               uploadId: item.dataset.uploadId,
               fieldId: item.dataset.fieldId
            });
         }
      });

      return selected;
   }

   async restoreSelectedUploads(selectedUploads) {
      const byField = new Map();
      selectedUploads.forEach(item => {
         if (!byField.has(item.fieldId)) {
            byField.set(item.fieldId, []);
         }
         byField.get(item.fieldId).push(item.uploadId);
      });

      for (const [fieldId, uploadIds] of byField.entries()) {
         const fieldState = this.fieldStore.get(fieldId);
         if (fieldState) {
            fieldState.uploads = uploadIds;
            await this.restoreField(fieldState);
         }
      }
   }

   async restoreField(fieldState) {
      const { config, context, uploads, groups, id } = fieldState;

      // If in a modal, open it first
      if (context?.modalType) {
         await this.openModalForRestore(context);
      }

      // Find field element
      let fieldElement = document.querySelector(`.field.upload[data-field="${config.name}"]`);

      if (!fieldElement) {
         const uploaderKey = `${config.content}_${config.itemID}_${config.name}`;
         fieldElement = document.querySelector(`.field.upload[data-uploader="${uploaderKey}"]`);
      }

      if (!fieldElement) {
         console.warn(`Field ${config.name} not found for restoration`, config);
         return;
      }

      // Register the field if not already registered
      let fieldKey = fieldElement.dataset.uploader;
      if (!fieldKey || !this.fieldElements.has(fieldKey)) {
         fieldKey = this.registerUploader(fieldElement);
      }

      const fieldEl = this.fieldElements.get(fieldKey);
      const fieldData = this.getFieldData(fieldKey);

      if (!fieldEl || !fieldData) {
         console.error('Failed to register field for restoration');
         return;
      }

      // Merge saved state back into field
      fieldData.state = fieldState.state || 'ready';

      // Rebuild UI references if needed
      if (!fieldEl.ui) {
         fieldEl.ui = this.buildFieldUI(fieldElement);
      }

      if (fieldEl.ui.groups?.display) {
         fieldEl.ui.groups.display.hidden = false;
      }
      if (fieldEl.ui.dropZone) {
         fieldEl.ui.dropZone.hidden = true;
      }

      // Restore groups first
      if (groups && groups.length > 0) {
         await this.restoreGroups(fieldKey, groups);
      }

      // Handle both Array and Set for uploads
      const uploadsArray = uploads instanceof Set
         ? Array.from(uploads)
         : Array.isArray(uploads)
            ? uploads
            : [];

      // Restore uploads
      for (const uploadId of uploadsArray) {
         // Get upload data from store
         const uploadData = this.uploadStore.get(uploadId);
         if (uploadData) {
            await this.restoreUpload(fieldKey, uploadData);
         }
      }

      // Update field state
      await this.saveFieldData(fieldData);
      this.updateFieldState(fieldKey);
      this.maybeLockUploads(fieldKey);
      this.refreshSortable(fieldKey);

      // Queue for upload if needed
      console.log(config);
      if (config.autoUpload && config.mode === 'direct' && config.destination !== 'post_group') {
         await this.queueUpload(fieldKey);
      }
   }

   async restoreUpload(fieldId, uploadData) {
      const fieldEl = this.fieldElements.get(fieldId);
      const fieldData = this.getFieldData(fieldId);

      if (!fieldEl || !fieldData) {
         console.error('Field not found for upload restoration:', fieldId);
         return;
      }

      // Get reconstructed File from blob data
      const file = await this.getBlobData(uploadData.id);

      if (!file) {
         console.warn('Blob data not found for upload:', uploadData.id);
         return;
      }

      // Create preview URL
      const previewUrl = this.createPreviewUrl(file);

      // Recreate DOM element
      const subtype = this.getSubtypeFromMime(file.type);
      const element = this.createUploadElement({
         id: uploadData.id,
         preview: previewUrl,
         meta: uploadData.meta || {
            originalName: file.name,
            size: file.size,
            type: file.type
         },
         subtype: subtype
      }, fieldData.config.destination === 'post_group');

      // Determine correct location
      let location;
      if (uploadData.groupId) {
         // Check if group exists
         const groupEl = this.groupElements.get(uploadData.groupId);
         if (groupEl?.grid) {
            location = groupEl.grid;

            // Add to group's upload list
            const group = fieldData.groups?.find(g => g.id === uploadData.groupId);
            if (group) {
               if (!group.uploads) group.uploads = [];
               if (!group.uploads.includes(uploadData.id)) {
                  group.uploads.push(uploadData.id);
               }
            }
         } else {
            // Group doesn't exist, add to preview
            location = fieldEl.ui.preview;
            uploadData.groupId = null;
         }
      } else {
         // No group, add to preview
         location = fieldEl.ui.preview;
      }

      // Add element to DOM
      if (location) {
         location.appendChild(element);
      } else if (fieldEl.ui.preview) {
         fieldEl.ui.preview.appendChild(element);
         location = fieldEl.ui.preview;
      }

      // Store runtime element data
      this.uploadElements.set(uploadData.id, {
         element: element,
         preview: previewUrl,
         location: location
      });

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

      // Update upload data in store
      uploadData.status = 'processed';
      await this.uploadStore.save(uploadData);

      // Update sortable state for the grid
      if (location) {
         this.updateSortableState(location);
      }
   }

   async restoreGroups(fieldId, groups) {
      const fieldEl = this.fieldElements.get(fieldId);
      const fieldData = this.getFieldData(fieldId);

      if (!fieldEl || !fieldData) {
         console.error('Field not found for group restoration:', fieldId);
         return;
      }

      for (const groupData of groups) {
         const group = this.createGroup(fieldId, groupData.id);
         if (!group) {
            console.warn('Failed to create group:', groupData.id);
            continue;
         }

         const storedGroup = fieldData.groups?.find(g => g.id === groupData.id);
         if (storedGroup) {
            // Restore metadata
            if (groupData.changes) {
               storedGroup.changes = { ...groupData.changes };
            }

            // Preserve upload order
            if (groupData.uploads) {
               storedGroup.uploads = [...groupData.uploads];
            }

            // Restore form field values
            if (groupData.changes) {
               const titleInput = group.element.querySelector('[name*="post_title"]');
               const excerptInput = group.element.querySelector('[name*="post_excerpt"]');

               if (titleInput && groupData.changes.post_title) {
                  titleInput.value = groupData.changes.post_title;
               }
               if (excerptInput && groupData.changes.post_excerpt) {
                  excerptInput.value = groupData.changes.post_excerpt;
               }
            }
         }
      }

      await this.saveFieldData(fieldData);
   }

   async openModalForRestore(context) {
      if (!context) return;

      const { modalType, itemId } = context;

      // Find and click the appropriate button to open the modal
      let trigger = null;

      switch(modalType) {
         case 'create':
            trigger = document.querySelector('[data-action="create"]');
            break;
         case 'edit':
            // Need to find the specific edit button
            if (itemId) {
               trigger = document.querySelector(`[data-action="edit"][data-id="${itemId}"]`);
            }
            break;
         case 'bulkEdit':
            trigger = document.querySelector('[data-action="bulk-edit"]');
            break;
      }

      if (trigger) {
         trigger.click();

         // Wait for modal to open and render
         await new Promise(resolve => setTimeout(resolve, 300));
      } else {
         console.warn('Modal trigger not found for restoration:', context);
      }
   }

   formatBytes(bytes, decimals = 2) {
      if (bytes === 0) return '0 Bytes';
      const k = 1024;
      const dm = decimals < 0 ? 0 : decimals;
      const sizes = ['Bytes', 'KB', 'MB', 'GB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
   }

   /*******************************************************************************
    * CLEANUP METHODS - AGGRESSIVE CLEANUP AFTER SUCCESS
    *******************************************************************************/

   /**
    * Clear individual upload from stores (called after successful upload)
    */
   async clearUpload(uploadId, persist = true) {
      const uploadEl = this.uploadElements.get(uploadId);
      if (uploadEl) {
         this.revokePreviewUrl(uploadEl.preview);
         if (uploadEl.element) {
            const previewUrl = uploadEl.element.dataset.previewUrl;
            this.revokePreviewUrl(previewUrl);
            delete uploadEl.element.dataset.previewUrl;
         }
      }

      // Remove from runtime memory
      this.uploadElements.delete(uploadId);

      // Remove from store (no separate blob store - it's part of the upload object)
      await this.uploadStore.delete(uploadId);

      // Update field if needed
      if (persist) {
         const upload = this.uploadStore.get(uploadId);
         if (upload?.fieldId) {
            await this.schedulePersistance(upload.fieldId);
         }
      }
   }

   /**
    * Clear entire field from stores (called when all uploads complete)
    */
   async clearFieldFromStores(fieldId) {
      const fieldData = this.getFieldData(fieldId);

      // Clear all related uploads
      if (fieldData?.uploads) {
         const uploadsArray = fieldData.uploads instanceof Set
            ? Array.from(fieldData.uploads)
            : fieldData.uploads;

         for (const uploadId of uploadsArray) {
            await this.uploadStore.delete(uploadId);
         }
      }

      // Clear field from store
      await this.fieldStore.delete(fieldId);

      // Keep runtime references (fieldElements, etc) intact for reuse
   }

   cleanupAllPreviewUrls() {
      if (this.previewUrls) {
         this.previewUrls.forEach(url => {
            try {
               URL.revokeObjectURL(url);
            } catch (e) {
               // Ignore errors during cleanup
            }
         });
         this.previewUrls.clear();
      }
   }

   /*******************************************************************************
    * UI UPDATE METHODS
    *******************************************************************************/

   updateFieldState(fieldId) {
      const fieldEl = this.fieldElements.get(fieldId);
      const fieldData = this.getFieldData(fieldId);
      if (!fieldEl || !fieldData) return;

      const container = fieldEl.element;
      const uploadCount = fieldData.uploads?.size || 0;
      const hasGroups = fieldEl.ui.groups?.container?.querySelectorAll('.upload-group').length > 0;

      container.dataset.hasUploads = uploadCount > 0 ? 'true' : 'false';
      container.dataset.uploadCount = uploadCount.toString();
      container.dataset.hasGroups = hasGroups ? 'true' : 'false';

      if (fieldEl.ui.preview) {
         fieldEl.ui.preview.setAttribute('aria-label',
            `Upload preview area with ${uploadCount} item${uploadCount !== 1 ? 's' : ''}`
         );
      }
   }

   updateUploadProgress(fieldId, current, total, message) {
      const fieldEl = this.fieldElements.get(fieldId);
      if (!fieldEl?.ui?.progress?.progress) return;

      const progress = fieldEl.ui.progress;
      const percent = total > 0 ? (current / total) * 100 : 0;

      if (progress.fill) progress.fill.style.width = `${percent}%`;
      if (progress.text) progress.text.textContent = message;
      if (progress.count) progress.count.textContent = `${current}/${total}`;

      progress.progress.hidden = (current === total);
   }

   updateFieldStatus(fieldId, status) {
      const fieldData = this.getFieldData(fieldId);
      if (!fieldData) return;

      fieldData.state = status;
      this.saveFieldData(fieldData);
   }

   updateUploadStatus(uploadId, status) {
      const upload = this.uploadStore.get(uploadId);
      if (!upload) return;

      upload.status = status;
      this.uploadStore.save(upload);
      this.updateUploadUI(uploadId);
   }

   updateUploadUI(uploadId) {
      const uploadEl = this.uploadElements.get(uploadId);
      const upload = this.uploadStore.get(uploadId);
      if (!upload || !uploadEl?.element) return;

      uploadEl.element.className = uploadEl.element.className.replace(/status-[\w-]+/g, '');
      uploadEl.element.classList.add(`status-${upload.status}`);

      const progress = uploadEl.element.querySelector('.progress');
      if (progress) {
         this.updateUploadItemProgress(uploadId,
            this.getStatusProgress(upload.status),
            upload.status
         );
      }
   }

   showUploadProgress(uploadId, show = true) {
      const uploadEl = this.uploadElements.get(uploadId);
      if (!uploadEl?.element) return;

      const progressEl = uploadEl.element.querySelector('.progress');
      if (progressEl) {
         if (show) {
            progressEl.style.removeProperty('animation');
            progressEl.hidden = false;
         } else {
            progressEl.style.animation = 'fadeOut var(--transition-base)';
            setTimeout(() => { progressEl.hidden = true; }, 300);
         }
      }
   }

   updateUploadItemProgress(uploadId, percent, status = null) {
      const uploadEl = this.uploadElements.get(uploadId);
      if (!uploadEl?.element) return;

      const progressEl = uploadEl.element.querySelector('.progress');
      if (!progressEl) return;

      const fill = progressEl.querySelector('.fill');
      const details = progressEl.querySelector('.details');
      const icon = progressEl.querySelector('.icon');

      if (fill) fill.style.width = `${percent}%`;
      if (status && details) details.textContent = this.getStatusText(status);
      if (status && icon) icon.innerHTML = this.getStatusIcon(status).outerHTML;
   }

   maybeLockUploads(fieldId) {
      const fieldEl = this.fieldElements.get(fieldId);
      const fieldData = this.getFieldData(fieldId);
      if (!fieldEl?.ui?.dropZone || !fieldData) return;

      const uploadCount = fieldData.uploads?.size || 0;

      // For groupable uploads, set max to 20
      const maxFiles = fieldData.config.destination === 'post_group'
         ? 20
         : (fieldData.config?.maxFiles || 999);

      fieldEl.ui.dropZone.hidden = uploadCount >= maxFiles;
      fieldEl.element.classList.toggle('at-max-uploads', uploadCount >= maxFiles);

      // Show helpful message for groupable uploads
      if (fieldData.config.destination === 'post_group' && uploadCount >= maxFiles) {
         this.a11y.announce('Maximum of 20 uploads reached. Please submit current uploads before adding more.');
      }
   }

   /*******************************************************************************
    * GROUP MANAGEMENT
    *******************************************************************************/
   /**
    * Create sortable instance for a grid
    */
   createSortableForGrid(grid, fieldId, groupId = null) {
      if (!grid || grid.sortableInstance) return;

      const sortableInstance = new Sortable(grid, {
         animation: 150,
         draggable: '.item',
         multiDrag: true,
         selectedClass: 'selected-for-drag',
         avoidImplicitDeselect: true,
         group: { name: fieldId, pull: true, put: true },
         ghostClass: 'sortable-ghost',
         chosenClass: 'sortable-chosen',
         dragClass: 'sortable-drag',

         // Centralized drop handler
         onEnd: (evt) => this.handleDrop(evt, fieldId),

         // Selection sync
         onSelect: (evt) => {
            const checkbox = evt.item.querySelector('[name*="select-item"]');
            if (checkbox && !checkbox.checked) {
               checkbox.checked = true;
               checkbox.dispatchEvent(new Event('change', { bubbles: true }));
            }
         },

         onDeselect: (evt) => {
            const checkbox = evt.item.querySelector('[name*="select-item"]');
            if (checkbox && checkbox.checked) {
               checkbox.checked = false;
               checkbox.dispatchEvent(new Event('change', { bubbles: true }));
            }
         },

         onAdd: (evt) => this.updateSortableState(evt.to),
         onRemove: (evt) => this.updateSortableState(evt.from)
      });

      grid.sortableInstance = sortableInstance;

      const gridId = groupId
         ? `${fieldId}-group-${groupId}`
         : `${fieldId}-preview`;

      this.sortableInstances.set(gridId, sortableInstance);

      return sortableInstance;
   }
   createGroup(fieldId, groupId = null) {
      const fieldData = this.getFieldData(fieldId);
      const fieldEl = this.fieldElements.get(fieldId);
      if (!fieldData || !fieldEl) return null;

      if (!groupId) {
         groupId = `group_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
      }

      const groupElement = this.createGroupElement(groupId, fieldId);
      if (!groupElement) return null;

      // Store in field UI Map
      if (!fieldEl.ui.groups) {
         fieldEl.ui.groups = {
            groups: new Map(),
            container: null,
            empty: null,
            display: null
         };
      }

      fieldEl.ui.groups.groups.set(groupId, groupElement);

      // Insert into DOM
      if (fieldEl.ui.groups.container && fieldEl.ui.groups.empty) {
         fieldEl.ui.groups.container.insertBefore(groupElement, fieldEl.ui.groups.empty);
      } else if (fieldEl.ui.groups.container) {
         fieldEl.ui.groups.container.appendChild(groupElement);
      }

      // Store group element reference
      const grid = groupElement.querySelector('.item-grid.group');
      this.groupElements.set(groupId, {
         element: groupElement,
         grid: grid,
         fieldId: fieldId
      });

      // Add to field groups
      if (!fieldData.groups) fieldData.groups = [];
      const existingGroup = fieldData.groups.find(g => g.id === groupId);
      if (!existingGroup) {
         fieldData.groups.push({
            id: groupId,
            uploads: [],
            changes: {}
         });
         this.saveFieldData(fieldData);
      }

      // Initialize selection handler
      this.addGroupSelectionHandler(fieldId, groupId);

      if (grid) {
         this.createSortableForGrid(grid, fieldId, groupId);
      }

      return { id: groupId, element: groupElement, grid: grid };
   }
   createGroupElement(groupId, fieldId) {
      let groupElement = window.getTemplate('imageGroup');
      if (!groupElement) return;

      groupElement.dataset.groupId = groupId;
      groupElement.dataset.fieldId = fieldId;

      let fields = window.getTemplate('groupMetadata');
      const fieldsContainer = groupElement.querySelector('.fields');
      if (fieldsContainer && fields) {
         fieldsContainer.append(fields);

         const titleInput = fieldsContainer.querySelector('[name="post_title"]');
         const excerptInput = fieldsContainer.querySelector('[name="post_excerpt"]');

         if (titleInput) {
            titleInput.id = `${groupId}_title`;
            titleInput.name = `${groupId}[post_title]`;
         }
         if (excerptInput) {
            excerptInput.id = `${groupId}_excerpt`;
            excerptInput.name = `${groupId}[post_excerpt]`;
         }

         const fieldData = this.getFieldData(fieldId);
         if (fieldData && fieldData.config.content !== '') {
            let summary = groupElement.querySelector('summary');
            if (summary) summary.textContent = fieldData.config.content + ' Fields';
         }
      } else {
         groupElement.querySelector('details')?.remove();
      }

      const gridContainer = groupElement.querySelector('.item-grid.group');
      if (gridContainer) {
         gridContainer.dataset.groupId = groupId;
      }

      return groupElement;
   }

   deleteGroup(groupId, confirm = true) {
      const groupEl = this.groupElements.get(groupId);
      if (!groupEl) return;

      const fieldData = this.getFieldData(groupEl.fieldId);
      if (!fieldData) return;

      const group = fieldData.groups?.find(g => g.id === groupId);
      let keepUploads = true;

      if (confirm && group?.uploads?.length > 0) {
         keepUploads = !window.confirm('Delete uploads in group?');
      }

      if (confirm && keepUploads && group?.uploads) {
         // Move uploads back to preview
         group.uploads.forEach(uploadId => {
            this.removeFromGroup(uploadId);
         });
      }

      // Remove from field groups
      if (fieldData.groups) {
         fieldData.groups = fieldData.groups.filter(g => g.id !== groupId);
         this.saveFieldData(fieldData);
      }

      // Remove DOM element
      if (groupEl.element) {
         groupEl.element.remove();
         this.a11y.announce('Group removed');
      }

      // Remove from maps
      this.groupElements.delete(groupId);

      // Clean up sortable
      const sortableKey = `${groupEl.fieldId}-group-${groupId}`;
      const sortable = this.sortableInstances.get(sortableKey);
      if (sortable?.destroy) {
         sortable.destroy();
      }
      this.sortableInstances.delete(sortableKey);

      this.schedulePersistance(groupEl.fieldId);
   }

   addToGroup(uploadId, target = null, persist = true) {
      const upload = this.uploadStore.get(uploadId);
      const uploadEl = this.uploadElements.get(uploadId);
      if (!upload || !uploadEl) return;

      const fieldData = this.getFieldData(upload.fieldId);
      const fieldEl = this.fieldElements.get(upload.fieldId);
      if (!fieldData || !fieldEl) return;

      // Already in correct location
      if ((!target && uploadEl.location === fieldEl.ui.preview) || target === uploadEl.location) {
         return;
      }

      // Remove from previous group
      if (upload.groupId) {
         const group = fieldData.groups?.find(g => g.id === upload.groupId);
         if (group) {
            group.uploads = group.uploads.filter(id => id !== uploadId);
            if (group.uploads.length === 0) {
               this.deleteGroup(upload.groupId);
            }
         }
      }

      // Clear selection checkbox
      const checkbox = uploadEl.element.querySelector('[name*="select-item"]');
      if (checkbox) checkbox.checked = false;

      let featured = uploadEl.element.querySelector('[name="featured"]');
      if (featured) featured.hidden = !target;

      // Moving to preview or to group
      if (!target || target.classList.contains('preview')) {
         target = fieldEl.ui.preview;
         upload.groupId = null;
      } else {
         // Moving to group
         const groupId = target.dataset.groupId;
         if (featured) featured.name = groupId + '_' + featured.name;

         const group = fieldData.groups?.find(g => g.id === groupId);
         if (group) {
            if (!group.uploads) group.uploads = [];
            group.uploads.push(uploadId);
            upload.groupId = groupId;
         }
      }

      // Update location
      uploadEl.location = target;
      target.append(uploadEl.element);

      // Update stores
      this.uploadStore.save(upload);
      if (persist) {
         this.saveFieldData(fieldData);
      }

      // Update sortable state
      this.updateSortableState(target);
      if (uploadEl.location && uploadEl.location !== target) {
         this.updateSortableState(uploadEl.location);
      }
   }

   removeFromGroup(uploadId) {
      const upload = this.uploadStore.get(uploadId);
      const uploadEl = this.uploadElements.get(uploadId);
      if (!upload || !uploadEl) return;

      const fieldData = this.getFieldData(upload.fieldId);
      const fieldEl = this.fieldElements.get(upload.fieldId);
      if (!fieldData || !fieldEl) return;

      // Remove from current group
      if (upload.groupId) {
         const group = fieldData.groups?.find(g => g.id === upload.groupId);
         if (group) {
            group.uploads = group.uploads.filter(id => id !== uploadId);
            if (group.uploads.length === 0) {
               this.deleteGroup(upload.groupId, false);
            }
         }
         upload.groupId = null;
      }

      // Move back to preview
      if (fieldEl.ui?.preview) {
         fieldEl.ui.preview.appendChild(uploadEl.element);
         uploadEl.location = fieldEl.ui.preview;
      }

      // Hide featured radio
      const featured = uploadEl.element.querySelector('[name="featured"]');
      if (featured) {
         featured.hidden = true;
         featured.checked = false;
      }

      this.uploadStore.save(upload);
      this.updateSortableState(fieldEl.ui.preview);
   }

   removeUpload(fieldId, uploadId) {
      const fieldData = this.getFieldData(fieldId);
      const upload = this.uploadStore.get(uploadId);
      const uploadEl = this.uploadElements.get(uploadId);

      if (!fieldData || !upload) return;

      // Remove from field
      fieldData.uploads?.delete(uploadId);

      // Remove from group if grouped
      if (upload.groupId) {
         const group = fieldData.groups?.find(g => g.id === upload.groupId);
         if (group) {
            group.uploads = group.uploads.filter(id => id !== uploadId);
            if (group.uploads.length === 0) {
               this.deleteGroup(upload.groupId);
            }
         }
      }

      // Clean up element
      uploadEl?.element?.remove();

      // Clean up memory
      this.clearUpload(uploadId);

      // Update field state
      this.saveFieldData(fieldData);
      this.updateFieldState(fieldId);
      this.maybeLockUploads(fieldId);

      const handler = this.selectionHandlers.get(fieldId);
      if (handler) {
         handler.deselect(uploadId);
      }

      this.a11y.announce('Upload removed');
   }

   handleGroupMetaChange(input) {
      const groupEl = this.getGroupFromElement(input);
      if (!groupEl) return;

      const fieldData = this.getFieldData(groupEl.fieldId);
      const group = fieldData?.groups?.find(g => g.id === groupEl.element.dataset.groupId);
      if (!group) return;

      if (!group.changes) group.changes = {};

      let name = input.name;
      if (name.includes('group')) {
         name = name.replace(`${group.id}_`, '').replace(`${group.id}[`, '').replace(']', '');
      }

      group.changes[name] = input.value;
      this.saveFieldData(fieldData);
      this.schedulePersistance(groupEl.fieldId);
   }

   /*******************************************************************************
    * ACTION HANDLERS
    *******************************************************************************/

   handleAction(button) {
      const action = button.dataset.action;
      const fieldId = this.getFieldIdFromElement(button);

      switch(action) {
         case 'add-to-group':
            this.handleAddToGroup(button);
            break;
         case 'delete-group':
            this.handleDeleteGroup(button);
            break;
         case 'delete-upload':
         case 'remove-from-group':
            this.handleRemoveItem(button);
            break;
         case 'upload':
            const fieldEl = this.fieldElements.get(fieldId);
            if (fieldEl) {
               fieldEl.element.closest('details').open = false;
               document.body.classList.add('uploading');
               this.submitUploads(fieldId);
            }
            break;
         case 'restore':
            this.handleRestoreUploads().then(() => {});
            break;
         case 'restore-all':
            this.handleRestoreAll().then(() => {});
            break;
         case 'clear-cache':
            if (!confirm('Save these uploads for later?')) {
               this.cleanupStoredUploads();
            }
            this.cleanupRestore();
            break;
      }
   }

   handleAddToGroup(button) {
      const fieldElement = button.closest(this.selectors.field.field);
      const fieldId = fieldElement?.dataset.uploader;
      if (!fieldId) return;

      const selected = this.selected.get(fieldId);

      if (!selected || selected.size === 0) {
         this.createGroup(fieldId);
      } else {
         const group = this.createGroup(fieldId);
         if (!group) return;

         selected.forEach(uploadId => {
            this.addToGroup(uploadId, group.grid);
         });

         const handler = this.selectionHandlers.get(fieldId);
         handler?.clearSelection();

         this.a11y.announce(`Created group with ${selected.size} items`);
      }

      this.schedulePersistance(fieldId);
   }

   handleDeleteGroup(button) {
      const group = button.closest(this.selectors.groups.container);
      if (!group) return;

      const groupId = group.dataset.groupId;
      const fieldId = this.getFieldIdFromElement(group);

      if (!confirm('Delete this group? Items will be moved back to the upload area.')) {
         return;
      }

      const items = group.querySelectorAll(this.selectors.items.item);
      items.forEach(item => {
         const uploadId = item.dataset.uploadId;
         this.removeFromGroup(uploadId);
      });

      this.deleteGroup(groupId);
      this.a11y.announce('Group deleted, items returned to upload area');
      this.schedulePersistance(fieldId);
   }

   handleRemoveItem(button) {
      const item = button.closest(this.selectors.items.item);
      if (!item) return;

      const uploadId = item.dataset.uploadId;
      const fieldId = this.getFieldIdFromElement(item);

      if (!confirm('Remove this item?')) return;

      this.removeUpload(fieldId, uploadId);
      this.a11y.announce('Item removed');
      this.schedulePersistance(fieldId);
   }

   /*******************************************************************************
    * SELECTION MANAGEMENT
    *******************************************************************************/

   addFieldSelectionHandler(fieldId) {
      if (this.selectionHandlers.has(fieldId)) {
         return this.selectionHandlers.get(fieldId);
      }

      const fieldEl = this.fieldElements.get(fieldId);
      if (!fieldEl?.element) return;

      const handler = new window.jvbHandleSelection({
         container: fieldEl.element,
         ui: {
            selectAll: fieldEl.element.querySelector('[name="select-all-uploads"]'),
            bulkControls: fieldEl.element.querySelector('.selection-actions'),
            count: fieldEl.element.querySelector('.selection-count')
         },
         itemSelector: '[data-upload-id]',
         checkboxSelector: '[name*="select-item"]'
      });

      handler.subscribe((event, data) => {
         switch(event) {
            case 'item-selected':
               // Sync with Sortable
               this.syncSortableSelection(fieldId, data.selectedItems);
               this.selected.set(fieldId, data.selectedItems);
               break;
            case 'item-deselected':
               this.syncSortableSelection(fieldId, data.selectedItems);
               this.selected.set(fieldId, data.selectedItems);
               break;
            case 'range-selected':
               this.syncSortableSelection(fieldId, data.selectedItems);
               this.selected.set(fieldId, data.selectedItems);
               break;
            case 'select-all':
               this.handleSelectAll(data.container, data.selected);
               break;
         }
      });

      this.selectionHandlers.set(fieldId, handler);
      return handler;
   }

   addGroupSelectionHandler(fieldId, groupId) {
      const handlerKey = `${fieldId}_${groupId}`;
      if (this.selectionHandlers.has(handlerKey)) {
         return this.selectionHandlers.get(handlerKey);
      }

      const groupEl = this.groupElements.get(groupId);
      if (!groupEl?.element) return;

      const handler = new window.jvbHandleSelection({
         container: groupEl.element,
         ui: {
            selectAll: groupEl.element.querySelector(this.selectors.groups.selectAll),
            bulkControls: groupEl.element.querySelector(this.selectors.groups.actions),
            count: groupEl.element.querySelector(this.selectors.groups.count)
         },
         itemSelector: '[data-upload-id]',
         checkboxSelector: '[name*="select-item"]'
      });

      handler.subscribe((event, data) => {
         switch(event) {
            case 'item-selected':
            case 'item-deselected':
            case 'range-selected':
               this.selected.set(fieldId, data.selectedItems);
               break;
            case 'select-all':
               this.handleSelectAll(data.container, data.selected);
               break;
         }
      });

      this.selectionHandlers.set(handlerKey, handler);
      return handler;
   }

   handleSelectAll(container, selected) {
      // Can add custom logic here if needed
   }

   /*******************************************************************************
    * HELPER METHODS
    *******************************************************************************/

   /**
    * Get field data from store and normalize it
    * Always use this instead of directly accessing fieldStore.get()
    */
   getFieldData(fieldId) {
      const fieldData = this.fieldStore.get(fieldId);
      if (!fieldData) return null;

      // Only convert uploads back to Set (DataStore returns Arrays)
      if (Array.isArray(fieldData.uploads)) {
         fieldData.uploads = new Set(fieldData.uploads);
      } else if (!fieldData.uploads) {
         fieldData.uploads = new Set();
      }

      // Ensure groups is an array
      if (!Array.isArray(fieldData.groups)) {
         fieldData.groups = [];
      }

      return fieldData;
   }

   /**
    * Save field data to store, converting Sets to Arrays
    */
   async saveFieldData(fieldData) {
      await this.fieldStore.save({
         ...fieldData,
         timestamp: Date.now()
      });
   }

   determineFieldId(fieldElement) {
      const content = fieldElement.dataset.content+'_' ||
         fieldElement.closest('dialog')?.dataset.content+'_' ||
         fieldElement.closest('form')?.dataset.save+'_' || '';
      const itemID = fieldElement.dataset.itemId+'_' ||
         fieldElement.closest('dialog')?.dataset.itemId+'_' || '';
      const field = fieldElement.dataset.field || '';

      return `${content}${itemID}${field}`;
   }

   getFromElement(element, type) {
      const map = {
         'field': {
            selector: this.selectors.field.field,
            key: 'uploader',
            getRuntimeData: (id) => this.fieldElements.get(id),
            getStoreData: (id) => this.getFieldData(id)
         },
         'upload': {
            selector: this.selectors.items.item,
            key: 'uploadId',
            getRuntimeData: (id) => this.uploadElements.get(id),
            getStoreData: (id) => this.uploadStore.get(id)
         },
         'group': {
            selector: this.selectors.groups.container,
            key: 'groupId',
            getRuntimeData: (id) => this.groupElements.get(id),
            getStoreData: (id) => {
               // Groups are stored in field.groups array
               const groupEl = this.groupElements.get(id);
               if (!groupEl) return null;
               const fieldData = this.getFieldData(groupEl.fieldId);
               return fieldData?.groups?.find(g => g.id === id);
            }
         }
      };

      const config = map[type];
      if (!config) return null;

      const el = element.closest(config.selector);
      if (!el) return null;

      const id = el.dataset[config.key];

      // Return combined runtime + store data for convenience
      const runtime = config.getRuntimeData(id);
      const store = config.getStoreData(id);

      return { ...runtime, ...store };
   }

   getFieldFromElement(el) { return this.getFromElement(el, 'field'); }
   getUploadFromElement(el) { return this.getFromElement(el, 'upload'); }
   getGroupFromElement(el) { return this.getFromElement(el, 'group'); }

   getFieldIdFromElement(el) {
      const field = this.getFromElement(el, 'field');
      return field?.id ?? null;
   }
   getUploadIdFromElement(el) {
      const upload = this.getFromElement(el, 'upload');
      return upload?.id ?? null;
   }
   getGroupIdFromElement(el) {
      const group = this.getFromElement(el, 'group');
      return group?.id ?? null;
   }

   getSubtypeFromMime(mimeType) {
      if (mimeType.startsWith('image/')) return 'image';
      if (mimeType.startsWith('video/')) return 'video';
      return 'document';
   }

   getStatusText(status) {
      return this.statusMapping[status] || status;
   }

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

   getStatusProgress(status) {
      const progress = {
         'local_processing': 28,
         'queued': 50,
         'uploading': 66,
         'pending': 75,
         'processing': 89,
         'completed': 100
      };
      return progress[status] || 0;
   }


   createUploadElement(upload, draggable = false) {
      let image = window.getTemplate('uploadItem');
      if (!image) return;

      image.dataset.uploadId = upload.id;
      image.dataset.subtype = upload.subtype || 'image';

      let [featured, img, video, preview, details] = [
         image.querySelector('[name="featured"]'),
         image.querySelector('img'),
         image.querySelector('video'),
         image.querySelector('label > span'),
         image.querySelector('details')
      ];

      if (featured) featured.value = upload.id;

      switch (upload.subtype) {
         case 'image':
            if (img) {
               img.src = upload.preview;
               img.alt = upload.meta?.originalName || '';
            }
            video?.remove();
            preview?.remove();
            break;
         case 'video':
            if (video) video.src = upload.preview;
            img?.remove();
            preview?.remove();
            break;
         case 'document':
            const fileName = upload.meta?.originalName || '';
            const extension = fileName.split('.').pop()?.toLowerCase() || '';
            const iconMap = {
               'pdf': 'file-pdf', 'csv': 'file-csv',
               'doc': 'file-doc', 'docx': 'file-doc',
               'txt': 'file-txt', 'xls': 'file-xls', 'xlsx': 'file-xls'
            };
            const icon = window.getIcon(iconMap[extension] || 'file');
            if (preview) {
               preview.innerText = fileName;
               preview.prepend(icon);
            }
            img?.remove();
            video?.remove();
            break;
      }

      if (details) {
         let template = window.getTemplate('uploadMeta');
         if (template) details.append(template);
      }

      image.draggable = draggable;

      // Update input IDs
      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;
         }
      });

      return image;
   }

   /*******************************************************************************
    * PERSISTENCE
    *******************************************************************************/

   schedulePersistance(fieldId) {
      const key = `persist_${fieldId}`;
      window.debouncer.schedule(
         key,
         () => this.persistFieldState(fieldId),
         250
      );
   }

   async persistFieldState(fieldId) {
      const fieldData = this.getFieldData(fieldId);
      if (!fieldData) return;

      // Save with updated timestamp
      await this.saveFieldData(fieldData);
   }

   // In UploadManager, add blob conversion helpers
   async saveBlobData(uploadId, file) {
      const arrayBuffer = await file.arrayBuffer();

      const uploadData = this.uploadStore.get(uploadId) || { id: uploadId };

      // Store blob data as ArrayBuffer with metadata
      uploadData.blobData = {
         buffer: arrayBuffer,
         name: file.name,
         type: file.type,
         size: file.size,
         lastModified: file.lastModified || Date.now()
      };

      await this.uploadStore.save(uploadData);
   }

   async getBlobData(uploadId) {
      const upload = this.uploadStore.get(uploadId);
      if (!upload?.blobData) return null;

      // Reconstruct File from ArrayBuffer
      const blob = new Blob([upload.blobData.buffer], { type: upload.blobData.type });
      return new File([blob], upload.blobData.name, {
         type: upload.blobData.type,
         lastModified: upload.blobData.lastModified
      });
   }

   /*******************************************************************************
    HELPER to GET UPLOADED FILES
   *******************************************************************************/
   /**
    * Get all files for a form (searches all upload fields within form)
    */
   async getFilesForForm(formElement) {
      const uploadFields = formElement.querySelectorAll('[data-upload-field]');
      const allFiles = [];

      for (const field of uploadFields) {
         const fieldId = this.determineFieldId(field);
         const files = await this.getFilesForField(fieldId);
         allFiles.push(...files);
      }

      return allFiles;
   }

   /**
    * Get all files for a specific field
    */
   async getFilesForField(fieldId) {
      const fieldData = this.getFieldData(fieldId);
      if (!fieldData?.uploads) return [];

      const files = [];
      const uploadsArray = fieldData.uploads instanceof Set
         ? Array.from(fieldData.uploads)
         : fieldData.uploads;

      for (const uploadId of uploadsArray) {
         const upload = this.uploadStore.get(uploadId);
         if (!upload) continue;

         // Get the actual File object from blob data
         const file = await this.getBlobData(uploadId);
         if (file) {
            files.push({
               file: file,
               uploadId: uploadId,
               fieldName: fieldData.config.name,
               meta: upload.meta || {}
            });
         }
      }

      return files;
   }

   /*******************************************************************************
    * RECOVERY & RESTORATION
    *******************************************************************************/

   handleFieldStoreEvent(event, data) {
      switch(event) {
         case 'data-loaded':
            this.fieldStoreReady = true;
            this.checkIfBothStoresReady();
            break;
      }
   }

   handleUploadStoreEvent(event, data) {
      switch(event) {
         case 'data-loaded':
            this.uploadStoreReady = true;
            this.checkIfBothStoresReady();
            break;
         case 'item-saved':
            this.showSaveIndicator(data.key);
            break;
      }
   }

   checkIfBothStoresReady() {
      if (this.fieldStoreReady && this.uploadStoreReady && !this.hasCheckedForUploads) {
         this.hasCheckedForUploads = true;
         this.checkForStoredUploads();
      }
   }

   async checkForStoredUploads() {
      const allFieldStates = this.fieldStore.getAll();

      const pendingFields = allFieldStates.filter(field => {
         if (!field.uploads) return false;

         // Handle both Set and Array (from IndexedDB)
         const uploadsArray = field.uploads instanceof Set
            ? Array.from(field.uploads)
            : Array.isArray(field.uploads)
               ? field.uploads
               : [];

         return uploadsArray.some(uploadId => {
            const upload = this.uploadStore.get(uploadId);
            return upload && !upload.operationId &&
               ['completed', 'processed', 'local_processing', 'processed-original'].includes(upload.status);
         });
      });
      if (pendingFields.length === 0) return;

      await this.showRecoveryNotification(pendingFields);
   }

   async showRecoveryNotification(pendingFields) {
      const totalUploads = pendingFields.reduce((sum, field) => sum + field.uploads.length, 0);
      const totalGroups = pendingFields.reduce((sum, field) =>
         sum + (field.groups?.length || 0), 0);

      let notification = window.getTemplate('restoreNotification');
      if (!notification) {
         console.error('Restore notification template not found');
         return;
      }

      // Build appropriate message
      let message;
      if (totalGroups > 0) {
         let group = totalGroups > 1 ? 'groups' : 'group';
         let upload = totalUploads > 1 ? 'uploads' : 'upload';
         message = `${totalGroups} ${group} with ${totalUploads} ${upload} can be restored.`;
      } else {
         message = `${totalUploads} upload(s) from ${pendingFields.length} field(s) can be recovered.`;
      }

      const detailsEl = notification.querySelector('.restore-details');
      if (detailsEl) {
         detailsEl.textContent = message;
      }

      // Build the restoration preview
      for (const field of pendingFields) {
         let fieldTemplate = window.getTemplate('restoreField');
         if (!fieldTemplate) continue;

         // Set field name/title
         const titleEl = fieldTemplate.querySelector('h3');
         if (titleEl) {
            titleEl.textContent = field.config.name || 'Unnamed Field';
         }

         const itemGrid = fieldTemplate.querySelector('.item-grid.restore');

         // Process each upload
         for (let uploadId of field.uploads) {
            const upload = this.uploadStore.get(uploadId);
            let uploadItem = window.getTemplate('uploadItem');
            if (!uploadItem) continue;
            //
            //    const imgEl = uploadItem.querySelector('img');
            //    const placeholderEl = uploadItem.querySelector('.image-placeholder');
            //
            const file = await this.getBlobData(upload.id);
            if (file) {

               try {
                  // Create new blob URL from stored data
                  const previewUrl = this.createPreviewUrl(file);

                  let [
                     featured,
                     img,
                     video,
                     preview,
                     details
                  ] = [
                     uploadItem.querySelector('[name="featured"]'),
                     uploadItem.querySelector('img'),
                     uploadItem.querySelector('video'),
                     uploadItem.querySelector('label > span'),
                     uploadItem.querySelector('details')
                  ];

                  uploadItem.dataset.uploadId = upload.id;


                  uploadItem.dataset.fieldId = field.id;

                  let subtype = this.getSubtypeFromMime(file.type);
                  uploadItem.dataset.subtype = subtype;
                  switch (subtype) {
                     case 'image':
                        [
                           img.src,
                           img.alt
                        ] = [
                           previewUrl,
                           file.name ?? upload.meta?.originalName ?? ''
                        ];
                        video.remove();
                        preview.remove();
                        break;
                     case 'video':
                        video.src = previewUrl;
                        img.remove();
                        preview.remove();
                        break;
                     case 'document':
                        let extension = '';
                        let icon;
                        switch (extension) {
                           case 'pdf':
                              icon = window.getIcon('file-pdf');
                              break;
                           case 'csv':
                              icon = window.getIcon('file-csv');
                              break;
                           case 'doc':
                              icon = window.getIcon('file-doc');
                              break;
                           case 'txt':
                              icon = window.getIcon('file-txt');
                              break;
                           case 'xls':
                              icon = window.getIcon('file-xls');
                              break;
                           default:
                              icon = window.getIcon('file');
                              break;
                        }

                        preview.innerText = upload.originalFile.name;
                        preview.prepend(icon);
                        img.remove();
                        video.remove();
                        break;
                  }

                  // Store URL for cleanup later
                  uploadItem.dataset.previewUrl = previewUrl;
               } catch (error) {
                  console.warn('Failed to create preview for upload:', upload.id, error);
               }
            }

            // Set upload metadata
            const nameEl = uploadItem.querySelector('summary span');
            if (nameEl) {
               nameEl.textContent = upload.meta?.originalName || 'Unknown file';
            }

            const metaEl = uploadItem.querySelector('details');
            if (metaEl && upload.meta) {
               metaEl.textContent = `${this.formatBytes(upload.meta.size)} • ${upload.meta.type}`;
            }

            // Update input IDs safely
            uploadItem.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 (itemGrid) {
               itemGrid.appendChild(uploadItem);
            }
         }

         notification.querySelector('.wrap').appendChild(itemGrid);
      }

      document.querySelector('.field.upload').appendChild(notification);
      notification = document.querySelector('dialog.restore-uploads');
      this.restoreModal = new window.jvbModal(notification);
      this.restoreSelection = new window.jvbHandleSelection({
         container: notification,
         ui: {
            selectAll: notification.querySelector('#select-all-restore'),
            count: notification.querySelector('.selection-count'),
         },
      });

      this.restoreModal.handleOpen();

   }

   async handleRestoreUploads() {
      let notification = document.querySelector('dialog.restore-uploads');
      if (!notification) {
         return;
      }

      const selectedUploads = this.getSelectedRestorationUploads(notification);
      if (selectedUploads.length === 0) {
         return;
      }
      await this.restoreSelectedUploads(selectedUploads);

      this.cleanupRestore();
   }

   async handleRestoreAll() {
      let notification = document.querySelector('dialog.restore-uploads');
      if (!notification) {
         return;
      }
      // Gets ALL uploads from notification without checking selection
      const allUploads = [];
      notification.querySelectorAll('.item.upload').forEach(item => {
         let uploadId = item.dataset.uploadId;
         let fieldId = item.dataset.fieldId;
         allUploads.push({ uploadId, fieldId });
      });

      await this.restoreSelectedUploads(allUploads);
      this.cleanupRestore();
   }

   showSaveIndicator(key) {
      // Optional: show user that state is being saved
   }

   cleanupRestore() {
      this.restoreModal.handleClose();
      this.restoreSelection.destroy();
      this.restoreSelection = null;
      this.restoreModal.destroy();
      this.restoreModal.modal.remove();
      this.restoreModal = null;
   }

   async cleanupStoredUploads() {
      await this.fieldStore.clear();
      await this.uploadStore.clear();
   }

   /*******************************************************************************
    * EVENT SYSTEM
    *******************************************************************************/

   subscribe(callback) {
      this.subscribers.add(callback);
      return () => this.subscribers.delete(callback);
   }

   notify(event, data = {}) {
      this.subscribers.forEach(cb => {
         try {
            cb(event, data);
         } catch (error) {
            console.error('Subscriber error:', error);
         }
      });
   }

   /*******************************************************************************
    * DESTROY & CLEANUP
    *******************************************************************************/

   destroy() {
      document.removeEventListener('click', this.clickHandler);
      document.removeEventListener('change', this.changeHandler);
      document.removeEventListener('dragenter', this.dragEnterHandler);
      document.removeEventListener('dragleave', this.dragLeaveHandler);
      document.removeEventListener('dragover', this.dragOverHandler);
      document.removeEventListener('drop', this.dropHandler);

      if (this.dragController) {
         this.dragController.destroy();
      }

      this.selectionHandlers.forEach(handler => handler.destroy());
      this.selectionHandlers.clear();

      this.cleanupAllPreviewUrls();

      this.sortableInstances.forEach(instance => {
         if (instance?.destroy) instance.destroy();
      });
      this.sortableInstances.clear();

      this.uploadElements.clear();
      this.fieldElements.clear();
      this.groupElements.clear();
      this.selected.clear();
      this.subscribers.clear();
   }
}

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', async function () {
   window.auth.subscribe((event) => {
      if (event === 'auth-loaded') {
         window.jvbUploads = new UploadManager();
      }
   });
});