import { ROUTES } from "@config/config_frontend";
import { currentQuery } from "../A00_Common/router";

/** 좌측 패널 항목 하나 — 누르면 우측 상세에 `build()` 결과만 보임 */
export interface PanelItem {
  key: string;
  label: string;
  build: () => HTMLElement[];
}

/** 해시 `?tab=` 에 남은 항목 — 없거나 이 권한에 없는 항목이면 첫 항목 */
export function pickActiveKey(items: readonly PanelItem[]): string {
  const saved = currentQuery().get("tab");
  return items.find((item) => item.key === saved)?.key ?? items[0].key;
}

/** 고른 항목을 해시에 남김 — hashchange 를 일으키지 않음(다시 그리면 같은 항목으로 돌아옴) */
export function rememberActiveKey(key: string): void {
  history.replaceState(null, "", `#/${ROUTES.B01_ACCOUNT}?tab=${encodeURIComponent(key)}`);
}

/** B 그룹 공용 좌측 패널 목록 모양(`ui-sidebar-*`) — 줄 하나 = 항목 하나 */
export function buildSidePanel(
  items: readonly PanelItem[],
  activeKey: string,
  onPick: (key: string) => void,
): { root: HTMLElement; setActive: (key: string) => void } {
  const list = document.createElement("div");
  list.className = "ui-sidebar-list b01-dashboard__panel-list";
  const rows = new Map<string, HTMLButtonElement>();
  for (const item of items) {
    const row = document.createElement("button");
    row.type = "button";
    row.className = "ui-sidebar-row b01-dashboard__panel-row";
    row.textContent = item.label;
    row.addEventListener("click", () => onPick(item.key));
    rows.set(item.key, row);
    list.append(row);
  }
  const setActive = (key: string): void =>
    rows.forEach((row, rowKey) => row.classList.toggle("is-active", rowKey === key));
  setActive(activeKey);
  const root = document.createElement("div");
  root.className = "ui-sidebar-panel b01-dashboard__panel";
  root.append(list);
  return { root, setActive };
}