Update js/iaConfigModule.js

js/iaConfigModule.js

@@ -1,4 +1,5 @@
 // js/iaConfigModule.js
+
 const defaultConfig = {
   llm: {
     provider: "deepseek",
@@ -12,242 +13,523 @@ const defaultConfig = {
   }
 };
 
-// CORRECCIÓN: Lista de modelos de IA actualizada a nombres de API realistas para 2025.
+// Lista de modelos actualizada y corregida (2025)
 export const llmProviders = [
-  {
-    name: "OpenAI",
-    value: "openai",
+  { 
+    name: "OpenAI", 
+    value: "openai", 
     models: [
-      "gpt-5-pro",
-      "gpt-5",
-      "gpt-5-mini", // Nombres plausibles para la serie GPT-5
       "gpt-4o",
-      "gpt-4o-mini"
+      "gpt-4o-mini",
+      "gpt-4-turbo",
+      "gpt-4",
+      "gpt-3.5-turbo",
+      "o1-preview",
+      "o1-mini"
     ],
-    url: "https://api.openai.com"
+    url: "https://api.openai.com/v1"
   },
-  {
-    name: "DeepSeek",
-    value: "deepseek",
-    models: ["deepseek-chat", "deepseek-reasoner"],
-    url: "https://api.deepseek.com"
+  { 
+    name: "DeepSeek", 
+    value: "deepseek", 
+    models: ["deepseek-chat", "deepseek-reasoner"], 
+    url: "https://api.deepseek.com/v1" 
   }
 ];
 
 export const transcriptionProviders = [
-  { name: "OpenAI Whisper", value: "openai", models: ["whisper-1"], url: "https://api.openai.com" },
-  { name: "Deepgram", value: "deepgram", models: ["nova-2", "whisper-large"], url: "https://api.deepgram.com" }
+  { 
+    name: "OpenAI Whisper", 
+    value: "openai", 
+    models: ["whisper-1"], 
+    url: "https://api.openai.com/v1/audio/transcriptions" 
+  },
+  { 
+    name: "Deepgram", 
+    value: "deepgram", 
+    models: ["nova-2", "nova", "enhanced", "base"], 
+    url: "https://api.deepgram.com/v1/listen" 
+  }
 ];
 
 function saveConfig(config) {
   try {
+    // Validar que tenemos un objeto válido antes de guardar
+    if (!config || typeof config !== 'object') {
+      console.error("[iaConfigModule] Configuración inválida para guardar");
+      return false;
+    }
+    
+    // Verificar si localStorage está disponible
+    if (typeof Storage === "undefined") {
+      console.error("[iaConfigModule] LocalStorage no disponible");
+      return false;
+    }
+    
     localStorage.setItem("iaConfig", JSON.stringify(config));
+    console.log("[iaConfigModule] Configuración guardada correctamente");
+    return true;
   } catch (e) {
     console.error("[iaConfigModule] Error guardando config:", e);
+    return false;
   }
 }
 
 function clone(obj) {
-  try { return structuredClone(obj); } catch { return JSON.parse(JSON.stringify(obj)); }
+  if (!obj) return null;
+  try { 
+    return structuredClone(obj); 
+  } catch { 
+    return JSON.parse(JSON.stringify(obj)); 
+  }
 }
 
 function loadConfig() {
   let config;
   try {
-    config = JSON.parse(localStorage.getItem("iaConfig")) || clone(defaultConfig);
-  } catch {
+    const stored = localStorage.getItem("iaConfig");
+    if (stored) {
+      config = JSON.parse(stored);
+      // Validar estructura básica
+      if (!config.llm || !config.transcription) {
+        throw new Error("Estructura de configuración inválida");
+      }
+    } else {
+      config = clone(defaultConfig);
+    }
+  } catch (error) {
+    console.warn("[iaConfigModule] Error cargando config, usando default:", error);
     config = clone(defaultConfig);
   }
 
-  // CORRECCIÓN: La lógica de migración para la transcripción era defectuosa.
-  // No preservaba la API key existente si el proveedor era Deepgram.
-  // Ahora usa el mismo patrón robusto que la migración de LLM.
+  // Asegurar estructura completa
+  config = {
+    ...clone(defaultConfig),
+    ...config,
+    llm: {
+      ...defaultConfig.llm,
+      ...config.llm,
+      apiKeys: {
+        ...defaultConfig.llm.apiKeys,
+        ...(config.llm?.apiKeys || {})
+      }
+    },
+    transcription: {
+      ...defaultConfig.transcription,
+      ...config.transcription,
+      apiKeys: {
+        ...defaultConfig.transcription.apiKeys,
+        ...(config.transcription?.apiKeys || {})
+      },
+      models: {
+        ...defaultConfig.transcription.models,
+        ...(config.transcription?.models || {})
+      }
+    }
+  };
+
+  // Migración: transcription apiKey único -> apiKeys
   if (config.transcription.apiKey !== undefined) {
-    console.log("[iaConfigModule] Migrando configuración de transcripción antigua...");
     const oldKey = config.transcription.apiKey;
-    const oldModel = config.transcription.model;
-    const oldProvider = config.transcription.provider;
-
-    config.transcription.apiKeys = { ...defaultConfig.transcription.apiKeys, [oldProvider]: oldKey };
-    config.transcription.models = { ...defaultConfig.transcription.models, [oldProvider]: oldModel };
-
+    const provider = config.transcription.provider || "openai";
+    config.transcription.apiKeys = { 
+      ...config.transcription.apiKeys,
+      [provider]: oldKey 
+    };
     delete config.transcription.apiKey;
-    delete config.transcription.model;
+    delete config.transcription.model; // También eliminar model único si existe
     saveConfig(config);
+    console.log("[iaConfigModule] Migrado transcription.apiKey a apiKeys");
   }
 
-  // Migración LLM apiKey -> apiKeys (esta parte estaba bien)
+  // Migración: LLM apiKey único -> apiKeys
   if (config.llm.apiKey !== undefined) {
-    console.log("[iaConfigModule] Migrando configuración de LLM antigua...");
-    const old = config.llm.apiKey;
-    config.llm.apiKeys = { ...defaultConfig.llm.apiKeys, [config.llm.provider]: old };
+    const oldKey = config.llm.apiKey;
+    const provider = config.llm.provider || "deepseek";
+    config.llm.apiKeys = { 
+      ...config.llm.apiKeys,
+      [provider]: oldKey 
+    };
     delete config.llm.apiKey;
     saveConfig(config);
+    console.log("[iaConfigModule] Migrado llm.apiKey a apiKeys");
   }
 
-  // Migraciones de modelos obsoletos (estas partes estaban bien)
-  if (config.llm.provider === "deepseek" && (config.llm.model === "deepseek-v3" || config.llm.model === "deepseek-llm")) {
-    config.llm.model = "deepseek-chat";
-    saveConfig(config);
+  // Corregir modelos obsoletos o inexistentes de DeepSeek
+  if (config.llm.provider === "deepseek") {
+    const validDeepSeekModels = ["deepseek-chat", "deepseek-reasoner"];
+    if (!validDeepSeekModels.includes(config.llm.model)) {
+      config.llm.model = "deepseek-chat";
+      console.log("[iaConfigModule] Corregido modelo DeepSeek a deepseek-chat");
+      saveConfig(config);
+    }
   }
-  if (config.llm.provider === "openai" && /gpt-5.*2025/.test(config.llm.model)) {
-    config.llm.model = config.llm.model.replace(/-2025-\d{2}-\d{2}/, "");
-    saveConfig(config);
+
+  // Corregir modelos inexistentes de OpenAI (GPT-5 no existe aún)
+  if (config.llm.provider === "openai") {
+    const validOpenAIModels = [
+      "gpt-4o", "gpt-4o-mini", "gpt-4-turbo", "gpt-4", 
+      "gpt-3.5-turbo", "o1-preview", "o1-mini"
+    ];
+    
+    // Lista de modelos fictícios a corregir
+    const fakeModels = [
+      "gpt-5", "gpt-5-mini", "gpt-5-nano", "gpt-5-chat-latest",
+      "gpt-5-2025-05-01", "gpt-5-mini-2025-05-01", "chatgpt-4o-latest",
+      "o4-mini-2025-04-16"
+    ];
+    
+    if (fakeModels.includes(config.llm.model) || !validOpenAIModels.includes(config.llm.model)) {
+      config.llm.model = "gpt-4o"; // Usar el mejor modelo disponible real
+      console.log("[iaConfigModule] Corregido modelo OpenAI fictício a gpt-4o");
+      saveConfig(config);
+    }
+  }
+
+  // Validar modelos de transcripción
+  if (config.transcription.provider === "deepgram") {
+    const validDeepgramModels = ["nova-2", "nova", "enhanced", "base"];
+    const currentModel = config.transcription.models?.deepgram;
+    if (!validDeepgramModels.includes(currentModel)) {
+      config.transcription.models.deepgram = "nova-2";
+      console.log("[iaConfigModule] Corregido modelo Deepgram a nova-2");
+      saveConfig(config);
+    }
   }
 
   return config;
 }
+
 export function getIaConfig() {
   return loadConfig();
 }
 
+export function validateApiKey(provider, apiKey) {
+  if (!apiKey || apiKey.trim() === '') return false;
+  
+  switch (provider) {
+    case 'openai':
+      return apiKey.startsWith('sk-') && apiKey.length >= 20;
+    case 'deepseek':
+      return apiKey.startsWith('sk-') && apiKey.length >= 20;
+    case 'deepgram':
+      return apiKey.length >= 30; // Deepgram keys son más largas
+    default:
+      return apiKey.length >= 10;
+  }
+}
+
 export function renderIaConfigForm(containerId) {
   let config = loadConfig();
   const container = document.getElementById(containerId);
+  
   if (!container) {
     console.error(`[iaConfigModule] No se encontró el contenedor '${containerId}'`);
-    document.body.insertAdjacentHTML("beforeend", `<div style='color:red'>[Error] No se encontró el contenedor '${containerId}'.</div>`);
+    const errorDiv = document.createElement('div');
+    errorDiv.style.cssText = 'color:red; padding:10px; border:1px solid red; margin:10px; border-radius:5px;';
+    errorDiv.innerHTML = `[Error] No se encontró el contenedor '${containerId}' para la configuración IA.`;
+    document.body.appendChild(errorDiv);
     return;
   }
 
   function maskApiKey(key) {
-    if (!key) return "";
-    if (key.length <= 8) return "*".repeat(key.length);
-    return `${key.substring(0, 3)}-****-${key.slice(-4)}`;
+    if (!key || key.trim() === '') return '';
+    if (key.length <= 8) return '*'.repeat(key.length);
+    return key.substring(0, 4) + '-****-' + key.slice(-4);
+  }
+
+  function showError(message) {
+    const existingError = container.querySelector('.config-error');
+    if (existingError) existingError.remove();
+    
+    const errorDiv = document.createElement('div');
+    errorDiv.className = 'config-error bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4';
+    errorDiv.innerHTML = `<i class="fas fa-exclamation-triangle mr-2"></i>${message}`;
+    container.insertBefore(errorDiv, container.firstChild);
+    
+    setTimeout(() => errorDiv.remove(), 5000);
   }
 
   container.innerHTML = `
     <div class="flex justify-between items-center mb-6 border-b pb-2 border-blue-100">
-      <h2 class="text-xl font-bold text-blue-700 flex items-center"><i class='fas fa-cogs mr-2'></i>Configurar Proveedores IA</h2>
-      <button id="btnCloseConfig" type="button" class="text-gray-500 hover:text-blue-600 text-2xl focus:outline-none" aria-label="Cerrar"><i class="fas fa-times"></i></button>
+      <h2 class="text-xl font-bold text-blue-700 flex items-center">
+        <i class='fas fa-cogs mr-2'></i>Configurar Proveedores IA
+      </h2>
+      <button id="btnCloseConfig" type="button" class="text-gray-500 hover:text-blue-600 text-2xl focus:outline-none" aria-label="Cerrar">
+        <i class="fas fa-times"></i>
+      </button>
     </div>
+
     <form id="iaConfigForm" class="space-y-6">
+      <!-- Sección LLM -->
       <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
-        <label class="block font-semibold text-blue-800 mb-2">Proveedor LLM</label>
-        <select id="llmProvider" class="w-full mb-3 p-2 rounded border border-gray-300 focus:ring-2 focus:ring-blue-300">${llmProviders.map(p => `<option value="${p.value}">${p.name}</option>`).join("")}</select>
+        <label class="block font-semibold text-blue-800 mb-2">
+          <i class="fas fa-brain mr-2"></i>Proveedor LLM
+        </label>
+        <select id="llmProvider" class="w-full mb-3 p-2 rounded border border-gray-300 focus:ring-2 focus:ring-blue-300">
+          ${llmProviders.map(p => `<option value="${p.value}">${p.name}</option>`).join('')}
+        </select>
         <div class="flex items-center mb-3">
-          <input type="password" id="llmApiKey" class="flex-1 p-2 rounded border border-gray-300 mr-2 bg-gray-100" placeholder="API Key LLM" autocomplete="off">
-          <button class="text-blue-700 hover:text-blue-900 px-3 py-2 rounded focus:outline-none border border-blue-200 bg-white" type="button" id="toggleLlmApiKey"><i class="fas fa-eye"></i></button>
+          <input type="password" id="llmApiKey" class="flex-1 p-2 rounded border border-gray-300 mr-2 focus:ring-2 focus:ring-blue-300" 
+                 placeholder="API Key LLM (requerida)" autocomplete="off">
+          <button class="text-blue-700 hover:text-blue-900 px-3 py-2 rounded focus:outline-none border border-blue-200 bg-white hover:bg-blue-50" 
+                  type="button" id="toggleLlmApiKey">
+            <i class="fas fa-eye"></i>
+          </button>
         </div>
         <select id="llmModel" class="w-full p-2 rounded border border-gray-300 focus:ring-2 focus:ring-blue-300"></select>
+        <div id="llmKeyStatus" class="text-xs mt-2 hidden"></div>
       </div>
+
+      <!-- Sección Transcripción -->
       <div class="bg-purple-50 p-4 rounded-lg border border-purple-100">
-        <label class="block font-semibold text-purple-800 mb-2">Proveedor Transcripción</label>
-        <select id="transProvider" class="w-full mb-3 p-2 rounded border border-gray-300 focus:ring-2 focus:ring-purple-300">${transcriptionProviders.map(p => `<option value="${p.value}">${p.name}</option>`).join("")}</select>
+        <label class="block font-semibold text-purple-800 mb-2">
+          <i class="fas fa-microphone mr-2"></i>Proveedor Transcripción
+        </label>
+        <select id="transProvider" class="w-full mb-3 p-2 rounded border border-gray-300 focus:ring-2 focus:ring-purple-300">
+          ${transcriptionProviders.map(p => `<option value="${p.value}">${p.name}</option>`).join('')}
+        </select>
         <div class="flex items-center mb-3">
-          <input type="password" id="transApiKey" class="flex-1 p-2 rounded border border-gray-300 mr-2 bg-gray-100" placeholder="API Key Transcripción" autocomplete="off">
-          <button class="text-purple-700 hover:text-purple-900 px-3 py-2 rounded focus:outline-none border border-purple-200 bg-white" type="button" id="toggleTransApiKey"><i class="fas fa-eye"></i></button>
+          <input type="password" id="transApiKey" class="flex-1 p-2 rounded border border-gray-300 mr-2 focus:ring-2 focus:ring-purple-300" 
+                 placeholder="API Key Transcripción (requerida)" autocomplete="off">
+          <button class="text-purple-700 hover:text-purple-900 px-3 py-2 rounded focus:outline-none border border-purple-200 bg-white hover:bg-purple-50" 
+                  type="button" id="toggleTransApiKey">
+            <i class="fas fa-eye"></i>
+          </button>
         </div>
         <select id="transModel" class="w-full p-2 rounded border border-gray-300 focus:ring-2 focus:ring-purple-300"></select>
+        <div id="transKeyStatus" class="text-xs mt-2 hidden"></div>
       </div>
-      <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg shadow transition-colors flex items-center justify-center text-lg"><i class="fas fa-save mr-2"></i>Guardar configuración</button>
-    </form>`;
-
-  const closeBtn = document.getElementById("btnCloseConfig");
-  if (closeBtn) {
-    closeBtn.addEventListener("click", () => document.getElementById("configModal")?.classList.remove("active"));
-  }
-
-  const llmProviderSelect = document.getElementById("llmProvider");
-  const llmModelSelect = document.getElementById("llmModel");
-  const llmApiKeyInput = document.getElementById("llmApiKey");
-  const transProviderSelect = document.getElementById("transProvider");
-  const transModelSelect = document.getElementById("transModel");
-  const transApiKeyInput = document.getElementById("transApiKey");
-
-  // Toggle visibilidad de API keys
-  document.getElementById("toggleLlmApiKey").addEventListener("click", () => { llmApiKeyInput.type = llmApiKeyInput.type === "password" ? "text" : "password"; });
-  document.getElementById("toggleTransApiKey").addEventListener("click", () => { transApiKeyInput.type = transApiKeyInput.type === "password" ? "text" : "password"; });
-
-  // MEJORA: Funciones de actualización de UI más seguras y claras.
-  // No modifican el objeto 'config' en memoria, solo leen de él.
-  function updateLlmUI() {
-    const selectedProvider = llmProviderSelect.value;
-    const providerObj = llmProviders.find(p => p.value === selectedProvider);
-    llmModelSelect.innerHTML = providerObj.models.map(m => `<option value="${m}">${m}</option>`).join("");
-
-    if (selectedProvider === config.llm.provider && providerObj.models.includes(config.llm.model)) {
-      llmModelSelect.value = config.llm.model;
+
+      <button type="submit" id="saveConfigBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg shadow transition-all duration-200 flex items-center justify-center text-lg">
+        <i class="fas fa-save mr-2"></i>Guardar configuración
+      </button>
+    </form>
+  `;
+
+  // Event listeners
+  const closeBtn = document.getElementById('btnCloseConfig');
+  closeBtn?.addEventListener('click', () => {
+    const modal = document.getElementById('configModal');
+    modal?.classList.remove('active');
+  });
+
+  // Valores iniciales
+  document.getElementById('llmProvider').value = config.llm.provider;
+  document.getElementById('llmApiKey').value = maskApiKey(config.llm.apiKeys[config.llm.provider] || '');
+  document.getElementById('transProvider').value = config.transcription.provider;
+  document.getElementById('transApiKey').value = maskApiKey(config.transcription.apiKeys[config.transcription.provider] || '');
+
+  // Toggle password visibility
+  document.getElementById('toggleLlmApiKey').addEventListener('click', () => {
+    const input = document.getElementById('llmApiKey');
+    const icon = document.querySelector('#toggleLlmApiKey i');
+    if (input.type === 'password') {
+      input.type = 'text';
+      icon.className = 'fas fa-eye-slash';
     } else {
-      llmModelSelect.value = providerObj.models[0];
+      input.type = 'password';
+      icon.className = 'fas fa-eye';
+    }
+  });
+
+  document.getElementById('toggleTransApiKey').addEventListener('click', () => {
+    const input = document.getElementById('transApiKey');
+    const icon = document.querySelector('#toggleTransApiKey i');
+    if (input.type === 'password') {
+      input.type = 'text';
+      icon.className = 'fas fa-eye-slash';
+    } else {
+      input.type = 'password';
+      icon.className = 'fas fa-eye';
+    }
+  });
+
+  function updateLlmModels() {
+    const provider = document.getElementById('llmProvider').value;
+    const providerObj = llmProviders.find(p => p.value === provider);
+    if (!providerObj) {
+      console.error('[iaConfigModule] Proveedor LLM no encontrado:', provider);
+      return;
+    }
+
+    const models = providerObj.models;
+    const modelSelect = document.getElementById('llmModel');
+    modelSelect.innerHTML = models.map(m => `<option value="${m}">${m}</option>`).join('');
+
+    // Seleccionar modelo actual o el primero si no es válido
+    const currentModel = config.llm.model;
+    if (models.includes(currentModel)) {
+      modelSelect.value = currentModel;
+    } else {
+      modelSelect.value = models[0];
+      config.llm.model = models[0];
     }
-    llmApiKeyInput.value = maskApiKey(config.llm.apiKeys[selectedProvider] || "");
   }
 
-  function updateTransUI() {
-    const selectedProvider = transProviderSelect.value;
-    const providerObj = transcriptionProviders.find(p => p.value === selectedProvider);
-    transModelSelect.innerHTML = providerObj.models.map(m => `<option value="${m}">${m}</option>`).join("");
-    transModelSelect.value = config.transcription.models[selectedProvider] || providerObj.models[0];
-    transApiKeyInput.value = maskApiKey(config.transcription.apiKeys[selectedProvider] || "");
+  function updateTransModels() {
+    const provider = document.getElementById('transProvider').value;
+    const providerObj = transcriptionProviders.find(p => p.value === provider);
+    if (!providerObj) {
+      console.error('[iaConfigModule] Proveedor de transcripción no encontrado:', provider);
+      return;
+    }
+
+    const models = providerObj.models;
+    const modelSelect = document.getElementById('transModel');
+    modelSelect.innerHTML = models.map(m => `<option value="${m}">${m}</option>`).join('');
+
+    // Seleccionar modelo actual o el primero
+    const currentModel = config.transcription.models[provider];
+    if (models.includes(currentModel)) {
+      modelSelect.value = currentModel;
+    } else {
+      modelSelect.value = models[0];
+    }
+
+    // Actualizar API key mostrada
+    const apiKey = config.transcription.apiKeys[provider] || '';
+    document.getElementById('transApiKey').value = maskApiKey(apiKey);
   }
 
-  // Asignar listeners y estado inicial
-  llmProviderSelect.addEventListener("change", updateLlmUI);
-  transProviderSelect.addEventListener("change", updateTransUI);
+  // Event listeners para cambios de proveedor
+  document.getElementById('llmProvider').addEventListener('change', () => {
+    const provider = document.getElementById('llmProvider').value;
+    updateLlmModels();
+    
+    // Mostrar la API key correspondiente
+    const apiKey = config.llm.apiKeys[provider] || '';
+    document.getElementById('llmApiKey').value = maskApiKey(apiKey);
+  });
 
-  llmProviderSelect.value = config.llm.provider;
-  transProviderSelect.value = config.transcription.provider;
-  updateLlmUI();
-  updateTransUI();
+  document.getElementById('transProvider').addEventListener('change', updateTransModels);
 
-  // MEJORA: La lógica de guardado es más limpia, construyendo nuevos objetos
-  // de configuración con el operador 'spread' para evitar mutaciones inesperadas.
-  document.getElementById("iaConfigForm").addEventListener("submit", e => {
-    e.preventDefault();
-    const prevConfig = config;
-    const newConfig = clone(prevConfig);
-
-    // Proceso para LLM
-    const llmProv = llmProviderSelect.value;
-    const rawLlmKey = llmApiKeyInput.value;
-    const oldLlmKey = prevConfig.llm.apiKeys[llmProv] || "";
-    const actualLlmKey = rawLlmKey === maskApiKey(oldLlmKey) ? oldLlmKey : rawLlmKey;
-
-    newConfig.llm = {
-      ...prevConfig.llm,
-      provider: llmProv,
-      model: llmModelSelect.value,
-      apiKeys: { ...prevConfig.llm.apiKeys, [llmProv]: actualLlmKey }
-    };
+  // Inicializar modelos
+  updateLlmModels();
+  updateTransModels();
 
-    // Proceso para Transcripción
-    const transProv = transProviderSelect.value;
-    const rawTransKey = transApiKeyInput.value;
-    const oldTransKey = prevConfig.transcription.apiKeys[transProv] || "";
-    const actualTransKey = rawTransKey === maskApiKey(oldTransKey) ? oldTransKey : rawTransKey;
-
-    newConfig.transcription = {
-      ...prevConfig.transcription,
-      provider: transProv,
-      models: { ...prevConfig.transcription.models, [transProv]: transModelSelect.value },
-      apiKeys: { ...prevConfig.transcription.apiKeys, [transProv]: actualTransKey }
-    };
+  // Validación en tiempo real
+  function validateKeyInput(inputId, provider, statusId) {
+    const input = document.getElementById(inputId);
+    const status = document.getElementById(statusId);
+    
+    input.addEventListener('input', () => {
+      const key = input.value.trim();
+      if (key === '' || key.includes('*')) {
+        status.classList.add('hidden');
+        return;
+      }
+      
+      const isValid = validateApiKey(provider, key);
+      status.classList.remove('hidden');
+      
+      if (isValid) {
+        status.className = 'text-xs mt-2 text-green-600';
+        status.innerHTML = '<i class="fas fa-check mr-1"></i>Formato válido';
+      } else {
+        status.className = 'text-xs mt-2 text-red-600';
+        status.innerHTML = '<i class="fas fa-exclamation-triangle mr-1"></i>Formato inválido';
+      }
+    });
+  }
 
-    // Guardar y notificar
-    saveConfig(newConfig);
-    config = newConfig; // Actualizar el estado en memoria
-    document.dispatchEvent(new CustomEvent("iaConfigChanged"));
-
-    // Actualizar UI post-guardado
-    llmApiKeyInput.value = maskApiKey(newConfig.llm.apiKeys[newConfig.llm.provider] || "");
-    transApiKeyInput.value = maskApiKey(newConfig.transcription.apiKeys[newConfig.transcription.provider] || "");
-    llmApiKeyInput.type = "password";
-    transApiKeyInput.type = "password";
-
-    const msg = document.getElementById('iaConfigSavedMsg') || document.createElement('div');
-    if (!msg.id) {
-      msg.id = 'iaConfigSavedMsg';
-      msg.className = 'fixed left-1/2 top-6 -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded shadow-lg text-lg z-50 transition-opacity duration-300';
-      msg.innerHTML = '<i class="fas fa-check-circle mr-2"></i>¡Configuración guardada!';
-      document.body.appendChild(msg);
-    }
+  // No podemos validar dinámicamente porque el provider puede cambiar
+  // Validaremos en el submit
+
+  // Submit form
+  document.getElementById('iaConfigForm').addEventListener('submit', (e) => {
+    e.preventDefault();
     
-    msg.style.opacity = '1';
-    msg.style.display = 'block';
-    setTimeout(() => { msg.style.opacity = '0'; }, 1600);
-    setTimeout(() => { if (msg.style.opacity === '0') msg.style.display = 'none'; }, 1900);
+    try {
+      const prevConfig = config;
+      const newConfig = clone(prevConfig);
+
+      // Procesar LLM
+      const llmProvider = document.getElementById('llmProvider').value;
+      const llmModelValue = document.getElementById('llmModel').value;
+      const rawLlmKey = document.getElementById('llmApiKey').value.trim();
+      
+      const oldLlmKey = prevConfig.llm.apiKeys[llmProvider] || '';
+      const newLlmKey = (rawLlmKey === maskApiKey(oldLlmKey)) ? oldLlmKey : rawLlmKey;
+
+      // Validar LLM API key
+      if (!newLlmKey || !validateApiKey(llmProvider, newLlmKey)) {
+        showError(`API Key de ${llmProvider.toUpperCase()} inválida o faltante`);
+        return;
+      }
+
+      newConfig.llm = {
+        provider: llmProvider,
+        model: llmModelValue,
+        apiKeys: { ...prevConfig.llm.apiKeys, [llmProvider]: newLlmKey }
+      };
+
+      // Procesar Transcripción
+      const transProvider = document.getElementById('transProvider').value;
+      const transModelValue = document.getElementById('transModel').value;
+      const rawTransKey = document.getElementById('transApiKey').value.trim();
+      
+      const oldTransKey = prevConfig.transcription.apiKeys[transProvider] || '';
+      const newTransKey = (rawTransKey === maskApiKey(oldTransKey)) ? oldTransKey : rawTransKey;
+
+      // Validar transcription API key
+      if (!newTransKey || !validateApiKey(transProvider, newTransKey)) {
+        showError(`API Key de ${transProvider === 'openai' ? 'OpenAI' : 'Deepgram'} inválida o faltante`);
+        return;
+      }
 
-    document.getElementById("configModal")?.classList.remove("active");
+      newConfig.transcription = {
+        provider: transProvider,
+        apiKeys: { ...prevConfig.transcription.apiKeys, [transProvider]: newTransKey },
+        models: { ...prevConfig.transcription.models, [transProvider]: transModelValue }
+      };
+
+      // Guardar configuración
+      if (!saveConfig(newConfig)) {
+        showError('Error guardando la configuración. Intente nuevamente.');
+        return;
+      }
+
+      config = newConfig;
+
+      // Disparar evento de cambio
+      document.dispatchEvent(new CustomEvent('iaConfigChanged', { detail: newConfig }));
+
+      // Actualizar campos con valores enmascarados
+      document.getElementById('llmApiKey').value = maskApiKey(newLlmKey);
+      document.getElementById('transApiKey').value = maskApiKey(newTransKey);
+      document.getElementById('llmApiKey').type = 'password';
+      document.getElementById('transApiKey').type = 'password';
+
+      // Resetear iconos de visibilidad
+      document.querySelector('#toggleLlmApiKey i').className = 'fas fa-eye';
+      document.querySelector('#toggleTransApiKey i').className = 'fas fa-eye';
+
+      // Mostrar mensaje de éxito
+      let successMsg = document.getElementById('iaConfigSavedMsg');
+      if (!successMsg) {
+        successMsg = document.createElement('div');
+        successMsg.id = 'iaConfigSavedMsg';
+        successMsg.className = 'fixed left-1/2 top-6 -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg text-lg z-50 transform transition-all duration-300';
+        successMsg.innerHTML = '<i class="fas fa-check-circle mr-2"></i>¡Configuración guardada correctamente!';
+        document.body.appendChild(successMsg);
+      } else {
+        successMsg.style.display = 'block';
+      }
+
+      setTimeout(() => {
+        if (successMsg) successMsg.style.display = 'none';
+      }, 3000);
+
+      // Cerrar modal
+      const modal = document.getElementById('configModal');
+      if (modal) {
+        modal.classList.remove('active');
+      }
+
+    } catch (error) {
+      console.error('[iaConfigModule] Error en submit:', error);
+      showError('Error inesperado guardando la configuración');
+    }
   });
 }