// JavaScript code
let accessToken = "";
console.log(accessToken)

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

// Show default section on page load
document.addEventListener("DOMContentLoaded", () => {
  showSection("defaultSection");
});

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");
  loadChatHistory();
});
document
  .getElementById("instituitionLink")
  .addEventListener("click", () => showSection("historyByInstituteSection"));



function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

// Extract JWT token from cookie and store it in accessToken
accessToken = getCookie('jwt_token');

console.log(accessToken);

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

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

    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;
      console.log(accessToken);
      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 loadChatHistoryByInstitute() {
  const institute = document.getElementById("instituteInput").value;
  if (!institute) {
    alert("Please enter an institute");
    return;
  }

  try {
    const response = await fetch(
      `/history_by_institute?institute=${encodeURIComponent(institute)}`,
      {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      }
    );

    const data = await response.json();
    if (response.ok) {
      const historyList = document.getElementById("chatHistoryByInstituteList");
      historyList.innerHTML = "";
      data.history.forEach((entry) => {
        const historyItem = document.createElement("div");
        historyItem.innerHTML = `
          <div class="chat-history-interaction">
            <div><p class="username-msg"><strong>${
              entry.username
            }</strong></p></div>
            <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 by institute");
  }
}
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 = `
          <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");
  }
}

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

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

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

function displayHistoryMessage(message, sender) {
  const chatHistoryList = document.getElementById("chatHistoryList");
  const messageElement = document.createElement("div");
  messageElement.classList.add("chat-history-interaction");
  messageElement.innerHTML = `
    <div><p class="${sender}-msg">${message}</p></div>
    <div><p class="timestamp-msg">${new Date().toLocaleString()}</p></div>
  `;
  chatHistoryList.appendChild(messageElement);
  chatHistoryList.scrollTop = chatHistoryList.scrollHeight;
}

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