import { initializeRuntime, onAccessChange } from "./core/runtime.js";
import { closeKeyDrawer, initializeKeys, loadKeys } from "./features/keys.js";
import { initializePricing, loadPricing } from "./features/pricing.js";
import { activateUsage, initializeUsage, refreshVisibleUsage, resetUsage } from "./features/usage.js";
import { loadEvents } from "./features/logs.js";

const loaders = Object.freeze({ stats: loadKeys, usage: activateUsage, pricing: loadPricing, logs: loadEvents, users: loadKeys });

initializeKeys();
initializeUsage();
initializePricing();
initializeRuntime(reloadCurrentView);
onAccessChange(authorized => {
  if (!authorized && document.querySelector(".nav-button.active")?.dataset.view === "users") setView("stats");
});

document.querySelectorAll(".nav-button").forEach(button => {
  button.addEventListener("click", () => setView(button.dataset.view));
});
document.addEventListener("visibilitychange", refreshVisibleUsage);
setInterval(refreshVisibleUsage, 3000);

setView(sessionStorage.getItem("billing:active-view") || "stats");

function setView(view) {
  if (view === "keys" || !loaders[view]) view = "stats";
  if (view === "users" && document.body.classList.contains("read-only")) view = "stats";
  document.querySelectorAll(".nav-button").forEach(button => button.classList.toggle("active", button.dataset.view === view));
  document.querySelectorAll(".view").forEach(panel => panel.classList.toggle("active", panel.id === "view-" + view));
  try {
    sessionStorage.setItem("billing:active-view", view);
  } catch (_) {}
  loaders[view]?.();
}

function reloadCurrentView() {
  closeKeyDrawer();
  const active = document.querySelector(".nav-button.active")?.dataset.view || "stats";
  if (active === "usage") resetUsage();
  else loaders[active]?.();
}