Aislo/B05_Profile/B05_Profile_UI_RouteEdit_Chrome.ts

import { createIconButton } from "@ui/ui_template_elements";
import { createMapTools, mapToolButton } from "@ui/ui_template_map_tools";
import { mapToolGroups } from "../A00_Common/map/map_toolbar";
import { createSidePanels } from "@ui/ui_template_side_panels";
import { bindFootprintToggle } from "./B05_Profile_UI_RouteEdit_Footprint";
import { bindMarkToggle } from "./B05_Profile_UI_RouteEdit_Marks";
import { createRouteEditGl, type RouteEditGl } from "./B05_Profile_UI_RouteEdit_Gl";
import { createRouteEditLayers, type RouteEditLayers } from "./B05_Profile_UI_RouteEdit_Layers";
import { createRecPreview, type RecPreview } from "./B05_Profile_UI_RouteEdit_RecPreview";
import { createRouteTerrain, type RouteTerrain } from "./B05_Profile_UI_RouteEdit_Terrain";
import { bottomRowNarrow, infoLiftPx } from "./logic/B05_Profile_RouteEdit_InfoLift";

/* =============================================================================
 * B05_Profile_UI_RouteEdit_Chrome.ts
 * 계획노선 편집(평면)의 **뼈대** — 칸·단추·오버레이 판을 만들고 자주 쓰는 요소를 집어 준다.
 *
 * `B05_Profile_UI_RouteEdit.ts` 가 700줄을 넘겨 떼어낸 조각이다(2026-09-12). 생김새만 있고
 * 동작은 없다 — 배선은 본체와 각 조각(`_Apply`·`_Rotate`·`_History`…)이 한다.
 *
 * **배치**(352-1) — 지도가 칸 전체 · 머리 줄 · 테두리 없음. 도구는 3D 와 같은 떠 있는 유리 단추
 * (지도 왼쪽 위 · ☰ 비킴), [?] 조작 설명은 도구줄 아래 2열, 상태·범례는 왼쪽 아래, 잰 값은 오른쪽
 * 아래. 횡단 두 판은 지도 오른쪽을 덮는 판(아래 종단 판이 그 위).
 * 도구줄 차례 = 공용 표(624-3 · `A00_Common/map/map_toolbar` 「b05」) — [?] | ↶ ↷ | 3D ⟲ ⟳ | 1m 등고선 · 측점 · 기울기 ·
 * 절/성토선 · 거리 재기 | 측점 스냅 · 간격 | 예정노선 그리기(626-3) | 추천 노선 보기(626-1) | 설계 지형 칩(626-1). 아래 줄 = 공용 겹 줄(`_Layers` ·
 * 끝 = 그래픽 카드 단추) · 범례 = 상태 글판 위. 단추는 공용 지도 도구줄(568-2 · `ui_template_map_tools`) 아이콘 — 긴 설명은 마우스 글.
 *
 * 자리(345-3) — 모달이 아니라 종단 보기 가운데 위 본문(옛 3D 자리)에 붙는다. 덮개 · 전체 화면 ·
 * 닫기 단추는 걷었다 · [취소] · [확인] · [노선 반영] · [저장 전으로]는 없앰(346-3 · 352-2 — 노선은 페이지
 * [저장]이 맨 앞에서 보냄) · 오른쪽 횡단 칸은 접는 칸.
 * 머리 `tools` 자리에 부른 쪽 단추([3D])가 앉는다. 옛 [노선 추천] 모달 · 좌측 「노선 추천」 칸은 걷음(626-1 ·
 * 추천 = 도구줄 미리보기 · 지형 바꿈 = 지형 칩).
 * ========================================================================== */

/** 회전 단추 아이콘 — **반만 도는 화살표**(2026-09-12 사용자 지시 ㉙). 한 바퀴를 다 그린
 *  기호(`↺`·`↻`)는 「한 바퀴 돈다」로 읽혀 한 칸씩 도는 동작과 안 맞았다. */
export const HALF_TURN_ICON = {
  ccw: `<span class="ui-btn__icon"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" fill="none"
    stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
    <path d="M13 8a5 5 0 0 0-10 0" /><path d="M3 8 1.2 5.6" /><path d="M3 8 5.4 6.6" /></svg></span>`,
  cw: `<span class="ui-btn__icon"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" fill="none"
    stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
    <path d="M3 8a5 5 0 0 1 10 0" /><path d="M13 8 14.8 5.6" /><path d="M13 8 10.6 6.6" /></svg></span>`,
};

/** 되돌리기 · 다시하기 아이콘 — **곧은 꼬리 + 갈고리**(↩ ↪ · 요구 241-9). 둥근 화살표(`↶`·`↷`)는
 *  회전 단추와 헷갈렸다. 종단 도구줄도 같은 그림. */
export const HISTORY_ICON = {
  undo: `<span class="ui-btn__icon"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" fill="none"
    stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
    <path d="M3 6h7.5a3.5 3.5 0 0 1 0 7H7" /><path d="M6 3 3 6l3 3" /></svg></span>`,
  redo: `<span class="ui-btn__icon"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" fill="none"
    stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
    <path d="M13 6H5.5a3.5 3.5 0 0 0 0 7H9" /><path d="M10 3l3 3-3 3" /></svg></span>`,
};

export interface RouteEditChrome {
  overlay: HTMLElement;
  canvas: HTMLCanvasElement;
  status: HTMLElement;
  busy: HTMLElement;
  measureBox: HTMLElement;
  measureText: HTMLElement;
  measureButton: HTMLButtonElement;
  minorContourButton: HTMLButtonElement;
  /** [측점 스냅] 켬끔(요구 224-2) — `aria-pressed` · `is-active` 는 본체가 맞춤. */
  stationSnapButton: HTMLButtonElement;
  /** 예정노선 그리기 켬끔(626-3 · 배선 = `B05_Profile_UI_ExpectedDraw`). */
  expectedDrawButton: HTMLButtonElement;
  /** 설계 지형 칩(626-1) — 지형 읽은 뒤 `load`. */
  terrain: RouteTerrain;
  /** 추천 노선 미리보기(626-1) — 그리기 안에서 `draw`. */
  preview: RecPreview;
  /** 공용 지도 겹(624-3). */
  layers: RouteEditLayers;
  /** 장면 새로 그리기(겹 켬끔 · 추천 보기 뒤) — 편집기가 건다(없으면 GL 마지막 장면). */
  onRedraw: (draw: () => void) => void;
}

/** 손잡이 자리(24) + 틈(8) — 접혀도 남는 폭(`.ui-side-panels` margin-left). */
const SIDE_HANDLE_PX = 32;

// 글판 접기 기억(345-5 덧 3) — 페이지 동안만(모듈 값) · 다시 열어도 그대로.
let hintOpen = false;
const HINT_LINES = [
  "노드 끌기 = 옮기기",
  "노드 클릭 = R 라벨",
  "선 두 번 클릭 = 노드 추가",
  "노드 오른쪽 클릭 = 삭제",
  "측점 눈금 클릭 = 횡단 미리보기",
  "Shift+클릭 = 거리·기울기",
  "가운데(휠) 버튼 끌기 = 지도 이동",
  "휠 = 확대",
  "Ctrl+휠 = 돌리기(한 칸 5°)",
];
let infoCollapsed = false;

/** 뼈대를 만들어 `parent` 에 붙이고, 자주 쓰는 요소를 집어 돌려준다. */
export function createRouteEditChrome(
  parent: HTMLElement,
  projectId: string,
  tools: HTMLElement[] = [],
  host?: { onDispose: (fn: () => void) => void },
): RouteEditChrome {
  const overlay = document.createElement("div");
  overlay.className = "b05-routeedit";
  overlay.innerHTML = `
    <div class="b05-routeedit__canvas-wrap" aria-label="계획노선 편집">
        <canvas class="b05-routeedit__canvas"></canvas>
        <div data-slot="map-tools"></div>
        <div class="b05-routeedit__measure" hidden>
          <span class="b05-routeedit__measure-text"></span>
          <span data-slot="measure-close"></span>
        </div>
        <div class="b05-routeedit__info">
          <span class="b05-routeedit__status">노선을 읽는 중…</span>
          <span class="ui-legend ui-legend--vertical b05-routeedit__legend">
            <span class="ui-legend__item"><i class="ui-legend__mark ui-legend__mark--dash is-expected"
              style="--legend-color: var(--color-text-secondary)"></i>예상노선(원본)</span>
            <span class="ui-legend__item"><i class="ui-legend__mark ui-legend__mark--line is-planned"
              style="--legend-color: var(--map-route)"></i>계획노선</span>
          </span>
          <span class="b05-routeedit__summary"></span>
          <button type="button" data-size="18" class="ui-icon-btn ui-icon-btn--ghost b05-routeedit__info-toggle" data-act="info-toggle"
            aria-expanded="true" title="상태 · 범례 글판 접기 · 펴기">▾</button>
        </div>
    </div>
    <div class="b05-routeedit__busy" hidden><span></span></div>
    <aside class="b05-routeedit__side-wrap"></aside>`;
  parent.append(overlay);
  // 스냅 간격 고르기 — 단추 아님(도구줄에 요소로 끼움).
  const extras = document.createElement("div");
  extras.innerHTML = `
    <label class="b05-routeedit__terrain b05-routeedit__snap-step"
      title="측점 스냅 간격 — 곡선 가운데(MC)를 이 간격 배수에 맞춥니다(측점 No. = 측점 간격)">간격
      <select class="ui-select ui-select--sm" data-size="32" data-act="snap-step">
        <option value="10">10 m</option>
        <option value="station">측점 No.</option>
      </select>
    </label>`;
  const snapStep = extras.firstElementChild as HTMLElement;
  const terrain = createRouteTerrain(projectId);
  let gl: RouteEditGl | null = null;
  let redrawScene: (() => void) | null = null;
  const redraw = (): void => (redrawScene ? redrawScene() : gl?.redraw());
  const preview = createRecPreview({
    projectId,
    terrain: terrain.design,
    redraw,
  });
  const mapTools = createMapTools({
    label: "평면 도구",
    hint: { lines: HINT_LINES, open: hintOpen, onToggle: (open) => (hintOpen = open) },
    groups: mapToolGroups("b05", {
      undo: mapToolButton("undo", { title: "되돌리기 (Ctrl+Z)", disabled: true }),
      redo: mapToolButton("redo", { title: "다시하기 (Ctrl+Y)", disabled: true }),
      ...(tools[0] ? { view3d: tools[0] } : {}), // 부른 쪽 단추([3D])
      "contour-minor": mapToolButton("contour-minor", {
        title: "1m 등고선 — 1m 간격 등고선을 얇고 옅게 겹칩니다 (확대하면 보임)",
        disabled: true,
      }),
      stations: mapToolButton("stations", {
        title: "측점 — 측점 눈금 · 번호를 평면에 보이기 · 숨기기 (시점 · 종점 이름표는 늘 보임)",
      }),
      slopes: mapToolButton("slopes", {
        title: "기울기 — 측점 사이 기울기(%)를 평면에 보이기 · 숨기기 (확대해야 보임)",
      }),
      footprint: mapToolButton("footprint", {
        title: "절/성토선 — 도로 끝 · 비탈 끝(깎기 붉음 · 쌓기 청록)을 평면에 겹칩니다",
      }),
      measure: mapToolButton("measure", {
        title: "거리 재기 — 노선 위 두 점을 눌러 거리·기울기를 잽니다 (Shift+클릭도 같음)",
      }),
      "station-snap": mapToolButton("station-snap", {
        title:
          "측점 스냅 — 켜면 고친 곡선의 가운데(MC)를 고른 간격 배수에 맞춥니다 — 일반측점(20 m)은 그대로 · MC 가 일반측점 위가 아니면 「No.N+10 (MC)」 특별측점을 더함 · 손대지 않은 곡선은 그 자리 유지 · 고정 교각점은 그대로 · 못 맞춘 곡선은 상태줄 「측점 밖 곡선」 · [저장] 때 저장",
      }),
      "snap-step": snapStep,
      recommend: preview.root,
      terrain: terrain.root,
    }),
  });
  mapTools.hint!.classList.add("b05-routeedit__hint"); // 가이드 촬영 · 엿보기 숨김이 잡음
  // 공용 지도 겹(624-3) — 도구줄 아래 줄 · 범례는 상태 글판 맨 위
  const wrap = overlay.querySelector<HTMLElement>(".b05-routeedit__canvas-wrap")!;
  const layers = createRouteEditLayers({
    projectId,
    wrap,
    onGl: () => gl?.toggle(),
    redraw,
  });
  const toolRows = document.createElement("div");
  toolRows.className = "b05-routeedit__tools";
  toolRows.append(mapTools.root, layers.bar);
  overlay.querySelector('[data-slot="map-tools"]')!.replaceWith(toolRows);

  // 횡단 미리보기 = 패널 양식(382-1 · 손잡이 · 머리 · 폭 끌기 · 열림 · 폭 기억) · 자리는 지도 위 덮개 그대로 ·
  // 기본 접힘(393-1 · 키 -v2 = 옛 열림 기억 한 번 버림) · 열림 · 닫힘은 손잡이만(513-2) · 잰 값 창이 판을 비킴(--b05-side-open).
  const side = document.createElement("div");
  side.className = "b05-routeedit__side";
  const setSideOpen = (): void =>
    overlay.style.setProperty(
      "--b05-side-open",
      `${(panels.current() ? panels.width() : 0) + SIDE_HANDLE_PX}px`,
    );
  const panels = createSidePanels({
    prefKey: "b05-routeedit-cross-v2",
    panels: [{ id: "cross", title: "횡단", body: side }],
    defaultOpen: null,
    defaultWidth: 460,
    follow: false,
    onChange: setSideOpen,
    onResize: setSideOpen,
  });
  overlay.querySelector(".b05-routeedit__side-wrap")!.append(panels.root);
  setSideOpen();

  // 상태 · 범례 접기 — 접으면 한 줄 「계획노선 N m」(상태 글에서 읽음 · 345-5 덧 3).
  const info = overlay.querySelector<HTMLElement>(".b05-routeedit__info")!;
  info.prepend(layers.legend);
  const infoToggle = info.querySelector<HTMLButtonElement>('[data-act="info-toggle"]')!;
  const summary = info.querySelector<HTMLElement>(".b05-routeedit__summary")!;
  const setInfo = (collapsed: boolean): void => {
    infoCollapsed = collapsed;
    info.classList.toggle("is-collapsed", collapsed);
    infoToggle.textContent = collapsed ? "▸" : "▾";
    infoToggle.setAttribute("aria-expanded", String(!collapsed));
  };
  setInfo(infoCollapsed);
  infoToggle.addEventListener("click", () => setInfo(!infoCollapsed));

  // 뜬 종단 판(이웃 칸)이 지도 아래를 덮으면 상태 · 범례를 그 위로(408-2) — 판 높이 끌기 · 접기 ·
  // 창 분할(판이 다른 창으로 감 = 못 찾음)을 판 크기 관찰로 따라감. 횡단 판이 넓어 아래 줄이 좁으면 잰 값 창을
  // 상태 글판 위로 쌓음(408-4 · 횡단 판 · 글판 크기도 관찰).
  let watchedProfile: Element | null = null;
  const liftInfo = (): void => {
    if (!overlay.isConnected) return; // 붙기 전 첫 알림 · 걷힌 뒤 — 판 관찰은 판과 함께 사라짐
    const profile =
      overlay.closest(".design-page__main")?.querySelector(".b05-route-profile") ?? null;
    if (profile && profile !== watchedProfile) lift.observe((watchedProfile = profile));
    const map = overlay.getBoundingClientRect();
    const top = profile?.isConnected ? profile.getBoundingClientRect().top : null;
    overlay.style.setProperty(
      "--b05-profile-cover",
      `${infoLiftPx(map.bottom, map.height, top)}px`,
    );
    const sideOpen = parseFloat(overlay.style.getPropertyValue("--b05-side-open")) || 0;
    overlay.classList.toggle("is-narrow-bottom", bottomRowNarrow(map.width, sideOpen));
    overlay.style.setProperty(
      "--b05-info-h",
      `${Math.round(info.getBoundingClientRect().height)}px`,
    );
  };
  const lift = new ResizeObserver(liftInfo);
  lift.observe(overlay);
  lift.observe(info);
  lift.observe(overlay.querySelector(".b05-routeedit__side-wrap")!);

  const measureCloseButton = createIconButton({ glyph: "✕", title: "닫기", size: 24 });
  measureCloseButton.classList.add("b05-routeedit__measure-close");
  overlay.querySelector('[data-slot="measure-close"]')!.replaceWith(measureCloseButton);

  const canvas = overlay.querySelector<HTMLCanvasElement>(".b05-routeedit__canvas")!;
  const status = overlay.querySelector<HTMLElement>(".b05-routeedit__status")!;
  const syncSummary = (): void => {
    const text = status.textContent ?? "";
    const length = /계획노선 ([\d.]+)m/.exec(text)?.[1];
    summary.textContent = length ? `계획노선 ${length} m` : text;
  };
  new MutationObserver(syncSummary).observe(status, { childList: true, characterData: true });
  syncSummary();
  const measureBox = overlay.querySelector<HTMLElement>(".b05-routeedit__measure")!;
  const measureText = overlay.querySelector<HTMLElement>(".b05-routeedit__measure-text")!;
  const measureButton = mapTools.button("measure")!;
  const busy = overlay.querySelector<HTMLElement>(".b05-routeedit__busy")!;
  const minorContourButton = mapTools.button("contour-minor")!;
  gl = createRouteEditGl(canvas, layers, host); // GL 바탕(589-2 · 그리기가 `routeGlOf` 로 찾음)
  Object.assign(canvas, { mapProbe: { layers: layers.state, preview: preview.state } }); // 검증 창구
  const stationSnapButton = mapTools.button("station-snap")!;
  bindFootprintToggle(mapTools.button("footprint")!);
  bindMarkToggle(mapTools.button("stations")!, "stations");
  bindMarkToggle(mapTools.button("slopes")!, "slopes");

  return {
    overlay,
    canvas,
    status,
    busy,
    measureBox,
    measureText,
    measureButton,
    minorContourButton,
    stationSnapButton,
    expectedDrawButton: mapTools.button("expected-draw")!,
    terrain,
    preview,
    layers,
    onRedraw: (draw) => (redrawScene = draw),
  };
}