// eslint-disable-next-line prettier/prettier
; (async () => {
  // CONFIGURATION CONSTANTS
  const CONFIG = {
    COOLDOWN_DEFAULT: 31000,
    TRANSPARENCY_THRESHOLD: 100,
    WHITE_THRESHOLD: 250,
    LOG_INTERVAL: 10,
    PAINTING_SPEED: {
      MIN: 1,
      MAX: 1000,
      DEFAULT: 5,
    },
    TOKEN_SOURCE: 'generator', // "generator", "manual", or "hybrid"
    AUTONOMOUS_MODE: true, // Enable autonomous operation
    AUTO_TOKEN_REFRESH: true, // Automatically refresh tokens
    TOKEN_PRELOAD_BUFFER: 60000, // Preload tokens 1 minute before expiry
    MAX_RETRIES: 10,
    RETRY_DELAY_BASE: 1000,
    // Auto-batch configuration
    AUTO_BATCH_ENABLED: true, // Enable auto pixel batch sizing
    MAX_BATCH_SIZE: 500, // Maximum pixels per batch
    MIN_BATCH_SIZE: 1, // Minimum pixels per batch
    BATCH_OPTIMIZATION: true, // Optimize batch size based on detected damage
    COLOR_MAP: {
      0: { id: 1, name: 'Black', rgb: { r: 0, g: 0, b: 0 } },
      1: { id: 2, name: 'Dark Gray', rgb: { r: 60, g: 60, b: 60 } },
      2: { id: 3, name: 'Gray', rgb: { r: 120, g: 120, b: 120 } },
      3: { id: 4, name: 'Light Gray', rgb: { r: 210, g: 210, b: 210 } },
      4: { id: 5, name: 'White', rgb: { r: 255, g: 255, b: 255 } },
      5: { id: 6, name: 'Deep Red', rgb: { r: 96, g: 0, b: 24 } },
      6: { id: 7, name: 'Red', rgb: { r: 237, g: 28, b: 36 } },
      7: { id: 8, name: 'Orange', rgb: { r: 255, g: 127, b: 39 } },
      8: { id: 9, name: 'Gold', rgb: { r: 246, g: 170, b: 9 } },
      9: { id: 10, name: 'Yellow', rgb: { r: 249, g: 221, b: 59 } },
      10: { id: 11, name: 'Light Yellow', rgb: { r: 255, g: 250, b: 188 } },
      11: { id: 12, name: 'Dark Green', rgb: { r: 14, g: 185, b: 104 } },
      12: { id: 13, name: 'Green', rgb: { r: 19, g: 230, b: 123 } },
      13: { id: 14, name: 'Light Green', rgb: { r: 135, g: 255, b: 94 } },
      14: { id: 15, name: 'Dark Teal', rgb: { r: 12, g: 129, b: 110 } },
      15: { id: 16, name: 'Teal', rgb: { r: 16, g: 174, b: 166 } },
      16: { id: 17, name: 'Light Teal', rgb: { r: 19, g: 225, b: 190 } },
      17: { id: 20, name: 'Cyan', rgb: { r: 96, g: 247, b: 242 } },
      18: { id: 44, name: 'Light Cyan', rgb: { r: 187, g: 250, b: 242 } },
      19: { id: 18, name: 'Dark Blue', rgb: { r: 40, g: 80, b: 158 } },
      20: { id: 19, name: 'Blue', rgb: { r: 64, g: 147, b: 228 } },
      21: { id: 21, name: 'Indigo', rgb: { r: 107, g: 80, b: 246 } },
      22: { id: 22, name: 'Light Indigo', rgb: { r: 153, g: 177, b: 251 } },
      23: { id: 23, name: 'Dark Purple', rgb: { r: 120, g: 12, b: 153 } },
      24: { id: 24, name: 'Purple', rgb: { r: 170, g: 56, b: 185 } },
      25: { id: 25, name: 'Light Purple', rgb: { r: 224, g: 159, b: 249 } },
      26: { id: 26, name: 'Dark Pink', rgb: { r: 203, g: 0, b: 122 } },
      27: { id: 27, name: 'Pink', rgb: { r: 236, g: 31, b: 128 } },
      28: { id: 28, name: 'Light Pink', rgb: { r: 243, g: 141, b: 169 } },
      29: { id: 29, name: 'Dark Brown', rgb: { r: 104, g: 70, b: 52 } },
      30: { id: 30, name: 'Brown', rgb: { r: 149, g: 104, b: 42 } },
      31: { id: 31, name: 'Beige', rgb: { r: 248, g: 178, b: 119 } },
      32: { id: 52, name: 'Light Beige', rgb: { r: 255, g: 197, b: 165 } },
      33: { id: 32, name: 'Medium Gray', rgb: { r: 170, g: 170, b: 170 } },
      34: { id: 33, name: 'Dark Red', rgb: { r: 165, g: 14, b: 30 } },
      35: { id: 34, name: 'Light Red', rgb: { r: 250, g: 128, b: 114 } },
      36: { id: 35, name: 'Dark Orange', rgb: { r: 228, g: 92, b: 26 } },
      37: { id: 37, name: 'Dark Goldenrod', rgb: { r: 156, g: 132, b: 49 } },
      38: { id: 38, name: 'Goldenrod', rgb: { r: 197, g: 173, b: 49 } },
      39: { id: 39, name: 'Light Goldenrod', rgb: { r: 232, g: 212, b: 95 } },
      40: { id: 40, name: 'Dark Olive', rgb: { r: 74, g: 107, b: 58 } },
      41: { id: 41, name: 'Olive', rgb: { r: 90, g: 148, b: 74 } },
      42: { id: 42, name: 'Light Olive', rgb: { r: 132, g: 197, b: 115 } },
      43: { id: 43, name: 'Dark Cyan', rgb: { r: 15, g: 121, b: 159 } },
      44: { id: 45, name: 'Light Blue', rgb: { r: 125, g: 199, b: 255 } },
      45: { id: 46, name: 'Dark Indigo', rgb: { r: 77, g: 49, b: 184 } },
      46: { id: 47, name: 'Dark Slate Blue', rgb: { r: 74, g: 66, b: 132 } },
      47: { id: 48, name: 'Slate Blue', rgb: { r: 122, g: 113, b: 196 } },
      48: { id: 49, name: 'Light Slate Blue', rgb: { r: 181, g: 174, b: 241 } },
      49: { id: 53, name: 'Dark Peach', rgb: { r: 155, g: 82, b: 73 } },
      50: { id: 54, name: 'Peach', rgb: { r: 209, g: 128, b: 120 } },
      51: { id: 55, name: 'Light Peach', rgb: { r: 250, g: 182, b: 164 } },
      52: { id: 50, name: 'Light Brown', rgb: { r: 219, g: 164, b: 99 } },
      53: { id: 56, name: 'Dark Tan', rgb: { r: 123, g: 99, b: 82 } },
      54: { id: 57, name: 'Tan', rgb: { r: 156, g: 132, b: 107 } },
      55: { id: 36, name: 'Light Tan', rgb: { r: 214, g: 181, b: 148 } },
      56: { id: 51, name: 'Dark Beige', rgb: { r: 209, g: 128, b: 81 } },
      57: { id: 61, name: 'Dark Stone', rgb: { r: 109, g: 100, b: 63 } },
      58: { id: 62, name: 'Stone', rgb: { r: 148, g: 140, b: 107 } },
      59: { id: 63, name: 'Light Stone', rgb: { r: 205, g: 197, b: 158 } },
      60: { id: 58, name: 'Dark Slate', rgb: { r: 51, g: 57, b: 65 } },
      61: { id: 59, name: 'Slate', rgb: { r: 109, g: 117, b: 141 } },
      62: { id: 60, name: 'Light Slate', rgb: { r: 179, g: 185, b: 209 } },
      63: { id: 0, name: 'Transparent', rgb: null },
    },
  };

  // GLOBAL STATE
  const state = {
    running: false,
    imageLoaded: false,
    totalPixels: 0,
    paintedPixels: 0,
    availableColors: [],
    displayCharges: 0,
    maxCharges: 1,
    cooldown: CONFIG.COOLDOWN_DEFAULT,
    imageData: null,
    stopFlag: false,
    startPosition: null,
    region: null,
    paintWhitePixels: true,
    paintTransparentPixels: true, // Changed to true to fix transparent pixel detection
    autoRepairEnabled: false,
    autoRepairInterval: 30,
    autoRepairTimer: null,
    debugLogs: [],
    customTransparencyThreshold: CONFIG.TRANSPARENCY_THRESHOLD,
    customWhiteThreshold: CONFIG.WHITE_THRESHOLD,
    tokenSource: CONFIG.TOKEN_SOURCE,
    autonomousMode: CONFIG.AUTONOMOUS_MODE,
    autoTokenRefresh: CONFIG.AUTO_TOKEN_REFRESH,
    tokenPreloadBuffer: CONFIG.TOKEN_PRELOAD_BUFFER,
    retryCount: 0,
    tokenRetryTimer: null,
    tokenPreloadTimer: null,
    windowMinimized: false,
    lastAttackState: null,
    initialSetupComplete: false,
    // Auto-batch state
    autoBatchEnabled: CONFIG.AUTO_BATCH_ENABLED,
    currentBatchSize: CONFIG.MIN_BATCH_SIZE,
    batchOptimization: CONFIG.BATCH_OPTIMIZATION,
  };

  // Random string generator
  const randStr = (len, chars = 'abcdefghijklmnopqrstuvwxyz0123456789') =>
    [...Array(len)].map(() => chars[(crypto?.getRandomValues?.(new Uint32Array(1))[0] % chars.length) || Math.floor(Math.random() * chars.length)]).join('');

  const fpStr32 = randStr(32);

  // Enhanced Turnstile token handling - Actualizado con la lógica de new.txt lol
  let turnstileToken = null;
  let tokenExpiryTime = 0;
  let tokenGenerationInProgress = false;
  let _resolveToken = null;
  let tokenPromise = new Promise((resolve) => {
    _resolveToken = resolve;
  });
  let retryCount = 0;
  const MAX_RETRIES = 10;
  const MAX_BATCH_RETRIES = 10;
  const TOKEN_LIFETIME = 240000; // 4 minutes (tokens typically last 5 min, use 4 for safety)

  function setTurnstileToken(token) {
    if (_resolveToken) {
      _resolveToken(token);
      _resolveToken = null;
    }
    turnstileToken = token;
    tokenExpiryTime = Date.now() + TOKEN_LIFETIME;
    console.log('✅ Turnstile token set successfully');
    Utils.addDebugLog('Token cached successfully', 'success');
  }

  function isTokenValid() {
    return turnstileToken && Date.now() < tokenExpiryTime;
  }

  function invalidateToken() {
    turnstileToken = null;
    tokenExpiryTime = 0;
    console.log('🗑️ Token invalidated, will force fresh generation');
    Utils.addDebugLog('Token invalidated, will force fresh generation', 'warning');
  }

  async function ensureToken(forceRefresh = false) {
    // Return cached token if still valid and not forcing refresh
    if (isTokenValid() && !forceRefresh) {
      return turnstileToken;
    }

    // Invalidate token if forcing refresh
    if (forceRefresh) invalidateToken();

    // Avoid multiple simultaneous token generations
    if (tokenGenerationInProgress) {
      console.log('🔄 Token generation already in progress, waiting...');
      await Utils.sleep(2000);
      return isTokenValid() ? turnstileToken : null;
    }

    tokenGenerationInProgress = true;

    try {
      console.log('🔄 Token expired or missing, generating new one...');
      const token = await handleCaptchaWithRetry();
      if (token && token.length > 20) {
        setTurnstileToken(token);
        console.log('✅ Token captured and cached successfully');
        return token;
      }

      console.log('⚠️ Invisible Turnstile failed, forcing browser automation...');
      const fallbackToken = await handleCaptchaFallback();
      if (fallbackToken && fallbackToken.length > 20) {
        setTurnstileToken(fallbackToken);
        console.log('✅ Fallback token captured successfully');
        return fallbackToken;
      }

      console.log('❌ All token generation methods failed');
      return null;
    } finally {
      tokenGenerationInProgress = false;
    }
  }

  async function handleCaptchaWithRetry() {
    const startTime = performance.now();

    try {
      const { sitekey, token: preGeneratedToken } = await Utils.obtainSitekeyAndToken();

      if (!sitekey) {
        throw new Error('No valid sitekey found');
      }

      console.log('🔑 Using sitekey:', sitekey);

      if (typeof window !== 'undefined' && window.navigator) {
        console.log(
          '🧭 UA:',
          window.navigator.userAgent.substring(0, 50) + '...',
          'Platform:',
          window.navigator.platform
        );
      }

      let token = null;

      if (
        preGeneratedToken &&
        typeof preGeneratedToken === 'string' &&
        preGeneratedToken.length > 20
      ) {
        console.log('♻️ Reusing pre-generated Turnstile token');
        token = preGeneratedToken;
      } else {
        if (isTokenValid()) {
          console.log('♻️ Using existing cached token (from previous session)');
          token = turnstileToken;
        } else {
          console.log('🔍 Generating new token with executeTurnstile...');
          token = await Utils.executeTurnstile(sitekey, 'paint');
          if (token) setTurnstileToken(token);
        }
      }

      if (token && typeof token === 'string' && token.length > 20) {
        const elapsed = Math.round(performance.now() - startTime);
        console.log(`✅ Turnstile token generated successfully in ${elapsed}ms`);
        return token;
      } else {
        throw new Error(`Invalid or empty token received - Length: ${token?.length || 0}`);
      }
    } catch (error) {
      const elapsed = Math.round(performance.now() - startTime);
      console.error(`❌ Turnstile token generation failed after ${elapsed}ms:`, error);
      throw error;
    }
  }

  async function handleCaptchaFallback() {
    return new Promise(async (resolve, reject) => {
      try {
        // Ensure we have a fresh promise to await for a new token capture
        if (!_resolveToken) {
          tokenPromise = new Promise((res) => {
            _resolveToken = res;
          });
        }
        const timeoutPromise = Utils.sleep(20000).then(() =>
          reject(new Error('Auto-CAPTCHA timed out.'))
        );

        const solvePromise = (async () => {
          const mainPaintBtn = await Utils.waitForSelector(
            'button.btn.btn-primary.btn-lg, button.btn-primary.sm\\:btn-xl',
            200,
            10000
          );
          if (!mainPaintBtn) throw new Error('Could not find the main paint button.');
          mainPaintBtn.click();
          await Utils.sleep(500);

          const transBtn = await Utils.waitForSelector('button#color-0', 200, 5000);
          if (!transBtn) throw new Error('Could not find the transparent color button.');
          transBtn.click();
          await Utils.sleep(500);

          const canvas = await Utils.waitForSelector('canvas', 200, 5000);
          if (!canvas) throw new Error('Could not find the canvas element.');

          canvas.setAttribute('tabindex', '0');
          canvas.focus();
          const rect = canvas.getBoundingClientRect();
          const centerX = Math.round(rect.left + rect.width / 2);
          const centerY = Math.round(rect.top + rect.height / 2);

          canvas.dispatchEvent(
            new MouseEvent('mousemove', {
              clientX: centerX,
              clientY: centerY,
              bubbles: true,
            })
          );
          canvas.dispatchEvent(
            new KeyboardEvent('keydown', {
              key: ' ',
              code: 'Space',
              bubbles: true,
            })
          );
          await Utils.sleep(50);
          canvas.dispatchEvent(
            new KeyboardEvent('keyup', {
              key: ' ',
              code: 'Space',
              bubbles: true,
            })
          );
          await Utils.sleep(500);

          // 800ms delay before sending confirmation
          await Utils.sleep(800);

          // Keep confirming until token is captured
          const confirmLoop = async () => {
            while (!turnstileToken) {
              let confirmBtn = await Utils.waitForSelector(
                'button.btn.btn-primary.btn-lg, button.btn.btn-primary.sm\\:btn-xl'
              );
              if (!confirmBtn) {
                const allPrimary = Array.from(document.querySelectorAll('button.btn-primary'));
                confirmBtn = allPrimary.length ? allPrimary[allPrimary.length - 1] : null;
              }
              if (confirmBtn) {
                confirmBtn.click();
              }
              await Utils.sleep(500); // 500ms delay between confirmation attempts
            }
          };

          // Start confirmation loop and wait for token
          confirmLoop();
          const token = await tokenPromise;
          await Utils.sleep(300); // small delay after token is captured
          resolve(token);
        })();

        await Promise.race([solvePromise, timeoutPromise]);
      } catch (error) {
        console.error('Auto-CAPTCHA process failed:', error);
        reject(error);
      }
    });
  }

  // NUEVA LÓGICA DE INYECCIÓN - ACTUALIZADA DESDE new.txt
  function inject(callback) {
    try {
      const script = document.createElement('script');
      script.textContent = `(${callback})();`;
      document.documentElement?.appendChild(script);
      script.remove();
    } catch (error) {
      console.error('❌ Injection error:', error);
    }
  }

  inject(() => {
    const fetchedBlobQueue = new Map();

    window.addEventListener('message', (event) => {
      const { source, blobID, blobData } = event.data;
      if (source === 'auto-image-overlay' && blobID && blobData) {
        const callback = fetchedBlobQueue.get(blobID);
        if (typeof callback === 'function') {
          callback(blobData);
        }
        fetchedBlobQueue.delete(blobID);
      }
    });

    const originalFetch = window.fetch;
    window.fetch = async function (...args) {
      const response = await originalFetch.apply(this, args);
      const url = args[0] instanceof Request ? args[0].url : args[0];

      if (typeof url === 'string') {
        if (url.includes('https://backend.wplace.live/s0/pixel/')) {
          try {
            const payload = JSON.parse(args[1].body);
            if (payload.t) {
              // 📊 Debug log
              console.log(
                `🔍✅ Turnstile Token Captured - Type: ${typeof payload.t}, Value: ${payload.t
                  ? typeof payload.t === 'string'
                    ? payload.t.length > 50
                      ? payload.t.substring(0, 50) + '...'
                      : payload.t
                    : JSON.stringify(payload.t)
                  : 'null/undefined'
                }, Length: ${payload.t?.length || 0}`
              );
              window.postMessage({ source: 'turnstile-capture', token: payload.t }, '*');
            }
          } catch (_) {
            /* ignore */
          }
        }

        const contentType = response.headers.get('content-type') || '';
        if (contentType.includes('image/png') && url.includes('.png')) {
          const cloned = response.clone();
          return new Promise(async (resolve) => {
            const blobUUID = crypto.randomUUID();
            const originalBlob = await cloned.blob();

            fetchedBlobQueue.set(blobUUID, (processedBlob) => {
              resolve(
                new Response(processedBlob, {
                  headers: cloned.headers,
                  status: cloned.status,
                  statusText: cloned.statusText,
                })
              );
            });

            window.postMessage(
              {
                source: 'auto-image-tile',
                endpoint: url,
                blobID: blobUUID,
                blobData: originalBlob,
              },
              '*'
            );
          });
        }
      }

      return response;
    };
  });

  window.addEventListener('message', (event) => {
    const { source, endpoint, blobID, blobData, token } = event.data;

    if (source === 'auto-image-tile' && endpoint && blobID && blobData) {
      overlayManager.processAndRespondToTileRequest(event.data);
    }

    if (source === 'turnstile-capture' && token) {
      setTurnstileToken(token);
      Utils.addDebugLog('Token captured from injection system', 'success');
      updateTokenStatus();
    }
  });

  // NUEVO SISTEMA WASM - ACTUALIZADO DESDE new.txt
  var pawtect_chunk = null;

  // Find module if pawtect_chunk is null
  pawtect_chunk ??= await findTokenModule("pawtect_wasm_bg.wasm");

  async function createWasmToken(regionX, regionY, payload) {
    try {
      // Load the Pawtect module and WASM
      const mod = await import(new URL('/_app/immutable/chunks/'+pawtect_chunk, location.origin).href);
      let wasm;
      try {
        wasm = await mod._();
        console.log('✅ WASM initialized successfully');
      } catch (wasmError) {
        console.error('❌ WASM initialization failed:', wasmError);
        return null;
      }
      try {
        try {
          const me = await fetch(`https://backend.wplace.live/me`, { credentials: 'include' }).then(r => r.ok ? r.json() : null);
          if (me?.id) {
            mod.i(me.id);
            console.log('✅ user ID set:', me.id);
          }
        } catch { }
      } catch (userIdError) {
        console.log('⚠️ Error setting user ID:', userIdError.message);
      }
      try {
        const testUrl = `https://backend.wplace.live/s0/pixel/${regionX}/${regionY}`;
        if (mod.r) {
          mod.r(testUrl);
          console.log('✅ Request URL set:', testUrl);
        } else {
          console.log('⚠️ request_url function (mod.r) not available');
        }
      } catch (urlError) {
        console.log('⚠️ Error setting request URL:', urlError.message);
      }

      console.log('🔍 payload:', payload);

      // Encode payload
      const enc = new TextEncoder();
      const dec = new TextDecoder();
      const bodyStr = JSON.stringify(payload);
      const bytes = enc.encode(bodyStr);
      console.log('🔍 Payload size:', bytes.length, 'bytes');
      console.log('🔄 Payload string:', bodyStr);

      // Allocate WASM memory with validation
      let inPtr;
      try {
        if (!wasm.__wbindgen_malloc) {
          console.error('❌ __wbindgen_malloc function not found');
          return null;
        }

        inPtr = wasm.__wbindgen_malloc(bytes.length, 1);
        console.log('✅ WASM memory allocated, pointer:', inPtr);

        // Copy data to WASM memory
        const wasmBuffer = new Uint8Array(wasm.memory.buffer, inPtr, bytes.length);
        wasmBuffer.set(bytes);
        console.log('✅ Data copied to WASM memory');
      } catch (memError) {
        console.error('❌ Memory allocation error:', memError);
        return null;
      }

      // Call the WASM function
      console.log('🚀 Calling get_pawtected_endpoint_payload...');
      let outPtr, outLen, token;
      try {
        const result = wasm.get_pawtected_endpoint_payload(inPtr, bytes.length);
        console.log('✅ Function called, result type:', typeof result, result);

        if (Array.isArray(result) && result.length === 2) {
          [outPtr, outLen] = result;
          console.log('✅ Got output pointer:', outPtr, 'length:', outLen);

          // Decode the result
          const outputBuffer = new Uint8Array(wasm.memory.buffer, outPtr, outLen);
          token = dec.decode(outputBuffer);
          console.log('✅ Token decoded successfully');
        } else {
          console.error('❌ Unexpected function result format:', result);
          return null;
        }
      } catch (funcError) {
        console.error('❌ Function call error:', funcError);
        console.error('Stack trace:', funcError.stack);
        return null;
      }

      // Cleanup memory
      try {
        if (wasm.__wbindgen_free && outPtr && outLen) {
          wasm.__wbindgen_free(outPtr, outLen, 1);
          console.log('✅ Output memory freed');
        }
        if (wasm.__wbindgen_free && inPtr) {
          wasm.__wbindgen_free(inPtr, bytes.length, 1);
          console.log('✅ Input memory freed');
        }
      } catch (cleanupError) {
        console.log('⚠️ Cleanup warning:', cleanupError.message);
      }

      console.log('🎉 SUCCESS!');
      console.log('🔑 Full token:', token);
      return token;
    } catch (error) {
      console.error('❌ Failed to generate fp parameter:', error);
      return null;
    }
  }

  async function findTokenModule(str) {
    console.log('🔎 Searching for wasm Module...');
    const links = Array.from(document.querySelectorAll('link[rel="modulepreload"][href$=".js"]'));

    for (const link of links) {
      try {
        const url = new URL(link.getAttribute("href"), location.origin).href;
        const code = await fetch(url).then(r => r.text());
        if (code.includes(str)) {
          console.log('✅ Found wasm Module...');
          return url.split('/').pop();
        }
      } catch (e) { /* ignore individual fetch errors */ }
    }
    console.error('❌ Could not find Pawtect chunk among preloaded modules');
    return null;
  }

  // Audio notification system
  function playNotificationSound() {
    try {
      const audio = new Audio('https://cdn.pixabay.com/download/audio/2025/03/21/audio_9bec51b17f.mp3?filename=glass-break-316720.mp3');
      audio.volume = 0.5;
      audio.play().catch(() => {
        console.warn('Could not play notification sound');
      });
    } catch (error) {
      console.warn('Audio notification failed:', error);
    }
  }

  // Notification system for attacks and repairs
  function showAttackNotification(type, count = 0) {
    const existing = document.getElementById('attack-notification');
    if (existing) existing.remove();

    const notification = document.createElement('div');
    notification.id = 'attack-notification';
    notification.style.cssText = `
      position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
      z-index: 15000; background: rgba(0,0,0,0.9); color: white;
      border-radius: 15px; padding: 20px; text-align: center;
      box-shadow: 0 10px 30px rgba(0,0,0,0.8);
      border: 2px solid ${type === 'attack' ? '#ff4444' : '#44ff44'};
      min-width: 350px; max-width: 450px;
    `;

    if (type === 'attack') {
      notification.innerHTML = `
        <div style="margin-bottom: 15px;">
          <img src="https://i.imgur.com/uJ2FRUM.png" 
               alt="Attack" 
               style="width: 80px; height: 80px; border-radius: 10px; object-fit: cover;">
        </div>
        <h2 style="color: #ff4444; margin: 10px 0; font-size: 18px; font-weight: bold;">
          PIXEL ART ATTACKED!
        </h2>
        <p style="margin: 5px 0; font-size: 14px;">
          Detected ${count} damaged pixels!
        </p>
      `;
    } else if (type === 'repaired') {
      notification.innerHTML = `
        <div style="margin-bottom: 15px;">
          <img src="https://i.imgur.com/WXVkpjo.png"
		  alt="Repaired" 
               style="width: 80px; height: 80px; border-radius: 10px; object-fit: cover;">
        </div>
        <h2 style="color: #44ff44; margin: 10px 0; font-size: 18px; font-weight: bold;">
          COMPLETELY REPAIRED!
        </h2>
        <p style="margin: 5px 0; font-size: 14px;">
          All pixels have been restored!
        </p>
      `;
    }

    document.body.appendChild(notification);

    setTimeout(() => {
      if (notification.parentNode) {
        notification.style.transition = 'opacity 0.5s ease';
        notification.style.opacity = '0';
        setTimeout(() => {
          if (notification.parentNode) notification.remove();
        }, 500);
      }
    }, 3000);
  }

  // Peaceful state display in main window
  function showPeacefulState() {
    const statusDiv = document.getElementById('status');
    if (statusDiv && !state.running) {
      statusDiv.innerHTML = `
        <div style="display: flex; align-items: center; gap: 10px;">
          <img src="https://c.tenor.com/Bo5TLHiee7QAAAAd/tenor.gif" 
               alt="Peaceful" 
               style="width: 32px; height: 32px; border-radius: 6px;">
          <span style="color: #81c784; font-weight: 500;">No attacks detected - All secure</span>
        </div>
      `;
    }
  }

  // Typewriter effect for title
  function createTypewriterTitle() {
    const titleText = "WPlace Autonomous Repair Tool";
    let currentIndex = 0;
    const titleElement = document.getElementById('main-title');
    
    if (!titleElement) return;
    
    function typeNext() {
      if (currentIndex < titleText.length) {
        titleElement.textContent = titleText.substring(0, currentIndex + 1);
        currentIndex++;
        setTimeout(typeNext, 100);
      } else {
        setTimeout(() => {
          currentIndex = 0;
          titleElement.textContent = '';
          setTimeout(typeNext, 1000);
        }, 3000);
      }
    }
    
    typeNext();
  }

  // Fallback translations
  const TEXTS = {
    title: 'WPlace Autonomous Repair Tool',
    loadFromFile: 'Load Progress File',
    repairPixels: 'Repair Pixels',
    enableAutoRepair: 'Enable Auto Repair',
    repairInterval: 'Check Interval (seconds)',
    debug: 'Debug Console',
    clearDebug: 'Clear Debug',
    scanningForDamage: 'Scanning for damaged pixels...',
    damageDetected: 'Damage detected: {count} pixels',
    noDamageDetected: 'No damage found',
    repairingPixels: 'Repairing {count} damaged pixels...',
    repairComplete: 'Repair completed: {repaired} pixels fixed',
    autoRepairStarted: 'Auto repair started (every {interval}s)',
    autoRepairStopped: 'Auto repair stopped',
    fileLoaded: 'Progress file loaded successfully',
    invalidFile: 'Invalid file format',
    noImageData: 'No image data found in file',
    turnstileInstructions: 'Complete the verification',
    hideTurnstileBtn: 'Hide',
    tokenCapturedSuccess: 'Token captured successfully',
    autonomousModeActive: 'Autonomous mode active',
    tokenSystemReady: 'Advanced token system ready',
    fileOperationsAvailable: 'File operations available',
    initializingToken: 'Initializing token system...',
    tokenReady: 'Token system ready',
  };

  // UTILIDADES ACTUALIZADAS CON NUEVA IMPLEMENTACIÓN TURNSTILE
  const Utils = {
    sleep: (ms) => new Promise((r) => setTimeout(r, ms)),

    t: (key, params = {}) => {
      let text = TEXTS[key] || key;
      Object.keys(params).forEach((param) => {
        text = text.replace(`{${param}}`, params[param]);
      });
      return text;
    },

    showAlert: (message, type = 'info') => {
      const alertDiv = document.createElement('div');
      alertDiv.style.cssText = `
        position: fixed; top: 20px; right: 20px; z-index: 10000;
        padding: 12px 16px; border-radius: 8px; color: white; font-weight: 500;
        background: ${type === 'success' ? '#28a745' : type === 'error' ? '#dc3545' : type === 'warning' ? '#ffc107' : '#17a2b8'};
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        max-width: 300px; word-wrap: break-word;
      `;
      alertDiv.textContent = message;
      document.body.appendChild(alertDiv);

      setTimeout(() => {
        alertDiv.style.transition = 'opacity 0.3s ease';
        alertDiv.style.opacity = '0';
        setTimeout(() => {
          if (alertDiv.parentNode) alertDiv.remove();
        }, 300);
      }, 4000);
    },

    addDebugLog: (message, type = 'info') => {
      const timestamp = new Date().toLocaleTimeString();
      state.debugLogs.push({ timestamp, message, type });

      if (state.debugLogs.length > 150) {
        state.debugLogs = state.debugLogs.slice(-150);
      }

      updateDebugConsole();
      console.log(`[${timestamp}] ${message}`);
    },

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

    createFileUploader: () =>
      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();
      }),

    isWhitePixel: (r, g, b) => {
      const wt = state.customWhiteThreshold || CONFIG.WHITE_THRESHOLD;
      return r >= wt && g >= wt && b >= wt;
    },

    resolveColor(targetRgb, availableColors) {
      if (!availableColors || availableColors.length === 0) {
        return { id: null, rgb: targetRgb };
      }

      let bestId = availableColors[0].id;
      let bestRgb = [...availableColors[0].rgb];
      let bestScore = Infinity;

      for (let i = 0; i < availableColors.length; i++) {
        const c = availableColors[i];
        const [r, g, b] = c.rgb;
        const rmean = (r + targetRgb[0]) / 2;
        const rdiff = r - targetRgb[0];
        const gdiff = g - targetRgb[1];
        const bdiff = b - targetRgb[2];
        const dist = Math.sqrt(
          (((512 + rmean) * rdiff * rdiff) >> 8) +
          4 * gdiff * gdiff +
          (((767 - rmean) * bdiff * bdiff) >> 8)
        );
        if (dist < bestScore) {
          bestScore = dist;
          bestId = c.id;
          bestRgb = [...c.rgb];
          if (dist === 0) break;
        }
      }

      return { id: bestId, rgb: bestRgb };
    },

    calculateTileRange(
      startRegionX,
      startRegionY,
      startPixelX,
      startPixelY,
      width,
      height,
      tileSize = 1000
    ) {
      const endPixelX = startPixelX + width;
      const endPixelY = startPixelY + height;

      return {
        startTileX: startRegionX + Math.floor(startPixelX / tileSize),
        startTileY: startRegionY + Math.floor(startPixelY / tileSize),
        endTileX: startRegionX + Math.floor((endPixelX - 1) / tileSize),
        endTileY: startRegionY + Math.floor((endPixelY - 1) / tileSize),
      };
    },

    dynamicSleep: async function (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());
      }
    },

    // NUEVA IMPLEMENTACIÓN TURNSTILE COMPLETA - ACTUALIZADA DESDE new.txt
    turnstileLoaded: false,
    _turnstileContainer: null,
    _turnstileOverlay: null,
    _turnstileWidgetId: null,
    _lastSitekey: null,
    _cachedSitekey: null,

    async loadTurnstile() {
      if (window.turnstile) {
        this.turnstileLoaded = true;
        return Promise.resolve();
      }

      return new Promise((resolve, reject) => {
        if (document.querySelector('script[src^="https://challenges.cloudflare.com/turnstile/v0/api.js"]')) {
          const checkReady = () => {
            if (window.turnstile) {
              this.turnstileLoaded = true;
              resolve();
            } else {
              setTimeout(checkReady, 100);
            }
          };
          return checkReady();
        }

        const script = document.createElement('script');
        script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
        script.async = true;
        script.defer = true;
        script.onload = () => {
          this.turnstileLoaded = true;
          Utils.addDebugLog('Turnstile script loaded successfully', 'success');
          resolve();
        };
        script.onerror = () => {
          Utils.addDebugLog('Failed to load Turnstile script', 'error');
          reject(new Error('Failed to load Turnstile'));
        };
        document.head.appendChild(script);
      });
    },

    ensureTurnstileContainer() {
      if (!this._turnstileContainer || !document.body.contains(this._turnstileContainer)) {
        if (this._turnstileContainer) {
          this._turnstileContainer.remove();
        }

        this._turnstileContainer = document.createElement('div');
        this._turnstileContainer.className = 'wplace-turnstile-hidden';
        this._turnstileContainer.setAttribute('aria-hidden', 'true');
        this._turnstileContainer.id = 'turnstile-widget-container';
        document.body.appendChild(this._turnstileContainer);
      }
      return this._turnstileContainer;
    },

    ensureTurnstileOverlayContainer() {
      if (this._turnstileOverlay && document.body.contains(this._turnstileOverlay)) {
        return this._turnstileOverlay;
      }

      const overlay = document.createElement('div');
      overlay.id = 'turnstile-overlay-container';
      overlay.className = 'wplace-turnstile-overlay wplace-overlay-hidden';

      const title = document.createElement('div');
      title.textContent = Utils.t('turnstileInstructions');
      title.className = 'wplace-turnstile-title';

      const host = document.createElement('div');
      host.id = 'turnstile-overlay-host';
      host.className = 'wplace-turnstile-host';

      const hideBtn = document.createElement('button');
      hideBtn.textContent = Utils.t('hideTurnstileBtn');
      hideBtn.className = 'wplace-turnstile-hide-btn';
      hideBtn.addEventListener('click', () => overlay.remove());

      overlay.appendChild(title);
      overlay.appendChild(host);
      overlay.appendChild(hideBtn);
      document.body.appendChild(overlay);

      this._turnstileOverlay = overlay;
      return overlay;
    },

    async executeTurnstile(sitekey, action = 'paint') {
      await this.loadTurnstile();

      // Try reusing existing widget first if sitekey matches
      if (this._turnstileWidgetId && this._lastSitekey === sitekey && window.turnstile?.execute) {
        try {
          console.log('🔄 Reusing existing Turnstile widget...');
          const token = await Promise.race([
            window.turnstile.execute(this._turnstileWidgetId, { action }),
            new Promise((_, reject) =>
              setTimeout(() => reject(new Error('Execute timeout')), 15000)
            ),
          ]);
          if (token && token.length > 20) {
            console.log('✅ Token generated via widget reuse');
            return token;
          }
        } catch (error) {
          console.log('  Widget reuse failed, will create a fresh widget:', error.message);
        }
      }

      // Try invisible widget first
      const invisibleToken = await this.createTurnstileWidget(sitekey, action);
      if (invisibleToken && invisibleToken.length > 20) {
        return invisibleToken;
      }

      console.log('  Falling back to interactive Turnstile (visible).');
      return await this.createTurnstileWidgetInteractive(sitekey, action);
    },

    async createTurnstileWidget(sitekey, action) {
      return new Promise((resolve) => {
        try {
          // Force cleanup of any existing widget
          if (this._turnstileWidgetId && window.turnstile?.remove) {
            try {
              window.turnstile.remove(this._turnstileWidgetId);
              console.log('🧹 Cleaned up existing Turnstile widget');
            } catch (e) {
              console.warn('⚠️ Widget cleanup warning:', e.message);
            }
          }

          const container = this.ensureTurnstileContainer();
          container.innerHTML = '';

          // Verify Turnstile is available
          if (!window.turnstile?.render) {
            console.error('❌ Turnstile not available for rendering');
            resolve(null);
            return;
          }

          console.log('🔧 Creating invisible Turnstile widget...');
          const widgetId = window.turnstile.render(container, {
            sitekey,
            action,
            size: 'invisible',
            retry: 'auto',
            'retry-interval': 8000,
            callback: (token) => {
              console.log('✅ Invisible Turnstile callback');
              resolve(token);
            },
            'error-callback': () => resolve(null),
            'timeout-callback': () => resolve(null),
          });

          this._turnstileWidgetId = widgetId;
          this._lastSitekey = sitekey;

          if (!widgetId) {
            return resolve(null);
          }

          // Execute the widget and race with timeout
          Promise.race([
            window.turnstile.execute(widgetId, { action }),
            new Promise((_, reject) =>
              setTimeout(() => reject(new Error('Invisible execute timeout')), 12000)
            ),
          ])
            .then(resolve)
            .catch(() => resolve(null));
        } catch (e) {
          console.error('❌ Invisible Turnstile creation failed:', e);
          resolve(null);
        }
      });
    },

    async createTurnstileWidgetInteractive(sitekey, action) {
      // Create a visible widget that users can interact with if needed
      console.log('🔄 Creating interactive Turnstile widget (visible)');

      return new Promise((resolve) => {
        try {
          // Force cleanup of any existing widget
          if (this._turnstileWidgetId && window.turnstile?.remove) {
            try {
              window.turnstile.remove(this._turnstileWidgetId);
            } catch (e) {
              console.warn('⚠️ Widget cleanup warning:', e.message);
            }
          }

          const overlay = this.ensureTurnstileOverlayContainer();
          overlay.classList.remove('wplace-overlay-hidden');
          overlay.style.display = 'block';

          const host = overlay.querySelector('#turnstile-overlay-host');
          host.innerHTML = '';

          // Set a timeout for interactive mode
          const timeout = setTimeout(() => {
            console.warn('⏰ Interactive Turnstile widget timeout');
            overlay.classList.add('wplace-overlay-hidden');
            overlay.style.display = 'none';
            resolve(null);
          }, 60000); // 60 seconds for user interaction

          const widgetId = window.turnstile.render(host, {
            sitekey,
            action,
            size: 'normal',
            theme: 'light',
            callback: (token) => {
              clearTimeout(timeout);
              overlay.classList.add('wplace-overlay-hidden');
              overlay.style.display = 'none';
              console.log('✅ Interactive Turnstile completed successfully');

              if (typeof token === 'string' && token.length > 20) {
                resolve(token);
              } else {
                console.warn('❌ Invalid token from interactive widget');
                resolve(null);
              }
            },
            'error-callback': (error) => {
              clearTimeout(timeout);
              overlay.classList.add('wplace-overlay-hidden');
              overlay.style.display = 'none';
              console.warn('❌ Interactive Turnstile error:', error);
              resolve(null);
            },
          });

          this._turnstileWidgetId = widgetId;
          this._lastSitekey = sitekey;

          if (!widgetId) {
            clearTimeout(timeout);
            overlay.classList.add('wplace-overlay-hidden');
            overlay.style.display = 'none';
            console.warn('❌ Failed to create interactive Turnstile widget');
            resolve(null);
          } else {
            console.log('✅ Interactive Turnstile widget created, waiting for user interaction...');
          }
        } catch (e) {
          console.error('❌ Interactive Turnstile creation failed:', e);
          resolve(null);
        }
      });
    },

    cleanupTurnstile() {
      if (this._turnstileWidgetId && window.turnstile?.remove) {
        try {
          window.turnstile.remove(this._turnstileWidgetId);
        } catch (e) {
          console.warn('Failed to cleanup Turnstile widget:', e);
        }
      }

      if (this._turnstileContainer && document.body.contains(this._turnstileContainer)) {
        this._turnstileContainer.remove();
      }

      if (this._turnstileOverlay && document.body.contains(this._turnstileOverlay)) {
        this._turnstileOverlay.remove();
      }

      this._turnstileWidgetId = null;
      this._turnstileContainer = null;
      this._turnstileOverlay = null;
      this._lastSitekey = null;
    },

    // DETECCIÓN DE SITEKEY MEJORADA - ACTUALIZADA DESDE new.txt
    async obtainSitekeyAndToken(fallback = '0x4AAAAAABpqJe8FO0N84q0F') {
      // Cache sitekey to avoid repeated DOM queries
      if (this._cachedSitekey) {
        console.log('🔍 Using cached sitekey:', this._cachedSitekey);

        return isTokenValid()
          ? {
            sitekey: this._cachedSitekey,
            token: turnstileToken,
          }
          : { sitekey: this._cachedSitekey, token: null };
      }

      // List of potential sitekeys to try
      const potentialSitekeys = [
        '0x4AAAAAABpqJe8FO0N84q0F', // WPlace common sitekey
        '0x4AAAAAAAJ7xjKAp6Mt_7zw', // Alternative WPlace sitekey
        '0x4AAAAAADm5QWx6Ov2LNF2g', // Another common sitekey
      ];
      const trySitekey = async (sitekey, source) => {
        if (!sitekey || sitekey.length < 10) return null;

        console.log(`🔍 Testing sitekey from ${source}:`, sitekey);
        const token = await this.executeTurnstile(sitekey);

        if (token && token.length >= 20) {
          console.log(`✅ Valid token generated from ${source} sitekey`);
          setTurnstileToken(token);
          this._cachedSitekey = sitekey;
          return { sitekey, token };
        } else {
          console.log(`❌ Failed to get token from ${source} sitekey`);
          return null;
        }
      };

      try {
        // 1️⃣ data-sitekey attribute
        const sitekeySel = document.querySelector('[data-sitekey]');
        if (sitekeySel) {
          const sitekey = sitekeySel.getAttribute('data-sitekey');
          const result = await trySitekey(sitekey, 'data attribute');
          if (result) {
            return result;
          }
        }

        // 2️⃣ Turnstile element
        const turnstileEl = document.querySelector('.cf-turnstile');
        if (turnstileEl?.dataset?.sitekey) {
          const sitekey = turnstileEl.dataset.sitekey;
          const result = await trySitekey(sitekey, 'turnstile element');
          if (result) {
            return result;
          }
        }

        // 3️⃣ Meta tags
        const metaTags = document.querySelectorAll(
          'meta[name*="turnstile"], meta[property*="turnstile"]'
        );
        for (const meta of metaTags) {
          const content = meta.getAttribute('content');
          const result = await trySitekey(content, 'meta tag');
          if (result) {
            return result;
          }
        }

        // 4️⃣ Global variable
        if (window.__TURNSTILE_SITEKEY) {
          const result = await trySitekey(window.__TURNSTILE_SITEKEY, 'global variable');
          if (result) {
            return result;
          }
        }

        // 5️⃣ Script tags
        const scripts = document.querySelectorAll('script');
        for (const script of scripts) {
          const content = script.textContent || script.innerHTML;
          const match = content.match(
            /(?:sitekey|data-sitekey)['"\s\[\]:\=\(]*['"]?([0-9a-zA-Z_-]{20,})['"]?/i
          );
          if (match && match[1]) {
            const extracted = match[1].replace(/['"]/g, '');
            const result = await trySitekey(extracted, 'script content');
            if (result) {
              return result;
            }
          }
        }

        // 6️⃣ Known potential sitekeys
        console.log('🔍 Testing known potential sitekeys...');
        for (const testSitekey of potentialSitekeys) {
          const result = await trySitekey(testSitekey, 'known list');
          if (result) {
            return result;
          }
        }
      } catch (error) {
        console.warn('⚠️ Error during sitekey detection:', error);
      }

      // 7️⃣ Fallback
      console.log('🔧 Trying fallback sitekey:', fallback);
      const fallbackResult = await trySitekey(fallback, 'fallback');
      if (fallbackResult) {
        return fallbackResult;
      }

      console.error('❌ No working sitekey or token found.');
      return { sitekey: null, token: null };
    },
  };

  // Enhanced Overlay Manager for pixel detection with autonomous capabilities
  class OverlayManager {
    constructor() {
      this.originalTiles = new Map();
      this.originalTilesData = new Map();
      this.tileSize = 1000;
      this.loadingPromises = new Map();
      this.autonomousMode = state.autonomousMode;
    }

    async processAndRespondToTileRequest(eventData) {
      const { endpoint, blobID, blobData } = eventData;

      const tileMatch = endpoint.match(/(\d+)\/(\d+)\.png/);
      if (tileMatch) {
        const tileX = parseInt(tileMatch[1], 10);
        const tileY = parseInt(tileMatch[2], 10);
        const tileKey = `${tileX},${tileY}`;

        try {
          const originalBitmap = await createImageBitmap(blobData);
          this.originalTiles.set(tileKey, originalBitmap);

          try {
            let canvas, ctx;
            if (typeof OffscreenCanvas !== 'undefined') {
              canvas = new OffscreenCanvas(originalBitmap.width, originalBitmap.height);
              ctx = canvas.getContext('2d');
            } else {
              canvas = document.createElement('canvas');
              canvas.width = originalBitmap.width;
              canvas.height = originalBitmap.height;
              ctx = canvas.getContext('2d');
            }
            ctx.imageSmoothingEnabled = false;
            ctx.drawImage(originalBitmap, 0, 0);
            const imgData = ctx.getImageData(0, 0, originalBitmap.width, originalBitmap.height);

            this.originalTilesData.set(tileKey, {
              w: originalBitmap.width,
              h: originalBitmap.height,
              data: new Uint8ClampedArray(imgData.data),
            });

            if (this.autonomousMode) {
              Utils.addDebugLog(`Auto-cached tile: ${tileKey} (${originalBitmap.width}x${originalBitmap.height})`, 'info');
            }
          } catch (e) {
            Utils.addDebugLog(`Failed to cache tile ImageData: ${tileKey} - ${e.message}`, 'warning');
          }
        } catch (e) {
          Utils.addDebugLog(`Failed to create tile bitmap: ${tileKey} - ${e.message}`, 'error');
        }
      }

      window.postMessage(
        {
          source: 'auto-image-overlay',
          blobID: blobID,
          blobData: blobData,
        },
        '*'
      );
    }

    async getTilePixelColor(tileX, tileY, pixelX, pixelY) {
      const tileKey = `${tileX},${tileY}`;
      const alphaThresh = state.customTransparencyThreshold || CONFIG.TRANSPARENCY_THRESHOLD;

      const cached = this.originalTilesData.get(tileKey);
      if (cached && cached.data && cached.w > 0 && cached.h > 0) {
        const x = Math.max(0, Math.min(cached.w - 1, pixelX));
        const y = Math.max(0, Math.min(cached.h - 1, pixelY));
        const idx = (y * cached.w + x) * 4;
        const d = cached.data;
        const a = d[idx + 3];

        // Always return pixel data, let caller decide about transparency
        return [d[idx], d[idx + 1], d[idx + 2], a];
      }

      const bitmap = this.originalTiles.get(tileKey);
      if (!bitmap) {
        if (this.autonomousMode) {
          Utils.addDebugLog(`Tile ${tileKey} not available, requesting load...`, 'warning');
        }
        return null;
      }

      try {
        let canvas, ctx;
        if (typeof OffscreenCanvas !== 'undefined') {
          canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
          ctx = canvas.getContext('2d');
        } else {
          canvas = document.createElement('canvas');
          canvas.width = bitmap.width;
          canvas.height = bitmap.height;
          ctx = canvas.getContext('2d');
        }
        ctx.imageSmoothingEnabled = false;
        ctx.drawImage(bitmap, 0, 0);

        const x = Math.max(0, Math.min(bitmap.width - 1, pixelX));
        const y = Math.max(0, Math.min(bitmap.height - 1, pixelY));
        const data = ctx.getImageData(x, y, 1, 1).data;
        const a = data[3];

        // Always return pixel data, let caller decide about transparency
        return [data[0], data[1], data[2], a];
      } catch (e) {
        Utils.addDebugLog(`Error reading pixel from tile ${tileKey}: ${e.message}`, 'error');
        return null;
      }
    }

    async waitForTiles(startRegionX, startRegionY, pixelWidth, pixelHeight, startPixelX = 0, startPixelY = 0, timeoutMs = 15000) {
      const { startTileX, startTileY, endTileX, endTileY } = Utils.calculateTileRange(
        startRegionX,
        startRegionY,
        startPixelX,
        startPixelY,
        pixelWidth,
        pixelHeight,
        this.tileSize
      );

      const requiredTiles = [];
      for (let ty = startTileY; ty <= endTileY; ty++) {
        for (let tx = startTileX; tx <= endTileX; tx++) {
          requiredTiles.push(`${tx},${ty}`);
        }
      }

      if (requiredTiles.length === 0) return true;

      Utils.addDebugLog(`Waiting for ${requiredTiles.length} tiles (autonomous: ${this.autonomousMode})...`, 'info');

      const startTime = Date.now();
      let lastProgress = 0;

      while (Date.now() - startTime < timeoutMs) {
        if (state.stopFlag) {
          Utils.addDebugLog('waitForTiles: stopped by user', 'warning');
          return false;
        }

        const loaded = requiredTiles.filter((k) => this.originalTiles.has(k)).length;
        const progress = Math.round((loaded / requiredTiles.length) * 100);

        if (progress !== lastProgress && progress % 20 === 0) {
          Utils.addDebugLog(`Tile loading progress: ${loaded}/${requiredTiles.length} (${progress}%)`, 'info');
          lastProgress = progress;
        }

        if (loaded === requiredTiles.length) {
          Utils.addDebugLog(`All ${requiredTiles.length} required tiles are loaded`, 'success');
          return true;
        }

        await Utils.sleep(this.autonomousMode ? 500 : 1000);
      }

      const loaded = requiredTiles.filter((k) => this.originalTiles.has(k)).length;
      Utils.addDebugLog(`Timeout waiting for tiles: ${loaded}/${requiredTiles.length} loaded`, 'warning');
      
      if (this.autonomousMode && loaded > requiredTiles.length * 0.8) {
        Utils.addDebugLog(`Autonomous mode: proceeding with ${loaded}/${requiredTiles.length} tiles (80%+ loaded)`, 'warning');
        return true;
      }

      return loaded > 0;
    }
  }

  const overlayManager = new OverlayManager();

  // Enhanced WPlace API Service with auto-batch functionality
  const WPlaceService = {
    async paintPixelInRegion(regionX, regionY, pixelX, pixelY, color, retryCount = 0) {
      try {
        await ensureToken();
        if (!turnstileToken) {
          Utils.addDebugLog('No valid token available for paint request', 'error');
          return 'token_error';
        }

        const payload = {
          coords: [pixelX, pixelY],
          colors: [color],
          t: turnstileToken,
          fp: fpStr32,
        };

        const wasmToken = await createWasmToken(regionX, regionY, payload);
        if (!wasmToken) {
          Utils.addDebugLog('Failed to generate WASM token', 'error');
          return false;
        }

        const res = await fetch(`https://backend.wplace.live/s0/pixel/${regionX}/${regionY}`, {
          method: 'POST',
          headers: { 
            'Content-Type': 'text/plain;charset=UTF-8',
            'x-pawtect-token': wasmToken 
          },
          credentials: 'include',
          body: JSON.stringify(payload),
        });

        if (res.status === 403) {
          Utils.addDebugLog(`403 Forbidden for pixel (${pixelX},${pixelY}). Token invalid/expired.`, 'error');
          invalidateToken();
          
          if (retryCount < 2 && state.autonomousMode) {
            Utils.addDebugLog(`Autonomous retry ${retryCount + 1}/2 for pixel (${pixelX},${pixelY})`, 'warning');
            await Utils.sleep(1000);
            return await this.paintPixelInRegion(regionX, regionY, pixelX, pixelY, color, retryCount + 1);
          }
          
          return 'token_error';
        }

        if (!res.ok) {
          Utils.addDebugLog(`Paint request failed with status ${res.status}`, 'error');
          return false;
        }

        const data = await res.json();
        const success = data?.painted === 1;
        
        if (success) {
          Utils.addDebugLog(`Paint SUCCESS for (${pixelX},${pixelY}) with color ${color}`, 'success');
        } else {
          Utils.addDebugLog(`Paint FAILED for (${pixelX},${pixelY}) - server response: ${JSON.stringify(data)}`, 'error');
        }
        
        return success;
      } catch (e) {
        Utils.addDebugLog(`Paint request error for (${pixelX},${pixelY}): ${e.message}`, 'error');
        return false;
      }
    },

    // NEW: Auto-batch pixel painting functionality
    async paintPixelBatchInRegion(regionX, regionY, pixelBatch, retryCount = 0) {
      try {
        await ensureToken();
        if (!turnstileToken) {
          Utils.addDebugLog('No valid token available for batch paint request', 'error');
          return 'token_error';
        }

        // Prepare batch coordinates and colors
        const coords = [];
        const colors = [];
        
        for (const pixel of pixelBatch) {
          coords.push(pixel.pixelX, pixel.pixelY);
          colors.push(pixel.color);
        }

        const payload = {
          coords: coords,
          colors: colors,
          t: turnstileToken,
          fp: fpStr32,
        };

        const wasmToken = await createWasmToken(regionX, regionY, payload);
        if (!wasmToken) {
          Utils.addDebugLog('Failed to generate WASM token for batch', 'error');
          return false;
        }

        const res = await fetch(`https://backend.wplace.live/s0/pixel/${regionX}/${regionY}`, {
          method: 'POST',
          headers: { 
            'Content-Type': 'text/plain;charset=UTF-8',
            'x-pawtect-token': wasmToken 
          },
          credentials: 'include',
          body: JSON.stringify(payload),
        });

        if (res.status === 403) {
          Utils.addDebugLog(`403 Forbidden for batch (${pixelBatch.length} pixels). Token invalid/expired.`, 'error');
          invalidateToken();
          
          if (retryCount < 2 && state.autonomousMode) {
            Utils.addDebugLog(`Autonomous batch retry ${retryCount + 1}/2 for ${pixelBatch.length} pixels`, 'warning');
            await Utils.sleep(1000);
            return await this.paintPixelBatchInRegion(regionX, regionY, pixelBatch, retryCount + 1);
          }
          
          return 'token_error';
        }

        if (!res.ok) {
          Utils.addDebugLog(`Batch paint request failed with status ${res.status}`, 'error');
          return false;
        }

        const data = await res.json();
        const successCount = data?.painted || 0;
        
        Utils.addDebugLog(`Batch paint result: ${successCount}/${pixelBatch.length} pixels painted successfully`, 
                          successCount === pixelBatch.length ? 'success' : 'warning');
        
        return {
          success: successCount > 0,
          painted: successCount,
          total: pixelBatch.length
        };
        
      } catch (e) {
        Utils.addDebugLog(`Batch paint request error for ${pixelBatch.length} pixels: ${e.message}`, 'error');
        return false;
      }
    },

    async getCharges() {
      try {
        const res = await fetch('https://backend.wplace.live/me', {
          credentials: 'include',
        });
        if (!res.ok) return { charges: 0, max: 1, cooldown: CONFIG.COOLDOWN_DEFAULT };
        const data = await res.json();
        return {
          charges: data.charges?.count ?? 0,
          max: data.charges?.max ?? 1,
          cooldown: data.charges?.cooldownMs ?? CONFIG.COOLDOWN_DEFAULT,
        };
      } catch (e) {
        Utils.addDebugLog(`Error fetching charges: ${e.message}`, 'warning');
        return { charges: 0, max: 1, cooldown: CONFIG.COOLDOWN_DEFAULT };
      }
    },
  };

  // Enhanced anti-grief repair system with improved transparent pixel detection
  async function scanForDamage() {
    if (!state.imageData || !state.startPosition || !state.region) {
      Utils.addDebugLog('No image data or position for scanning', 'warning');
      return [];
    }

    Utils.addDebugLog('Starting enhanced damage scan with transparent pixel detection...', 'info');
    updateStatus(Utils.t('scanningForDamage'));

    const damagedPixels = [];
    const { width, height, pixels } = state.imageData;

    // Check if we're working with restored data - skip tile waiting for restored saves
    const isRestoredData = state.availableColors && state.availableColors.length > 0 && state.colorsChecked;
    
    if (!isRestoredData) {
      const ready = await overlayManager.waitForTiles(
        state.region.x,
        state.region.y,
        width,
        height,
        state.startPosition.x,
        state.startPosition.y,
        state.autonomousMode ? 20000 : 15000
      );

      if (!ready) {
        Utils.addDebugLog('Failed to load required tiles for scanning', 'error');
        if (state.autonomousMode) {
          Utils.addDebugLog('Autonomous mode: will retry scan in 30 seconds', 'warning');
          setTimeout(() => {
            if (state.autoRepairEnabled && !state.stopFlag) {
              scanForDamage();
            }
          }, 30000);
        }
        return [];
      }
    } else {
      Utils.addDebugLog('Using restored data - skipping tile wait for damage scan', 'info');
    }

    Utils.addDebugLog(`Scanning ${width}x${height} image for damage (transparent detection: ${state.paintTransparentPixels})...`, 'info');

    let scannedPixels = 0;
    let transparentPixelsDetected = 0;
    let wrongColorPixelsDetected = 0;
    let lastProgressUpdate = Date.now();
    
    for (let y = 0; y < height; y++) {
      for (let x = 0; x < width; x++) {
        if (state.stopFlag) break;

        const idx = (y * width + x) * 4;
        const originalR = pixels[idx];
        const originalG = pixels[idx + 1];
        const originalB = pixels[idx + 2];
        const originalA = pixels[idx + 3];

        // Enhanced transparent pixel detection
        const isOriginalTransparent = originalA < state.customTransparencyThreshold;
        
        // Skip white pixels if configured
        if (!state.paintWhitePixels && Utils.isWhitePixel(originalR, originalG, originalB)) {
          continue;
        }

        scannedPixels++;

        const absX = state.startPosition.x + x;
        const absY = state.startPosition.y + y;
        const tileX = state.region.x + Math.floor(absX / 1000);
        const tileY = state.region.y + Math.floor(absY / 1000);
        const pixelX = absX % 1000;
        const pixelY = absY % 1000;

        try {
          const currentPixel = await overlayManager.getTilePixelColor(tileX, tileY, pixelX, pixelY);

          // Handle missing current pixel data (could indicate transparent area)
          if (!currentPixel) {
            if (state.paintTransparentPixels && !isOriginalTransparent) {
              // Original pixel is not transparent but current is missing/transparent
              const targetColor = Utils.resolveColor([originalR, originalG, originalB], state.availableColors);
              damagedPixels.push({
                x,
                y,
                originalColor: targetColor,
                currentColor: { id: 63, name: 'Transparent', rgb: [0, 0, 0] }, // Transparent color
                originalRgb: [originalR, originalG, originalB],
                currentRgb: [0, 0, 0],
                isDamagedTransparent: true
              });
              transparentPixelsDetected++;
              
              if (!state.autonomousMode || transparentPixelsDetected <= 10) {
                Utils.addDebugLog(`Missing/Transparent pixel at (${x},${y}): expected color ${targetColor.id}, found transparent/missing`, 'warning');
              }
            }
            continue;
          }

          const currentIsTransparent = currentPixel[3] < state.customTransparencyThreshold;

          // Case 1: Original is not transparent, but current is transparent (damaged)
          if (!isOriginalTransparent && currentIsTransparent && state.paintTransparentPixels) {
            const targetColor = Utils.resolveColor([originalR, originalG, originalB], state.availableColors);
            damagedPixels.push({
              x,
              y,
              originalColor: targetColor,
              currentColor: { id: 63, name: 'Transparent', rgb: [0, 0, 0] },
              originalRgb: [originalR, originalG, originalB],
              currentRgb: currentPixel.slice(0, 3),
              isDamagedTransparent: true
            });
            transparentPixelsDetected++;
            
            if (!state.autonomousMode || transparentPixelsDetected <= 10) {
              Utils.addDebugLog(`Transparent damage at (${x},${y}): expected color ${targetColor.id}, found transparent`, 'warning');
            }
            continue;
          }

          // Case 2: Original is transparent, current is not transparent (wrong placement)
          if (isOriginalTransparent && !currentIsTransparent && state.paintTransparentPixels) {
            damagedPixels.push({
              x,
              y,
              originalColor: { id: 63, name: 'Transparent', rgb: null },
              currentColor: Utils.resolveColor(currentPixel.slice(0, 3), state.availableColors),
              originalRgb: [originalR, originalG, originalB],
              currentRgb: currentPixel.slice(0, 3),
              isDamagedTransparent: true
            });
            transparentPixelsDetected++;
            
            if (!state.autonomousMode || transparentPixelsDetected <= 10) {
              Utils.addDebugLog(`Wrong placement at (${x},${y}): expected transparent, found color`, 'warning');
            }
            continue;
          }

          // Case 3: Both are not transparent, check color match (normal damage detection)
          if (!isOriginalTransparent && !currentIsTransparent) {
            const targetColor = Utils.resolveColor([originalR, originalG, originalB], state.availableColors);
            const currentColor = Utils.resolveColor(currentPixel.slice(0, 3), state.availableColors);

            if (targetColor.id === currentColor.id) {
              // Pixel is already correctly painted - skip it
              continue;
            }

            // Pixel has wrong color - mark as damaged
            damagedPixels.push({
              x,
              y,
              originalColor: targetColor,
              currentColor: currentColor,
              originalRgb: [originalR, originalG, originalB],
              currentRgb: currentPixel.slice(0, 3),
              isDamagedTransparent: false
            });
            wrongColorPixelsDetected++;

            if (!state.autonomousMode || wrongColorPixelsDetected <= 10) {
              Utils.addDebugLog(`Color damage at (${x},${y}): expected color ${targetColor.id}, found color ${currentColor.id}`, 'warning');
            }
          }

        } catch (e) {
          if (!state.autonomousMode) {
            Utils.addDebugLog(`Error checking pixel (${x},${y}): ${e.message}`, 'error');
          }
        }
      }

      if (state.autonomousMode && Date.now() - lastProgressUpdate > 5000) {
        Utils.addDebugLog(`Scan progress: ${y}/${height} rows (${Math.round((y / height) * 100)}%), found ${damagedPixels.length} damaged (${transparentPixelsDetected} transparent, ${wrongColorPixelsDetected} wrong color)`, 'info');
        lastProgressUpdate = Date.now();
      } else if (!state.autonomousMode && y % 10 === 0) {
        Utils.addDebugLog(`Scan progress: ${y}/${height} rows (${Math.round((y / height) * 100)}%)`, 'info');
      }
    }

    const logLevel = damagedPixels.length > 0 ? 'warning' : 'success';
    Utils.addDebugLog(`Enhanced scan complete. Checked ${scannedPixels} pixels, found ${damagedPixels.length} damaged (${transparentPixelsDetected} transparent issues, ${wrongColorPixelsDetected} wrong colors)`, logLevel);

    // Smart auto-adjust batch size: if 6 pixels detected, batch size = 6
    if (state.autoBatchEnabled && state.batchOptimization && damagedPixels.length > 0) {
      const newBatchSize = Math.min(CONFIG.MAX_BATCH_SIZE, Math.max(CONFIG.MIN_BATCH_SIZE, damagedPixels.length));
      if (newBatchSize !== state.currentBatchSize) {
        state.currentBatchSize = newBatchSize;
        Utils.addDebugLog(`Smart batch: Auto-adjusted batch size to ${newBatchSize} to match ${damagedPixels.length} detected damaged pixels`, 'info');
        updateBatchInfo(); // Update UI display
      }
    }

    return damagedPixels;
  }

  async function repairDamagedPixels(damagedPixels) {
    if (damagedPixels.length === 0) {
      updateStatus(Utils.t('noDamageDetected'));
      return 0;
    }

    Utils.addDebugLog(`Starting enhanced repair of ${damagedPixels.length} pixels with auto-batch (batch size: ${state.currentBatchSize})`, 'info');
    updateStatus(Utils.t('repairingPixels', { count: damagedPixels.length }));

    let repairedCount = 0;
    let consecutiveFailures = 0;
    const maxConsecutiveFailures = state.autonomousMode ? 5 : 3;

    // Group pixels by region for batch processing
    const pixelsByRegion = new Map();
    
    for (const pixel of damagedPixels) {
      const absX = state.startPosition.x + pixel.x;
      const absY = state.startPosition.y + pixel.y;
      const regionX = state.region.x + Math.floor(absX / 1000);
      const regionY = state.region.y + Math.floor(absY / 1000);
      const regionKey = `${regionX},${regionY}`;
      
      if (!pixelsByRegion.has(regionKey)) {
        pixelsByRegion.set(regionKey, []);
      }
      
      pixelsByRegion.get(regionKey).push({
        ...pixel,
        regionX,
        regionY,
        pixelX: absX % 1000,
        pixelY: absY % 1000,
        color: pixel.isDamagedTransparent && pixel.originalColor.id === 63 ? 63 : pixel.originalColor.id
      });
    }

    Utils.addDebugLog(`Grouped ${damagedPixels.length} pixels into ${pixelsByRegion.size} regions for batch processing`, 'info');

    // Process each region
    for (const [regionKey, regionPixels] of pixelsByRegion) {
      if (state.stopFlag) {
        Utils.addDebugLog('Repair stopped by user request', 'warning');
        break;
      }

      const [regionX, regionY] = regionKey.split(',').map(Number);
      Utils.addDebugLog(`Processing region ${regionKey} with ${regionPixels.length} pixels`, 'info');

      // Process pixels in batches
      for (let i = 0; i < regionPixels.length; i += state.currentBatchSize) {
        if (state.stopFlag) break;

        const batch = regionPixels.slice(i, i + state.currentBatchSize);
        const actualBatchSize = Math.min(batch.length, state.currentBatchSize);
        
        // Enhanced charge management for batch processing
        await updateCharges();
        let chargeWaitAttempts = 0;
        const maxChargeWaitAttempts = state.autonomousMode ? 20 : 10;
        
        while (state.displayCharges < actualBatchSize && !state.stopFlag && chargeWaitAttempts < maxChargeWaitAttempts) {
          chargeWaitAttempts++;
          const waitTime = state.autonomousMode ? Math.min(state.cooldown, 10000) : state.cooldown;
          
          if (chargeWaitAttempts === 1) {
            Utils.addDebugLog(`Waiting for charges... (need ${actualBatchSize}, have ${state.displayCharges}/${state.maxCharges})`, 'info');
          }
          
          await Utils.dynamicSleep(() => {
            if (state.displayCharges >= actualBatchSize) return 0;
            if (state.stopFlag) return 0;
            return waitTime;
          });
          await updateCharges();
        }

        if (state.stopFlag) break;
        
        if (state.displayCharges < actualBatchSize) {
          Utils.addDebugLog(`Insufficient charges for batch (need ${actualBatchSize}, have ${state.displayCharges}), falling back to single pixel repair`, 'warning');
          
          // Fall back to single pixel repair
          for (const pixel of batch) {
            if (state.stopFlag) break;
            
            await updateCharges();
            if (state.displayCharges < 1) {
              Utils.addDebugLog(`No charges available, skipping pixel (${pixel.x},${pixel.y})`, 'warning');
              continue;
            }
            
            const success = await repairSinglePixel(pixel);
            if (success) {
              repairedCount++;
              consecutiveFailures = 0;
            } else {
              consecutiveFailures++;
            }
            
            if (consecutiveFailures >= maxConsecutiveFailures) break;
            await Utils.sleep(100);
          }
        } else {
          // Use batch repair
          const batchResult = await repairPixelBatch(regionX, regionY, batch);
          
          if (batchResult && batchResult.success) {
            repairedCount += batchResult.painted;
            consecutiveFailures = 0;
            
            Utils.addDebugLog(`Batch repair: ${batchResult.painted}/${batchResult.total} pixels repaired successfully [Total: ${repairedCount}/${damagedPixels.length}]`, 'success');
          } else {
            consecutiveFailures++;
            Utils.addDebugLog(`Batch repair failed for ${batch.length} pixels [${consecutiveFailures}/${maxConsecutiveFailures} consecutive failures]`, 'error');
            
            if (consecutiveFailures >= maxConsecutiveFailures) {
              Utils.addDebugLog(`Too many consecutive batch failures (${consecutiveFailures}), pausing repair`, 'error');
              if (state.autonomousMode) {
                Utils.addDebugLog('Autonomous mode: will retry repair in 60 seconds', 'warning');
                setTimeout(() => {
                  if (state.autoRepairEnabled && !state.stopFlag) {
                    performRepairCheck();
                  }
                }, 60000);
              }
              break;
            }
          }
        }

        await updateCharges();
        
        // Dynamic delay based on mode and success rate
        const baseDelay = state.autonomousMode ? 100 : 200;
        const adaptiveDelay = consecutiveFailures > 0 ? baseDelay * (consecutiveFailures + 1) : baseDelay;
        await Utils.sleep(adaptiveDelay);
      }
      
      if (consecutiveFailures >= maxConsecutiveFailures) break;
    }

    const message = Utils.t('repairComplete', { repaired: repairedCount });
    updateStatus(message);
    Utils.addDebugLog(`${message} (${damagedPixels.length - repairedCount} remaining) - Used auto-batch with size ${state.currentBatchSize}`, 'success');

    return repairedCount;
  }

  async function repairPixelBatch(regionX, regionY, pixelBatch) {
    try {
      Utils.addDebugLog(`Attempting batch repair of ${pixelBatch.length} pixels in region ${regionX},${regionY}`, 'info');
      
      const result = await WPlaceService.paintPixelBatchInRegion(regionX, regionY, pixelBatch);

      if (result === 'token_error') {
        Utils.addDebugLog('Token error during batch repair, refreshing token...', 'warning');
        await ensureToken(true);
        await Utils.sleep(state.autonomousMode ? 500 : 1000);
        
        // Retry once with new token
        const retryResult = await WPlaceService.paintPixelBatchInRegion(regionX, regionY, pixelBatch);
        return retryResult;
      }

      return result;
    } catch (e) {
      Utils.addDebugLog(`Error during batch repair: ${e.message}`, 'error');
      return false;
    }
  }

  async function repairSinglePixel(pixel) {
    const { x, y, originalColor, regionX, regionY, pixelX, pixelY, color } = pixel;

    try {
      const result = await WPlaceService.paintPixelInRegion(
        regionX,
        regionY,
        pixelX,
        pixelY,
        color || originalColor.id
      );

      if (result === 'token_error') {
        Utils.addDebugLog('Token error during repair, refreshing token...', 'warning');
        await ensureToken(true);
        await Utils.sleep(state.autonomousMode ? 500 : 1000);
        
        // Retry once with new token
        const retryResult = await WPlaceService.paintPixelInRegion(regionX, regionY, pixelX, pixelY, color || originalColor.id);
        return retryResult === true;
      }

      if (result === true) {
        if (pixel.isDamagedTransparent) {
          Utils.addDebugLog(`Repaired transparent pixel (${x},${y}) with color ${color || originalColor.id}`, 'success');
        }
      }

      return result === true;
    } catch (e) {
      Utils.addDebugLog(`Error repairing pixel (${x},${y}): ${e.message}`, 'error');
      return false;
    }
  }

  async function performRepairCheck() {
    if (state.running) {
      Utils.addDebugLog('Repair check skipped - manual repair in progress', 'info');
      return;
    }

    try {
      Utils.addDebugLog('Autonomous repair check triggered', 'info');
      
      // Ensure we have a valid token before starting
      if (!isTokenValid()) {
        Utils.addDebugLog('No valid token for autonomous repair, generating...', 'warning');
        await ensureToken(true);
        if (!isTokenValid()) {
          Utils.addDebugLog('Failed to generate token for autonomous repair, will retry next cycle', 'error');
          return;
        }
      }
      
      const damagedPixels = await scanForDamage();

      if (damagedPixels.length > 0) {
        Utils.addDebugLog(`Autonomous repair: Found ${damagedPixels.length} damaged pixels, starting repair`, 'warning');
        updateStatus(Utils.t('damageDetected', { count: damagedPixels.length }));
        
        // Show attack notification
        showAttackNotification('attack', damagedPixels.length);
        state.lastAttackState = 'attacked';
        
        const repairedCount = await repairDamagedPixels(damagedPixels);
        
        // Show repair complete notification if all pixels were repaired
        if (repairedCount === damagedPixels.length) {
          showAttackNotification('repaired');
          state.lastAttackState = 'repaired';
        }
      } else {
        updateStatus(Utils.t('noDamageDetected'));
        
        // Show peaceful state if we're not under attack
        if (state.lastAttackState !== 'peaceful') {
          showPeacefulState();
          state.lastAttackState = 'peaceful';
        }
        
        if (!state.autonomousMode) {
          Utils.addDebugLog('Autonomous repair: No damage detected', 'success');
        }
      }
    } catch (error) {
      Utils.addDebugLog(`Autonomous repair error: ${error.message}`, 'error');
      
      if (state.autonomousMode) {
        Utils.addDebugLog('Autonomous mode: will retry repair check in 120 seconds due to error', 'warning');
        setTimeout(() => {
          if (state.autoRepairEnabled && !state.stopFlag) {
            performRepairCheck();
          }
        }, 120000);
      }
    }
  }

  function startAutoRepair() {
    if (state.autoRepairTimer) {
      clearInterval(state.autoRepairTimer);
    }

    const intervalMs = state.autoRepairInterval * 1000;
    state.autoRepairTimer = setInterval(performRepairCheck, intervalMs);

    const message = Utils.t('autoRepairStarted', { interval: state.autoRepairInterval });
    Utils.addDebugLog(`${message} (autonomous: ${state.autonomousMode})`, 'info');
    Utils.showAlert(message, 'success');
    
    // Perform first check immediately
    setTimeout(performRepairCheck, 2000);
  }

  function stopAutoRepair() {
    if (state.autoRepairTimer) {
      clearInterval(state.autoRepairTimer);
      state.autoRepairTimer = null;
    }

    const message = Utils.t('autoRepairStopped');
    Utils.addDebugLog(`${message}`, 'info');
    Utils.showAlert(message, 'info');
  }

  // FUNCIONES DE UI MEJORADAS CON GESTIÓN DE CONFIGURACIÓN INICIAL
  function enableFileOperations() {
    state.initialSetupComplete = true;

    const loadBtn = document.querySelector('#loadFileBtn');
    if (loadBtn) {
      loadBtn.disabled = false;
      loadBtn.title = '';
      loadBtn.style.animation = 'pulse 0.6s ease-in-out';
      setTimeout(() => {
        if (loadBtn) loadBtn.style.animation = '';
      }, 600);
      Utils.addDebugLog('Load Progress button enabled after initial setup', 'success');
    }

    Utils.showAlert(Utils.t('fileOperationsAvailable'), 'success');
  }

  async function initializeTokenGenerator() {
    if (isTokenValid()) {
      Utils.addDebugLog('Valid token already available, skipping initialization', 'success');
      updateTokenStatus();
      enableFileOperations();
      return;
    }

    try {
      Utils.addDebugLog('Initializing Turnstile token generator...', 'info');
      updateStatus(Utils.t('initializingToken'));

      await Utils.loadTurnstile();
      Utils.addDebugLog('Turnstile script loaded successfully', 'success');

      if (state.autoTokenRefresh) {
        Utils.addDebugLog('Pre-generating token for autonomous operations...', 'info');
        await ensureToken();
      }

      state.initialSetupComplete = true;
      Utils.addDebugLog('Enhanced token generator initialization complete', 'success');
      updateStatus(Utils.t('tokenReady'));
      enableFileOperations();

    } catch (error) {
      Utils.addDebugLog('Token system initialization failed: ' + error.message, 'warning');
      Utils.addDebugLog('Manual token generation will be required', 'info');
      enableFileOperations();
    }
  }

  function updateStatus(message) {
    const statusEl = document.getElementById('status');
    if (statusEl) {
      if (typeof message === 'string') {
        statusEl.innerHTML = message;
      } else {
        statusEl.textContent = message;
      }
    }
  }

  function updateDebugConsole() {
    const debugConsole = document.getElementById('debugConsole');
    if (!debugConsole) return;

    const logsHtml = state.debugLogs.map(log => {
      const colorClass = log.type === 'error' ? 'neon-text danger' :
        log.type === 'warning' ? 'neon-text warning' :
          log.type === 'success' ? 'neon-text success' : 
          log.type === 'info' ? 'neon-text info' : 'neon-text';

      return `<div class="${colorClass}" style="margin: 2px 0; font-size: 7px; line-height: 1.4;">
        <span style="opacity: 0.7;">[${log.timestamp}]</span> ${log.message}
      </div>`;
    }).join('');

    debugConsole.innerHTML = logsHtml;
    debugConsole.scrollTop = debugConsole.scrollHeight;
  }

  async function updateCharges() {
    try {
      const { charges, max, cooldown } = await WPlaceService.getCharges();
      state.displayCharges = Math.floor(charges);
      state.maxCharges = Math.max(1, Math.floor(max));
      state.cooldown = cooldown;

      updateChargesDisplay();
    } catch (error) {
      if (!state.autonomousMode) {
        Utils.addDebugLog(`Error updating charges: ${error.message}`, 'error');
      }
    }
  }

  function updateChargesDisplay() {
    const chargesEl = document.getElementById('chargesInfo');
    if (chargesEl) {
      chargesEl.textContent = `Charges: ${state.displayCharges}/${state.maxCharges} (cooldown: ${Math.round(state.cooldown / 1000)}s)`;
    }
  }

  function updateTokenStatus() {
    const tokenEl = document.getElementById('tokenInfo');
    if (tokenEl) {
      // Remove existing classes first
      tokenEl.className = '';
      
      if (isTokenValid()) {
        const remaining = Math.round((tokenExpiryTime - Date.now()) / 1000);
        tokenEl.textContent = `Token: Valid (expires in ${remaining}s)`;
        tokenEl.className = 'neon-text success';
      } else {
        tokenEl.textContent = 'Token: Not generated or expired';
        tokenEl.className = 'neon-text warning';
      }
    }
  }

  // Update batch information display for new UI
  function updateBatchInfo() {
    const batchSizeEl = document.getElementById('batchSize');
    const batchStatusEl = document.getElementById('batchStatus');
    const smartModeEl = document.getElementById('smartBatchMode');
    const manualModeEl = document.getElementById('manualBatchMode');
    const manualControlsEl = document.getElementById('manualBatchControls');
    
    // Update radio button states
    if (smartModeEl && manualModeEl) {
      smartModeEl.checked = state.autoBatchEnabled && state.batchOptimization;
      manualModeEl.checked = !state.autoBatchEnabled || !state.batchOptimization;
    }
    
    // Update manual controls visibility
    if (manualControlsEl) {
      manualControlsEl.style.display = (!state.autoBatchEnabled || !state.batchOptimization) ? 'flex' : 'none';
    }
    
    // Update batch size input
    if (batchSizeEl) {
      batchSizeEl.value = state.currentBatchSize;
    }
    
    // Update status display
    if (batchStatusEl) {
      if (state.autoBatchEnabled && state.batchOptimization) {
        batchStatusEl.textContent = `🧠 Smart Batch: AUTO (Current: ${state.currentBatchSize})`;
        batchStatusEl.className = 'status-info';
      } else {
        batchStatusEl.textContent = `✋ Manual Batch: ${state.currentBatchSize} pixels fixed`;
        batchStatusEl.className = 'status-warning';
      }
    }
  }

  function updateSystemStatus() {
    const systemEl = document.getElementById('systemInfo');
    if (systemEl) {
      const autonomousStatus = state.autonomousMode ? 'AUTONOMOUS' : 'MANUAL';
      const tokenMode = state.tokenSource.toUpperCase();
      systemEl.textContent = `System: ${autonomousStatus} | Token: ${tokenMode} | Auto-refresh: ${state.autoTokenRefresh ? 'ON' : 'OFF'}`;
    }
  }

  // Window dragging functionality
  function makeWindowDraggable() {
    const container = document.getElementById('wplace-repair-tool');
    const header = document.getElementById('window-header');
    
    let isDragging = false;
    let currentX;
    let currentY;
    let initialX;
    let initialY;
    let xOffset = 0;
    let yOffset = 0;

    function dragStart(e) {
      if (e.target.tagName === 'BUTTON' || e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') {
        return;
      }
      
      initialX = e.clientX - xOffset;
      initialY = e.clientY - yOffset;

      if (e.target === header || header.contains(e.target)) {
        isDragging = true;
        container.style.cursor = 'grabbing';
      }
    }

    function dragEnd() {
      initialX = currentX;
      initialY = currentY;
      isDragging = false;
      container.style.cursor = 'default';
    }

    function drag(e) {
      if (isDragging) {
        e.preventDefault();
        currentX = e.clientX - initialX;
        currentY = e.clientY - initialY;
        xOffset = currentX;
        yOffset = currentY;

        container.style.transform = `translate(${currentX}px, ${currentY}px)`;
      }
    }

    header.addEventListener('mousedown', dragStart);
    document.addEventListener('mouseup', dragEnd);
    document.addEventListener('mousemove', drag);
  }

  // Enhanced UI Creation with NEW IMPLEMENTATION
  function createUI() {
    const existing = document.getElementById('wplace-repair-tool');
    if (existing) existing.remove();

    const container = document.createElement('div');
    container.id = 'wplace-repair-tool';
    container.style.cssText = `
      position: fixed; top: 20px; left: 20px; z-index: 10000;
      background: #1a1a2e;
      border: 3px solid #00ff41;
      border-radius: 0;
      min-width: 600px; max-width: 700px;
      box-shadow: 
        0 0 30px rgb(0 255 65 / 50%), 
        inset 0 0 30px rgb(0 255 65 / 10%),
        0 0 0 1px #00ff41;
      color: #00ff41; 
      font-family: 'Press Start 2P', monospace, 'Courier New';
      resize: both; overflow: hidden;
      animation: neon-pulse 2s ease-in-out infinite alternate;
    `;

    // Add Neon theme styles
    const neonStyles = document.createElement('style');
    neonStyles.id = 'auto-repair-neon-styles';
    neonStyles.textContent = `
      @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
      
      #wplace-repair-tool::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, #00ff41, transparent);
        z-index: 1;
        pointer-events: none;
        animation: scanline 3s linear infinite;
        opacity: 0.7;
      }
      
      .neon-btn {
        background: #16213e !important;
        border: 2px solid #00ff41 !important;
        border-radius: 0 !important;
        color: #00ff41 !important;
        padding: 8px 15px !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: 8px !important;
        text-transform: uppercase !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        text-shadow: 0 0 8px #00ff41 !important;
        letter-spacing: 1px !important;
        margin: 4px !important;
      }
      
      .neon-btn:hover {
        background: rgba(0,255,65,0.1) !important;
        box-shadow: 0 0 20px rgb(0 255 65 / 60%) !important;
        animation: pixel-blink 0.5s infinite !important;
      }
      
      .neon-btn:disabled {
        background: #0d1117 !important;
        border-color: #555 !important;
        color: #555 !important;
        text-shadow: none !important;
        cursor: not-allowed !important;
      }
      
      .neon-btn.danger {
        border-color: #ff073a !important;
        color: #ff073a !important;
        text-shadow: 0 0 8px #ff073a !important;
      }
      
      .neon-btn.danger:hover {
        background: rgba(255, 7, 58, 0.1) !important;
        box-shadow: 0 0 20px rgb(255 7 58 / 60%) !important;
      }
      
      .neon-btn.warning {
        border-color: #ff6b35 !important;
        color: #ff6b35 !important;
        text-shadow: 0 0 8px #ff6b35 !important;
      }
      
      .neon-btn.warning:hover {
        background: rgba(255, 107, 53, 0.1) !important;
        box-shadow: 0 0 20px rgb(255 107 53 / 60%) !important;
      }
      
      .neon-input {
        background: #16213e !important;
        border: 2px solid #00ff41 !important;
        border-radius: 0 !important;
        color: #00ff41 !important;
        padding: 6px 10px !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: 8px !important;
        text-shadow: 0 0 5px #00ff41 !important;
      }
      
      .neon-input:focus {
        outline: none !important;
        box-shadow: 0 0 15px rgb(0 255 65 / 60%) !important;
        animation: pixel-blink 0.5s infinite !important;
      }
      
      .neon-select {
        background: #16213e !important;
        border: 2px solid #00ff41 !important;
        border-radius: 0 !important;
        color: #00ff41 !important;
        padding: 4px 8px !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: 7px !important;
        text-shadow: 0 0 5px #00ff41 !important;
      }
      
      .neon-checkbox {
        accent-color: #00ff41 !important;
        transform: scale(1.2) !important;
        margin-right: 8px !important;
      }
      
      /* Enhanced Batch Control Styles */
      .batch-control-group {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 5px 0 !important;
        padding: 8px !important;
        background: rgba(0, 255, 65, 0.05) !important;
        border: 1px solid rgba(0, 255, 65, 0.3) !important;
        border-radius: 3px !important;
      }
      
      .batch-control-header {
        text-align: center !important;
        margin-bottom: 10px !important;
        padding: 5px !important;
        border-bottom: 1px solid rgba(0, 255, 65, 0.3) !important;
      }
      
      .batch-control-label {
        color: #00ff41 !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: 6px !important;
        text-shadow: 0 0 3px #00ff41 !important;
        white-space: nowrap !important;
      }
      
      .batch-mode-selection {
        margin: 10px 0 !important;
      }
      
      .batch-mode-option {
        margin: 8px 0 !important;
        padding: 6px !important;
        background: rgba(0, 255, 65, 0.03) !important;
        border: 1px solid rgba(0, 255, 65, 0.2) !important;
        border-radius: 3px !important;
        transition: all 0.3s ease !important;
      }
      
      .batch-mode-option:hover {
        background: rgba(0, 255, 65, 0.08) !important;
        border-color: rgba(0, 255, 65, 0.4) !important;
      }
      
      .batch-mode-label {
        color: #00ff41 !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: 6px !important;
        text-shadow: 0 0 3px #00ff41 !important;
        margin-left: 8px !important;
      }
      
      .neon-radio {
        accent-color: #00ff41 !important;
        transform: scale(1.2) !important;
        margin-right: 8px !important;
      }
      
      .batch-manual-controls {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 8px 0 !important;
        padding: 8px !important;
        background: rgba(0, 255, 65, 0.05) !important;
        border: 1px solid rgba(0, 255, 65, 0.3) !important;
        border-radius: 3px !important;
      }
      
      .batch-size-control {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
        border: 1px solid #00ff41 !important;
        border-radius: 3px !important;
        background: #16213e !important;
        overflow: hidden !important;
      }
      
      .batch-adjust-btn {
        width: 20px !important;
        height: 24px !important;
        background: #16213e !important;
        border: none !important;
        color: #00ff41 !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: 8px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        text-shadow: 0 0 3px #00ff41 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }
      
      .batch-adjust-btn:hover {
        background: rgba(0, 255, 65, 0.1) !important;
        box-shadow: 0 0 5px rgba(0, 255, 65, 0.3) !important;
      }
      
      .batch-adjust-btn:active {
        background: rgba(0, 255, 65, 0.2) !important;
        transform: scale(0.95) !important;
      }
      
      .batch-size-input {
        width: 50px !important;
        height: 24px !important;
        background: #16213e !important;
        border: none !important;
        color: #00ff41 !important;
        padding: 0 4px !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: 6px !important;
        text-align: center !important;
        text-shadow: 0 0 3px #00ff41 !important;
        outline: none !important;
        /* Hide browser default spinner buttons */
        -webkit-appearance: none !important;
        -moz-appearance: textfield !important;
      }
      
      /* Hide Chrome spinner buttons */
      .batch-size-input::-webkit-outer-spin-button,
      .batch-size-input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
      }
      
      /* Hide Firefox spinner buttons */
      .batch-size-input[type=number] {
        -moz-appearance: textfield !important;
      }
      
      .status-info {
        color: #00ff41 !important;
      }
      
      .status-warning {
        color: #ff6b35 !important;
      }
      
      .neon-panel {
        background: rgba(22, 33, 62, 0.3) !important;
        border: 1px solid #00ff41 !important;
        border-radius: 0 !important;
        padding: 15px !important;
        margin: 10px 0 !important;
        box-shadow: inset 0 0 15px rgba(0, 255, 65, 0.1) !important;
      }
      
      .neon-text {
        color: #00ff41 !important;
        text-shadow: 0 0 5px #00ff41 !important;
        font-family: 'Press Start 2P', monospace !important;
      }
      
      .neon-text.success {
        color: #39ff14 !important;
        text-shadow: 0 0 5px #39ff14 !important;
      }
      
      .neon-text.warning {
        color: #ff6b35 !important;
        text-shadow: 0 0 5px #ff6b35 !important;
      }
      
      .neon-text.danger {
        color: #ff073a !important;
        text-shadow: 0 0 5px #ff073a !important;
      }
      
      .neon-text.info {
        color: #00ccff !important;
        text-shadow: 0 0 5px #00ccff !important;
      }
      
      /* Custom scrollbar for debug console */
      #debugConsole::-webkit-scrollbar {
        width: 12px;
      }
      
      #debugConsole::-webkit-scrollbar-track {
        background: #16213e;
        border: 1px solid #00ff41;
      }
      
      #debugConsole::-webkit-scrollbar-thumb {
        background: #00ff41;
        border-radius: 0;
        box-shadow: 0 0 10px #00ff41;
      }
      
      #debugConsole::-webkit-scrollbar-thumb:hover {
        background: #39ff14;
        box-shadow: 0 0 15px #39ff14;
      }
      
      /* Animations */
      @keyframes neon-pulse {
        0% { box-shadow: 0 0 30px rgb(0 255 65 / 50%), inset 0 0 30px rgb(0 255 65 / 10%), 0 0 0 1px #00ff41; }
        100% { box-shadow: 0 0 40px rgb(0 255 65 / 70%), inset 0 0 40px rgb(0 255 65 / 15%), 0 0 0 1px #00ff41; }
      }
      
      @keyframes pixel-blink {
        0%, 50% { opacity: 1; }
        51%, 100% { opacity: 0.7; }
      }
      
      @keyframes scanline {
        0% { transform: translateY(-100%); }
        100% { transform: translateY(400px); }
      }
      
      @keyframes text-glow {
        0% { text-shadow: 0 0 15px #00ff41; }
        100% { text-shadow: 0 0 25px #00ff41, 0 0 35px #00ff41; }
      }
    `;
    
    if (!document.getElementById('auto-repair-neon-styles')) {
      document.head.appendChild(neonStyles);
    }

    container.innerHTML = `
      <div id="window-header" style="
        background: #16213e; padding: 15px 20px; 
        border-bottom: 2px solid #00ff41; cursor: grab; user-select: none;
        display: flex; justify-content: space-between; align-items: center;
        position: relative;
      ">
        <div style="display: flex; align-items: center; gap: 15px;">
          <div style="
            width: 32px; height: 32px; background: #00ff41; 
            display: flex; align-items: center; justify-content: center;
            font-size: 16px; animation: pixel-blink 3s infinite;
            box-shadow: 0 0 15px rgba(0, 255, 65, 0.4);
          ">🔧</div>
          <h3 id="main-title" class="neon-text" style="
            margin: 0; font-size: 12px; min-height: 22px;
            text-transform: uppercase; letter-spacing: 2px;
            animation: text-glow 2s ease-in-out infinite alternate;
          ">
            WPlace Autonomous Repair Tool
          </h3>
        </div>
        <div style="display: flex; gap: 8px;">
          <button id="minimizeBtn" class="neon-btn warning" style="
            width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
            font-size: 12px; padding: 0;
          ">−</button>
          <button id="closeBtn" class="neon-btn danger" style="
            width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
            font-size: 12px; padding: 0;
          ">×</button>
        </div>
      </div>
      
      <div id="window-content" style="padding: 20px;">
        <div class="neon-panel">
          <div id="status" class="neon-text" style="font-size: 10px; margin-bottom: 10px; min-height: 20px;">
            ${Utils.t('autonomousModeActive')}
          </div>
          <div id="chargesInfo" class="neon-text info" style="font-size: 8px;">
            Charges: 0/1 (cooldown: 31s)
          </div>
          <div id="tokenInfo" class="neon-text success" style="font-size: 8px; margin-top: 5px;">
            Token: Initializing...
          </div>
          <div id="systemInfo" class="neon-text warning" style="font-size: 7px; margin-top: 3px;">
            System: AUTONOMOUS | Token: GENERATOR | Auto-refresh: ON
          </div>
          <div id="batchStatus" class="neon-text info" style="font-size: 7px; margin-top: 2px;">
            Auto-Batch: ON | Size: 5 | Opt: ON
          </div>
        </div>

        <div style="margin-bottom: 15px; display: flex; flex-wrap: wrap; gap: 5px;">
          <button id="loadFileBtn" class="neon-btn" disabled title="Waiting for initial setup to complete...">
            📁 ${Utils.t('loadFromFile')}
          </button>
          
          <button id="repairBtn" class="neon-btn" disabled>
            🔧 ${Utils.t('repairPixels')}
          </button>
          
          <button id="generateTokenBtn" class="neon-btn">
            🎯 Force Token
          </button>
        </div>

        <div class="neon-panel">
          <div style="margin-bottom: 10px;">
            <label style="display: flex; align-items: center; cursor: pointer;" class="neon-text">
              <input type="checkbox" id="autoRepairEnabled" class="neon-checkbox">
              <span style="font-size: 9px;">${Utils.t('enableAutoRepair')} (Enhanced)</span>
            </label>
          </div>
          
          <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
            <label class="neon-text" style="font-size: 8px;">${Utils.t('repairInterval')}:</label>
            <input type="number" id="repairInterval" value="30" min="10" max="3600" 
                   class="neon-input" style="width: 80px;">
            <span class="neon-text" style="font-size: 7px;">seconds</span>
          </div>
          
          <div style="display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;">
            <label style="display: flex; align-items: center; cursor: pointer;" class="neon-text">
              <input type="checkbox" id="autoTokenRefresh" ${state.autoTokenRefresh ? 'checked' : ''} class="neon-checkbox">
              <span style="font-size: 8px;">Auto Token Refresh</span>
            </label>
            <select id="tokenSourceSelect" class="neon-select">
              <option value="generator" ${state.tokenSource === 'generator' ? 'selected' : ''}>Generator</option>
              <option value="hybrid" ${state.tokenSource === 'hybrid' ? 'selected' : ''}>Hybrid</option>
              <option value="manual" ${state.tokenSource === 'manual' ? 'selected' : ''}>Manual</option>
            </select>
          </div>

          <!-- NEW: Enhanced Pixel Batch Controls -->
          <div style="border-top: 1px solid #00ff41; margin-top: 15px; padding-top: 10px;">
            <div class="batch-control-header">
              <span class="batch-control-label">🎯 Pixel Batch Mode</span>
            </div>
            
            <!-- Batch Mode Selection -->
            <div class="batch-mode-selection">
              <div class="batch-mode-option">
                <label style="display: flex; align-items: center; cursor: pointer;">
                  <input type="radio" name="batchMode" id="smartBatchMode" ${state.autoBatchEnabled && state.batchOptimization ? 'checked' : ''} class="neon-radio">
                  <span class="batch-mode-label">🧠 Smart Batch (Auto-adjust to damage)</span>
                </label>
              </div>
              
              <div class="batch-mode-option">
                <label style="display: flex; align-items: center; cursor: pointer;">
                  <input type="radio" name="batchMode" id="manualBatchMode" ${!state.autoBatchEnabled || !state.batchOptimization ? 'checked' : ''} class="neon-radio">
                  <span class="batch-mode-label">✋ Manual Batch (Fixed size)</span>
                </label>
              </div>
            </div>
            
            <!-- Manual Batch Size Controls -->
              <div class="batch-manual-controls" id="manualBatchControls" style="display: ${!state.autoBatchEnabled || !state.batchOptimization ? 'flex' : 'none'};">
                <span class="batch-control-label">Batch Size:</span>
                <div class="batch-size-control">
                  <button type="button" id="batchSizeDecrease" class="batch-adjust-btn">-</button>
                  <input type="number" id="batchSize" value="${state.currentBatchSize}" min="1" max="${CONFIG.MAX_BATCH_SIZE}" 
                         class="batch-size-input">
                  <button type="button" id="batchSizeIncrease" class="batch-adjust-btn">+</button>
                </div>
                <span class="batch-control-label">pixels</span>
              </div>            <!-- Transparent Pixel Control -->
            <div class="batch-control-group">
              <label style="display: flex; align-items: center; cursor: pointer;">
                <input type="checkbox" id="paintTransparentPixels" ${state.paintTransparentPixels ? 'checked' : ''} class="neon-checkbox">
                <span class="batch-control-label">🔧 Repair Transparent Pixels</span>
              </label>
            </div>
          </div>
          
          <div style="margin-top: 10px; font-size: 8px;" class="neon-text info">
            <div>Image: <span id="imageInfo">Not loaded</span></div>
            <div>Position: <span id="positionInfo">Not set</span></div>
            <div>Colors: <span id="colorsInfo">0 available</span></div>
            <div>Batch Mode: <span id="batchInfo">Auto (${state.currentBatchSize} pixels)</span></div>
          </div>
        </div>

        <div style="margin-top: 15px;">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
            <h4 class="neon-text" style="margin: 0; font-size: 10px; text-transform: uppercase;">
              📋 ${Utils.t('debug')} (Enhanced System)
            </h4>
            <button id="clearDebugBtn" class="neon-btn warning" style="font-size: 7px; padding: 4px 8px;">
              ${Utils.t('clearDebug')}
            </button>
          </div>
          
          <div id="debugConsole" style="
            background: rgba(0,0,0,0.6); border: 2px solid #00ff41;
            border-radius: 0; padding: 10px; height: 300px; overflow-y: auto;
            font-family: 'Press Start 2P', monospace; font-size: 7px;
            color: #00ff41; line-height: 1.4;
            box-shadow: inset 0 0 15px rgba(0, 255, 65, 0.2);
          ">
            <div class="neon-text info">[Ready] WPlace Autonomous Repair Tool v3.0</div>
            <div class="neon-text success">[Info] NEW Turnstile implementation active</div>
            <div class="neon-text warning">[Info] Enhanced token management with preloading</div>
            <div class="neon-text">[Info] ${Utils.t('tokenSystemReady')}</div>
          </div>
        </div>
      </div>
    `;

    document.body.appendChild(container);
    makeWindowDraggable();
    setupEventListeners();
    
    // Start typewriter effect
    setTimeout(() => {
      createTypewriterTitle();
    }, 1000);
    
    // Start autonomous systems
    initializeAutonomousSystems();
  }

  function initializeAutonomousSystems() {
    // Update charges periodically
    updateCharges();
    setInterval(updateCharges, 10000);
    
    // Update token status
    updateTokenStatus();
    setInterval(updateTokenStatus, 5000);
    
    // Update system status
    updateSystemStatus();
    setInterval(updateSystemStatus, 15000);
    
    // Update batch information
    updateBatchInfo();
    
    // Initialize token generator
    initializeTokenGenerator();
  }

  function setupEventListeners() {
    // Window controls
    document.getElementById('minimizeBtn').addEventListener('click', () => {
      const content = document.getElementById('window-content');
      state.windowMinimized = !state.windowMinimized;
      
      if (state.windowMinimized) {
        content.style.display = 'none';
        document.getElementById('minimizeBtn').textContent = '+';
      } else {
        content.style.display = 'block';
        document.getElementById('minimizeBtn').textContent = '−';
      }
    });

    document.getElementById('closeBtn').addEventListener('click', () => {
      const container = document.getElementById('wplace-repair-tool');
      if (container) {
        container.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
        container.style.opacity = '0';
        container.style.transform = 'scale(0.8)';
        setTimeout(() => {
          container.remove();
          cleanup();
        }, 300);
      }
    });

    // Load file
    document.getElementById('loadFileBtn').addEventListener('click', async () => {
      try {
        Utils.addDebugLog('Loading progress file...', 'info');
        const data = await Utils.createFileUploader();

        if (!data || !data.state || !data.imageData) {
          throw new Error(Utils.t('invalidFile'));
        }

        const migratedData = migrateProgressData(data);

        Object.assign(state, migratedData.state);
        state.imageData = {
          ...migratedData.imageData,
          pixels: new Uint8ClampedArray(migratedData.imageData.pixels),
        };

        state.imageLoaded = true;
        document.getElementById('repairBtn').disabled = false;

        // Update info displays
        document.getElementById('imageInfo').textContent = `${state.imageData.width}x${state.imageData.height}`;
        document.getElementById('positionInfo').textContent = state.startPosition ?
          `(${state.startPosition.x}, ${state.startPosition.y}) in region (${state.region.x}, ${state.region.y})` : 'Not set';
        document.getElementById('colorsInfo').textContent = `${state.availableColors?.length || 0} available`;

        updateStatus(Utils.t('fileLoaded'));
        Utils.addDebugLog(`Loaded image: ${state.imageData.width}x${state.imageData.height}`, 'success');
        Utils.addDebugLog(`Position: (${state.startPosition?.x}, ${state.startPosition?.y})`, 'info');
        Utils.addDebugLog(`Region: (${state.region?.x}, ${state.region?.y})`, 'info');
        Utils.addDebugLog(`Available colors: ${state.availableColors?.length || 0}`, 'info');

        if (migratedData.state.paintWhitePixels !== undefined) {
          state.paintWhitePixels = migratedData.state.paintWhitePixels;
          Utils.addDebugLog(`Paint white pixels: ${state.paintWhitePixels}`, 'info');
        }
        if (migratedData.state.paintTransparentPixels !== undefined) {
          state.paintTransparentPixels = migratedData.state.paintTransparentPixels;
          Utils.addDebugLog(`Paint transparent pixels: ${state.paintTransparentPixels}`, 'info');
        }

        Utils.showAlert(Utils.t('fileLoaded'), 'success');
        
        // If autonomous mode and auto repair is enabled, start it
        if (state.autonomousMode && document.getElementById('autoRepairEnabled').checked) {
          Utils.addDebugLog('Autonomous mode: starting auto repair after file load', 'info');
          setTimeout(() => {
            state.autoRepairEnabled = true;
            startAutoRepair();
          }, 5000);
        }
        
      } catch (error) {
        Utils.addDebugLog(`Load error: ${error.message}`, 'error');
        Utils.showAlert(error.message, 'error');
      }
    });

    // Generate Token button
    document.getElementById('generateTokenBtn').addEventListener('click', async () => {
      const btn = document.getElementById('generateTokenBtn');
      const originalText = btn.textContent;

      try {
        btn.disabled = true;
        btn.textContent = '🔄 Generating...';
        btn.style.background = 'linear-gradient(135deg, #ffa726 0%, #ff9800 100%)';

        Utils.addDebugLog('Manual token generation requested', 'info');

        const token = await ensureToken(true);

        if (token) {
          Utils.addDebugLog('Token generation succeeded!', 'success');
          Utils.showAlert('Token generated successfully!', 'success');
          updateTokenStatus();
        } else {
          throw new Error('Token generation failed');
        }
      } catch (error) {
        Utils.addDebugLog(`Token generation failed: ${error.message}`, 'error');
        Utils.showAlert('Token generation failed', 'error');
        playNotificationSound();
      } finally {
        btn.disabled = false;
        btn.textContent = originalText;
        btn.style.background = 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)';
      }
    });

    // Manual repair
    let repairRunning = false;
    document.getElementById('repairBtn').addEventListener('click', async () => {
      if (!state.imageLoaded) {
        Utils.showAlert('Please load a progress file first', 'warning');
        return;
      }

      if (repairRunning) {
        state.stopFlag = true;
        Utils.addDebugLog('Manual repair stop requested', 'warning');
        return;
      }

      repairRunning = true;
      state.running = true;
      state.stopFlag = false;
      const repairBtn = document.getElementById('repairBtn');
      repairBtn.textContent = '⏸️ Stop Repair';
      repairBtn.style.background = 'linear-gradient(135deg, #ff6b35 0%, #f7931e 100%)';

      try {
        Utils.addDebugLog('Starting manual repair with enhanced autonomous system...', 'info');

        if (!isTokenValid()) {
          Utils.addDebugLog('No valid token, generating...', 'info');
          await ensureToken(true);
        }

        const damagedPixels = await scanForDamage();

        if (damagedPixels.length > 0) {
          updateStatus(Utils.t('damageDetected', { count: damagedPixels.length }));
          showAttackNotification('attack', damagedPixels.length);
          
          const repairedCount = await repairDamagedPixels(damagedPixels);
          
          if (repairedCount === damagedPixels.length) {
            showAttackNotification('repaired');
          }
        } else {
          updateStatus(Utils.t('noDamageDetected'));
          showPeacefulState();
        }
      } catch (error) {
        Utils.addDebugLog(`Repair error: ${error.message}`, 'error');
        Utils.showAlert('Repair failed', 'error');
      } finally {
        repairRunning = false;
        state.running = false;
        state.stopFlag = false;
        repairBtn.textContent = '🔧 ' + Utils.t('repairPixels');
        repairBtn.style.background = 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)';
      }
    });

    // Auto repair toggle
    document.getElementById('autoRepairEnabled').addEventListener('change', (e) => {
      state.autoRepairEnabled = e.target.checked;

      if (state.autoRepairEnabled) {
        if (!state.imageLoaded) {
          Utils.showAlert('Please load a progress file first', 'warning');
          e.target.checked = false;
          state.autoRepairEnabled = false;
          return;
        }
        startAutoRepair();
      } else {
        stopAutoRepair();
      }
    });

    // Repair interval change
    document.getElementById('repairInterval').addEventListener('change', (e) => {
      const value = parseInt(e.target.value) || 30;
      state.autoRepairInterval = Math.max(10, Math.min(3600, value));
      e.target.value = state.autoRepairInterval;

      Utils.addDebugLog(`Repair interval changed to ${state.autoRepairInterval} seconds`, 'info');

      if (state.autoRepairEnabled && state.imageLoaded) {
        Utils.addDebugLog('Restarting auto repair with new interval', 'info');
        startAutoRepair();
      }
    });

    // Auto token refresh toggle
    document.getElementById('autoTokenRefresh').addEventListener('change', (e) => {
      state.autoTokenRefresh = e.target.checked;
      Utils.addDebugLog(`Auto token refresh ${state.autoTokenRefresh ? 'enabled' : 'disabled'}`, 'info');
      updateSystemStatus();
      
      if (state.autoTokenRefresh && state.autonomousMode && !isTokenValid()) {
        ensureToken();
      }
    });

    // Token source selection
    document.getElementById('tokenSourceSelect').addEventListener('change', (e) => {
      state.tokenSource = e.target.value;
      Utils.addDebugLog(`Token source changed to: ${state.tokenSource}`, 'info');
      updateSystemStatus();
      
      // Invalidate current token to force new generation with new method
      if (isTokenValid()) {
        Utils.addDebugLog('Invalidating current token due to source change', 'info');
        invalidateToken();
      }
    });

    // NEW: Enhanced batch mode controls
    document.getElementById('smartBatchMode').addEventListener('change', (e) => {
      if (e.target.checked) {
        state.autoBatchEnabled = true;
        state.batchOptimization = true;
        document.getElementById('manualBatchControls').style.display = 'none';
        Utils.addDebugLog('Smart batch mode enabled - will auto-adjust to damage count', 'info');
        updateBatchInfo();
      }
    });

    document.getElementById('manualBatchMode').addEventListener('change', (e) => {
      if (e.target.checked) {
        state.autoBatchEnabled = false;
        state.batchOptimization = false;
        document.getElementById('manualBatchControls').style.display = 'flex';
        Utils.addDebugLog('Manual batch mode enabled - using fixed batch size', 'info');
        updateBatchInfo();
      }
    });

    // Manual batch size controls with +/- buttons
    document.getElementById('batchSizeIncrease').addEventListener('click', () => {
      const newSize = Math.min(CONFIG.MAX_BATCH_SIZE, state.currentBatchSize + 1);
      if (newSize !== state.currentBatchSize) {
        state.currentBatchSize = newSize;
        document.getElementById('batchSize').value = state.currentBatchSize;
        Utils.addDebugLog(`Increased batch size to ${state.currentBatchSize} pixels`, 'info');
        updateBatchInfo();
      }
    });

    document.getElementById('batchSizeDecrease').addEventListener('click', () => {
      const newSize = Math.max(CONFIG.MIN_BATCH_SIZE, state.currentBatchSize - 1);
      if (newSize !== state.currentBatchSize) {
        state.currentBatchSize = newSize;
        document.getElementById('batchSize').value = state.currentBatchSize;
        Utils.addDebugLog(`Decreased batch size to ${state.currentBatchSize} pixels`, 'info');
        updateBatchInfo();
      }
    });

    // Manual input allows direct typing for precise control
    document.getElementById('batchSize').addEventListener('input', (e) => {
      const value = parseInt(e.target.value);
      if (!isNaN(value)) {
        const clampedValue = Math.max(CONFIG.MIN_BATCH_SIZE, Math.min(CONFIG.MAX_BATCH_SIZE, value));
        if (clampedValue !== state.currentBatchSize) {
          state.currentBatchSize = clampedValue;
          if (clampedValue !== value) {
            e.target.value = state.currentBatchSize;
          }
          Utils.addDebugLog(`Manual batch size set to ${state.currentBatchSize} pixels`, 'info');
          updateBatchInfo();
        }
      }
    });

    document.getElementById('paintTransparentPixels').addEventListener('change', (e) => {
      state.paintTransparentPixels = e.target.checked;
      Utils.addDebugLog(`Transparent pixel repair ${state.paintTransparentPixels ? 'enabled' : 'disabled'}`, 'info');
    });

    // Clear debug
    document.getElementById('clearDebugBtn').addEventListener('click', () => {
      state.debugLogs = [];
      updateDebugConsole();
      Utils.addDebugLog('Debug console cleared', 'info');
      Utils.addDebugLog('Enhanced WPlace Autonomous Repair Tool ready', 'info');
    });
  }

  // Enhanced data migration helper
  function migrateProgressData(data) {
    if (!data.version || data.version < '2.0') {
      Utils.addDebugLog('Migrating old progress data format...', 'info');
      
      if (!data.state) data.state = {};
      if (!data.imageData) data.imageData = {};
      
      data.state.paintWhitePixels = data.state.paintWhitePixels ?? true;
      data.state.paintTransparentPixels = data.state.paintTransparentPixels ?? false;
      
      data.version = '2.0';
    }

    // Additional migrations for autonomous features
    if (data.version === '2.0') {
      data.state.autonomousMode = data.state.autonomousMode ?? CONFIG.AUTONOMOUS_MODE;
      data.state.autoTokenRefresh = data.state.autoTokenRefresh ?? CONFIG.AUTO_TOKEN_REFRESH;
      data.state.tokenSource = data.state.tokenSource ?? CONFIG.TOKEN_SOURCE;
      data.version = '3.0';
      Utils.addDebugLog('Migrated to autonomous features v3.0', 'info');
    }
    
    return data;
  }

  // Main initialization function
  async function initialize() {
    Utils.addDebugLog('Starting WPlace Autonomous Repair Tool v3.0...', 'info');
    
    // Create UI first
    createUI();
    
    Utils.addDebugLog('NEW Enhanced Features Initialized:', 'info');
    Utils.addDebugLog('• NEW Turnstile implementation with widget reuse', 'info');
    Utils.addDebugLog('• Enhanced sitekey detection from multiple sources', 'info');
    Utils.addDebugLog('• Sophisticated token management with preloading', 'info');
    Utils.addDebugLog('• Autonomous operation with smart retry logic', 'info');
    Utils.addDebugLog('• Enhanced tile interception and caching', 'info');
    Utils.addDebugLog('• Adaptive repair algorithms with failure handling', 'info');
    Utils.addDebugLog('• Visual notifications and audio alerts', 'info');
    Utils.addDebugLog('• Draggable window with minimize/close controls', 'info');
    
    if (state.autonomousMode) {
      Utils.addDebugLog('AUTONOMOUS MODE ACTIVE - Tool will operate independently', 'success');
      Utils.addDebugLog('Instructions for autonomous operation:', 'info');
      Utils.addDebugLog('1. Wait for initial setup to complete', 'info');
      Utils.addDebugLog('2. Load a progress file using "Load Progress File"', 'info');
      Utils.addDebugLog('3. Enable "Auto Repair" to start autonomous monitoring', 'info');
      Utils.addDebugLog('4. Tool will automatically scan and repair damage', 'info');
      Utils.addDebugLog('5. Tokens will be generated and refreshed automatically', 'info');
      Utils.addDebugLog('6. Monitor debug console for autonomous operation logs', 'info');
    } else {
      Utils.addDebugLog('Manual mode active - use controls for manual operation', 'info');
    }
    
    // Show autonomous mode status
    updateStatus(state.autonomousMode ? Utils.t('autonomousModeActive') : 'Manual mode ready - Load file and enable auto repair to start');
    
    Utils.addDebugLog('WPlace Autonomous Repair Tool ready for operation', 'success');
  }

  // Enhanced cleanup function
  function cleanup() {
    Utils.addDebugLog('Cleaning up autonomous systems...', 'info');
    
    // Clear all timers
    if (state.autoRepairTimer) {
      clearInterval(state.autoRepairTimer);
      state.autoRepairTimer = null;
    }
    
    if (state.tokenRetryTimer) {
      clearTimeout(state.tokenRetryTimer);
      state.tokenRetryTimer = null;
    }
    
    if (state.tokenPreloadTimer) {
      clearTimeout(state.tokenPreloadTimer);
      state.tokenPreloadTimer = null;
    }
    
    // Cleanup Turnstile
    Utils.cleanupTurnstile();
    
    // Set stop flag
    state.stopFlag = true;
    
    Utils.addDebugLog('Cleanup completed', 'info');
  }

  // Add cleanup on page unload
  window.addEventListener('beforeunload', cleanup);
  
  // Handle page visibility changes for autonomous mode
  document.addEventListener('visibilitychange', () => {
    if (state.autonomousMode) {
      if (document.hidden) {
        Utils.addDebugLog('Page hidden - autonomous systems continue running', 'info');
      } else {
        Utils.addDebugLog('Page visible - autonomous systems active', 'info');
        // Refresh status when page becomes visible
        updateCharges();
        updateTokenStatus();
      }
    }
  });

  // Enhanced error handling for autonomous mode
  window.addEventListener('error', (event) => {
    if (state.autonomousMode) {
      Utils.addDebugLog(`Global error in autonomous mode: ${event.error?.message || 'Unknown error'}`, 'error');
    }
  });

  window.addEventListener('unhandledrejection', (event) => {
    if (state.autonomousMode) {
      Utils.addDebugLog(`Unhandled promise rejection in autonomous mode: ${event.reason}`, 'error');
    }
  });

  // Start the enhanced autonomous application
  initialize().catch(error => {
    console.error('Failed to initialize autonomous repair tool:', error);
    Utils.addDebugLog(`Initialization failed: ${error.message}`, 'error');
  });

})();