/* =============================================================================
 * B05_Profile_UI_Panel_Plan.ts
 * 종단 보기 왼쪽 「위치」 · 「그리기」 칸 자리(PLAN 635-3 · 요구 546) — 예정노선 키트(`createPlanKit` 「b05」) 칸을 앉힘.
 *   칸은 페이지가 먼저 세우고 편집기는 노선을 읽은 뒤 섬 → 칸 = 빈 자리(order 1 · 2) · 편집기가 `fillPlanPanel` 로 채움.
 *   늦게 온 쪽이 붙임 · 새 칸 자리(페이지 다시 세움) = 떠난 편집기 칸(문서 밖) 버림 · 비면 자리 숨김.
 * ========================================================================== */

import { registerPanelSection } from "../A00_Common/design/design_panel";

type Slot = "site" | "draw";
const holders: Partial<Record<Slot, HTMLElement>> = {};
const cards: Partial<Record<Slot, HTMLElement | null>> = {};

const attach = (slot: Slot): void => {
  const holder = holders[slot];
  if (!holder) return;
  const card = cards[slot];
  holder.replaceChildren(...(card ? [card] : []));
  holder.hidden = !card;
};

for (const [slot, order, title] of [
  ["site", 1, "위치"],
  ["draw", 2, "그리기"],
] as const)
  registerPanelSection({
    id: `plan-${slot}`,
    title,
    views: ["profile"],
    order,
    build: () => {
      const holder = document.createElement("div");
      holder.className = "b05-route__plan-slot";
      holders[slot] = holder;
      if (!cards[slot]?.isConnected) cards[slot] = null; // 떠난 편집기 칸
      attach(slot);
      return holder;
    },
  });

/** 키트 칸을 앉힘(새 편집기가 갈음). */
export function fillPlanPanel(next: Record<Slot, HTMLElement | null>): void {
  for (const slot of ["site", "draw"] as const) {
    cards[slot] = next[slot];
    attach(slot);
  }
}