const messagesEl = document.getElementById("messages");
const inputEl = document.getElementById("input");
const sendBtn = document.getElementById("send");
const quickActionsEl = document.getElementById("quick-actions");

function addMessage(role, text) {
  const div = document.createElement("div");
  div.className = "message " + role;
  div.innerText = text;
  messagesEl.appendChild(div);
  messagesEl.scrollTop = messagesEl.scrollHeight;
}

async function sendMessage(text) {
  const res = await fetch("http://localhost:5000/api/conversation", {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({message: text})
  });

  const data = await res.json();

  addMessage("assistant", data.reply);

  renderQuickActions(data.quick_actions);
  renderSuggestions(data.suggestions);
}

function renderQuickActions(actions) {
  quickActionsEl.innerHTML = "";
  actions.forEach(a => {
    const btn = document.createElement("button");
    btn.innerText = a.label;
    btn.onclick = () => handleQuickAction(a);
    quickActionsEl.appendChild(btn);
  });
}

function renderSuggestions(suggestions) {
  if (!suggestions || !suggestions.length) return;
  suggestions.forEach(s => addMessage("assistant", "Sugestão: " + s));
}

function handleQuickAction(action) {
  addMessage("user", `[Ação rápida] ${action.label}`);
  sendMessage(action.label);
}

sendBtn.onclick = () => {
  const text = inputEl.value.trim();
  if (!text) return;
  addMessage("user", text);
  inputEl.value = "";
  sendMessage(text);
};

window.onload = () => {
  addMessage("assistant",
    "{user.name}, como você quer trabalhar hoje?\n\n" +
    "- Modo Advogado\n- Modo Corporativo\n- Apenas Conversar\n\n" +
    "Me diga qual modo você prefere agora."
  );
};