// === Global Model List ===
const MODEL_LIST = [
  { id: "deepseek/deepseek-chat-v3-0324:free", name: "DeepSeek Chat v3" },
  { id: "google/gemini-2.0-flash-exp:free", name: "Gemini 2.0 Flash" },
  { id: "meta-llama/llama-4-maverick:free", name: "LLaMA 4 Maverick" },
  { id: "microsoft/mai-ds-r1:free", name: "MAI DS R1" },
  { id: "meta-llama/llama-4-scout:free", name: "LLaMA 4 Scout" },
  { id: "google/gemma-3-27b-it:free", name: "Gemma 3 27B" },
  { id: "qwen/qwq-32b:free", name: "Qwen QWQ 32B" },
  { id: "qwen/qwen2.5-vl-72b-instruct:free", name: "Qwen2.5 VL 72B" },
  { id: "qwen/qwen-2.5-72b-instruct:free", name: "Qwen 2.5 72B" },
  { id: "google/gemini-2.5-pro-exp-03-25:free", name: "Gemini 2.5 Pro" },
  { id: "deepseek/deepseek-r1:free", name: "DeepSeek R1" }
];

// === Create Custom Dropdowns ===
function createDropdown(dropdownId) {
  const dropdown = document.getElementById(dropdownId);
  const selected = dropdown.querySelector(".selected");
  const options = dropdown.querySelector(".options");
  const label = dropdown.parentElement.querySelector(".model-label");
  const nameDisplay = dropdown.parentElement.querySelector(".model-name");

  MODEL_LIST.forEach(model => {
    const option = document.createElement("div");
    option.className = "p-2 hover:bg-visual_green rounded cursor-pointer";
    option.textContent = model.name;
    option.dataset.value = model.id;
    options.appendChild(option);

    option.addEventListener("click", (e) => {
      e.stopPropagation();
      selected.textContent = model.name;
      dropdown.dataset.value = model.id;
      nameDisplay.textContent = model.name;
      options.classList.add("hidden");
    });
  });

  selected.addEventListener("click", (e) => {
    e.stopPropagation();
    options.classList.toggle("hidden");
  });

  document.addEventListener("click", () => {
    options.classList.add("hidden");
  });
}

// === Theme, Config and Docs Buttons ===
const themeToggle = document.getElementById("themeToggle");
const toggleConfig = document.getElementById("toggleConfig");
const docsButton = document.getElementById("docsButton");
const configPanel = document.getElementById("configPanel");
const html = document.documentElement;

function setInitialTheme() {
  const savedTheme = localStorage.getItem("theme");
  if (savedTheme === "dark") {
    html.classList.add("dark");
    themeToggle.textContent = "🌙";
  } else if (savedTheme === "light") {
    html.classList.remove("dark");
    themeToggle.textContent = "☀️";
  } else {
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
    if (prefersDark) {
      html.classList.add("dark");
      themeToggle.textContent = "🌙";
    } else {
      html.classList.remove("dark");
      themeToggle.textContent = "☀️";
    }
  }
}

setInitialTheme();

themeToggle.addEventListener("click", () => {
  const isDark = html.classList.toggle("dark");
  localStorage.setItem("theme", isDark ? "dark" : "light");
  themeToggle.textContent = isDark ? "🌙" : "☀️";
});

toggleConfig.addEventListener("click", () => {
  if (configPanel.classList.contains("minimal")) {
    configPanel.classList.remove("minimal");
    configPanel.classList.add("expanded");
  } else if (configPanel.classList.contains("expanded")) {
    configPanel.classList.remove("expanded");
    configPanel.classList.add("minimal");
  } else {
    configPanel.classList.add("expanded");
    configPanel.classList.remove("hidden");
  }
});

docsButton.addEventListener("click", () => {
  window.location.href = "/docs";
});

// === Per-model Loader Control ===
function showLoader(id) {
  const loader = document.getElementById(`loader${id}`);
  loader.classList.remove("hidden");
  loader.innerHTML = `
    <div class="dot bg-aqua"></div>
    <div class="dot bg-aqua animation-delay-150"></div>
    <div class="dot bg-aqua animation-delay-300"></div>
  `;
}

function hideLoader(id) {
  const loader = document.getElementById(`loader${id}`);
  loader.classList.add("hidden");
  loader.innerHTML = "";
}

// === Chat Handling ===
const chatForm = document.getElementById("chatForm");
const userInput = document.getElementById("userInput");
const chatContainer = document.getElementById("chatContainer");

createDropdown("modelA");
createDropdown("modelB");
createDropdown("modelC");
createDropdown("aggregator");

function appendMessage(role, text) {
  const div = document.createElement("div");
  div.className = `p-3 rounded shadow max-w-2xl ${role === "user" ? "bg-blue text-fg0 self-end" : "bg-green text-fg0 self-start"}`;
  div.innerText = text;
  chatContainer.appendChild(div);
  chatContainer.scrollTop = chatContainer.scrollHeight;
}

chatForm.addEventListener("submit", async (e) => {
  e.preventDefault();
  const prompt = userInput.value.trim();
  if (!prompt) return;

  appendMessage("user", prompt);
  userInput.value = "";

  configPanel.classList.remove("expanded");
  configPanel.classList.add("minimal");

  const selections = {
    "LLM-A": document.getElementById("modelA").dataset.value,
    "LLM-B": document.getElementById("modelB").dataset.value,
    "LLM-C": document.getElementById("modelC").dataset.value,
    "LLM-D": document.getElementById("aggregator").dataset.value
  };

  for (const key of Object.keys(selections)) {
    if (selections[key]) showLoader(key.slice(-1)); // showLoader("A", "B", ...)
  }

  const settings = {
    models: {
      "LLM-A": selections["LLM-A"],
      "LLM-B": selections["LLM-B"],
      "LLM-C": selections["LLM-C"]
    },
    aggregator: selections["LLM-D"]
  };

  const response = await fetch("/chat", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ prompt, settings })
  });

  if (response.ok) {
    const data = await response.json();
    appendMessage("bot", data.response);

    // Simulated per-model delay (optional)
    for (const key of Object.keys(selections)) {
      hideLoader(key.slice(-1));
    }
  } else {
    for (const key of Object.keys(selections)) {
      hideLoader(key.slice(-1));
    }
    appendMessage("bot", "An error occurred. Please check your model selections.");
  }
});