import { loadDashboard } from "./dashboard.js";
import { loadSettings } from "./settings.js";
import { loadCommands } from "./commands.js";
import { renderHeader } from "./header.js";
import { renderNav } from "./nav.js";
import { apiFetch } from "../api.js";

let currentSection = "dashboard"; // Локальная переменная в модуле

export async function initRouter() {
  const app = document.getElementById("app");
  app.innerHTML = "";

  // Загрузка header и nav
  const headerHtml = await fetch("components/header.html").then((res) =>
    res.text()
  );
  app.insertAdjacentHTML("beforeend", headerHtml);
  renderHeader(1000); // Начальное значение до получения настроек

  const navHtml = await fetch("components/nav.html").then((res) => res.text());
  app.insertAdjacentHTML("beforeend", navHtml);
  renderNav(currentSection);

  // Основной контейнер
  app.insertAdjacentHTML(
    "beforeend",
    '<div class="main-container"><div id="main-params" class="main-params"></div><div id="content" class="content"></div></div><footer id="footer"></footer>'
  );

  // Загрузка main-params
  const mainParamsHtml = await fetch("pages/main-params.html").then((res) =>
    res.text()
  );
  document.getElementById("main-params").innerHTML = mainParamsHtml;

  // Футер
  updateFooter();

  // Навигация
  document.querySelectorAll("nav button").forEach((btn) => {
    btn.addEventListener("click", () => {
      currentSection = btn.dataset.section;
      renderNav(currentSection); // Обновляем навигацию
      loadSection();
    });
  });

  // Обработка события обновления хедера
  window.addEventListener("updateHeader", (event) => {
    renderHeader(event.detail); // Обновляем хедер с полученным pollingIntervalMs
  });

  loadSection();
}

async function loadSection() {
  switch (currentSection) {
    case "dashboard":
      loadDashboard();
      break;
    case "settings":
      loadSettings();
      break;
    case "commands":
      loadCommands();
      break;
  }
}

async function updateFooter() {
  const phrases = await apiFetch("/dashboard/recent-phrases?limit=5");
  const footer = document.getElementById("footer");
  footer.innerHTML =
    '== RECENT PHRASES ==<div class="phrases">' +
    phrases.map((p) => `<p>${p.text}</p>`).join("") +
    "</div>";
}