Dotbypasser/extension/ui/popup/popup.js

/**
 * Popup UI Logic
 */

// Debug mode flag (set to true to enable verbose logging)
const DEBUG = true;

function debugLog(...args) {
  if (DEBUG) {
    console.log('[Popup DEBUG]', new Date().toISOString(), ...args);
  }
}

// DOM elements
const masterSwitch = document.getElementById('masterSwitch');
const moduleToggles = document.querySelectorAll('.module-toggle');
const openOptionsBtn = document.getElementById('openOptions');

// Stats elements
const statCaptchas = document.getElementById('stat-captchas');
const statForms = document.getElementById('stat-forms');
const statCards = document.getElementById('stat-cards');

// Initialize popup
document.addEventListener('DOMContentLoaded', async () => {
  debugLog('=== Popup DOMContentLoaded ===');
  debugLog('DOM elements found:', {
    masterSwitch: !!masterSwitch,
    moduleToggles: moduleToggles.length,
    openOptionsBtn: !!openOptionsBtn
  });

  await loadConfig();
  await loadStats();

  // Set up event listeners
  masterSwitch.addEventListener('change', handleMasterToggle);

  moduleToggles.forEach(toggle => {
    toggle.addEventListener('change', handleModuleToggle);
  });

  openOptionsBtn.addEventListener('click', () => {
    debugLog('Options button clicked');
    chrome.runtime.openOptionsPage();
  });

  // Refresh stats every 2 seconds
  setInterval(loadStats, 2000);

  debugLog('=== Popup initialization complete ===');
});

/**
 * Load configuration from storage
 */
async function loadConfig() {
  debugLog('loadConfig: Starting to load configuration');
  try {
    const config = await chrome.storage.sync.get(['modules', 'globalSettings']);
    debugLog('loadConfig: Received config from storage:', config);

    // Set master switch
    if (config.globalSettings) {
      masterSwitch.checked = config.globalSettings.masterEnabled || false;
      debugLog('loadConfig: Master switch set to', masterSwitch.checked);
    }

    // Set module toggles
    if (config.modules) {
      moduleToggles.forEach(toggle => {
        const moduleName = toggle.dataset.module;
        const moduleConfig = config.modules[moduleName];

        if (moduleConfig) {
          toggle.checked = moduleConfig.enabled || false;
          updateModuleStatus(moduleName, moduleConfig.enabled);
          debugLog(`loadConfig: Module ${moduleName} set to`, toggle.checked);
        }
      });
    }

    debugLog('loadConfig: Configuration loaded successfully');
  } catch (error) {
    console.error('[Popup] Failed to load config:', error);
    debugLog('loadConfig: ERROR -', error);
  }
}

/**
 * Load statistics from storage
 */
async function loadStats() {
  try {
    const response = await chrome.runtime.sendMessage({ type: 'GET_STATS' });

    if (response && response.success) {
      const stats = response.stats;
      statCaptchas.textContent = stats.captchasSolved || 0;
      statForms.textContent = stats.formsFilled || 0;
      statCards.textContent = stats.cardsGenerated || 0;
    }
  } catch (error) {
    console.error('[Popup] Failed to load stats:', error);
  }
}

/**
 * Handle master switch toggle
 */
async function handleMasterToggle(event) {
  const enabled = event.target.checked;
  debugLog('handleMasterToggle: User toggled master switch to', enabled);

  try {
    debugLog('handleMasterToggle: Sending TOGGLE_MASTER message');
    const response = await chrome.runtime.sendMessage({
      type: 'TOGGLE_MASTER',
      enabled
    });

    debugLog('handleMasterToggle: Received response:', response);

    if (response && response.success) {
      // Update all module toggles
      moduleToggles.forEach(toggle => {
        toggle.checked = enabled;
        const moduleName = toggle.dataset.module;
        updateModuleStatus(moduleName, enabled);
      });

      console.log('[Popup] Master switch:', enabled ? 'ON' : 'OFF');
      debugLog('handleMasterToggle: All modules updated in UI');
    } else {
      debugLog('handleMasterToggle: Response indicated failure:', response);
      event.target.checked = !enabled; // Revert on error
    }
  } catch (error) {
    console.error('[Popup] Failed to toggle master:', error);
    debugLog('handleMasterToggle: ERROR -', error);
    event.target.checked = !enabled; // Revert on error
  }
}

/**
 * Handle individual module toggle
 */
async function handleModuleToggle(event) {
  const moduleName = event.target.dataset.module;
  const enabled = event.target.checked;
  debugLog(`handleModuleToggle: User toggled ${moduleName} to`, enabled);

  try {
    debugLog('handleModuleToggle: Sending TOGGLE_MODULE message');
    const response = await chrome.runtime.sendMessage({
      type: 'TOGGLE_MODULE',
      moduleName,
      enabled
    });

    debugLog('handleModuleToggle: Received response:', response);

    if (response && response.success) {
      updateModuleStatus(moduleName, enabled);
      console.log(`[Popup] Module ${moduleName}:`, enabled ? 'ON' : 'OFF');
      debugLog('handleModuleToggle: Module status updated in UI');
    } else {
      debugLog('handleModuleToggle: Response indicated failure:', response);
      event.target.checked = !enabled; // Revert on error
    }
  } catch (error) {
    console.error(`[Popup] Failed to toggle ${moduleName}:`, error);
    debugLog('handleModuleToggle: ERROR -', error);
    event.target.checked = !enabled; // Revert on error
  }
}

/**
 * Update module status indicator
 */
function updateModuleStatus(moduleName, enabled) {
  debugLog(`updateModuleStatus: ${moduleName} = ${enabled}`);
  const statusElement = document.getElementById(`status-${moduleName}`);
  if (statusElement) {
    statusElement.textContent = enabled ? '●' : '○';
    statusElement.className = enabled ? 'module-status active' : 'module-status inactive';
  }
}