// JavaScript code will be added here
let accessToken = "";

function showSection(sectionId) {
  document
    .querySelectorAll(".container > div")
    .forEach((div) => (div.style.display = "none"));
  document.getElementById(sectionId).style.display = "block";
}

document
  .getElementById("loginLink")
  .addEventListener("click", () => showSection("loginForm"));
document
  .getElementById("registerLink")
  .addEventListener("click", () => showSection("registerForm"));
document
  .getElementById("uploadLink")
  .addEventListener("click", () => showSection("uploadForm"));
document
  .getElementById("chatLink")
  .addEventListener("click", () => showSection("chatSection"));
document
  .getElementById("historyLink")
  .addEventListener("click", () => showSection("historySection"));

async function register() {
  const username = document.getElementById("registerUsername").value;
  const password = document.getElementById("registerPassword").value;

  try {
    const response = await fetch("/register", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ username, password }),
    });

    const data = await response.json();
    alert(data.msg);
    if (response.ok) {
      showSection("loginForm");
    }
  } catch (error) {
    console.error("Error:", error);
    alert("An error occurred during registration");
  }
}

async function login() {
  const username = document.getElementById("loginUsername").value;
  const password = document.getElementById("loginPassword").value;

  try {
    const response = await fetch("/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ username, password }),
    });

    const data = await response.json();
    if (response.ok) {
      accessToken = data.access_token;
      alert("Login successful");
      showSection("uploadForm");
    } else {
      alert(data.msg);
    }
  } catch (error) {
    console.error("Error:", error);
    alert("An error occurred during login");
  }
}

async function uploadFile() {
  const fileInput = document.getElementById("fileUpload");
  const file = fileInput.files[0];
  if (!file) {
    alert("Please select a file");
    return;
  }

  const formData = new FormData();
  formData.append("file", file);

  try {
    const response = await fetch("/upload", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
      body: formData,
    });

    const data = await response.json();
    alert(data.msg);
    if (response.ok) {
      showSection("chatSection");
    }
  } catch (error) {
    console.error("Error:", error);
    alert("An error occurred during file upload");
  }
}

async function sendMessage() {
  const chatInput = document.getElementById("chatInput");
  const query = chatInput.value;
  if (!query) return;

  try {
    const response = await fetch("/chat", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${accessToken}`,
      },
      body: JSON.stringify({ query }),
    });

    const data = await response.json();
    if (response.ok) {
      displayMessage(query, "user");
      displayMessage(data.response, "assistant");
      chatInput.value = "";
    } else {
      alert(data.msg);
    }
  } catch (error) {
    console.error("Error:", error);
    alert("An error occurred during chat");
  }
}

function displayMessage(message, sender) {
  const chatHistory = document.getElementById("chatHistory");
  const messageElement = document.createElement("div");
  messageElement.classList.add("chat-message", `${sender}-message`);
  messageElement.textContent = message;
  chatHistory.appendChild(messageElement);
  chatHistory.scrollTop = chatHistory.scrollHeight;
}

async function loadChatHistory() {
  try {
    const response = await fetch("/history", {
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    });

    const data = await response.json();
    if (response.ok) {
      const historyList = document.getElementById("chatHistoryList");
      historyList.innerHTML = "";
      data.history.forEach((entry) => {
        const historyItem = document.createElement("div");
        /*historyItem.innerHTML = `
                            <p><strong>User:</strong> ${entry.message}</p>
                            <p><strong>Assistant:</strong> ${entry.response}</p>
                            <p><small>${new Date(
                              entry.timestamp
                            ).toLocaleString()}</small></p>
                            <hr>
                        `; */
        historyItem.innerHTML = `<div class="chat-history-interaction">
                          <div><p class="user-msg">${entry.message}</p></div>
                          <div><p class="chatbot-msg">${
                            entry.response
                          }</p></div>
                          <div><p class="timestamp-msg">${new Date(
                            entry.timestamp
                          ).toLocaleString()}</p></div>
                        </div>`;
        historyList.appendChild(historyItem);
      });
    } else {
      alert(data.msg);
    }
  } catch (error) {
    console.error("Error:", error);
    alert("An error occurred while loading chat history");
  }
}

document
  .getElementById("historyLink")
  .addEventListener("click", loadChatHistory);