/* =============================================================================
 * B05_Profile_UI_RouteEdit.ts
 * 계획노선 편집 모달 — 예상노선(점선) 위에 계획노선(실선)을 고쳐 그린다.
 *
 * 왜 모달인가(2026-09-06 사용자 확정) — [확인]을 누르면 배수유역부터 종·횡단·유토곡선까지
 * 전 단계가 다시 도는 무거운 작업이다(용화 67측점 3분대). 신중히 하라는 뜻으로 큰 모달을
 * 쓰고, **편집 중에는 아무 계산도 나가지 않는다**.
 *
 * 노선은 두 벌이다 — 예상노선(원본, 안 바뀜)과 계획노선(수정본, 사용자가 고침).
 * [예상노선으로]는 수정본을 버리고 원본으로 되돌린다(서버가 파일을 지우고 같은 재계산).
 *
 * 그림은 배수유역도와 같은 지도 도구(`B04_PreProcess_UI_MapRender`)를 쓴다 — 등고선 도엽은
 * 위경도, 노선은 사업지 좌표계(m)지만 두 변환기가 같은 정규화 공간을 본다.
 * ========================================================================== */

import {
  computeMapRect,
  computeRouteView,
  drawPreparedLayer,
  createNormalizer,
  metricToScreen,
  prepareLayer,
  type PreparedLayer,
  type ViewState,
} from "../B04_PreProcess/B04_PreProcess_UI_MapRender";
import type { VWorldMeta } from "../B04_PreProcess/B04_PreProcess_Api_Fetch";
import { clearDrafts, clearResults } from "../A00_Common/b_page_state";
import { showToast } from "@ui/ui_template_elements";
import { fetchDrainageLayers } from "./B05_Profile_UI_Drainage_Parts";
import { fetchRoutePlan, replanRoute, resetRoutePlan } from "./B05_Profile_Api_Replan";
import type { RoutePlanCurve } from "./B05_Profile_Api_Replan";
import { buildEditedPolyline, dragHandleTo as curveDragTo } from "./B05_Profile_UI_RouteEdit_Curve";
import {
  bindRouteEditNavigation,
  handleAtScreen,
  nodeAtScreen,
  segmentAtScreen,
} from "./B05_Profile_UI_RouteEdit_Input";
import { createCurveLabel } from "./B05_Profile_UI_RouteEdit_Label";
import {
  bindHistoryControls,
  createRouteEditHistory,
  type RouteEditHistory,
  type RouteEditSnapshot,
} from "./B05_Profile_UI_RouteEdit_History";
import "./B05_Profile_UI_Style_RouteEdit.css";

/** 노드를 잡았다고 볼 거리(px). 손가락·마우스 모두 무리 없는 크기. */
const NODE_HIT_PX = 9;
/** 노드 반지름(px). */
const NODE_R = 4;
/** 선을 두 번 눌러 노드를 끼울 때, 선에서 이만큼(px) 안쪽이면 그 선으로 본다. */
const SEGMENT_HIT_PX = 12;
/** 등고선을 보일 **노선 둘레 띠**(m) — 사용자 지시 ⑥(2026-09-07).
 *
 * 노선에서 이만큼 밖의 등고선은 안 그린다. **창 크기와 무관한 고정 띠**라 창을 늘리거나
 * 줄여도 띠가 흔들리지 않는다(사용자가 「다이나믹 창이라 조심」이라 한 자리). 화면 밖을
 * 걸러내는 일은 `drawPreparedLayer` 가 이미 하므로 여기서는 띠만 덧씌운다. */
const CONTOUR_BAND_M = 300;
/** 곡선 시작·끝점 손잡이 크기(px) — 노드 동그라미와 구별되게 **속 빈 네모**로 그린다.
 *  처음엔 3.5px 였는데 선과 색이 같아 눈에도 안 띄고 집기도 어려웠다(2026-09-07 실화면). */
const CURVE_HANDLE_PX = 5;

type Vertex = [number, number];

/** 모달을 연다. [확인]·[예상노선으로]가 끝나면 `onApplied`를 부른다(화면 다시 읽기). */
export async function openRouteEditModal(
  projectId: string,
  onApplied: () => void | Promise<void>,
): Promise<void> {
  const overlay = document.createElement("div");
  overlay.className = "b05-routeedit";
  overlay.innerHTML = `
    <div class="b05-routeedit__box" role="dialog" aria-label="계획노선 편집">
      <div class="b05-routeedit__head">
        <strong>계획노선 편집</strong>
        <span class="b05-routeedit__hint">
          노드 끌기 = 옮기기 · 노드 클릭 = R 라벨 · 선 두 번 클릭 = 노드 추가 ·
          노드 오른쪽 클릭 = 삭제 · 가운데(휠) 버튼 끌기 = 지도 이동 · 휠 = 확대
        </span>
        <button type="button" class="b05-routeedit__close" aria-label="닫기">✕</button>
      </div>
      <div class="b05-routeedit__canvas-wrap"><canvas class="b05-routeedit__canvas"></canvas></div>
      <div class="b05-routeedit__foot">
        <span class="b05-routeedit__status">노선을 읽는 중…</span>
        <span class="b05-routeedit__legend">
          <i class="is-expected"></i> 예상노선(원본)
          <i class="is-planned"></i> 계획노선
        </span>
        <button type="button" class="b05-routeedit__btn" data-act="undo" title="되돌리기 (Ctrl+Z)"
          disabled>↶ 되돌리기</button>
        <button type="button" class="b05-routeedit__btn" data-act="redo" title="다시하기 (Ctrl+Y)"
          disabled>↷ 다시하기</button>
        <button type="button" class="b05-routeedit__btn" data-act="history-reset"
          title="이 창을 연 상태로 되돌립니다 (재계산 없음)" disabled>초기화</button>
        <button type="button" class="b05-routeedit__btn" data-act="reset">예상노선으로</button>
        <button type="button" class="b05-routeedit__btn" data-act="cancel">취소</button>
        <button type="button" class="b05-routeedit__btn is-primary" data-act="apply">확인</button>
      </div>
      <div class="b05-routeedit__busy" hidden><span></span></div>
    </div>`;
  document.body.append(overlay);

  const canvas = overlay.querySelector<HTMLCanvasElement>(".b05-routeedit__canvas")!;
  const status = overlay.querySelector<HTMLElement>(".b05-routeedit__status")!;
  const busy = overlay.querySelector<HTMLElement>(".b05-routeedit__busy")!;
  const context = canvas.getContext("2d")!;

  let expected: Vertex[] = [];
  /** 그려 보이는 계획노선 — 원호가 섞인 폴리라인. **잡는 대상이 아니다.** */
  let plannedLine: Vertex[] = [];
  /** 사용자가 잡아 옮기는 **노드**(꺾임점). 서버가 이 노드로 폴리라인을 다시 만든다. */
  let planned: Vertex[] = [];
  /** 노드마다의 반지름·내각·법정 위반 — 서버가 함께 내려 준다(표시용). */
  let nodeInfo: Array<{
    radius_m: number | null;
    inner_angle_deg: number | null;
    violations: string[];
  }> = [];
  let minRadiusM = 0;
  /** 서버가 준 곡선 성분 — 손잡이(곡선 시작·끝점)를 그리는 재료. 편집하면 비운다. */
  let curveInfo: RoutePlanCurve[] = [];
  /** 꺾임점마다의 편집값 — 곡선을 둘지, 반지름을 못박을지(2026-09-07 사용자 지시). */
  let curveOn: boolean[] = [];
  let curveRadius: Array<number | null> = [];
  /** 지금 고른 꺾임점 — 곡선 편집줄이 이 자리를 만진다. 없으면 -1. */
  let picked = -1;
  /** 되돌리기 사진첩 — 노선을 읽은 뒤에 선다(그전에는 되돌릴 것이 없다). */
  let history: RouteEditHistory | null = null;
  let meta: VWorldMeta | null = null;
  let sheets: PreparedLayer[] = [];
  let view: ViewState = {
    width: 0,
    height: 0,
    scale: 1,
    offsetX: 0,
    offsetY: 0,
    mapRect: computeMapRect(null, 0, 0),
  };
  let closed = false;

  const close = (): void => {
    closed = true;
    window.removeEventListener("resize", resize);
    historyControls.dispose(); // 단축키는 창(window)에 달려 있어 안 떼면 닫힌 뒤에도 산다.
    overlay.remove();
  };
  overlay.querySelector(".b05-routeedit__close")!.addEventListener("click", close);
  overlay.querySelector('[data-act="cancel"]')!.addEventListener("click", close);
  // 배경 클릭으로 닫지 않는다 — 고치던 노선을 실수로 날리지 않게.

  function resize(): void {
    if (closed) return;
    const wrap = canvas.parentElement!;
    const ratio = window.devicePixelRatio || 1;
    const width = wrap.clientWidth;
    const height = wrap.clientHeight;
    canvas.width = Math.round(width * ratio);
    canvas.height = Math.round(height * ratio);
    canvas.style.width = `${width}px`;
    canvas.style.height = `${height}px`;
    context.setTransform(ratio, 0, 0, ratio, 0, 0);
    view = { ...view, width, height, mapRect: computeMapRect(meta, width, height) };
    draw();
  }
  window.addEventListener("resize", resize);

  const toScreen = (vertex: Vertex): [number, number] =>
    meta ? metricToScreen(meta, view, vertex[0], vertex[1]) : [0, 0];

  /** 화면 px → 사업지 좌표(m). `metricToScreen`이 선형이므로 두 기준점으로 역산한다. */
  function toMetric(px: number, py: number): Vertex {
    if (!meta) return [0, 0];
    const [x0, y0] = metricToScreen(meta, view, meta.x_min, meta.y_min);
    const [x1, y1] = metricToScreen(
      meta,
      view,
      meta.x_min + meta.width_meters,
      meta.y_min + meta.height_meters,
    );
    const sx = (x1 - x0) / (meta.width_meters || 1);
    const sy = (y1 - y0) / (meta.height_meters || 1);
    return [meta.x_min + (px - x0) / (sx || 1), meta.y_min + (py - y0) / (sy || 1)];
  }

  function strokePolyline(points: Vertex[], dash: number[], color: string, width: number): void {
    if (points.length < 2) return;
    context.save();
    context.setLineDash(dash);
    context.strokeStyle = color;
    context.lineWidth = width;
    context.beginPath();
    points.forEach((vertex, index) => {
      const [x, y] = toScreen(vertex);
      if (index === 0) context.moveTo(x, y);
      else context.lineTo(x, y);
    });
    context.stroke();
    context.restore();
  }

  /** 등고선을 보일 화면 사각형 — 노선 경계에 `CONTOUR_BAND_M` 를 두른 것.
   *
   * **매 프레임 다시 잰다** — 창 크기·배율·이동이 바뀌어도 띠가 노선을 따라간다. 노선이
   * 아직 없으면 null(전체를 그린다). */
  function contourBandRect(): { x: number; y: number; width: number; height: number } | null {
    const line = plannedLine.length ? plannedLine : planned;
    if (!meta || line.length < 2) return null;
    let minX = Infinity;
    let minY = Infinity;
    let maxX = -Infinity;
    let maxY = -Infinity;
    for (const [x, y] of line) {
      if (x < minX) minX = x;
      if (x > maxX) maxX = x;
      if (y < minY) minY = y;
      if (y > maxY) maxY = y;
    }
    // 사업지 좌표(m)에서 띠를 두르고 화면으로 옮긴다 — y 는 화면에서 뒤집힌다.
    const [left, bottom] = toScreen([minX - CONTOUR_BAND_M, minY - CONTOUR_BAND_M]);
    const [right, top] = toScreen([maxX + CONTOUR_BAND_M, maxY + CONTOUR_BAND_M]);
    return {
      x: Math.min(left, right),
      y: Math.min(top, bottom),
      width: Math.abs(right - left),
      height: Math.abs(bottom - top),
    };
  }

  function draw(): void {
    if (closed) return;
    const style = getComputedStyle(document.documentElement);
    context.clearRect(0, 0, view.width, view.height);
    context.fillStyle = style.getPropertyValue("--color-surface") || "#111";
    context.fillRect(0, 0, view.width, view.height);

    context.save();
    // 등고선은 **노선 둘레 300m 안**에서만 그린다 — 노선과 상관없는 산줄기까지 다 그리면
    // 화면이 등고선으로 덮여 노선이 안 보인다(2026-09-07 사용자 지시 ⑥).
    const band = contourBandRect();
    if (band) {
      context.beginPath();
      context.rect(band.x, band.y, band.width, band.height);
      context.clip();
    }
    context.strokeStyle = style.getPropertyValue("--map-sheet-contour") || "#a5b4fc";
    context.lineWidth = 0.8;
    for (const layer of sheets) drawPreparedLayer(context, layer, view, "dot");
    context.restore();

    strokePolyline(
      expected,
      [6, 5],
      style.getPropertyValue("--color-text-secondary") || "#9ca3af",
      1.6,
    );
    // 선은 **폴리라인**(원호 포함)을 그리고, 잡는 동그라미는 **노드**에만 찍는다.
    // 노드를 옮기는 동안에는 폴리라인이 없으므로 노드를 곧바로 이어 미리 보인다.
    strokePolyline(
      plannedLine.length ? plannedLine : planned,
      [],
      style.getPropertyValue("--map-route") || "#f97316",
      2.4,
    );

    context.save();
    context.fillStyle = style.getPropertyValue("--map-route") || "#f97316";
    context.strokeStyle = style.getPropertyValue("--map-halo") || "rgba(255,255,255,0.9)";
    context.lineWidth = 1;
    planned.forEach((vertex, index) => {
      const [x, y] = toScreen(vertex);
      // 법정 기준을 못 맞춘 자리는 붉게 — 막지는 않고 보이기만 한다(2026-09-06 사용자 확정).
      const bad = (nodeInfo[index]?.violations?.length ?? 0) > 0;
      context.fillStyle = bad
        ? style.getPropertyValue("--color-danger") || "#dc2626"
        : style.getPropertyValue("--map-route") || "#f97316";
      context.beginPath();
      context.arc(x, y, index === picked ? NODE_R + 2 : NODE_R, 0, Math.PI * 2);
      context.fill();
      context.stroke();
      // 곡선을 지운 자리는 가운데를 비워 「여기는 곡선이 없다」를 보인다.
      if (curveOn.length && !curveOn[index] && index > 0 && index < planned.length - 1) {
        context.save();
        context.fillStyle = style.getPropertyValue("--map-halo") || "rgba(255,255,255,0.9)";
        context.beginPath();
        context.arc(x, y, NODE_R - 2, 0, Math.PI * 2);
        context.fill();
        context.restore();
      }
    });

    // 곡선 시작·끝점 — 잡아서 직선 각도와 R 을 함께 바꾸는 손잡이(2026-09-07 사용자 지시).
    // **속을 비우고 테두리를 굵게** 그린다 — 선·노드와 색이 같으면 눈에도 안 띄고 집기도 어렵다.
    context.lineWidth = 2;
    curveInfo.forEach((curve) => {
      // **고른 곡선에만** 손잡이를 낸다(2026-09-07 사용자 지적 ④) — 전부 내놓으면 헤어핀에서
      // 노드 위를 덮어 노드를 못 집는다. 먼저 노드를 눌러 고르고, 그 다음 손잡이를 끈다.
      if (curve.node_first !== picked) return;
      const on = curveOn[curve.node_first] !== false;
      if (!on) return; // 곡선을 지운 자리에는 손잡이도 없다.
      [curve.start, curve.end].forEach((point) => {
        const [x, y] = toScreen([point[0], point[1]]);
        context.beginPath();
        context.rect(
          x - CURVE_HANDLE_PX,
          y - CURVE_HANDLE_PX,
          CURVE_HANDLE_PX * 2,
          CURVE_HANDLE_PX * 2,
        );
        context.fillStyle = style.getPropertyValue("--map-halo") || "rgba(255,255,255,0.95)";
        context.fill();
        context.strokeStyle = style.getPropertyValue("--map-route") || "#f97316";
        context.stroke();
      });
    });
    context.restore();
    // 라벨은 **그린 뒤** 자리를 맞춘다 — 확대·이동·창 크기가 바뀌어도 고른 노드에 붙어 있게.
    syncCurveBar();
  }

  /** 잡기 — 셈은 `_RouteEdit_Input` 몫이고, 여기서는 지금 상태를 건네준다. */
  const handleAt = (px: number, py: number): { node: number; end: "start" | "end" } | null =>
    handleAtScreen(curveInfo, picked, toScreen, px, py, NODE_HIT_PX + 2);
  const nodeAt = (px: number, py: number): number =>
    nodeAtScreen(planned, toScreen, px, py, NODE_HIT_PX);
  const segmentAt = (px: number, py: number): number =>
    segmentAtScreen(planned, toScreen, px, py, SEGMENT_HIT_PX);

  /** 끈 접선점으로 새 교각점·새 반지름을 구한다 — 셈은 `_RouteEdit_Curve` 몫. */
  function dragHandleTo(
    node: number,
    which: "start" | "end",
    to: Vertex,
  ): { apex: Vertex; radius: number } | null {
    const curve = curveInfo.find((entry) => entry.node_first === node);
    if (!curve) return null;
    const before = planned[node - 1];
    const after = planned[node + 1];
    if (!before || !after) return null;
    return curveDragTo(before, [curve.apex[0], curve.apex[1]], after, which, to);
  }

  /** 노드를 고쳤다 — **곡선을 그 자리에서 다시 그린다**(2026-09-07 사용자 지적 ①②).
   *
   * 예전에는 그려 둔 선과 손잡이를 통째로 비웠다. 그러면 노드 하나만 건드려도 **곡선이 전부
   * 사라진 것처럼** 보였다 — 값은 남아 있는데 화면만 「지워졌다」고 말하니 되돌릴 길을 찾게 됐다.
   * 지금은 서버와 **같은 규칙**(`buildEditedPolyline` 짝)으로 즉시 다시 만든다. [확인] 때
   * 서버가 정본으로 다시 내는 것은 그대로다. */
  function markEdited(): void {
    const built = buildEditedPolyline(planned, curveOn, curveRadius, minRadiusM);
    plannedLine = built.vertices;
    curveInfo = built.curves;
    nodeInfo = built.nodes;
  }

  /** 상태줄 꼬리 — 곡선 기준과 위반 수를 알린다. */
  function curveHint(): string {
    const off = curveOn.filter(
      (on, index) => !on && index > 0 && index < planned.length - 1,
    ).length;
    const forced = curveRadius.filter((value) => value !== null).length;
    const edits = [off ? `곡선 지움 ${off}곳` : "", forced ? `R 지정 ${forced}곳` : ""]
      .filter(Boolean)
      .join(" · ");
    if (!nodeInfo.length) {
      const base = minRadiusM ? `곡선 기준 R ${minRadiusM}m — [확인] 때 반영` : "";
      return edits ? `${base}${base ? " · " : ""}${edits}` : base;
    }
    const bad = nodeInfo.filter((node) => node.violations.length).length;
    const curves = curveInfo.length || nodeInfo.filter((node) => node.radius_m !== null).length;
    return (
      `곡선 ${curves}곳(하한 R ${minRadiusM}m)` +
      `${bad ? ` · 기준 미달 ${bad}곳` : ""}${edits ? ` · ${edits}` : ""}`
    );
  }

  // ── R 라벨 — 고른 꺾임점 **옆에** 뜬다(2026-09-07 사용자 지시 ③). 그리기는 `_Label` 몫 ──
  const curveLabelBox = createCurveLabel(canvas.parentElement!, {
    onRadius: (value) => {
      if (picked < 0) return;
      curveRadius[picked] = value;
      // 반지름만 바꾼 것이라 노드 자리는 그대로지만, 그려진 선은 낡았다.
      applyEdit(value === null ? "반지름을 자동으로 되돌렸습니다." : "반지름을 바꿨습니다.");
    },
    onCurveOn: (on) => {
      if (picked < 0) return;
      curveOn[picked] = on;
      applyEdit(on ? "곡선을 넣었습니다." : "곡선을 지웠습니다.");
    },
    onAuto: () => {
      if (picked < 0) return;
      curveRadius[picked] = null; // 서버가 예정노선에 맞춰 다시 고른다.
      applyEdit("반지름을 자동으로 되돌렸습니다.");
    },
  });

  /** 고른 자리에 맞춰 라벨을 옮겨 그린다. 끝점은 곡선이 없으므로 라벨을 숨긴다. */
  function syncCurveBar(): void {
    if (!(picked > 0 && picked < planned.length - 1)) {
      curveLabelBox.hide();
      return;
    }
    const forced = curveRadius[picked];
    curveLabelBox.show({
      seat: picked,
      at: toScreen(planned[picked]),
      canvas: { width: view.width, height: view.height },
      curveOn: curveOn[picked] !== false,
      radiusShown:
        forced ?? curveInfo.find((entry) => entry.node_first === picked)?.radius_m ?? null,
      forced: forced !== null,
      innerAngleDeg: nodeInfo[picked]?.inner_angle_deg ?? null,
      minRadiusM,
    });
  }

  /** 한 번의 편집을 마무리한다 — 다시 그리고, 라벨·상태줄을 맞추고, 되돌리기에 쌓는다. */
  function applyEdit(message: string, record = true): void {
    markEdited();
    syncCurveBar();
    status.textContent = `노드 ${planned.length}개 — ${message} ${curveHint()}`;
    draw();
    if (record) history?.commit(snapshotNow());
    historyControls.sync();
  }

  /** 지금 편집값을 사진 한 벌로 담는다 — 되돌리기가 쌓아 두는 것. */
  function snapshotNow(): RouteEditSnapshot {
    return { planned, curveOn, curveRadius, picked };
  }

  const historyControls = bindHistoryControls({
    overlay,
    getHistory: () => history,
    restore: (snapshot, message) => {
      planned = snapshot.planned;
      curveOn = snapshot.curveOn;
      curveRadius = snapshot.curveRadius;
      picked = snapshot.picked;
      applyEdit(message, false); // 되살리는 것은 새 걸음이 아니다.
    },
  });

  // ── 조작 — 노드 끌기 / 두 번 클릭 삽입 / 오른쪽 클릭 삭제 ──
  //    지도 이동·확대는 `bindRouteEditNavigation`(가운데 버튼 팬 · 휠) 몫이다.
  let dragNode = -1;
  /** 끌고 있는 곡선 손잡이(시작·끝점). **고른 곡선에만** 있다. */
  let dragHandle: { node: number; end: "start" | "end" } | null = null;
  /** 이번 끌기에서 **실제로 움직였나** — 그냥 눌러 고르기만 한 것은 되돌릴 걸음이 아니다
   *  (2026-09-07 실화면: 노드를 클릭만 해도 [되돌리기]가 켜졌다). */
  let dragMoved = false;

  canvas.addEventListener("pointerdown", (event) => {
    if (event.button !== 0) return;
    const rect = canvas.getBoundingClientRect();
    const px = event.clientX - rect.left;
    const py = event.clientY - rect.top;
    // **노드가 손잡이보다 먼저다**(2026-09-07 사용자 지적 ④). 반대로 두었더니 헤어핀처럼
    // 곡선이 몰린 데서는 손잡이가 늘 먼저 잡혀 **노드를 아예 못 집었다**(실화면에서 격자로
    // 훑어 보니 잡히는 것이 전부 손잡이였음). 손잡이는 고른 곡선에만 나오므로 겹침도 적다.
    dragNode = nodeAt(px, py);
    dragHandle = dragNode >= 0 ? null : handleAt(px, py);
    dragMoved = false;
    if (dragNode >= 0) {
      picked = dragNode; // 누른 자리를 고른다 — R 라벨이 그 곡선을 만진다.
      syncCurveBar();
      draw();
    } else if (dragHandle) {
      picked = dragHandle.node;
      syncCurveBar();
      draw();
    }
    canvas.setPointerCapture(event.pointerId);
  });

  canvas.addEventListener("pointermove", (event) => {
    const rect = canvas.getBoundingClientRect();
    const px = event.clientX - rect.left;
    const py = event.clientY - rect.top;
    if (dragHandle) {
      // 곡선 시작·끝점을 끈다 — 그쪽 직선 각도와 반지름이 함께 바뀐다(2026-09-07 사용자 확정).
      const node = dragHandle.node;
      const moved = dragHandleTo(node, dragHandle.end, toMetric(px, py));
      if (moved) {
        planned[node] = moved.apex;
        curveRadius[node] = Math.round(moved.radius * 100) / 100;
        curveOn[node] = true;
        picked = node;
        // 손잡이 자리는 다시 셈한 곡선에서 나온다 — 접선 자리가 모자라 R 이 눌리면 손이
        // 끄는 자리보다 덜 따라오고, 그 눌림이 그 자리에서 눈에 보인다.
        dragMoved = true;
        markEdited();
        syncCurveBar();
        status.textContent = `노드 ${planned.length}개 — 곡선을 잡는 중. ${curveHint()}`;
        draw();
      }
      return;
    }
    if (dragNode >= 0) {
      dragMoved = true;
      planned[dragNode] = toMetric(px, py);
      markEdited(); // 곡선을 그 자리에서 다시 그린다 — 나머지 곡선은 그대로 남는다.
      // 끄는 동안에도 상태줄이 살아 있어야 한다 — 예전에는 여기서 아무 말이 없어
      // 「곡선이 사라졌다」는 인상만 남았다(2026-09-07 사용자 지적 ②).
      status.textContent = `노드 ${planned.length}개 — 옮기는 중. ${curveHint()}`;
      draw();
      return;
    }
    canvas.style.cursor = nodeAt(px, py) >= 0 || handleAt(px, py) ? "grab" : "default";
  });

  const endDrag = (event: PointerEvent): void => {
    if (canvas.hasPointerCapture(event.pointerId)) canvas.releasePointerCapture(event.pointerId);
    // 끌기 **한 번**이 되돌리기 한 걸음이다 — 프레임마다 쌓으면 한 번 물리는 데 수십 번
    // 눌러야 한다. 놓는 순간에만 쌓는다.
    if (dragMoved) {
      history?.commit(snapshotNow());
      historyControls.sync();
    }
    dragNode = -1;
    dragHandle = null;
    dragMoved = false;
  };
  canvas.addEventListener("pointerup", endDrag);
  canvas.addEventListener("pointercancel", endDrag);

  canvas.addEventListener("dblclick", (event) => {
    const rect = canvas.getBoundingClientRect();
    const px = event.clientX - rect.left;
    const py = event.clientY - rect.top;
    const segment = segmentAt(px, py);
    if (segment < 0) return;
    planned.splice(segment + 1, 0, toMetric(px, py));
    // 편집값도 같은 자리에 끼워 넣는다 — 안 그러면 뒤 노드의 R·켬끔이 한 칸씩 밀린다.
    curveOn.splice(segment + 1, 0, true);
    curveRadius.splice(segment + 1, 0, null);
    picked = segment + 1;
    applyEdit("새 노드를 넣었습니다(직선 추가).");
  });

  canvas.addEventListener("contextmenu", (event) => {
    event.preventDefault();
    const rect = canvas.getBoundingClientRect();
    const index = nodeAt(event.clientX - rect.left, event.clientY - rect.top);
    if (index < 0) return;
    if (planned.length <= 2) {
      showToast("노선은 노드가 2개 이상이어야 합니다.", "error");
      return;
    }
    planned.splice(index, 1);
    curveOn.splice(index, 1);
    curveRadius.splice(index, 1);
    picked = -1;
    applyEdit("노드를 지웠습니다(직선 삭제).");
  });

  // 확대·이동은 배수유역도와 같은 동작으로 — 휠은 당기면 확대, 팬은 가운데 버튼 전용.
  bindRouteEditNavigation({
    canvas,
    getView: () => view,
    setView: (next) => {
      view = next;
    },
    getMeta: () => meta,
    draw,
  });

  async function runHeavy(label: string, task: () => Promise<unknown>): Promise<void> {
    busy.hidden = false;
    busy.querySelector("span")!.textContent =
      `${label} — 배수유역부터 다시 계산 중입니다. 몇 분 걸립니다.`;
    try {
      await task();
      // 노선이 바뀌면 세션 초안·조회 캐시는 옛 노선 것이라 남기지 않는다(PLAN 0-7 확정 5).
      clearDrafts(projectId);
      clearResults(projectId);
      showToast("노선을 다시 계산했습니다.", "success");
      close();
      await onApplied();
    } catch (error) {
      busy.hidden = true;
      showToast(error instanceof Error ? error.message : "노선 재계산에 실패했습니다.", "error");
    }
  }

  overlay.querySelector('[data-act="apply"]')!.addEventListener("click", () => {
    if (planned.length < 2) {
      showToast("노선은 노드가 2개 이상이어야 합니다.", "error");
      return;
    }
    void runHeavy("계획노선 반영", () =>
      replanRoute(
        projectId,
        planned.map(([x, y], index) => ({
          x,
          y,
          curve: curveOn[index] !== false,
          radius_m: curveRadius[index] ?? null,
        })),
      ),
    );
  });
  overlay.querySelector('[data-act="reset"]')!.addEventListener("click", () => {
    void runHeavy("예상노선으로 되돌리기", () => resetRoutePlan(projectId));
  });

  // ── 자료 읽기 — 노선 두 벌 + 등고선 도엽(배수유역도와 같은 것) ──
  try {
    const [plan, drainage] = await Promise.all([
      fetchRoutePlan(projectId),
      fetchDrainageLayers(projectId, () => {}),
    ]);
    if (closed) return;
    expected = plan.expected as Vertex[];
    plannedLine = (plan.planned as Vertex[]).map((vertex) => [vertex[0], vertex[1]]);
    // 잡는 것은 **노드**다 — 폴리라인 정점에는 원호 위 점이 섞여 있어 편집 대상이 아니다
    // (2026-09-06 사용자 지시: 노드를 제어해 계획노선을 고친다).
    const nodes = plan.nodes ?? [];
    minRadiusM = plan.min_radius_m ?? 0;
    // 곡선 성분을 **편집할 수 있는 꼴로 펴 둔다**(2026-09-07).
    //
    // 서버는 처음 만들 때 이어진 꺾임을 한 곡선으로 묶는다 — 그 곡선의 교각점은 앞뒤 직선을
    // 늘려 만나는 자리라 **원본 꺾임점 중 어느 것도 아니다**. 그런데 편집은 「꺾임점 하나 =
    // 곡선 하나」로 표현되므로, 묶인 곡선을 그대로 두면 한 번만 손대도 그 묶음이 낱개로
    // 흩어지고 **맞춰 둔 반지름이 전부 법정 하한으로 되돌아간다**(실측: R 12~199m → 전부 12m).
    //
    // 그래서 **묶인 구간을 그 교각점 하나로 갈아 끼운다** — 안쪽 꺾임점은 그 곡선이 대신하므로
    // 뺀다. 앞뒤 직선과 반지름이 그대로라 **그려지는 선은 똑같고**, 이제 손대도 안 흩어진다.
    const curves = plan.curves ?? [];
    const replaced = new Map<number, (typeof curves)[number]>();
    const dropped = new Set<number>();
    curves.forEach((curve) => {
      replaced.set(curve.node_first, curve);
      for (let index = curve.node_first + 1; index <= curve.node_last; index += 1) {
        dropped.add(index);
      }
    });
    planned = [];
    nodeInfo = [];
    curveOn = [];
    curveRadius = [];
    curveInfo = [];
    nodes.forEach((node, index) => {
      if (dropped.has(index)) return;
      const curve = replaced.get(index);
      const at: Vertex = curve ? [curve.apex[0], curve.apex[1]] : [node.x, node.y];
      const seat = planned.length;
      planned.push(at);
      nodeInfo.push({
        radius_m: curve ? curve.radius_m : node.radius_m,
        inner_angle_deg: curve ? curve.inner_angle_deg : node.inner_angle_deg,
        violations: curve ? (curve.violations ?? []) : (node.violations ?? []),
      });
      // 서버가 **곡선을 안 둔 자리는 「곡선 없음」으로 연다**(2026-09-07). 전부 켬으로 열면
      // 아무것도 안 만지고 [확인]만 눌러도 그 자리에 곡선이 새로 생겨 노선이 조용히 바뀐다
      // (서버의 편집 갈래는 켜진 자리마다 원호를 끼우기 때문). 내각 179° 이상인 자리가 그렇다.
      curveOn.push(curve !== undefined);
      // 서버가 고른 반지름을 **그대로 들고 간다** — 안 그러면 편집 한 번에 하한으로 눌린다.
      curveRadius.push(curve ? Math.round(curve.radius_m * 100) / 100 : null);
      if (curve) curveInfo.push({ ...curve, node_first: seat, node_last: seat });
    });
    picked = -1;
    // 여기가 [초기화]가 돌아갈 자리다 — 창을 연 그대로.
    history = createRouteEditHistory(snapshotNow());
    historyControls.sync();
    syncCurveBar();
    if (!planned.length) planned = plannedLine.map((vertex) => [vertex[0], vertex[1]]);
    meta = drainage.meta;
    const normalizer = createNormalizer(drainage.meta);
    sheets = drainage.layers
      .map(([, collection]) => (collection ? prepareLayer(collection, normalizer) : null))
      .filter((layer): layer is PreparedLayer => layer !== null);
    resize();
    const xs = planned.map((vertex) => vertex[0]);
    const ys = planned.map((vertex) => vertex[1]);
    const fitted = computeRouteView(
      meta,
      {
        x_min: Math.min(...xs),
        x_max: Math.max(...xs),
        y_min: Math.min(...ys),
        y_max: Math.max(...ys),
      },
      view.width,
      view.height,
    );
    view = { ...view, ...fitted };
    status.textContent =
      `노드 ${planned.length}개 · ${plan.edited ? "고친 계획노선" : "초기 폴리라인"} · ` +
      curveHint();
    draw();
  } catch (error) {
    status.textContent = error instanceof Error ? error.message : "노선을 읽지 못했습니다.";
  }
}