options.js

const API_KEY_REGEX = /^[a-f0-9]{64}$/i;

document.addEventListener('DOMContentLoaded', loadSettings);
document.getElementById('settingsForm').addEventListener('submit', saveSettings);
document.getElementById('clearBtn').addEventListener('click', clearSettings);

async function loadSettings() {
  try {
    const result = await chrome.storage.sync.get('vtApiKey');
    const apiKey = result.vtApiKey;
    
    if (apiKey) {
      document.getElementById('apiKey').value = apiKey;
      showStatus('API key is configured', 'active');
    } else {
      showStatus('No API key configured', 'inactive');
    }
  } catch (error) {
    showMessage('Failed to load settings', 'error');
  }
}

async function saveSettings(event) {
  event.preventDefault();
  
  const apiKey = document.getElementById('apiKey').value.trim();
  const saveBtn = document.getElementById('saveBtn');
  
  if (!apiKey) {
    showMessage('Please enter an API key', 'error');
    return;
  }
  
  if (!API_KEY_REGEX.test(apiKey)) {
    showMessage('Invalid API key format. Must be 64 hexadecimal characters.', 'error');
    return;
  }
  
  saveBtn.disabled = true;
  saveBtn.textContent = 'Saving...';
  
  try {
    await chrome.storage.sync.set({ vtApiKey: apiKey });
    showMessage('API key saved successfully!', 'success');
    showStatus('API key is configured', 'active');
    
    setTimeout(() => {
      const message = document.getElementById('message');
      message.style.display = 'none';
    }, 3000);
  } catch (error) {
    showMessage('Failed to save API key: ' + error.message, 'error');
  } finally {
    saveBtn.disabled = false;
    saveBtn.textContent = 'Save API Key';
  }
}

async function clearSettings() {
  if (!confirm('Are you sure you want to clear your API key?')) {
    return;
  }
  
  try {
    await chrome.storage.sync.remove('vtApiKey');
    document.getElementById('apiKey').value = '';
    showMessage('API key cleared', 'success');
    showStatus('No API key configured', 'inactive');
    
    setTimeout(() => {
      const message = document.getElementById('message');
      message.style.display = 'none';
    }, 3000);
  } catch (error) {
    showMessage('Failed to clear API key: ' + error.message, 'error');
  }
}

function showMessage(text, type) {
  const message = document.getElementById('message');
  message.textContent = text;
  message.className = `message ${type}`;
  message.style.display = 'block';
}

function showStatus(text, type) {
  const status = document.getElementById('currentStatus');
  status.textContent = text;
  status.className = `current-status ${type}`;
  status.style.display = 'block';
}