/* =============================================================================
 * B05_wf2_Route_UI_Profile_Panel.ts
 * 하단 종단면도 패널 — 그래프 + 도면 테이블 2단, 계획선 직접 편집.
 *
 * 화면 높이의 60%를 쓰며, 그래프와 12행 도면 테이블이 **하나의 가로 스크롤러** 안에
 * 같은 폭으로 쌓여 X축이 자동으로 맞물린다(스크롤 동기화 코드 불필요).
 * 본문 세로는 그래프 40% : 테이블 60%로 나눈다.
 *
 * 편집은 전부 프론트에서 즉시 계산해 다시 그리고, 영속화는 [확정] 시점에
 * `saveProfileAlignment()`로 편집 델타만 보낸다.
 * ========================================================================== */

import type {
  DesignProfile,
  LongitudinalSection,
  SectionDetailResponse,
} from "../B06_wf3_ProfileCross/B06_wf3_ProfileCross_Api_Fetch";
import {
  createLongitudinalProfile,
  longitudinalMinimumWidth,
} from "../B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Longitudinal";
import { LONG_PAD } from "../B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Section_Common";
import { createWorkflowPanelHandle } from "@ui/ui_template_overlay";
import { showToast } from "@ui/ui_template_elements";
import { saveProfileAlignment } from "./B05_wf2_Route_Api_Fetch";
import type {
  AlignmentBase,
  AlignmentEdits,
  ProfileAlignment,
} from "./B05_wf2_Route_UI_Profile_Alignment";
import {
  adjustStation,
  buildAlignment,
  chainageKey,
  emptyEdits,
  setCurveRadius,
  shiftSegment,
  toAlignmentBase,
} from "./B05_wf2_Route_UI_Profile_Alignment";
import { createEditOverlay, createProfileEditStore } from "./B05_wf2_Route_UI_Profile_Edit";
import {
  createProfileTable,
  tableCellWidthFor,
  TABLE_TARGET_FONT_PX,
} from "./B05_wf2_Route_UI_Profile_Table";
import {
  irregularLabel,
  irregularStationId,
  type IrregularStation,
} from "./B05_wf2_Route_UI_IrregularStations";
import type { SectionStation } from "../B06_wf3_ProfileCross/B06_wf3_ProfileCross_Api_Fetch";
import "../B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Style.css";

const COLLAPSED_KEY = "b05-route-profile-collapsed";
/** 정보 라인을 뺀 본문 세로를 그래프 40% : 테이블 60%로 나눈다(4:6, 6이 테이블). */
const CHART_HEIGHT_RATIO = 0.4;
const MIN_CHART_HEIGHT = 100;
/** 테이블 12행. 행 높이와 셀 폭에서 글자 크기를 정하는 데 쓴다. */
const TABLE_ROW_COUNT = 12;

/**
 * 저장된 계획선 선형을 읽되 **모양을 먼저 검증한다**.
 *
 * 곡선 기준이 길이(L)에서 반경(R)으로 바뀌기 전에 만들어진 데이터는 `policy`에
 * `default_curve_radius_m`가 없어 그대로 쓰면 계산 도중 터진다. 그런 데이터는
 * 편집 기능을 끄고(지반선·계획선 차트만 표시) 재계산을 안내하는 편이 안전하다.
 */
function readAlignment(data: LongitudinalSection): ProfileAlignment | null {
  const candidate = data.profile_alignment as ProfileAlignment | undefined;
  if (!candidate?.base_pvi?.length || !candidate.samples?.length) return null;
  if (!Number.isFinite(candidate.policy?.default_curve_radius_m)) return null;
  if (!candidate.stations || !candidate.segments || !candidate.curves) return null;
  candidate.edits = {
    station_offsets: candidate.edits?.station_offsets ?? {},
    curve_radii: candidate.edits?.curve_radii ?? {},
  };
  return candidate;
}

/** 저장분이 구버전이라 편집을 붙일 수 없는 상태인가 (재계산 안내용). */
function hasLegacyAlignment(data: LongitudinalSection): boolean {
  return Boolean(data.profile_alignment) && readAlignment(data) === null;
}

/** 편집 결과를 종단면도 렌더러가 받는 계획선 형태로 감싼다. */
function toDesignProfile(
  alignment: ProfileAlignment,
  original: DesignProfile | undefined,
): DesignProfile {
  const balance = alignment.balance;
  return {
    id: original?.id ?? "design_grade_line",
    name: original?.name ?? "계획선",
    basis: original?.basis ?? "station_alignment",
    samples: alignment.samples,
    balance_segments: [
      {
        index: 0,
        start_chainage_m: alignment.samples[0]?.chainage_m ?? 0,
        end_chainage_m: alignment.samples[alignment.samples.length - 1]?.chainage_m ?? 0,
        cut_area_m2: balance.cut_area_m2,
        fill_area_m2: balance.fill_area_m2,
        balance_error_m2: balance.net_area_m2,
      },
    ],
    summary: {
      ...(original?.summary ?? {
        max_grade_pct: 0,
        vertical_curve_count: 0,
        pvi_count: 0,
        balance_segment_count: 1,
        main_direction: "none",
        suggested_elevation_offset_m: null,
        warnings: [],
      }),
      cut_area_m2: balance.cut_area_m2,
      fill_area_m2: balance.fill_area_m2,
      balance_error_m2: balance.net_area_m2,
      balanced: balance.within_tolerance,
    },
  };
}

function normalizedLongitudinal(data: LongitudinalSection): LongitudinalSection {
  return {
    ...data,
    samples: data.samples.map((sample) => ({
      ...sample,
      elevation_m: sample.elevation_m ?? sample.z ?? null,
    })),
  };
}

/** 측점 사이 여백 — 이웃 셀끼리 붙어 보이지 않게 띄운다. */
const CELL_GAP_PX = 2;

/**
 * 측점 한 칸의 **기준 폭(px)** — 목표 글자 크기(12px)로 7자리 값(`3000.00`)이 잘리지 않는 크기.
 * 실제 기본 간격은 여기에 배수(`PROFILE_SPACING_MULTIPLIER`)를 곱한 값을 쓴다.
 */
const STATION_SPACING_PX = tableCellWidthFor(TABLE_TARGET_FONT_PX) + CELL_GAP_PX;

/**
 * **측점 간격 기본 배수**. 기준 폭의 1.5배를 한 측점 칸의 기본 간격으로 삼는다.
 *
 * 이 배수로 펼친 폭이 **최소 폭**이다 — 브라우저가 이보다 넓으면 폭맞춤으로 늘리고, 좁으면
 * 이 간격을 유지한 채 스크롤로 훑는다. 넉넉한 기본값은 다음 세션의 **비정규 측점**(`+18` 등)이
 * 규칙 칸 안에서 chainage 비례로 자리 잡을 여유도 함께 확보한다.
 */
const PROFILE_SPACING_MULTIPLIER = 1.5;

/** 유효 표고 샘플 기준의 노선 최대 chainage(m). 그래프·테이블이 같은 값을 써야 X축이 맞물린다. */
function maxChainageOf(data: LongitudinalSection): number {
  const samples = normalizedLongitudinal(data).samples.filter(
    (sample) => sample.valid !== false && Number.isFinite(sample.elevation_m ?? NaN),
  );
  return Math.max(data.length_m, samples[samples.length - 1]?.chainage_m ?? 1, 1);
}

/**
 * 비정규 측점을 그래프용 `SectionStation`으로 만든다. 그래프 렌더러는 chainage·라벨·kind만
 * 쓰므로 월드 좌표는 0으로 둔다(3D 마커용 좌표는 Page가 따로 보간). 범위 밖은 제외.
 */
function irregularGraphStations(list: IrregularStation[], maxChainage: number): SectionStation[] {
  return list
    .filter((entry) => entry.chainage_m >= 0 && entry.chainage_m <= maxChainage + 1e-6)
    .map((entry) => ({
      station_id: irregularStationId(entry.id),
      chainage_m: entry.chainage_m,
      label: irregularLabel(entry),
      kind: "irregular" as const,
      center_z: null,
      azimuth_deg: null,
      center_x: 0,
      center_y: 0,
      frame: { left_xy: [0, 0] as [number, number] },
    }));
}

/**
 * 가로 스크롤에도 좌측에 고정되는 Y축(표고 눈금) 오버레이.
 *
 * SVG와 **같은 눈금**(렌더러가 콜백으로 넘김)을 쓰고, 불투명 배경으로 스크롤되는 그래프가
 * 새어 보이지 않게 가린다. 레이아웃에 영향을 주지 않도록 0크기 sticky 앵커 위에 축을 절대배치한다.
 */
function buildStickyYAxis(
  axis: { padLeft: number; ticks: Array<{ y: number; label: string }> },
  chartHeight: number,
): HTMLElement {
  const anchor = document.createElement("div");
  anchor.className = "b05-profile__yaxis";
  const inner = document.createElement("div");
  inner.className = "b05-profile__yaxis-inner";
  inner.style.width = `${axis.padLeft}px`;
  inner.style.height = `${chartHeight}px`;
  axis.ticks.forEach(({ y, label }) => {
    const tick = document.createElement("span");
    tick.className = "b05-profile__yaxis-tick";
    tick.style.top = `${y}px`;
    tick.textContent = label;
    inner.append(tick);
  });
  anchor.append(inner);
  return anchor;
}

/** 종단면도 렌더러와 **같은** chainage → x(px) 매핑을 만든다 (테이블·버튼 정렬 기준). */
function chainageMapper(
  data: LongitudinalSection,
  width: number,
  originOffset: number,
): (chainage: number) => number {
  const maxChainage = maxChainageOf(data);
  const plotWidth = width - LONG_PAD.left - LONG_PAD.right - 2 * originOffset;
  return (chainage: number) => LONG_PAD.left + originOffset + (chainage / maxChainage) * plotWidth;
}

interface ProfileLayout {
  /** 캔버스 폭(px). 화면이 넓으면 폭맞춤으로, 좁으면 최소 폭으로. */
  width: number;
  /** 0측점·종점을 축 프레임 안으로 반 칸씩 들여쓰는 여백(px) — 그래프·테이블 공통. */
  originOffset: number;
  /** 이웃 측점과 겹치지 않는 테이블 셀 폭(px). 실제 측점 간격에 맞춰 함께 늘어난다. */
  cellWidth: number;
}

/**
 * 측점 간격 기본값(기준 폭 × 1.5)으로 노선을 펼치되, 화면이 더 넓으면 폭맞춤으로 늘린다.
 *
 * 매핑은 `x(c) = LONG_PAD.left + halfCell + c·pxPerMeter`이고, 좌우로 반 칸(halfCell)씩 띄워
 * 0측점 셀이 이름표 열 밖으로, 종점 셀이 오른쪽 끝 밖으로 나오게 한다. 좌우 여백을 합치면
 * 한 칸(측점간격)이므로 `width = pads + (maxChainage + interval)·pxPerMeter`가 되고, 이를 뒤집어
 * pxPerMeter를 구하면 halfCell·셀 폭이 실제 간격과 항상 맞물린다.
 */
function computeProfileLayout(
  data: LongitudinalSection,
  stationIntervalM: number,
  availableWidth: number,
): ProfileLayout {
  const maxChainage = maxChainageOf(data);
  const interval = Math.max(stationIntervalM, 1e-6);
  const framePad = LONG_PAD.left + LONG_PAD.right;
  const minSpacing = STATION_SPACING_PX * PROFILE_SPACING_MULTIPLIER;
  // 기본 배수로 펼친 최소 폭 (좌우 반 칸 = 한 칸 여백 포함).
  const minWidth = framePad + ((maxChainage + interval) / interval) * minSpacing;
  const width = Math.max(minWidth, availableWidth);
  const pxPerMeter = (width - framePad) / (maxChainage + interval);
  const spacing = interval * pxPerMeter;
  return { width, originOffset: spacing / 2, cellWidth: Math.max(1, spacing - CELL_GAP_PX) };
}

export function createRouteProfilePanel(
  projectId: string,
  onSelectStation: (stationId: string) => void,
  /** [초기선 복원] 클릭 시 함께 실행(비정규 측점 등 다른 조작값도 초기화하려고 Page가 넘긴다). */
  onResetAll?: () => void,
) {
  const root = document.createElement("section");
  root.className = "b05-route-profile";
  const panelHandle = createWorkflowPanelHandle("bottom");
  const balanceBar = document.createElement("div");
  balanceBar.className = "b05-route-profile__balance";
  const body = document.createElement("div");
  body.className = "b05-route-profile__body";
  const empty = document.createElement("p");
  empty.className = "b05-route-profile__empty";
  empty.textContent = "최적 경로를 계산하면 종단면도가 표시됩니다.";
  body.append(empty);
  root.append(panelHandle.root, balanceBar, body);

  let detail: SectionDetailResponse | null = null;
  let selectedStationId: string | null = null;
  let stationInterval: number | undefined;
  let routeId: number | null = null;
  let irregularStations: IrregularStation[] = [];
  // 이어 공사 시작 기준 — 측점번호·누가거리 표시 오프셋(내부 chainage는 0기준 유지).
  let stationDisplay = { station: 0, cumulative: 0 };
  let base: AlignmentBase | null = null;
  let alignment: ProfileAlignment | null = null;
  let store = createProfileEditStore(null, emptyEdits(), () => rebuild());
  let resizeTimer = 0;
  let redrawPending = false;
  let lastWidth = 0;
  let lastHeight = 0;

  function renderBalance(): void {
    balanceBar.replaceChildren();
    if (!alignment) {
      if (detail && hasLegacyAlignment(detail.longitudinal)) {
        const note = document.createElement("span");
        note.className = "b05-route-profile__balance-warning";
        note.textContent =
          "⚠ 계획선 데이터가 구버전 형식입니다 — [최적 경로 계산]을 다시 실행하세요.";
        balanceBar.append(note);
      }
      return;
    }
    const { balance, policy, violations } = alignment;
    const entries: Array<[string, string, string?]> = [
      ["절토", `${balance.cut_area_m2.toFixed(1)} m²`, "cut"],
      ["성토", `${balance.fill_area_m2.toFixed(1)} m²`, "fill"],
      [
        "불균형",
        `${balance.imbalance_percent.toFixed(1)} % / 허용 ${balance.tolerance_percent.toFixed(0)} %`,
        balance.within_tolerance ? undefined : "over",
      ],
      ["변화점", `${alignment.pvi.length} 개`],
      ["종단곡선", `${alignment.curves.filter((curve) => !curve.omitted).length} 개`],
      ["기본 R", `${policy.default_curve_radius_m.toFixed(1)} m`],
    ];
    const editedCount = Object.keys(alignment.edits.station_offsets).length;
    if (editedCount) entries.push(["편집 측점", `${editedCount} 개`, "edited"]);
    entries.forEach(([label, value, tone]) => {
      const item = document.createElement("span");
      item.className = `b05-route-profile__balance-item${tone ? ` is-${tone}` : ""}`;
      const caption = document.createElement("em");
      caption.textContent = label;
      item.append(caption, document.createTextNode(value));
      balanceBar.append(item);
    });
    if (violations.length) {
      const warning = document.createElement("span");
      warning.className = "b05-route-profile__balance-warning";
      warning.textContent = `⚠ 종단기울기 초과 ${violations.length}개 구간`;
      warning.title = violations
        .map((item) => `구간 ${item.segment_index + 1}: ${item.value.toFixed(2)}% > ${item.limit}%`)
        .join("\n");
      balanceBar.append(warning);
    }
    if (store.edited() || irregularStations.length) {
      const reset = document.createElement("button");
      reset.type = "button";
      reset.className = "b05-route-profile__balance-reset";
      reset.textContent = "초기선 복원";
      reset.title = "모든 편집과 추가한 비정규 측점을 지우고 자동 산출된 계획선으로 되돌립니다.";
      reset.addEventListener("click", () => {
        store.resetAll();
        onResetAll?.();
      });
      balanceBar.append(reset);
    }
    if (store.dirty()) {
      const badge = document.createElement("span");
      badge.className = "b05-route-profile__balance-item is-unsaved";
      badge.textContent = "미저장 (확정 시 반영)";
      balanceBar.append(badge);
    }
  }

  /** 편집을 적용한다. 법정 위반 정책이 block이면 새 위반이 생기는 편집을 막는다. */
  function applyEdits(next: AlignmentEdits): void {
    if (!base || !alignment) return;
    const candidate = buildAlignment(base, next);
    if (
      base.policy.grade_violation_policy === "block" &&
      candidate.violations.length > alignment.violations.length
    ) {
      showToast(
        `종단기울기 상한 ${base.policy.max_grade_pct.toFixed(1)}%를 넘어 편집을 적용하지 않았습니다.`,
        "error",
      );
      return;
    }
    store.replace(next);
  }

  /**
   * 편집 후 다시 그린다. 길게 누르기(초당 10회)로 연속 호출되므로 한 프레임에 한 번만
   * 실제 렌더링하도록 모은다.
   */
  function rebuild(): void {
    if (base) alignment = buildAlignment(base, store.edits());
    if (redrawPending) return;
    redrawPending = true;
    requestAnimationFrame(() => {
      redrawPending = false;
      draw();
    });
  }

  function draw(): void {
    if (!detail || body.clientWidth <= 0 || body.clientHeight <= 0) return;
    lastWidth = body.clientWidth;
    lastHeight = body.clientHeight;
    // 편집할 때마다 본문을 갈아끼우므로 보고 있던 가로 위치를 잃지 않게 되돌린다.
    const scrollLeft = body.scrollLeft;
    renderBalance();

    const longitudinal = detail.longitudinal;
    const availableWidth = Math.max(1, body.clientWidth - 15);
    // 계획선(편집 가능) 상태에서는 측점 간격 기본값(기준×1.5)으로 펼치되 화면이 넓으면
    // 폭맞춤으로 늘린다. 그 외(구버전·플레인 뷰)는 예전처럼 화면 폭에 맞춰 펼친다.
    const stationIntervalM = stationInterval ?? alignment?.policy.station_interval_m;
    const layout =
      alignment && stationIntervalM
        ? computeProfileLayout(longitudinal, stationIntervalM, availableWidth)
        : {
            width: Math.max(
              availableWidth,
              longitudinalMinimumWidth(longitudinal, stationInterval),
            ),
            originOffset: 0,
            cellWidth: STATION_SPACING_PX - CELL_GAP_PX,
          };
    const { width, originOffset } = layout;
    const canvas = document.createElement("div");
    canvas.className = "b05-profile__canvas";
    canvas.style.width = `${width}px`;

    const x = chainageMapper(longitudinal, width, originOffset);
    // 그래프 40% : 테이블 60% (상단 정보 라인은 본문 밖이라 애초에 빠져 있다).
    // 가로 스크롤바를 `overflow-x: scroll`로 항상 띄우므로 clientHeight에서 이미 빠져 있다.
    const available = Math.max(120, body.clientHeight);
    const chartHeight = alignment
      ? Math.max(MIN_CHART_HEIGHT, Math.round(available * CHART_HEIGHT_RATIO))
      : available;
    const tableHeight = available - chartHeight;

    const table = alignment
      ? createProfileTable({
          alignment,
          stationInterval: stationInterval ?? alignment.policy.station_interval_m,
          width,
          height: tableHeight,
          // 셀 폭은 실제 측점 간격에 맞춰 함께 늘어난다(폭맞춤 시 값이 넓게 퍼진다).
          cellWidth: layout.cellWidth,
          // 이름표 열을 그래프 좌측 여백과 같은 폭으로 맞춰야 그래프 시작점이 가려지지 않는다.
          labelWidth: LONG_PAD.left,
          rowCount: TABLE_ROW_COUNT,
          x,
          // 비정규 측점은 규칙 격자를 건드리지 않고, 선택된 측점만 값 열로 오버레이한다.
          irregularStations: irregularStations.filter(
            (entry) =>
              entry.chainage_m >= 0 && entry.chainage_m <= maxChainageOf(longitudinal) + 1e-6,
          ),
          selectedStationId,
          stationDisplay,
          onCurveRadiusChange: (curve, radius) =>
            applyEdits(setCurveRadius(store.edits(), curve, radius ?? 0)),
          // 값 열 계획고 직접 입력 → 규칙 측점과 동일한 station_offset 파이프라인.
          onAdjustStation: (chainage, delta) =>
            base && applyEdits(adjustStation(base, store.edits(), chainage, delta)),
        })
      : null;

    const chartWrap = document.createElement("div");
    chartWrap.className = "b05-profile__chart";
    chartWrap.style.height = `${chartHeight}px`;
    const designProfiles = alignment
      ? [toDesignProfile(alignment, longitudinal.design_profiles?.[0])]
      : (longitudinal.design_profiles ?? []);
    // 그래프에는 비정규 측점을 일반 측점처럼(세로선+라벨) 섞어 넣는다.
    const graphData = normalizedLongitudinal(longitudinal);
    const injected = irregularGraphStations(irregularStations, maxChainageOf(longitudinal));
    const graphLongitudinal = injected.length
      ? {
          ...graphData,
          stations: [...graphData.stations, ...injected].sort(
            (a, b) => a.chainage_m - b.chainage_m,
          ),
        }
      : graphData;
    let yAxis: { padLeft: number; ticks: Array<{ y: number; label: string }> } | null = null;
    chartWrap.append(
      createLongitudinalProfile(
        graphLongitudinal,
        selectedStationId,
        1,
        undefined,
        onSelectStation,
        stationInterval,
        width,
        chartHeight,
        width,
        designProfiles,
        originOffset,
        (axis) => {
          yAxis = axis;
        },
        stationDisplay.station,
      ),
    );
    // 가로 스크롤에도 고정되는 sticky Y축 오버레이(SVG와 같은 눈금·불투명 배경으로 값 누출 차단).
    if (yAxis) chartWrap.append(buildStickyYAxis(yAxis, chartHeight));
    if (alignment) {
      chartWrap.append(
        createEditOverlay({
          alignment,
          width,
          x,
          step: alignment.policy.edit_step_m,
          // 비정규 측점도 규칙 측점처럼 ▲/▼ 버튼으로 계획고 조정(임의 chainage 변화점 승격).
          irregularStations: irregularStations.filter(
            (entry) =>
              entry.chainage_m >= 0 && entry.chainage_m <= maxChainageOf(longitudinal) + 1e-6,
          ),
          onStation: (chainage, delta) =>
            base && applyEdits(adjustStation(base, store.edits(), chainage, delta)),
          onSegment: (segment, delta) =>
            base && applyEdits(shiftSegment(base, store.edits(), segment, delta)),
          onResetStation: (chainage) => store.resetStation(chainage),
        }),
      );
    }
    canvas.style.height = `${available}px`;
    canvas.append(chartWrap);
    if (table) canvas.append(table);
    body.replaceChildren(canvas);
    body.scrollLeft = scrollLeft;
  }

  // 종단면도는 가로로 매우 길다. 세로 휠을 가로 스크롤로 돌려 스크롤바를 잡지 않고도
  // 노선을 훑을 수 있게 한다 (Shift+휠은 브라우저 기본 가로 스크롤이라 그대로 둔다).
  body.addEventListener(
    "wheel",
    (event) => {
      if (event.shiftKey || event.deltaY === 0) return;
      const delta = event.deltaY;
      const limit = body.scrollWidth - body.clientWidth;
      if (limit <= 0) return;
      if ((delta < 0 && body.scrollLeft <= 0) || (delta > 0 && body.scrollLeft >= limit)) return;
      body.scrollLeft += delta;
      event.preventDefault();
    },
    { passive: false },
  );

  const resizeObserver = new ResizeObserver(() => {
    if (
      body.clientWidth <= 0 ||
      body.clientHeight <= 0 ||
      (Math.abs(body.clientWidth - lastWidth) < 1 && Math.abs(body.clientHeight - lastHeight) < 1)
    )
      return;
    window.clearTimeout(resizeTimer);
    resizeTimer = window.setTimeout(draw, 150);
  });
  resizeObserver.observe(body);

  function setCollapsed(collapsed: boolean): void {
    root.classList.toggle("is-collapsed", collapsed);
    panelHandle.setOpen(!collapsed);
    sessionStorage.setItem(COLLAPSED_KEY, String(collapsed));
    if (!collapsed) requestAnimationFrame(draw);
  }

  panelHandle.root.addEventListener("click", () =>
    setCollapsed(!root.classList.contains("is-collapsed")),
  );
  setCollapsed(sessionStorage.getItem(COLLAPSED_KEY) === "true");

  return {
    root,
    render(nextDetail: SectionDetailResponse, nextStationInterval?: number, nextRouteId?: number) {
      detail = nextDetail;
      stationInterval = nextStationInterval;
      const stored = readAlignment(nextDetail.longitudinal);
      // 재탐색으로 경로(routeId)가 바뀔 때, 사용자가 조작한 편집이 있으면 **새 경로에 이월**한다.
      // 편집은 chainage 키라 새 base에 그대로 재적용된다(범위 밖·미매칭 변화점은 best-effort로 드롭).
      const routeChanged = nextRouteId !== routeId;
      const carried = routeChanged && store.edited() ? store.edits() : null;
      // 서버 저장분을 기준으로 삼되, 남아 있는 세션 초안이 있으면 그쪽을 우선한다.
      if (routeChanged || !store.dirty()) {
        routeId = nextRouteId ?? routeId;
        store = createProfileEditStore(routeId, stored?.edits ?? emptyEdits(), () => rebuild());
      }
      base = stored ? toAlignmentBase(stored) : null;
      // 이월분은 base 설정 후 미저장 초안으로 커밋한다(확정 시 전송·재탐색 후 새로고침에도 유지).
      if (carried) store.replace(carried);
      alignment = base ? buildAlignment(base, store.edits()) : null;
      draw();
      requestAnimationFrame(draw);
    },
    setSelectedStation(stationId: string | null) {
      selectedStationId = stationId;
      draw();
    },
    /** 비정규 측점 목록을 반영해 그래프(세로선+라벨)·테이블(주석)을 다시 그린다. */
    setIrregularStations(stations: IrregularStation[]) {
      irregularStations = stations;
      draw();
    },
    /** 이어 공사 시작 기준(측점번호·누가거리 오프셋)을 반영해 측점 라벨·누가거리 표시를 옮긴다. */
    setStationDisplay(next: { station: number; cumulative: number }) {
      stationDisplay = next;
      draw();
    },
    /**
     * 특정 chainage의 계획고 편집(station_offset·curve_radii)을 지운다.
     * 비정규 측점을 옮기거나 지울 때 옛 위치에 남는 편집(유령 변화점)을 청소하는 데 쓴다.
     */
    resetStationEdit(chainageM: number) {
      const key = chainageKey(chainageM);
      const edits = store.edits();
      if (edits.station_offsets[key] === undefined && edits.curve_radii[key] === undefined) return;
      store.resetStation(chainageM);
    },
    isDirty: () => store.dirty(),
    /** [확정] 직전에 호출한다. 편집이 없으면 아무 것도 하지 않는다. */
    async save(): Promise<void> {
      if (!routeId || !store.dirty()) return;
      const saved = await saveProfileAlignment(projectId, routeId, store.edits());
      const next = saved.profile_alignment as ProfileAlignment | undefined;
      if (next?.base_pvi?.length) {
        base = toAlignmentBase(next);
        alignment = next;
        if (detail) detail.longitudinal.profile_alignment = next;
      }
      store.markSaved();
      draw();
    },
    clear() {
      detail = null;
      base = null;
      alignment = null;
      selectedStationId = null;
      balanceBar.replaceChildren();
      body.replaceChildren(empty);
    },
    dispose() {
      window.clearTimeout(resizeTimer);
      resizeObserver.disconnect();
    },
  };
}