options.js

const modelSelect = document.getElementById("modelSelect");
let saveButton;
let statusMessage;

// Wrap storage access in a DOMContentLoaded listener
document.addEventListener("DOMContentLoaded", () => {
  saveButton = document.getElementById("saveSettings");
  statusMessage = document.getElementById("statusMessage");
  
  // Load Ollama models
  loadModelsFromOllama();
  
  // Load saved model on page load
  chrome.storage.local.get(["selectedModel"], (result) => {
    if (chrome.runtime.lastError) {
      console.error("Error accessing chrome.storage:", chrome.runtime.lastError);
      showStatus("Error loading settings. Please try again.", "error");
      return;
    }
    if (result.selectedModel) {
      modelSelect.value = result.selectedModel;
    }
  });

  // Save settings when button is clicked
  saveButton.addEventListener("click", () => {
    saveButton.disabled = true;
    saveButton.textContent = "Saving...";
    
    chrome.storage.local.set({ selectedModel: modelSelect.value }, () => {
      if (chrome.runtime.lastError) {
        console.error("Error saving to chrome.storage:", chrome.runtime.lastError);
        showStatus("Error saving settings. Please try again.", "error");
        saveButton.disabled = false;
        saveButton.textContent = "Save Settings";
        return;
      }
      
      console.log("Model saved:", modelSelect.value);
      showStatus("Settings saved successfully!", "success");
      
      setTimeout(() => {
        saveButton.disabled = false;
        saveButton.textContent = "Save Settings";
      }, 1000);
    });
  });
});

function loadModelsFromOllama() {
  console.log("Loading models from Ollama...");
  modelSelect.disabled = true;
  
  if (saveButton) saveButton.disabled = true;
  
  // Add a loading option
  const loadingOption = document.createElement("option");
  loadingOption.textContent = "Loading models...";
  modelSelect.appendChild(loadingOption);
  
  fetch("http://localhost:11434/api/tags")
    .then(res => {
      if (!res.ok) {
        throw new Error(`HTTP error! Status: ${res.status}`);
      }
      return res.json();
    })
    .then(json => {
      // The API response includes `models` property with an array of objects
      const modelsArray = json.models || [];
      
      // Clear existing options
      modelSelect.innerHTML = ""; 
      
      if (modelsArray.length === 0) {
        const noModelsOpt = document.createElement("option");
        noModelsOpt.textContent = "No models found";
        modelSelect.appendChild(noModelsOpt);
        showStatus("No models found in Ollama. Please check if Ollama is running.", "error");
        return;
      }

      // Populate dropdown with each model's "name"
      modelsArray.forEach(item => {
        const opt = document.createElement("option");
        opt.value = item.name;           // e.g. "phi4:latest"
        opt.textContent = item.name;     // e.g. "phi4:latest"
        modelSelect.appendChild(opt);
      });

      // Restore the previously selected value, if any
      chrome.storage.local.get(["selectedModel"], (result) => {
        if (chrome.runtime.lastError) {
          console.error("Error accessing chrome.storage:", chrome.runtime.lastError);
          return; // Handle the error
        }
        if (result.selectedModel && modelsArray.some(m => m.name === result.selectedModel)) {
          modelSelect.value = result.selectedModel;
        } else if (modelsArray.length > 0) {
          // Default to first model if previously selected model is no longer available
          modelSelect.value = modelsArray[0].name;
        }
      });
      
      modelSelect.disabled = false;
      if (saveButton) saveButton.disabled = false;
    })
    .catch(err => {
      console.error("Error loading models from Ollama:", err);
      modelSelect.innerHTML = "";
      
      const errorOpt = document.createElement("option");
      errorOpt.textContent = "Error loading models";
      modelSelect.appendChild(errorOpt);
      
      showStatus("Error connecting to Ollama. Please make sure Ollama is running at http://localhost:11434.", "error");
      
      modelSelect.disabled = true;
      if (saveButton) saveButton.disabled = false;
    });
}

// Helper function to show status messages
function showStatus(message, type) {
  if (!statusMessage) return;
  
  statusMessage.textContent = message;
  statusMessage.className = "status-message " + type;
  statusMessage.style.display = "block";
  
  // Auto-hide success messages after 3 seconds
  if (type === "success") {
    setTimeout(() => {
      statusMessage.style.display = "none";
    }, 3000);
  }
}