popup.js

document.addEventListener('DOMContentLoaded', function() {
  const startButton = document.getElementById('start-practice');
  const saveButton = document.getElementById('save-settings');
  const tabs = document.querySelectorAll('.tab');
  
  // Load saved settings
  loadSettings();
  
  // Tab switching
  tabs.forEach(tab => {
    tab.addEventListener('click', function() {
      // Remove active class from all tabs and content
      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
      document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
      
      // Add active class to current tab and content
      const tabName = this.getAttribute('data-tab');
      this.classList.add('active');
      document.getElementById(`${tabName}-tab`).classList.add('active');
    });
  });
  
  // Save API settings
  saveButton.addEventListener('click', function() {
    const apiKey = document.getElementById('api-key').value.trim();
    
    // Validate inputs
    if (!apiKey) {
      alert('Please enter your OpenRouter API key');
      return;
    }
    
    // Save settings to chrome.storage
    chrome.storage.local.set({
      apiKey: apiKey
    }, function() {
      alert('Settings saved successfully!');
    });
  });
  
  startButton.addEventListener('click', async function() {
    try {
      // 使用配置中的默认值而不是从DOM元素中读取
      const questionCount = config.defaultQuestionCount;
      
      // Check if API key is set
      chrome.storage.local.get(['apiKey'], function(result) {
        if (!result.apiKey) {
          alert('Please set your OpenRouter API key in the Settings tab before starting practice.');
          
          // Switch to settings tab
          document.querySelector('.tab[data-tab="settings"]').click();
          return;
        }
        
        // Save settings to local storage
        chrome.storage.local.set({ questionCount: questionCount });
        
        // Get current active tab
        chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
          if (!tabs[0]) {
            alert('Unable to get current tab. Please try again.');
            return;
          }
          
          // Send message to content script
          chrome.tabs.sendMessage(
            tabs[0].id, 
            { action: 'startToeflPractice', questionCount: questionCount },
            function(response) {
              // Check if received response
              if (chrome.runtime.lastError) {
                alert('Unable to communicate with page. Error: ' + chrome.runtime.lastError.message);
                return;
              }
            }
          );
          
          // Close popup
          window.close();
        });
      });
    } catch (error) {
      alert('An error occurred: ' + error.message);
      console.error('Error:', error);
    }
  });
  
  // Function to load saved settings
  function loadSettings() {
    chrome.storage.local.get(['apiKey'], function(result) {
      if (result.apiKey) {
        document.getElementById('api-key').value = result.apiKey;
      }
      
      // Always set model and system prompt from config
      document.getElementById('model').value = config.model;
      document.getElementById('system-prompt').value = config.systemPrompt;
    });
  }
});