options.js

// Default color ranges
const DEFAULT_RANGES = {
  green: { min: 1, max: 20 },
  orange: { min: 21, max: 40 },
  red: { min: 41, max: 60 },
  darkRed: { min: 61, max: Infinity }
};

document.addEventListener('DOMContentLoaded', async () => {
  // Load current ranges from storage
  const { ranges } = await chrome.storage.local.get(['ranges']);
  
  // Populate input fields with current ranges
  document.getElementById('greenMin').value = ranges.green.min;
  document.getElementById('greenMax').value = ranges.green.max;
  
  document.getElementById('orangeMin').value = ranges.orange.min;
  document.getElementById('orangeMax').value = ranges.orange.max;
  
  document.getElementById('redMin').value = ranges.red.min;
  document.getElementById('redMax').value = ranges.red.max;
  
  document.getElementById('darkRedMin').value = ranges.darkRed.min;
  
  // Set up change event listeners to update dependent fields
  document.getElementById('greenMax').addEventListener('change', updateDependentFields);
  document.getElementById('orangeMax').addEventListener('change', updateDependentFields);
  document.getElementById('redMax').addEventListener('change', updateDependentFields);
  
  // Set up save button
  document.getElementById('saveButton').addEventListener('click', saveSettings);
  
  // Set up reset button
  document.getElementById('resetButton').addEventListener('click', resetToDefault);
});

// Update dependent fields to maintain range consistency
function updateDependentFields() {
  const greenMax = parseInt(document.getElementById('greenMax').value);
  const orangeMax = parseInt(document.getElementById('orangeMax').value);
  const redMax = parseInt(document.getElementById('redMax').value);
  
  // Ensure logical ordering
  document.getElementById('orangeMin').value = greenMax + 1;
  document.getElementById('redMin').value = orangeMax + 1;
  document.getElementById('darkRedMin').value = redMax + 1;
  
  // Validate and adjust if needed
  if (orangeMax <= greenMax) {
    document.getElementById('orangeMax').value = greenMax + 1;
  }
  
  if (redMax <= orangeMax) {
    document.getElementById('redMax').value = orangeMax + 1;
  }
}

// Save settings to storage
async function saveSettings() {
  try {
    const greenMax = parseInt(document.getElementById('greenMax').value);
    const orangeMax = parseInt(document.getElementById('orangeMax').value);
    const redMax = parseInt(document.getElementById('redMax').value);
    
    // Update dependent fields one last time to ensure consistency
    document.getElementById('orangeMin').value = greenMax + 1;
    document.getElementById('redMin').value = orangeMax + 1;
    document.getElementById('darkRedMin').value = redMax + 1;
    
    // Prepare ranges object
    const ranges = {
      green: { min: 1, max: greenMax },
      orange: { min: greenMax + 1, max: orangeMax },
      red: { min: orangeMax + 1, max: redMax },
      darkRed: { min: redMax + 1, max: Infinity }
    };
    
    // Save to storage
    await chrome.storage.local.set({ ranges });
    
    // Get current tab count and update badge with new ranges
    const tabs = await chrome.tabs.query({});
    const count = tabs.length;
    
    // Call background script to update badge with new ranges
    chrome.runtime.sendMessage({ action: 'updateBadge', count: count });
    
    // Show success message
    alert('Settings saved successfully!');
  } catch (error) {
    console.error('Error saving settings:', error);
    alert('Error saving settings. Please try again.');
  }
}

// Reset to default values
async function resetToDefault() {
  try {
    // Confirm with the user
    if (confirm('Are you sure you want to reset to default settings?')) {
      // Save default ranges to storage
      await chrome.storage.local.set({ ranges: DEFAULT_RANGES });
      
      // Update input fields
      document.getElementById('greenMin').value = DEFAULT_RANGES.green.min;
      document.getElementById('greenMax').value = DEFAULT_RANGES.green.max;
      
      document.getElementById('orangeMin').value = DEFAULT_RANGES.orange.min;
      document.getElementById('orangeMax').value = DEFAULT_RANGES.orange.max;
      
      document.getElementById('redMin').value = DEFAULT_RANGES.red.min;
      document.getElementById('redMax').value = DEFAULT_RANGES.red.max;
      
      document.getElementById('darkRedMin').value = DEFAULT_RANGES.darkRed.min;
      
      // Get current tab count and update badge with new ranges
      const tabs = await chrome.tabs.query({});
      const count = tabs.length;
      
      // Call background script to update badge with new ranges
      chrome.runtime.sendMessage({ action: 'updateBadge', count: count });
      
      // Show success message
      alert('Settings reset to default values.');
    }
  } catch (error) {
    console.error('Error resetting settings:', error);
    alert('Error resetting settings. Please try again.');
  }
}