import { el } from "./dom.js";
import { loadSegmentsConfig } from "./segments-config.js";
import { loadStations } from "./stations.js";
import {
  bindPlatformConfigEvents,
  initPlatformConfigUi,
  loadPlatformConfig,
} from "./platform/platform-config.js";
import { startLogs, stopLogs } from "./platform/log-stream.js";

const VIEWS = ["monitor", "config", "platform"];
const TAB_IDS = { monitor: "tabMonitor", config: "tabConfig", platform: "tabPlatform" };

let configLoaded = false;
let platformLoaded = false;

function show(viewName) {
  VIEWS.forEach((name) => {
    const view = document.querySelector(`[data-view='${name}']`);
    if (view) view.classList.toggle("hidden", name !== viewName);
    const tab = el(TAB_IDS[name]);
    if (tab) tab.classList.toggle("active", name === viewName);
  });

  if (viewName === "config" && !configLoaded) {
    configLoaded = true;
    Promise.allSettled([loadStations(), loadSegmentsConfig()]);
  }

  // Real-time log stream only runs while the platform-config view is visible.
  if (viewName === "platform") {
    startLogs();
    if (!platformLoaded) {
      platformLoaded = true;
      loadPlatformConfig().catch(() => {});
    }
  } else {
    stopLogs();
  }
}

export function bindViewTabs() {
  VIEWS.forEach((name) => {
    const tab = el(TAB_IDS[name]);
    if (tab) tab.addEventListener("click", () => show(name));
  });
  // Platform-config listeners/UI bind once; data loads lazily on first view.
  bindPlatformConfigEvents();
  initPlatformConfigUi();
  show("monitor");
}