/**
 * WPlace AutoBOT - Utils Manager
 * Centralized utility functions for the WPlace automation systemds
 */

class WPlaceUtilsManager {
  constructor() {
    this.translationCache = new Map();
    this._labCache = new Map();
    
    // Available languages
    this.AVAILABLE_LANGUAGES = [
      'en', 'ru', 'pt', 'vi', 'fr', 'id', 'tr', 
      'zh-CN', 'zh-TW', 'ja', 'ko', 'uk'
    ];
  }

  // Basic utility functions
  sleep = (ms) => new Promise((r) => setTimeout(r, ms));

  async dynamicSleep(tickAndGetRemainingMs) {
    let remaining = Math.max(0, await tickAndGetRemainingMs());
    while (remaining > 0) {
      const interval = remaining > 5000 ? 2000 : remaining > 1000 ? 500 : 100;
      await this.sleep(Math.min(interval, remaining));
      remaining = Math.max(0, await tickAndGetRemainingMs());
    }
  }

  async waitForSelector(selector, interval = 200, timeout = 5000) {
    const start = Date.now();
    while (Date.now() - start < timeout) {
      const el = document.querySelector(selector);
      if (el) return el;
      await this.sleep(interval);
    }
    return null;
  }

  msToTimeText(ms) {
    const totalSeconds = Math.ceil(ms / 1000);
    const hours = Math.floor(totalSeconds / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = totalSeconds % 60;

    if (hours > 0) return `${hours}h ${minutes}m ${seconds}s`;
    if (minutes > 0) return `${minutes}m ${seconds}s`;
    return `${seconds}s`;
  }

  // Debounced scroll-to-adjust handler for sliders
  createScrollToAdjust(element, updateCallback, min, max, step = 1) {
    let debounceTimer = null;

    const handleWheel = (e) => {
      if (e.target !== element) return;

      e.preventDefault();
      e.stopPropagation();

      if (debounceTimer) {
        clearTimeout(debounceTimer);
      }

      debounceTimer = setTimeout(() => {
        const currentValue = parseInt(element.value) || 0;
        const delta = e.deltaY > 0 ? -step : step;
        const newValue = Math.max(min, Math.min(max, currentValue + delta));

        if (newValue !== currentValue) {
          element.value = newValue;
          updateCallback(newValue);
        }
      }, 50);
    };

    element.addEventListener('wheel', handleWheel, { passive: false });

    return () => {
      if (debounceTimer) clearTimeout(debounceTimer);
      element.removeEventListener('wheel', handleWheel);
    };
  }

  // Tile range calculation delegation
  calculateTileRange(startRegionX, startRegionY, startPixelX, startPixelY, width, height, tileSize = 1000) {
    return window.globalOverlayManager.calculateTileRange(
      startRegionX, startRegionY, startPixelX, startPixelY, width, height, tileSize
    );
  }

  // Token management delegation
  loadTurnstile() { return window.globalTokenManager.loadTurnstile(); }
  ensureTurnstileContainer() { return window.globalTokenManager.ensureTurnstileContainer(); }
  ensureTurnstileOverlayContainer() { return window.globalTokenManager.ensureTurnstileOverlayContainer(); }
  executeTurnstile(sitekey, action) { return window.globalTokenManager.executeTurnstile(sitekey, action); }
  createTurnstileWidget(sitekey, action) { return window.globalTokenManager.createTurnstileWidget(sitekey, action); }
  createTurnstileWidgetInteractive(sitekey, action) { return window.globalTokenManager.createTurnstileWidgetInteractive(sitekey, action); }
  cleanupTurnstile() { return window.globalTokenManager.cleanupTurnstile(); }
  obtainSitekeyAndToken(fallback) { return window.globalTokenManager.obtainSitekeyAndToken(fallback); }

  // DOM utilities
  createElement(tag, props = {}, children = []) {
    const element = document.createElement(tag);

    Object.entries(props).forEach(([key, value]) => {
      if (key === 'style' && typeof value === 'object') {
        Object.assign(element.style, value);
      } else if (key === 'className') {
        element.className = value;
      } else if (key === 'innerHTML') {
        element.innerHTML = value;
      } else {
        element.setAttribute(key, value);
      }
    });

    if (typeof children === 'string') {
      element.textContent = children;
    } else if (Array.isArray(children)) {
      children.forEach((child) => {
        if (typeof child === 'string') {
          element.appendChild(document.createTextNode(child));
        } else {
          element.appendChild(child);
        }
      });
    }

    return element;
  }

  createButton(id, text, icon, onClick, style = window.CONFIG.CSS_CLASSES.BUTTON_PRIMARY) {
    const button = this.createElement('button', {
      id: id,
      style: style,
      innerHTML: `${icon ? `<i class="${icon}"></i>` : ''}<span>${text}</span>`,
    });
    if (onClick) button.addEventListener('click', onClick);
    return button;
  }

  // Translation function
  t(key, params = {}) {
    const state = window.state;
    const translationCache = this.translationCache;
    const loadedTranslations = window.loadedTranslations || {};
    
    // Safety check: ensure state and language exist
    if (!state || !state.language) {
      // Fallback: try to get translation directly or return key
      if (loadedTranslations[key]) {
        let text = loadedTranslations[key];
        Object.keys(params).forEach((param) => {
          text = text.replace(`{${param}}`, params[param]);
        });
        return text;
      }
      return key; // Return the key as fallback
    }
    
    const cacheKey = `${state.language}_${key}`;
    if (translationCache.has(cacheKey)) {
      let text = translationCache.get(cacheKey);
      Object.keys(params).forEach((param) => {
        text = text.replace(`{${param}}`, params[param]);
      });
      return text;
    }

    if (loadedTranslations[state.language]?.[key]) {
      let text = loadedTranslations[state.language][key];
      translationCache.set(cacheKey, text);
      Object.keys(params).forEach((param) => {
        text = text.replace(`{${param}}`, params[param]);
      });
      return text;
    }

    // Try English fallback if available and not using English
    if (state.language && state.language !== 'en' && loadedTranslations['en']?.[key]) {
      let text = loadedTranslations['en'][key];
      Object.keys(params).forEach((param) => {
        text = text.replace(`{${param}}`, params[param]);
      });
      return text;
    }

    // Final fallback to FALLBACK_TEXT or key
    const language = state.language || 'en';
    let text = window.FALLBACK_TEXT?.[language]?.[key] || window.FALLBACK_TEXT?.en?.[key] || key;
    Object.keys(params).forEach((param) => {
      text = text.replace(new RegExp(`\\{${param}\\}`, 'g'), params[param]);
    });

    if (text === key && key !== 'undefined') {
      console.warn(`⚠️ Missing translation for key: ${key} (language: ${language})`);
    }

    return text;
  }

  showAlert(message, type = 'info') {
    const alertDiv = document.createElement('div');
    alertDiv.className = `wplace-alert-base wplace-alert-${type}`;
    alertDiv.textContent = message;
    document.body.appendChild(alertDiv);

    setTimeout(() => {
      alertDiv.style.animation = 'slide-down 0.3s ease-out reverse';
      setTimeout(() => {
        document.body.removeChild(alertDiv);
      }, 300);
    }, 4000);
  }

  // Color utilities
  colorDistance(a, b) {
    return Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2) + Math.pow(a[2] - b[2], 2));
  }

  _rgbToLab(r, g, b) {
    const srgbToLinear = (v) => {
      v /= 255;
      return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
    };
    const rl = srgbToLinear(r);
    const gl = srgbToLinear(g);
    const bl = srgbToLinear(b);
    let X = rl * 0.4124 + gl * 0.3576 + bl * 0.1805;
    let Y = rl * 0.2126 + gl * 0.7152 + bl * 0.0722;
    let Z = rl * 0.0193 + gl * 0.1192 + bl * 0.9505;
    X /= 0.95047;
    Y /= 1.0;
    Z /= 1.08883;
    const f = (t) => (t > 0.008856 ? Math.cbrt(t) : 7.787 * t + 16 / 116);
    const fX = f(X), fY = f(Y), fZ = f(Z);
    const L = 116 * fY - 16;
    const a = 500 * (fX - fY);
    const b2 = 200 * (fY - fZ);
    return [L, a, b2];
  }

  _lab(r, g, b) {
    const key = (r << 16) | (g << 8) | b;
    let v = this._labCache.get(key);
    if (!v) {
      v = this._rgbToLab(r, g, b);
      this._labCache.set(key, v);
    }
    return v;
  }

  findClosestPaletteColor(r, g, b, palette) {
    // Use provided palette or derive from COLOR_MAP
    if (!palette || palette.length === 0) {
      palette = Object.values(window.CONFIG.COLOR_MAP)
        .filter((c) => c.rgb)
        .map((c) => [c.rgb.r, c.rgb.g, c.rgb.b]);
    }
    
    // Use modular ImageProcessor for color matching if available
    if (window.globalImageProcessor) {
      return window.globalImageProcessor.findClosestPaletteColor(
        r, g, b, palette, 
        window.state.colorMatchingAlgorithm || 'lab',
        {
          enableChromaPenalty: window.state.enableChromaPenalty || false,
          chromaPenaltyWeight: window.state.chromaPenaltyWeight || 0.15
        }
      );
    }
    
    // Fallback: simple color distance matching
    let closestColor = null;
    let minDistance = Infinity;
    
    for (const color of palette) {
      const distance = this.colorDistance([r, g, b], color);
      if (distance < minDistance) {
        minDistance = distance;
        closestColor = color;
      }
    }
    
    return closestColor || [r, g, b];
  }

  isWhitePixel(r, g, b) {
    const wt = window.state.customWhiteThreshold || window.CONFIG.WHITE_THRESHOLD;
    if (window.globalImageProcessor) {
      return window.globalImageProcessor.isWhitePixel(r, g, b, wt);
    }
    // Fallback calculation if image processor not available
    return r >= wt && g >= wt && b >= wt;
  }

  resolveColor(targetRgb, availableColors, exactMatch = false) {
    if (window.globalImageProcessor) {
      return window.globalImageProcessor.resolveColor(targetRgb, availableColors, {
        exactMatch,
        algorithm: window.state.colorMatchingAlgorithm || 'lab',
        enableChromaPenalty: window.state.enableChromaPenalty || false,
        chromaPenaltyWeight: window.state.chromaPenaltyWeight || 0.15,
        whiteThreshold: window.state.customWhiteThreshold || window.CONFIG.WHITE_THRESHOLD
      });
    }
    
    // Fallback: simple distance-based matching
    if (!availableColors || availableColors.length === 0) return null;
    
    let closestColor = null;
    let minDistance = Infinity;
    
    for (const color of availableColors) {
      const distance = this.colorDistance(targetRgb, color.rgb || [color.rgb.r, color.rgb.g, color.rgb.b]);
      if (distance < minDistance) {
        minDistance = distance;
        closestColor = color;
      }
    }
    
    return closestColor;
  }

  createImageUploader() { 
    if (window.globalImageProcessor) {
      return window.globalImageProcessor.createImageUploader();
    }
    
    // Fallback implementation if image processor not available
    return new Promise((resolve, reject) => {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = 'image/*';
      input.onchange = (e) => {
        const file = e.target.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = () => resolve(reader.result);
          reader.onerror = () => reject(new Error('File reading error'));
          reader.readAsDataURL(file);
        } else {
          reject(new Error('No file selected'));
        }
      };
      input.click();
    });
  }

  // File utilities
  createFileDownloader(data, filename) {
    const blob = new Blob([data], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }

  createFileUploader() {
    return new Promise((resolve, reject) => {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = '.json';
      input.onchange = (e) => {
        const file = e.target.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = () => {
            try {
              const data = JSON.parse(reader.result);
              resolve(data);
            } catch (error) {
              reject(new Error('Invalid JSON file'));
            }
          };
          reader.onerror = () => reject(new Error('File reading error'));
          reader.readAsText(file);
        } else {
          reject(new Error('No file selected'));
        }
      };
      input.click();
    });
  }

  extractAvailableColors() {
    if (window.globalImageProcessor) {
      return window.globalImageProcessor.extractAvailableColors(window.CONFIG.COLOR_MAP);
    }
    
    // Fallback: extract colors directly from CONFIG if image processor not available
    if (window.CONFIG && window.CONFIG.COLOR_MAP) {
      return Object.values(window.CONFIG.COLOR_MAP)
        .filter(color => color.rgb !== null)
        .map(color => ({
          id: color.id,
          name: color.name,
          rgb: [color.rgb.r, color.rgb.g, color.rgb.b]
        }));
    }
    
    return [];
  }

  formatTime(ms) {
    // Handle invalid or infinite values
    if (!Number.isFinite(ms) || ms < 0) {
      return '--:--:--';
    }
    
    // Handle very large values (more than 999 days)
    if (ms > 999 * 24 * 60 * 60 * 1000) {
      return '999d+';
    }
    
    const seconds = Math.floor((ms / 1000) % 60);
    const minutes = Math.floor((ms / (1000 * 60)) % 60);
    const hours = Math.floor((ms / (1000 * 60 * 60)) % 24);
    const days = Math.floor(ms / (1000 * 60 * 60 * 24));

    let result = '';
    if (days > 0) result += `${days}d `;
    if (hours > 0 || days > 0) result += `${hours}h `;
    if (minutes > 0 || hours > 0 || days > 0) result += `${minutes}m `;
    result += `${seconds}s`;

    return result;
  }

  calculateEstimatedTime(remainingPixels, charges, cooldown) {
    // Safety checks for input parameters
    if (!Number.isFinite(remainingPixels) || remainingPixels <= 0) return 0;
    if (!Number.isFinite(charges) || charges <= 0) charges = 1;
    if (!Number.isFinite(cooldown) || cooldown <= 0) cooldown = 30000; // Default 30s
    
    const paintingSpeed = window.state?.paintingSpeed || 5;
    if (!Number.isFinite(paintingSpeed) || paintingSpeed <= 0) {
      // Fallback calculation without painting speed
      const cyclesNeeded = Math.ceil(remainingPixels / Math.max(charges, 1));
      const timeFromCharges = cyclesNeeded * cooldown;
      return Math.min(timeFromCharges, 999 * 24 * 60 * 60 * 1000); // Cap at 999 days
    }

    const paintingSpeedDelay = 1000 / paintingSpeed;
    const timeFromSpeed = remainingPixels * paintingSpeedDelay;

    const cyclesNeeded = Math.ceil(remainingPixels / Math.max(charges, 1));
    const timeFromCharges = cyclesNeeded * cooldown;

    const totalTime = timeFromSpeed + timeFromCharges;
    
    // Safety check to prevent infinity and cap at reasonable maximum
    if (!Number.isFinite(totalTime) || totalTime < 0) {
      return 0;
    }
    
    // Cap at 999 days to prevent display issues
    return Math.min(totalTime, 999 * 24 * 60 * 60 * 1000);
  }

  // Painted pixel tracking helpers
  initializePaintedMap(width, height) {
    if (!window.state.paintedMap || window.state.paintedMap.length !== height) {
      window.state.paintedMap = Array(height)
        .fill()
        .map(() => Array(width).fill(false));
    }
  }

  markPixelPainted(x, y, regionX = 0, regionY = 0) {
    const actualX = x + regionX;
    const actualY = y + regionY;

    if (
      window.state.paintedMap &&
      window.state.paintedMap[actualY] &&
      actualX >= 0 &&
      actualX < window.state.paintedMap[actualY].length
    ) {
      window.state.paintedMap[actualY][actualX] = true;
    }
  }

  isPixelPainted(x, y, regionX = 0, regionY = 0) {
    const actualX = x + regionX;
    const actualY = y + regionY;

    if (
      window.state.paintedMap &&
      window.state.paintedMap[actualY] &&
      actualX >= 0 &&
      actualX < window.state.paintedMap[actualY].length
    ) {
      return window.state.paintedMap[actualY][actualX];
    }
    return false;
  }

  // Alias for isPixelPainted - used in pre-filtering logic
  isPixelMarkedPainted(x, y, regionX = 0, regionY = 0) {
    return this.isPixelPainted(x, y, regionX, regionY);
  }

  // Smart save
  shouldAutoSave() {
    const now = Date.now();
    const pixelsSinceLastSave = window.state.paintedPixels - window.state._lastSavePixelCount;
    const timeSinceLastSave = now - window.state._lastSaveTime;

    return !window.state._saveInProgress && pixelsSinceLastSave >= 25 && timeSinceLastSave >= 30000;
  }

  performSmartSave() {
    if (!this.shouldAutoSave()) return false;

    window.state._saveInProgress = true;
    const success = this.saveProgress();

    if (success) {
      window.state._lastSavePixelCount = window.state.paintedPixels;
      window.state._lastSaveTime = Date.now();
    }

    window.state._saveInProgress = false;
    return success;
  }

  // Data compression helpers
  packPaintedMapToBase64(paintedMap, width, height) {
    if (!paintedMap || !width || !height) return null;
    const totalBits = width * height;
    const byteLen = Math.ceil(totalBits / 8);
    const bytes = new Uint8Array(byteLen);
    let bitIndex = 0;
    for (let y = 0; y < height; y++) {
      const row = paintedMap[y];
      for (let x = 0; x < width; x++) {
        const bit = row && row[x] ? 1 : 0;
        const b = bitIndex >> 3;
        const o = bitIndex & 7;
        if (bit) bytes[b] |= 1 << o;
        bitIndex++;
      }
    }
    let binary = '';
    const chunk = 0x8000;
    for (let i = 0; i < bytes.length; i += chunk) {
      binary += String.fromCharCode.apply(
        null,
        bytes.subarray(i, Math.min(i + chunk, bytes.length))
      );
    }
    return btoa(binary);
  }

  unpackPaintedMapFromBase64(base64, width, height) {
    if (!base64 || !width || !height) return null;
    const binary = atob(base64);
    const bytes = new Uint8Array(binary.length);
    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
    const map = Array(height)
      .fill()
      .map(() => Array(width).fill(false));
    let bitIndex = 0;
    for (let y = 0; y < height; y++) {
      for (let x = 0; x < width; x++) {
        const b = bitIndex >> 3;
        const o = bitIndex & 7;
        map[y][x] = ((bytes[b] >> o) & 1) === 1;
        bitIndex++;
      }
    }
    return map;
  }

  // Migration helpers
  migrateProgressToV2(saved) {
    if (!saved) return saved;
    const isV1 = !saved.version || saved.version === '1' || saved.version === '1.0' || saved.version === '1.1';
    if (!isV1) return saved;

    try {
      const migrated = { ...saved };
      const width = migrated.imageData?.width;
      const height = migrated.imageData?.height;
      if (migrated.paintedMap && width && height) {
        const data = this.packPaintedMapToBase64(migrated.paintedMap, width, height);
        migrated.paintedMapPacked = { width, height, data };
      }
      delete migrated.paintedMap;
      migrated.version = '2';
      return migrated;
    } catch (e) {
      console.warn('Migration to v2 failed, using original data:', e);
      return saved;
    }
  }

  migrateProgressToV21(saved) {
    if (!saved) return saved;
    if (saved.version === '2.1') return saved;
    const isV2 = saved.version === '2' || saved.version === '2.0';
    const isV1 = !saved.version || saved.version === '1' || saved.version === '1.0' || saved.version === '1.1';
    if (!isV2 && !isV1) return saved;
    try {
      const migrated = { ...saved };
      if (isV1) {
        const width = migrated.imageData?.width;
        const height = migrated.imageData?.height;
        if (migrated.paintedMap && width && height) {
          const data = this.packPaintedMapToBase64(migrated.paintedMap, width, height);
          migrated.paintedMapPacked = { width, height, data };
        }
        delete migrated.paintedMap;
      }
      migrated.version = '2.1';
      return migrated;
    } catch (e) {
      console.warn('Migration to v2.1 failed, using original data:', e);
      return saved;
    }
  }

  migrateProgressToV22(data) {
    try {
      const migrated = { ...data };
      migrated.version = '2.2';

      if (!migrated.state.coordinateMode) {
        migrated.state.coordinateMode = window.CONFIG.COORDINATE_MODE;
      }
      if (!migrated.state.coordinateDirection) {
        migrated.state.coordinateDirection = window.CONFIG.COORDINATE_DIRECTION;
      }
      if (!migrated.state.coordinateSnake) {
        migrated.state.coordinateSnake = window.CONFIG.COORDINATE_SNAKE;
      }
      if (!migrated.state.blockWidth) {
        migrated.state.blockWidth = window.CONFIG.COORDINATE_BLOCK_WIDTH;
      }
      if (!migrated.state.blockHeight) {
        migrated.state.blockHeight = window.CONFIG.COORDINATE_BLOCK_HEIGHT;
      }

      return migrated;
    } catch (e) {
      console.warn('Migration to v2.2 failed, using original data:', e);
      return data;
    }
  }

  buildPaintedMapPacked() {
    if (window.state.paintedMap && window.state.imageData) {
      const data = this.packPaintedMapToBase64(
        window.state.paintedMap,
        window.state.imageData.width,
        window.state.imageData.height
      );
      if (data) {
        return {
          width: window.state.imageData.width,
          height: window.state.imageData.height,
          data: data,
        };
      }
    }
    return null;
  }

  buildProgressData() {
    const result = {
      timestamp: Date.now(),
      version: '2.2',
      state: {
        totalPixels: window.state.totalPixels,
        paintedPixels: window.state.paintedPixels,
        lastPosition: window.state.lastPosition,
        startPosition: window.state.startPosition,
        region: window.state.region,
        imageLoaded: window.state.imageLoaded,
        colorsChecked: window.state.colorsChecked,
        coordinateMode: window.state.coordinateMode,
        coordinateDirection: window.state.coordinateDirection,
        coordinateSnake: window.state.coordinateSnake,
        blockWidth: window.state.blockWidth,
        blockHeight: window.state.blockHeight,
        availableColors: window.state.availableColors,
      },
      imageData: null,
      paintedMapPacked: null,
    };

    // Decide how to store image pixels
    if (window.state.imageData) {
      const img = window.state.imageData;
      const width = img.width;
      const height = img.height;
      const totalPixels = img.totalPixels;
      const pixels = img.pixels;

      const USE_IDB_THRESHOLD = 500000; // ~0.5 MB raw RGBA (before JSON expansion)

      if (pixels && pixels.length) {
        const bytes = pixels.length; // Uint8ClampedArray length equals byte size
        if (bytes > USE_IDB_THRESHOLD) {
          // Store pixels in IndexedDB and keep only the reference in save payload
          const ref = this.generatePixelsRef(width, height);
          try {
            // Fire-and-forget async persist
            this.storePixelsInIndexedDB(ref, { width, height, totalPixels, pixels });
          } catch (e) {
            console.warn('Failed to schedule IDB pixel store:', e);
          }
          result.imageData = { width, height, totalPixels, pixelsRef: ref, pixelsBackend: 'idb' };
        } else {
          result.imageData = { width, height, pixels: Array.from(pixels), totalPixels };
        }
      } else {
        result.imageData = { width, height, totalPixels, pixels: null };
      }
    }

    result.paintedMapPacked = this.buildPaintedMapPacked();
    return result;
  }

  migrateProgress(saved) {
    if (!saved) return null;

    let data = saved;
    const ver = data.version;

    if (!ver || ver === '1' || ver === '1.0' || ver === '1.1') {
      data = this.migrateProgressToV2(data);
    }

    if (data.version === '2' || data.version === '2.0') {
      data = this.migrateProgressToV21(data);
    }

    if (data.version === '2.1') {
      data = this.migrateProgressToV22(data);
    }

    return data;
  }

  saveProgress() {
    try {
      const progressData = this.buildProgressData();
      try {
        localStorage.setItem('wplace-bot-progress', JSON.stringify(progressData));
        return true;
      } catch (e) {
        // Strip heavy pixel data and retry if quota exceeded
        if (progressData && progressData.imageData && progressData.imageData.pixels) {
          const slim = {
            ...progressData,
            imageData: {
              width: progressData.imageData.width,
              height: progressData.imageData.height,
              totalPixels: progressData.imageData.totalPixels,
              pixelsStripped: true,
            }
          };
          try {
            localStorage.setItem('wplace-bot-progress', JSON.stringify(slim));
            console.warn('Saved progress without raw pixel data due to storage quota limits.');
            return true;
          } catch (e2) {
            try {
              sessionStorage.setItem('wplace-bot-progress', JSON.stringify(slim));
              console.warn('Saved progress to sessionStorage without pixel data due to storage quota limits.');
              return true;
            } catch (e3) {
              throw e2;
            }
          }
        }
        throw e;
      }
    } catch (error) {
      console.error('Error saving progress:', error);
      return false;
    }
  }

  loadProgress() {
    try {
      const saved = localStorage.getItem('wplace-bot-progress');
      if (!saved) return null;
      let data = JSON.parse(saved);
      const migrated = this.migrateProgress(data);

      if (migrated && migrated !== data) {
        try {
          localStorage.setItem('wplace-bot-progress', JSON.stringify(migrated));
        } catch { }
      }
      return migrated;
    } catch (error) {
      console.error('Error loading progress:', error);
      return null;
    }
  }

  clearProgress() {
    try {
      localStorage.removeItem('wplace-bot-progress');
      window.state.paintedMap = null;
      window.state._lastSavePixelCount = 0;
      window.state._lastSaveTime = 0;
      window.state.coordinateMode = window.CONFIG.COORDINATE_MODE;
      window.state.coordinateDirection = window.CONFIG.COORDINATE_DIRECTION;
      window.state.coordinateSnake = window.CONFIG.COORDINATE_SNAKE;
      window.state.blockWidth = window.CONFIG.COORDINATE_BLOCK_WIDTH;
      window.state.blockHeight = window.CONFIG.COORDINATE_BLOCK_HEIGHT;
      return true;
    } catch (error) {
      console.error('Error clearing progress:', error);
      return false;
    }
  }

  restoreProgress(savedData) {
    try {
      Object.assign(window.state, savedData.state);

      // Restore coordinate generation settings
      if (savedData.state.coordinateMode) {
        window.state.coordinateMode = savedData.state.coordinateMode;
      }
      if (savedData.state.coordinateDirection) {
        window.state.coordinateDirection = savedData.state.coordinateDirection;
      }
      if (savedData.state.coordinateSnake !== undefined) {
        window.state.coordinateSnake = savedData.state.coordinateSnake;
      }
      if (savedData.state.blockWidth) {
        window.state.blockWidth = savedData.state.blockWidth;
      }
      if (savedData.state.blockHeight) {
        window.state.blockHeight = savedData.state.blockHeight;
      }

      // Restore available colors from old save files (backward compatibility)
      if (savedData.state.availableColors && Array.isArray(savedData.state.availableColors)) {
        window.state.availableColors = savedData.state.availableColors;
        window.state.colorsChecked = true; // Mark colors as checked
      }

      if (savedData.imageData && Array.isArray(savedData.imageData.pixels)) {
        window.state.imageData = {
          width: savedData.imageData.width,
          height: savedData.imageData.height,
          pixels: savedData.imageData.pixels, // Keep as Array - will convert in ImageData constructor
          totalPixels: savedData.imageData.totalPixels,
        };

        try {
          const canvas = document.createElement('canvas');
          canvas.width = window.state.imageData.width;
          canvas.height = window.state.imageData.height;
          const ctx = canvas.getContext('2d');
          const imageData = new ImageData(
            window.state.imageData.pixels,
            window.state.imageData.width,
            window.state.imageData.height
          );
          ctx.putImageData(imageData, 0, 0);
          
          // Create ImageProcessor directly like the original - no delegation
          if (window.ImageProcessor) {
            const proc = new window.ImageProcessor('');
            proc.img = canvas;
            proc.canvas = canvas;
            proc.ctx = ctx;
            window.state.imageData.processor = proc;
          } else if (window.WPlaceImageProcessor) {
            const proc = new window.WPlaceImageProcessor('');
            proc.img = canvas;
            proc.canvas = canvas;
            proc.ctx = ctx;
            window.state.imageData.processor = proc;
          }
        } catch (e) {
          console.warn('Could not rebuild processor from saved image data:', e);
        }
      } else if (savedData.imageData && savedData.imageData.pixelsRef) {
        // Asynchronously load large pixel data from IndexedDB using the stored reference
        console.log('🔄 Loading large image pixels from IndexedDB via ref:', savedData.imageData.pixelsRef);
        window.state.imageData = {
          width: savedData.imageData.width,
          height: savedData.imageData.height,
          totalPixels: savedData.imageData.totalPixels,
          pixels: null,
        };
        window.state.imageLoaded = false;

        this.loadPixelsFromIndexedDB(savedData.imageData.pixelsRef)
          .then((payload) => {
            if (!payload || !payload.pixels) {
              console.warn('⚠️ No pixel payload found in IndexedDB for ref:', savedData.imageData.pixelsRef);
              this.showAlert?.('⚠️ Saved image pixels not found in local database. Please reload the image file.', 'warning');
              return;
            }
            try {
              window.state.imageData.pixels = new Uint8ClampedArray(payload.pixels);
              window.state.imageLoaded = true;

              // Rebuild processor and notify modules/UI
              this._syncModulesAfterStateRestore();
              this.showAlert?.('✅ Large image restored from local database.', 'success');

              // Attempt overlay restoration if available
              if (typeof this.restoreOverlayFromData === 'function') {
                this.restoreOverlayFromData().catch(() => {});
              }
            } catch (err) {
              console.warn('Failed to apply pixels from IndexedDB:', err);
            }
          })
          .catch((err) => {
            console.warn('Failed to load pixels from IndexedDB:', err);
          });
      } else if (savedData.imageData && savedData.imageData.pixelsStripped) {
        console.warn('⚠️ Saved progress did not include raw pixel data due to quota limits. Please reload the image to resume.');
        window.state.imageData = {
          width: savedData.imageData.width,
          height: savedData.imageData.height,
          totalPixels: savedData.imageData.totalPixels,
          pixels: null,
        };
        window.state.imageLoaded = false;
      }

      // Prefer packed form if available; fallback to legacy paintedMap array for backward compatibility
      if (savedData.paintedMapPacked && savedData.paintedMapPacked.data) {
        const { width, height, data } = savedData.paintedMapPacked;
        window.state.paintedMap = this.unpackPaintedMapFromBase64(data, width, height);
      } else if (savedData.paintedMap) {
        window.state.paintedMap = savedData.paintedMap.map((row) => Array.from(row));
      }

      // CRITICAL FIX: Notify all modules that state has been restored
      this._syncModulesAfterStateRestore();

      return true;
    } catch (error) {
      console.error('Error restoring progress:', error);
      return false;
    }
  }

  /**
   * Synchronize all modules after state restore to prevent timing issues
   * This ensures modules reflect the updated state properly
   * @private
   */
  _syncModulesAfterStateRestore() {
    try {
      console.log('🔄 Synchronizing modules after state restore...');

      // Sync image processor if available
      if (window.globalImageProcessor && window.state.imageData) {
        // Force refresh image processor state
        if (typeof window.globalImageProcessor.updateState === 'function') {
          window.globalImageProcessor.updateState(window.state);
        }
      }

      // Sync overlay manager if available
      if (window.globalOverlayManager) {
        // Force refresh overlay state - this ensures overlay knows about the new state
        if (typeof window.globalOverlayManager.updateState === 'function') {
          window.globalOverlayManager.updateState(window.state);
        }
      }

      // Extract available colors if not already set (required for color palette functionality)
      if (!window.state.availableColors || window.state.availableColors.length === 0) {
        console.log('🎨 Extracting available colors for save file...');
        try {
          const availableColors = this.extractAvailableColors();
          if (availableColors && availableColors.length > 0) {
            window.state.availableColors = availableColors;
            window.state.colorsChecked = true;
            console.log(`✅ Extracted ${availableColors.length} available colors`);
          } else {
            console.warn('⚠️ No colors available - this might cause issues with overlay display');
          }
        } catch (error) {
          console.warn('⚠️ Failed to extract colors:', error);
        }
      }

      // Force window.state reference update for any stale references
      window.state = window.state; // Trigger any watchers

      console.log('✅ Module synchronization complete');
    } catch (error) {
      console.warn('⚠️ Module synchronization failed:', error);
    }
  }

  /**
   * Force navigation to saved position to display overlay immediately
   * @param {Object} region - The region coordinates
   * @param {Object} position - The pixel position within region
   * @private
   */
  async _forceNavigateToSavedPosition(region, position) {
    try {
      console.log(`🧭 Forcing navigation to region (${region.x}, ${region.y}) pixel (${position.x}, ${position.y})...`);
      
      // Calculate world coordinates (region * 1000 + pixel position)
      const worldX = region.x * 1000 + position.x;
      const worldY = region.y * 1000 + position.y;
      
      console.log(`🌍 World coordinates: (${worldX}, ${worldY})`);
      
      // Method 1: Try to find WPlace's camera/viewport controls
      const attemptCameraControl = () => {
        // Look for WPlace's camera control functions in global scope
        const possibleControls = [
          'camera', 'viewport', 'map', 'game', 'wplace', 'app'
        ];
        
        for (const control of possibleControls) {
          if (window[control]) {
            console.log(`🎯 Found potential control: ${control}`, window[control]);
            
            // Try common navigation method names
            const methods = ['setPosition', 'moveTo', 'panTo', 'setView', 'goTo', 'navigate'];
            for (const method of methods) {
              if (typeof window[control][method] === 'function') {
                console.log(`📍 Attempting ${control}.${method}(${worldX}, ${worldY})`);
                try {
                  window[control][method](worldX, worldY);
                  return true;
                } catch (e) {
                  console.warn(`❌ ${control}.${method} failed:`, e);
                }
              }
            }
          }
        }
        return false;
      };
      
      // Method 2: Try updating URL hash (common for canvas-based apps)
      const attemptUrlNavigation = () => {
        try {
          const newHash = `#${worldX},${worldY}`;
          console.log(`🔗 Attempting URL navigation: ${newHash}`);
          window.location.hash = newHash;
          
          // Also try alternative formats
          setTimeout(() => {
            const altHash = `#x=${worldX}&y=${worldY}`;
            console.log(`🔗 Attempting alternative URL: ${altHash}`);
            window.location.hash = altHash;
          }, 100);
          
          return true;
        } catch (e) {
          console.warn('❌ URL navigation failed:', e);
          return false;
        }
      };
      
      // Method 3: Try triggering scroll/wheel events to force tile loading
      const attemptScrollTrigger = () => {
        try {
          console.log('🖱️ Attempting scroll trigger to force tile loading...');
          
          // Find canvas or main container
          const canvas = document.querySelector('canvas') || document.body;
          
          // Simulate mouse events at target coordinates
          ['mousedown', 'mousemove', 'mouseup', 'wheel'].forEach(eventType => {
            const event = new MouseEvent(eventType, {
              bubbles: true,
              clientX: worldX % window.innerWidth,
              clientY: worldY % window.innerHeight,
              deltaY: eventType === 'wheel' ? 1 : 0
            });
            canvas.dispatchEvent(event);
          });
          
          return true;
        } catch (e) {
          console.warn('❌ Scroll trigger failed:', e);
          return false;
        }
      };
      
      // Try all methods
      const success = attemptCameraControl() || attemptUrlNavigation() || attemptScrollTrigger();
      
      if (success) {
        console.log('✅ Navigation triggered - overlay should display in a moment');
        
        // Wait a bit for tiles to load, then show success message
        setTimeout(() => {
          if (typeof this.showAlert === 'function') {
            this.showAlert('✅ Overlay loaded and positioned automatically!', 'success');
          }
        }, 1000);
      } else {
        console.warn('⚠️ Automatic navigation failed - showing manual instruction');
        if (typeof this.showAlert === 'function') {
          this.showAlert(`📍 Navigate to region (${region.x}, ${region.y}) to see your restored overlay`, 'info');
        }
      }
      
    } catch (error) {
      console.error('❌ Failed to force navigation:', error);
      if (typeof this.showAlert === 'function') {
        this.showAlert(`📍 Navigate to region (${region.x}, ${region.y}) to see your overlay`, 'info');
      }
    }
  }

  saveProgressToFile() {
    try {
      const progressData = this.buildProgressData();
      const filename = `wplace-bot-progress-${new Date()
        .toISOString()
        .slice(0, 19)
        .replace(/:/g, '-')}.json`;
      this.createFileDownloader(JSON.stringify(progressData, null, 2), filename);
      return true;
    } catch (error) {
      console.error('Error saving to file:', error);
      return false;
    }
  }

  async loadProgressFromFile() {
    try {
      const data = await this.createFileUploader();
      if (!data || !data.state) {
        throw new Error('Invalid file format');
      }
      const migrated = this.migrateProgress(data);
      const success = this.restoreProgress(migrated);
      return success;
    } catch (error) {
      console.error('Error loading from file:', error);
      throw error;
    }
  }

  async restoreOverlayFromData() {
    if (!window.state.imageLoaded || !window.state.imageData || !window.state.startPosition || !window.state.region) {
      console.warn('❌ Missing required data for overlay restoration');
      return false;
    }

    try {
      console.log('🔄 Restoring overlay from saved data...');
      
      // Recreate ImageBitmap from loaded pixel data (match old version exactly)
      const imageData = new ImageData(
        window.state.imageData.pixels,
        window.state.imageData.width,
        window.state.imageData.height
      );

      const canvas = new OffscreenCanvas(window.state.imageData.width, window.state.imageData.height);
      const ctx = canvas.getContext('2d');
      ctx.putImageData(imageData, 0, 0);
      const imageBitmap = await canvas.transferToImageBitmap();

      // Set up overlay with restored data (use the Auto-Image.js overlayManager instance)
      if (window.autoImageOverlayManager) {
        console.log('📋 Setting image bitmap...');
        await window.autoImageOverlayManager.setImage(imageBitmap);
        
        console.log('📍 Setting position and region...');
        await window.autoImageOverlayManager.setPosition(window.state.startPosition, window.state.region);

        console.log('� Enabling overlay...');
        window.autoImageOverlayManager.enable();

        // Update overlay button state
        const toggleOverlayBtn = document.getElementById('toggleOverlayBtn');
        if (toggleOverlayBtn) {
          toggleOverlayBtn.disabled = false;
          toggleOverlayBtn.classList.add('active');
        }

        console.log('✅ Overlay restored from data');
        return true;
      } else {
        console.error('❌ autoImageOverlayManager not available');
        return false;
      }
    } catch (error) {
      console.error('❌ Failed to restore overlay from data:', error);
      return false;
    }
  }

  updateCoordinateUI({ mode, directionControls, snakeControls, blockControls }) {
    const isLinear = mode === 'rows' || mode === 'columns';
    const isBlock = mode === 'blocks' || mode === 'shuffle-blocks';

    if (directionControls) directionControls.style.display = isLinear ? 'block' : 'none';
    if (snakeControls) snakeControls.style.display = isLinear ? 'block' : 'none';
    if (blockControls) blockControls.style.display = isBlock ? 'block' : 'none';
  }

  /**
   * Force navigation to saved position to display overlay immediately
   * @param {Object} region - The region coordinates
   * @param {Object} position - The pixel position within region
   * @private
   */
  async _forceNavigateToSavedPosition(region, position) {
    try {
      console.log(`🧭 Forcing navigation to region (${region.x}, ${region.y}) pixel (${position.x}, ${position.y})...`);
      
      // Calculate world coordinates (region * 1000 + pixel position)
      const worldX = region.x * 1000 + position.x;
      const worldY = region.y * 1000 + position.y;
      
      console.log(`🌍 World coordinates: (${worldX}, ${worldY})`);
      
      // Method 1: Try to find WPlace's camera/viewport controls
      const attemptCameraControl = () => {
        // Look for WPlace's camera control functions in global scope
        const possibleControls = [
          'camera', 'viewport', 'map', 'game', 'wplace', 'app'
        ];
        
        for (const control of possibleControls) {
          if (window[control]) {
            console.log(`🎯 Found potential control: ${control}`, window[control]);
            
            // Try common navigation method names
            const methods = ['setPosition', 'moveTo', 'panTo', 'setView', 'goTo', 'navigate'];
            for (const method of methods) {
              if (typeof window[control][method] === 'function') {
                console.log(`📍 Attempting ${control}.${method}(${worldX}, ${worldY})`);
                try {
                  window[control][method](worldX, worldY);
                  return true;
                } catch (e) {
                  console.warn(`❌ ${control}.${method} failed:`, e);
                }
              }
            }
          }
        }
        return false;
      };
      
      // Method 2: Try updating URL hash (common for canvas-based apps)
      const attemptUrlNavigation = () => {
        try {
          const newHash = `#${worldX},${worldY}`;
          console.log(`🔗 Attempting URL navigation: ${newHash}`);
          window.location.hash = newHash;
          
          // Also try alternative formats
          setTimeout(() => {
            const altHash = `#x=${worldX}&y=${worldY}`;
            console.log(`🔗 Attempting alternative URL: ${altHash}`);
            window.location.hash = altHash;
          }, 100);
          
          return true;
        } catch (e) {
          console.warn('❌ URL navigation failed:', e);
          return false;
        }
      };
      
      // Method 3: Try triggering scroll/wheel events to force tile loading
      const attemptScrollTrigger = () => {
        try {
          console.log('🖱️ Attempting scroll trigger to force tile loading...');
          
          // Find canvas or main container
          const canvas = document.querySelector('canvas') || document.body;
          
          // Simulate mouse events at target coordinates
          ['mousedown', 'mousemove', 'mouseup', 'wheel'].forEach(eventType => {
            const event = new MouseEvent(eventType, {
              bubbles: true,
              clientX: worldX % window.innerWidth,
              clientY: worldY % window.innerHeight,
              deltaY: eventType === 'wheel' ? 1 : 0
            });
            canvas.dispatchEvent(event);
          });
          
          return true;
        } catch (e) {
          console.warn('❌ Scroll trigger failed:', e);
          return false;
        }
      };
      
      // Try all methods
      const success = attemptCameraControl() || attemptUrlNavigation() || attemptScrollTrigger();
      
      if (success) {
        console.log('✅ Navigation triggered - overlay should display in a moment');
        
        // Wait a bit for tiles to load, then show success message
        setTimeout(() => {
          if (typeof this.showAlert === 'function') {
            this.showAlert('✅ Overlay loaded and positioned automatically!', 'success');
          }
        }, 1000);
      } else {
        console.warn('⚠️ Automatic navigation failed - showing manual instruction');
        if (typeof this.showAlert === 'function') {
          this.showAlert(`📍 Navigate to region (${region.x}, ${region.y}) to see your restored overlay`, 'info');
        }
      }
      
    } catch (error) {
      console.error('❌ Failed to force navigation:', error);
      if (typeof this.showAlert === 'function') {
        this.showAlert(`📍 Navigate to region (${region.x}, ${region.y}) to see your overlay`, 'info');
      }
    }
  }
}

// Global instance with safety checks
try {
  window.globalUtilsManager = new WPlaceUtilsManager();
  console.log('✅ WPlaceUtilsManager initialized successfully');
} catch (error) {
  console.error('❌ Failed to initialize WPlaceUtilsManager:', error);
}

// Additional safety: ensure the instance is available for other scripts
if (!window.globalUtilsManager) {
  console.warn('⚠️ globalUtilsManager not available, attempting to reinitialize...');
  setTimeout(() => {
    try {
      window.globalUtilsManager = new WPlaceUtilsManager();
      console.log('✅ WPlaceUtilsManager reinitialized successfully');
    } catch (error) {
      console.error('❌ Failed to reinitialize WPlaceUtilsManager:', error);
    }
  }, 100);
}

// === IndexedDB helpers for large pixel storage ===
WPlaceUtilsManager.prototype._openPixelDB = function() {
  return new Promise((resolve, reject) => {
    try {
      const request = indexedDB.open('wplace-bot-db', 1);
      request.onupgradeneeded = () => {
        const db = request.result;
        if (!db.objectStoreNames.contains('pixels')) {
          const store = db.createObjectStore('pixels', { keyPath: 'ref' });
          try { store.createIndex('createdAt', 'createdAt', { unique: false }); } catch {}
        }
      };
      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    } catch (e) {
      reject(e);
    }
  });
};

WPlaceUtilsManager.prototype.generatePixelsRef = function(width, height) {
  const rand = Math.random().toString(36).slice(2, 8);
  return `img_${width}x${height}_${Date.now().toString(36)}_${rand}`;
};

WPlaceUtilsManager.prototype.storePixelsInIndexedDB = async function(ref, payload) {
  try {
    const db = await this._openPixelDB();
    return await new Promise((resolve, reject) => {
      const tx = db.transaction('pixels', 'readwrite');
      const store = tx.objectStore('pixels');
      const data = {
        ref,
        width: payload.width,
        height: payload.height,
        totalPixels: payload.totalPixels,
        pixels: payload.pixels,
        createdAt: Date.now(),
      };
      const req = store.put(data);
      req.onsuccess = () => resolve(true);
      req.onerror = () => reject(req.error);
    });
  } catch (e) {
    console.warn('IDB storePixels failed:', e);
    return false;
  }
};

WPlaceUtilsManager.prototype.loadPixelsFromIndexedDB = async function(ref) {
  try {
    const db = await this._openPixelDB();
    return await new Promise((resolve, reject) => {
      const tx = db.transaction('pixels', 'readonly');
      const store = tx.objectStore('pixels');
      const req = store.get(ref);
      req.onsuccess = () => resolve(req.result || null);
      req.onerror = () => reject(req.error);
    });
  } catch (e) {
    console.warn('IDB loadPixels failed:', e);
    return null;
  }
};