// All comments are in English.

let conversationId = null;
let conversations = [];

async function login() {
  window.location = "/login";
}

function toggleTheme() {
  document.body.classList.toggle("dark");
}

async function loadConversations() {
  const r = await fetch("/api/conversations");
  conversations = await r.json();
  renderTabs();
}

function renderTabs() {
  const tabs = document.getElementById("tabs");
  tabs.innerHTML = "";
  conversations.forEach(c => {
    const btn = document.createElement("button");
    btn.textContent = c.title;
    btn.onclick = () => selectConversation(c.id);
    tabs.appendChild(btn);
  });
}

async function newConversation() {
  const title = prompt("Conversation title:");
  const r = await fetch("/api/new_conversation", {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({title})
  });
  const data = await r.json();
  conversationId = data.conversation_id;
  await loadConversations();
  await loadHistory();
}

async function selectConversation(id) {
  conversationId = id;
  await loadHistory();
}

async function loadHistory() {
  const r = await fetch(`/api/history/${conversationId}`);
  const msgs = await r.json();
  const chat = document.getElementById("chat");
  chat.innerHTML = "";
  msgs.forEach(m => {
    const div = document.createElement("div");
    div.className = "msg " + m.role;
    div.innerHTML = `<div class="avatar">${m.role === "user" ? "🧑" : "🤖"}</div>
                     <div class="bubble">${m.content}</div>`;
    chat.appendChild(div);
  });

    
  // Load attachments
  const a = await fetch(`/api/attachments/${conversationId}`);
  const attachments = await a.json();

  attachments.forEach(att => {
    const div = document.createElement("div");
    div.className = "msg user";
    div.innerHTML = `
      <div class="avatar">🧑</div>
      <div class="bubble">
        <strong>Attachment:</strong> ${att.filename}<br>
        <a href="/api/download/${att.id}" target="_blank">Download</a>
      </div>
    `;
    chat.appendChild(div);
  });
}

async function sendMessage() {
  const promptText = document.getElementById("prompt").value;
  const file = document.getElementById("attachment").files[0];

  if (!conversationId) {
    await newConversation();
  }

  if (file) {
    const form = new FormData();
    form.append("file", file);
    await fetch(`/api/attachment/${conversationId}`, {
      method: "POST",
      body: form
    });
  }

  const chat = document.getElementById("chat");
  const userDiv = document.createElement("div");
  userDiv.className = "msg user";
  userDiv.innerHTML = `<div class="avatar">🧑</div>
                       <div class="bubble">${marked.parse(promptText)}</div>`;
  chat.appendChild(userDiv);

  const assistantDiv = document.createElement("div");
  assistantDiv.className = "msg assistant streaming";
  assistantDiv.innerHTML = `<div class="avatar">🤖</div>
                            <div class="bubble"><span id="stream-text"></span><span class="cursor">▌</span></div>`;
  chat.appendChild(assistantDiv);

  const url = `/api/stream?conversation_id=${conversationId}&model=llama3.2&prompt=${encodeURIComponent(promptText)}`;
  const evtSource = new EventSource(url);

  let buffer = "";
  const streamSpan = document.getElementById("stream-text");

  evtSource.onmessage = (event) => {
    const data = JSON.parse(event.data);
    buffer += data.token;
    streamSpan.innerHTML = marked.parse(buffer);
  };

  evtSource.onerror = () => {
    evtSource.close();
    assistantDiv.classList.remove("streaming");
  };
}

window.onload = loadConversations;