const LEGEND_MODES = {
  cables: {
    title: "线缆图例",
    items: [
      { color: "#ff4444", label: "Americas II" },
      { color: "#44ff44", label: "AU Aleutian A" },
      { color: "#4444ff", label: "AU Aleutian B" },
      { color: "#ffff44", label: "其他电缆" },
    ],
  },
  satellites: {
    title: "卫星图例",
    items: [
      { color: "#4db8ff", label: "卫星本体" },
      { color: "#9be7ff", label: "卫星轨迹" },
      { color: "#7dffb3", label: "悬停高亮" },
      { color: "#ffd166", label: "选中目标" },
    ],
  },
};

let currentLegendMode = "cables";

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

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

export function getLegendMode() {
  return currentLegendMode;
}

function renderLegend(mode) {
  const legend = document.getElementById("legend");
  if (!legend) return;

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

  legend.innerHTML = `
    <h3 class="legend-title">${config.title}</h3>
    <div class="legend-list">${itemsHtml}</div>
  `;
}