const LEGEND_MODES = {
  cables:     { title: "海缆" },
  satellites: { title: "卫星" },
  bgp:        { title: "BGP" },
};

let currentLegendMode = "cables";
let legendItemsByMode = {
  cables: [],
  satellites: [],
  bgp: [],
};

export function initLegend() {
  // Tab click → switch mode
  const tabsEl = document.getElementById("legend-tabs");
  if (tabsEl) {
    tabsEl.addEventListener("click", (e) => {
      const btn = e.target.closest(".legend-tab");
      if (!btn) return;
      const mode = btn.dataset.legendMode;
      if (mode) setLegendMode(mode);
    });
  }

  // Collapse toggle
  const collapseBtn = document.getElementById("legend-collapse");
  const legend = document.getElementById("legend");
  if (collapseBtn && legend) {
    collapseBtn.addEventListener("click", (e) => {
      e.stopPropagation();
      legend.classList.toggle("legend--collapsed");
    });
  }

  renderLegend(currentLegendMode);
}

export function setLegendMode(mode) {
  const nextMode = LEGEND_MODES[mode] ? mode : "cables";
  currentLegendMode = nextMode;
  syncTabs(nextMode);
  renderLegend(nextMode);
}

export function getLegendMode() {
  return currentLegendMode;
}

export function refreshLegend() {
  renderLegend(currentLegendMode);
}

export function setLegendItems(mode, items) {
  if (!LEGEND_MODES[mode]) return;
  legendItemsByMode[mode] = Array.isArray(items) ? items : [];
  if (mode === currentLegendMode) {
    renderLegend(currentLegendMode);
  }
}

function syncTabs(mode) {
  const tabs = document.querySelectorAll("#legend-tabs .legend-tab");
  tabs.forEach((tab) => {
    tab.classList.toggle("legend-tab--active", tab.dataset.legendMode === mode);
  });
}

function renderLegend(mode) {
  const listEl = document.querySelector("#legend .legend-list");
  if (!listEl) return;

  const items = legendItemsByMode[mode] || [];
  listEl.innerHTML = items
    .map(
      (item) => `
        <div class="legend-item">
          <span class="legend-dot" style="background:${item.color}"></span>
          <span class="legend-label">${item.label}</span>
        </div>`,
    )
    .join("");
}