import { createHUDPanel } from "./hud-panels.js";

const LEGEND_MODES = {
  cables:         { title: "海缆" },
  satellites:     { title: "卫星" },
  countryBoundaries: { title: "国界" },
  computeCenters: { title: "算力" },
  vessels:        { title: "船只" },
  bgp:            { title: "BGP" },
};

let currentLegendMode = "cables";
let legendPanel = null;
let legendItemsByMode = {
  cables: [],
  satellites: [],
  countryBoundaries: [],
  computeCenters: [],
  vessels: [],
  bgp: [],
};

export function initLegend() {
  const collapseBtn = document.getElementById("legend-collapse");
  const legend = document.getElementById("legend");
  if (collapseBtn && legend) {
    legendPanel = createHUDPanel({
      panel: legend,
      header: ".legend-bar",
      body: "#legend-body",
      collapseBtn,
      preferredDirection: "down",
      expandLabel: "展开图例",
      collapseLabel: "折叠图例",
    });

    collapseBtn.addEventListener("click", (e) => {
      e.stopPropagation();
      legendPanel?.setCollapsed(!(legendPanel?.isCollapsed() ?? false));
    });
  }

  syncCurrentLabel(currentLegendMode);
  renderLegend(currentLegendMode);
}

export function setLegendMode(mode) {
  const nextMode = LEGEND_MODES[mode] ? mode : "cables";
  currentLegendMode = nextMode;
  syncCurrentLabel(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 syncCurrentLabel(mode) {
  const nextLabel = LEGEND_MODES[mode]?.title || LEGEND_MODES.cables.title;
  [document.getElementById("legend-current-label"), document.getElementById("mobile-situation-legend-mode")]
    .forEach((labelEl) => {
      if (labelEl) {
        labelEl.textContent = nextLabel;
      }
    });
}

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

  const desktopList = document.querySelector("#legend .legend-list");
  if (desktopList) {
    desktopList.innerHTML = html;
  }

  const mobileList = document.getElementById("mobile-situation-legend-list");
  if (mobileList) {
    mobileList.innerHTML = html;
  }
}