document.addEventListener('DOMContentLoaded', () => {
  // Initialize UI
  updateAIStatus();
  
  // Handle prompt submission on Enter key
  document.getElementById('promptInput').addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
      sendPrompt();
    }
  });
});

async function sendPrompt() {
  const input = document.getElementById('promptInput');
  const preview = document.getElementById('previewBox');
  
  if (!input.value.trim()) {
    preview.innerHTML = '<div class="text-red-400">Veuillez entrer un prompt valide</div>';
    return;
  }
  
  // Show loading state
  preview.innerHTML = `
    <div class="flex flex-col items-center justify-center h-full">
      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mb-2"></div>
      <p>Génération en cours...</p>
    </div>
  `;
  try {
    const result = await callAI(input.value);
    const formattedText = result.text.replace(/\n/g, '<br>');
    if (result.status === "offline") {
      preview.innerHTML = `
        <div class="bg-gray-700 p-4 rounded-lg">
          <h4 class="font-medium text-red-400 mb-2 flex items-center">
            <i data-feather="alert-triangle" class="mr-2"></i>
            Ollama non détecté
          </h4>
          <div class="text-sm space-y-2">
            ${formattedText}
          </div>
          <button 
            onclick="showSettings()"
            class="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm transition-colors"
          >
            <i data-feather="settings" class="w-4 h-4 mr-2"></i>
            Configurer Ollama
          </button>
        </div>
      `;
    } else {
      preview.innerHTML = `
        <div class="ai-output">
          ${formattedText}
        </div>
      `;
    }
// Clear input
    input.value = '';
  } catch (error) {
    preview.innerHTML = `
      <div class="text-red-400">
        <i data-feather="alert-circle"></i> Erreur: ${error.message}
      </div>
    `;
    feather.replace();
  }
}
function updateAIStatus() {
  const statusElement = document.getElementById('aiStatus');
  if (APP_CONFIG.aiMode === 'demo') {
    statusElement.textContent = 'Mode démonstration';
    statusElement.classList.add('text-yellow-400');
    statusElement.classList.remove('text-green-400');
  } else {
    statusElement.textContent = `Connecté à Ollama (${APP_CONFIG.ollama.defaultModel})`;
    statusElement.classList.add('text-green-400');
    statusElement.classList.remove('text-yellow-400');
  }
}

function showSettings() {
  const modal = document.getElementById('settingsModal');
  document.getElementById('ollamaUrl').value = APP_CONFIG.ollama.baseUrl;
  document.getElementById('ollamaModel').value = APP_CONFIG.ollama.defaultModel;
  modal.classList.remove('hidden');
  feather.replace();
}

function hideSettings() {
  document.getElementById('settingsModal').classList.add('hidden');
}

async function testOllamaConnection() {
  const url = document.getElementById('ollamaUrl').value;
  try {
    const response = await fetch(`${url}/api/tags`, {
      headers: {
        "Authorization": `Bearer ${APP_CONFIG.ollama.apiKey}`
      }
    });
if (!response.ok) throw new Error('Connection failed');
    alert('Connexion réussie à Ollama!');
  } catch (error) {
    alert(`Erreur de connexion: ${error.message}`);
  }
}

function saveOllamaSettings() {
  APP_CONFIG.ollama.baseUrl = document.getElementById('ollamaUrl').value;
  APP_CONFIG.ollama.defaultModel = document.getElementById('ollamaModel').value;
  APP_CONFIG.aiMode = 'ollama';
  updateAIStatus();
  hideSettings();
  localStorage.setItem('ollamaConfig', JSON.stringify(APP_CONFIG.ollama));
}