/* =============================================================================
 * B05_Profile_UI_Panel_Route.ts
 * 좌측 패널의 **노선 쪽 칸 재료** — 계획노선 편집 단추 · 선택 포인트 상세. 칸 틀은
 * `B05_Profile_UI_Panel_Sections.ts` 가 씌운다(등록부). 「경로 계산 설정」은 `Old/` 로 옮김(54-24).
 * `B05_Profile_UI_Panel.ts` 에서 떼어냈다(계획서 24-2b). 본문 로직과 수치는 그대로다.
 * ========================================================================== */

import type { PlacedRoutePoint } from "./B05_Profile_UI_Markers";
import { button, numberField } from "./B05_Profile_UI_Panel_Fields";

export interface RoutePartCallbacks {
  /** [계획노선 편집] — 큰 모달을 열어 노선을 고친다(계산은 모달 [확인]에서만 돈다). */
  onEditPlannedRoute: () => void;
  onMovePoint: () => void;
  onDeletePoint: () => void;
  onRadiusChange: (radius: number) => void;
}

export function createRoutePart(callbacks: RoutePartCallbacks) {
  // 계획노선 편집 — 노선을 고치는 유일한 입구(2026-09-06 사용자 확정). 자동탐색
  // (「경로 계산 설정」)은 사용 중단이라 이 자리가 노선을 바꾸는 길이다.
  const plannedRouteBtn = document.createElement("button");
  plannedRouteBtn.type = "button";
  plannedRouteBtn.className = "b05-route__btn";
  plannedRouteBtn.textContent = "계획노선 편집";
  plannedRouteBtn.title = "예상노선 위에서 계획노선을 고칩니다. [확인] 때만 다시 계산합니다.";
  plannedRouteBtn.addEventListener("click", () => callbacks.onEditPlannedRoute());

  const selectedName = document.createElement("strong");
  const radius = numberField("회피/금지 반경 (m)", "25");
  radius.addEventListener("change", () => callbacks.onRadiusChange(Number(radius.value) || 1));
  const selectedActions = document.createElement("div");
  selectedActions.className = "b05-route__actions";
  selectedActions.append(
    button("위치 이동", callbacks.onMovePoint),
    button("삭제", callbacks.onDeletePoint, "danger"),
  );
  // 칸 뿌리는 등록부가 만든 뒤 알려 준다 — 평소 숨김(포인트를 고를 때만 보인다).
  let selectedRoot: HTMLElement | null = null;

  return {
    plannedRouteButton: plannedRouteBtn,
    /** 「선택 포인트 상세 설정」 본문 — 화면 순서대로. */
    selectedNodes: [selectedName, radius.wrapper, selectedActions] as HTMLElement[],
    bindSelectedRoot(root: HTMLElement): void {
      selectedRoot = root;
      root.hidden = true;
    },
    setSelected(point: PlacedRoutePoint | null): void {
      if (selectedRoot) selectedRoot.hidden = !point;
      if (!point) return;
      selectedName.textContent = `${point.type.toUpperCase()} (${point.x.toFixed(2)}, ${point.y.toFixed(2)})`;
      radius.wrapper.hidden = point.type !== "ap" && point.type !== "fp";
      radius.value = String(point.radius_m ?? 25);
    },
  };
}

export type RoutePart = ReturnType<typeof createRoutePart>;