const apiKey = "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";
const model = "llama-3.1-70b-versatile";

document.addEventListener("DOMContentLoaded", () => {
  const chatArea = document.getElementById("chat-area");
  const chatInput = document.getElementById("chatInput");
  const sendBtn = document.getElementById("sendChatButton");

  // Función para enviar mensajes a la API
  async function sendMessage(message) {
    if (!message.trim()) return; // Evitar enviar mensajes vacíos

    addMessage(message, "user"); // Mostrar mensaje del usuario

    try {
      const response = await fetch("https://api.groq.com/openai/v1/chat/completions", {
        method: "POST",
        headers: {
          Authorization: `Bearer ${apiKey}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          messages: [{ role: "user", content: message }],
          model: model,
        }),
      });

      if (response.ok) {
        const data = await response.json();
        const botReply = data.choices?.[0]?.message?.content || "No tengo una respuesta para eso.";
        addMessage(botReply, "bot"); // Mostrar respuesta del bot
      } else {
        console.error("Error de la API:", response.statusText);
        addMessage("Error al obtener respuesta del asistente.", "bot");
      }
    } catch (error) {
      console.error("Error durante la solicitud:", error);
      addMessage("Hubo un problema al conectar con el servidor.", "bot");
    }
  }

  // Función para agregar mensajes al área del chat
  function addMessage(text, sender) {
    const message = document.createElement("div");
    message.classList.add("message", sender);

    if (sender === "bot") {
      message.innerHTML = `
        <div class="bot-container">
          <div class="bot-icon">
            <img src="etoolsiconchat.ico" alt="Ícono del bot" width="40" height="40">
          </div>
          <div class="bot-message">
            ${text}
          </div>
        </div>
      `;
    } else {
      message.textContent = text; // Mensaje del usuario
    }

    chatArea.appendChild(message);
    chatArea.scrollTop = chatArea.scrollHeight; // Scroll automático
  }

  // Evento al presionar el botón "Enviar"
  sendBtn.addEventListener("click", () => {
    const message = chatInput.value;
    chatInput.value = ""; // Limpiar el campo de texto
    sendMessage(message);
  });

  // Evento al presionar Enter
  chatInput.addEventListener("keypress", (event) => {
    if (event.key === "Enter") {
      const message = chatInput.value;
      chatInput.value = ""; // Limpiar el campo de texto
      sendMessage(message);
    }
  });
});