Aislo/B05_Profile/B05_Profile_UI_Profile_MassHaul.ts

/* =============================================================================
 * B05_Profile_UI_Profile_MassHaul.ts
 * B05 유토곡선 — 종단면 패널 바닥에 붙는 **오버레이 서브패널**.
 *
 * ── B06과 같은 그림이어야 한다 (2026-08-03 사용자 확정) ──────────────
 * 이 프로그램은 파일 입력 시 기본 설정값으로 B06 몫까지 미리 계산해 둔다 — 종횡단 상세
 * 조회(`fetchSectionDetail`)가 지정 설계 없는 측점에 기본 설계를 즉석 계산해 얹으므로
 * (`_attach_default_designs`), B05 진입 시점에 이미 **횡단 단면적 기반 정식 곡선**을 그릴
 * 수 있다. 그래서 B06과 똑같이 `computeMassHaulSeries`(횡단 기준 + 종단 개략 비교)를 쓰고,
 * 범례·토량 분배·balloon·요약도 전부 공용 모듈 그대로 쓴다.
 *
 * 표시 토글 sessionStorage 키도 B06과 **공유**한다 — 두 화면은 같은 그림의 두 창이라
 * 한쪽에서 켠 곡선이 다른 쪽에서도 켜져 있어야 한다. 데이터 자체도 같은 상세 API와
 * 같은 영구저장소(`longitudinal_sections.data.mass_haul`)를 읽으므로, B06에서 횡단을
 * 고쳐 임시저장/확정하면 B05는 재조회만으로 같은 곡선을 받는다.
 *
 * ── 배치 (2026-08-04 사용자 확정: 오버레이 전환) ─────────────────────
 * 예전에는 펼치면 종단 그래프와 세로 1:1 분할 + 도면 테이블 숨김이었다. 이제는 종단도·
 * 테이블 배치를 **건드리지 않고**, 패널 바닥에 붙는 오버레이가 그 위를 덮는다. 높이는
 * 오버레이 위 경계의 리사이저(메인 하단 패널과 같은 `createPanelResizer`)로 조절하고
 * 세션 동안 유지한다. 곡선 SVG는 오버레이 안 자체 가로 스크롤러에 들어가며, 종단
 * 스크롤러와 scrollLeft를 양방향 동기화해 측점 세로선이 어긋나지 않게 한다.
 * ========================================================================== */

import type {
  EarthworkConversion,
  HaulEquipmentLimit,
  MassHaulLongitudinal,
  MassHaulSection,
  MassHaulStationSource,
} from "@util/common_util_mass_haul_types";
import type { MassHaulSeries } from "@util/common_util_mass_haul";
import type { HaulPlan } from "@util/common_util_mass_haul_balance";
import type { MassHaulAxis } from "@util/common_util_mass_haul_view";
import {
  applyLegendToggle,
  computeMassHaulSeries,
  MASS_HAUL_BALANCE_KEY,
  MASS_HAUL_DEFAULT_VISIBLE,
  normalizeVisibleBasis,
} from "@util/common_util_mass_haul";
import { computeHaulPlan } from "@util/common_util_mass_haul_balance";
import { resetBalloonOffsets } from "@util/common_util_mass_haul_balance_view";
import {
  createMassHaulChart,
  createMassHaulLegend,
  createMassHaulSummary,
  MASS_HAUL_MIN_HEIGHT,
} from "@util/common_util_mass_haul_view";
import { createWorkflowPanelHandle } from "@ui/ui_template_overlay";
import { createPanelResizer } from "@ui/ui_template_resizer";
import "@util/common_util_mass_haul.css";
import "./B05_Profile_UI_Style_MassHaul.css";

/** 2차 패널 펼침 여부 — 세션 동안만 유지(패널 높이·접힘과 같은 수명). */
const OPEN_KEY = "b05-route-profile-masshaul-open";
/** 오버레이 높이(px) 세션 키 — 메인 하단 패널 높이와 같은 수명. */
const OVERLAY_HEIGHT_KEY = "b05-route-profile-masshaul-height";
/** 오버레이 높이 하한/기본값(px). 곡선 + 요약 막대가 읽히는 최소 크기다. */
const OVERLAY_MIN_HEIGHT = 160;
/** 유토곡선 오버레이 최소 높이 — 메인 패널 하한 계산(Profile_Panel)이 함께 쓴다. */
export const MASSHAUL_MIN_HEIGHT = OVERLAY_MIN_HEIGHT;
const OVERLAY_DEFAULT_HEIGHT = 280;
/** 오버레이가 패널 본문을 다 덮지 않게 남기는 상한 비율. */
const OVERLAY_MAX_RATIO = 0.8;
/** 리사이저가 높이를 담는 CSS 변수 — CSS 기본값(280px)은 OVERLAY_DEFAULT_HEIGHT와 같아야 한다. */
const HEIGHT_VAR = "--b05-masshaul-height";
/**
 * 표시 곡선·레이어 키 — **B06 유토곡선과 같은 키**를 쓴다. 두 화면은 같은 그림의 두 창이라
 * 표시 상태가 갈리면 "같은 곡선인데 왜 다르게 보이나"가 된다(2026-08-03 사용자 확정).
 * 정의처는 B06 `_UI_Section_View`와 이 파일 두 곳뿐이며 값이 반드시 같아야 한다.
 */
const VISIBLE_KEY = "b06:masshaul-visible-v4";
const DEFAULT_VISIBLE: string[] = [...MASS_HAUL_DEFAULT_VISIBLE, MASS_HAUL_BALANCE_KEY];

/** 유토곡선 계산에 필요한 프로젝트 설정 — B05 Page가 `fetchSectionContext()`에서 받아 넘긴다. */
export interface RouteMassHaulContext {
  conversion: EarthworkConversion;
  haulLimits?: HaulEquipmentLimit[];
  /** 자연방토 판정 경사(rise/run). 못 받으면 전부 불가(보수적) — B06과 같은 규약. */
  naturalSpoilMinSlope?: number;
}

/** 가로 스크롤에도 좌측에 고정되는 Y축 오버레이(표고·누가토량 공용).
 *
 * SVG와 **같은 눈금**(렌더러가 콜백으로 넘김)을 쓰고, 불투명 배경으로 스크롤되는 그래프가
 * 새어 보이지 않게 가린다. 레이아웃에 영향을 주지 않도록 0크기 sticky 앵커 위에 축을
 * 절대배치한다. 종단 그래프(Panel)와 유토곡선(이 모듈)이 함께 쓰므로 여기가 정의처다.
 */
export 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;
}

export interface RouteMassHaulDrawParams {
  /** 측점선을 세울 목록 — 종단 그래프에 넣은 것과 **같은 배열**이어야 자리가 맞는다. */
  stationSource: MassHaulStationSource;
  /** 종단 개략 곡선 입력 — 편집이 반영된 현재 계획선을 담은 종단 데이터. */
  longitudinal: MassHaulLongitudinal;
  /** 횡단 정식 곡선 입력 — 상세 조회가 내려준 측점별 설계(기본 프리뷰 포함). */
  crossSections: MassHaulSection[];
  /** 종단 그래프와 같은 X 매핑(누가거리 최댓값·좌우 여백). */
  axis: MassHaulAxis;
  stationInterval: number;
  /** 종단 캔버스와 같은 콘텐츠 폭(px) — 같아야 측점 세로선이 맞물린다. */
  widthPx: number;
  selectedStationId: string | null;
  onSelectStation: (stationId: string) => void;
  /** 측점선이 아닌 빈 곳 클릭 — 선택 해제(2026-08-04 사용자 지시). */
  onClearSelection?: () => void;
  /**
   * 저장된 횡단이 지금 계획선과 어긋나 재계산이 예약된 상태. 그 사이의 면적은 **옛
   * 계획고로 만든 값**이라 그리면 사용자가 옛 그림을 보게 된다(2026-09-03 사용자 확정:
   * 「새 값만 보여주기」). Panel이 `hasStaleDesigns`로 판정해 넘긴다.
   */
  pendingRecalc?: boolean;
}

export interface RouteMassHaulPanel {
  /** 종단면 패널 바닥에 붙는 2차 슬라이드 손잡이(펼치기/접기). */
  handle: HTMLElement;
  /** 오버레이 서브패널 — 호출한 쪽이 `position: relative`인 패널 본문 래퍼에 붙인다. */
  overlay: HTMLElement;
  isOpen(): boolean;
  /** 저장된 오버레이 높이(px) — 리사이저 변수(세션)나 기본값. 임시 축소(인라인)는 무시한다.
   *  Panel의 높이 캐스케이드가 호출마다 같은 판정을 내리는 기준(2026-08-06 진동 수정). */
  desiredHeight(): number;
  /** 저장 높이를 확정한다(리사이저와 같은 변수+세션 기록) — 메인 패널 비례 연동이
   *  드래그를 마친 높이를 앞으로의 기준으로 못 박는 데 쓴다(2026-08-06 사용자 확정). */
  commitHeight(px: number): void;
  /** 손잡이를 오버레이 위 경계로 다시 맞춘다 — 캐스케이드가 인라인 높이를 바꾼 직후 호출. */
  syncHandle(): void;
  setContext(next: RouteMassHaulContext | null): void;
  /** 종단 가로 스크롤러와 scrollLeft를 양방향 동기화한다(설치 1회). */
  attachScrollSync(main: HTMLElement): void;
  /** 오버레이 내용을 다시 그린다. 접혀 있으면 오버레이만 숨기고 끝낸다. */
  draw(params: RouteMassHaulDrawParams): void;
}

function readVisible(): Set<string> {
  try {
    const raw = sessionStorage.getItem(VISIBLE_KEY);
    if (!raw) return new Set(DEFAULT_VISIBLE);
    const parsed = JSON.parse(raw) as unknown;
    // 기준 키는 라디오라 항상 하나로 눌러 맞춘다(B06 읽기와 같은 규칙).
    return Array.isArray(parsed)
      ? normalizeVisibleBasis(new Set(parsed.map(String)))
      : new Set(DEFAULT_VISIBLE);
  } catch {
    return new Set(DEFAULT_VISIBLE);
  }
}

/**
 * @param onChanged 펼침·범례 토글·높이 조절로 다시 그려야 할 때 호출된다(패널 전체 redraw).
 */
export function createRouteMassHaulPanel(onChanged: () => void): RouteMassHaulPanel {
  // 손잡이는 다른 패널과 **같은 양식**의 표준 삼각형 손잡이 하나만 쓴다(2026-08-04 사용자
  // 지시 — 예전 풀폭 바 + "유토곡선" 캡션은 다른 패널들과 모양이 달랐다). 무엇의 손잡이인지는
  // 툴팁으로 밝힌다.
  const handleControl = createWorkflowPanelHandle("bottom", "down", "유토곡선");
  const handle = document.createElement("div");
  handle.className = "b05-profile__masshaul-handle";
  handle.append(handleControl.root);
  handleControl.root.setAttribute("aria-label", "유토곡선 패널");

  // 오버레이 뼈대 — 위 경계 리사이저 + 요약 막대 + 가로 스크롤러 + 범례.
  const overlay = document.createElement("div");
  overlay.className = "b05-profile__masshaul-overlay";
  const bar = document.createElement("div");
  bar.className = "b05-profile__masshaul-bar";
  const scroll = document.createElement("div");
  scroll.className = "b05-profile__masshaul-scroll";
  const legendLayer = document.createElement("div");
  legendLayer.className = "b05-profile__masshaul-legend";
  // 상태 선언은 반드시 리사이저 생성보다 **먼저** — createPanelResizer가 세션에 저장된
  // 높이를 복원하며 생성 중에 onResize → syncHandlePosition을 부르는데, `open`이 그 아래
  // 있으면 TDZ ReferenceError로 B05 페이지 전체가 죽는다(2026-08-04 사용자 보고 —
  // 저장된 높이가 있는 브라우저에서만 재현되는 이유).
  let open = sessionStorage.getItem(OPEN_KEY) === "true";
  let context: RouteMassHaulContext | null = null;
  // 높이 조절 — 메인 하단 패널과 같은 공용 리사이저(위 경계, 위로 끌면 커짐, 세션 보존).
  let resizeRedrawPending = false;
  const resizer = createPanelResizer({
    axis: "vertical",
    target: overlay,
    cssVar: HEIGHT_VAR,
    direction: -1,
    min: OVERLAY_MIN_HEIGHT,
    max: () => (overlay.parentElement?.clientHeight ?? window.innerHeight) * OVERLAY_MAX_RATIO,
    storageKey: OVERLAY_HEIGHT_KEY,
    onResize: () => {
      // 손잡이는 경계를 즉시 따라가고(가벼움), 전체 redraw는 프레임당 한 번만.
      syncHandlePosition();
      if (resizeRedrawPending) return;
      resizeRedrawPending = true;
      requestAnimationFrame(() => {
        resizeRedrawPending = false;
        onChanged();
      });
    },
  });
  overlay.append(resizer.root, bar, scroll, legendLayer);

  // 측점선이 아닌 빈 곳 클릭 = 선택 해제 — 종단 그래프와 같은 규칙(2026-08-04 사용자 지시).
  let clearSelection: (() => void) | undefined;
  scroll.addEventListener("click", (event) => {
    if ((event.target as HTMLElement).closest(".b06-chart__station")) return;
    clearSelection?.();
  });

  // 종단 그래프 영역과 같은 문법 — 세로 휠을 가로 이동으로 돌린다(2026-08-04 사용자 지시).
  // scrollLeft 동기화 덕에 위 종단 그래프도 함께 움직인다. Shift+휠은 브라우저 기본 그대로.
  scroll.addEventListener(
    "wheel",
    (event) => {
      if (event.shiftKey || event.deltaY === 0) return;
      const limit = scroll.scrollWidth - scroll.clientWidth;
      if (limit <= 0) return;
      const delta = event.deltaY;
      if ((delta < 0 && scroll.scrollLeft <= 0) || (delta > 0 && scroll.scrollLeft >= limit))
        return;
      scroll.scrollLeft += delta;
      event.preventDefault();
    },
    { passive: false },
  );

  /**
   * 손잡이를 오버레이 **위 경계**에 태운다(2026-08-04 사용자 지시 — 펼치면 같이 올라와
   * 테이블 영역을 침범해도 된다). 접혀 있으면 패널 바닥으로 돌아온다 — 유토곡선은 서브패널
   * 순서상 맨 아래라 테이블이 열려 있어도 버튼은 바닥에 남는다(2026-08-05 사용자 확정).
   */
  function syncHandlePosition(): void {
    handle.style.bottom = open ? `${overlay.offsetHeight}px` : "0px";
  }

  function applyOpen(next: boolean): void {
    open = next;
    sessionStorage.setItem(OPEN_KEY, String(next));
    handleControl.setOpen(next);
    // 툴팁은 setOpen이 일반 문구로 덮으므로 매번 유토곡선용으로 다시 밝힌다.
    handleControl.root.title = next ? "유토곡선 접기" : "유토곡선 펼치기";
    handle.classList.toggle("is-open", next);
    overlay.hidden = !next;
    syncHandlePosition();
    onChanged();
  }
  handleControl.setOpen(open);
  handleControl.root.title = open ? "유토곡선 접기" : "유토곡선 펼치기";
  handle.classList.toggle("is-open", open);
  overlay.hidden = !open;
  handleControl.root.addEventListener("click", () => applyOpen(!open));

  function toggleSeries(key: string): void {
    // 곡선 기준(횡단/종단)은 라디오 — 하나를 고르면 그 기준 그래프만 전체 영역에 보인다.
    const visible = applyLegendToggle(readVisible(), key);
    sessionStorage.setItem(VISIBLE_KEY, JSON.stringify([...visible]));
    onChanged();
  }

  // 종단 스크롤러와의 양방향 동기화 — 재진입 루프는 플래그로 끊는다.
  let syncing = false;
  function mirror(from: HTMLElement, to: HTMLElement): void {
    from.addEventListener("scroll", () => {
      if (syncing) return;
      syncing = true;
      to.scrollLeft = from.scrollLeft;
      syncing = false;
    });
  }
  let syncedMain: HTMLElement | null = null;
  function attachScrollSync(main: HTMLElement): void {
    if (syncedMain === main) return;
    syncedMain = main;
    mirror(main, scroll);
    mirror(scroll, main);
  }

  /** 곡선을 한 번이라도 그렸는지 — 재계산 대기 중 화면을 비우지 않기 위한 표시. */
  let drawnOnce = false;

  function note(message: string): void {
    drawnOnce = false;
    bar.replaceChildren();
    scroll.replaceChildren();
    legendLayer.replaceChildren();
    const empty = document.createElement("span");
    empty.className = "b05-profile__masshaul-empty";
    empty.textContent = message;
    bar.append(empty);
  }

  function draw(params: RouteMassHaulDrawParams): void {
    clearSelection = params.onClearSelection;
    overlay.hidden = !open;
    syncHandlePosition();
    if (!open) return;
    if (!context) {
      note("토량환산계수를 불러오지 못해 유토곡선을 계산할 수 없습니다.");
      return;
    }
    // 저장된 횡단이 지금 계획선과 어긋나 있으면 그 면적은 옛 계획고로 만든 값이다 —
    // 새 값이 올 때까지 기다린다(2026-09-03 사용자 확정: 「새 값만 보여주기」).
    //
    // 다만 **곡선을 지우지는 않는다**. 계획고를 연속으로 누르면(초당 10회) 매번 곡선이
    // 사라졌다 다시 서서 화면이 깜빡였다(2026-09-03 사용자 보고). 재계산은 브라우저
    // 안에서 끝나 수십 ms면 끝나므로, 그동안 **직전 곡선을 그대로 두고** 상태줄로만
    // 알린다. 아직 한 번도 못 그렸을 때만 문구로 자리를 채운다.
    if (params.pendingRecalc) {
      if (drawnOnce) {
        const pending = bar.querySelector(".b05-profile__masshaul-pending");
        if (!pending) {
          const chip = document.createElement("span");
          chip.className = "b05-profile__masshaul-pending";
          chip.textContent = "다시 계산 중…";
          bar.append(chip);
        }
      } else {
        note("횡단을 지금 계획선에 맞춰 다시 계산하는 중입니다.");
      }
      return;
    }
    // B06과 같은 계산 — 횡단 기준(정식)과 종단 기준(개략 비교)을 함께 낸다.
    const series: MassHaulSeries[] = computeMassHaulSeries(
      params.longitudinal,
      params.crossSections,
      context.conversion,
      context.naturalSpoilMinSlope,
    );
    if (!series.length) {
      note("횡단 설계가 아직 없어 유토곡선을 그릴 수 없습니다.");
      return;
    }
    bar.replaceChildren();
    legendLayer.replaceChildren();
    const visible = readVisible();
    // 토량 분배는 켜 둔 첫 곡선(정식 우선)에만 얹는다 — B06과 같은 규칙.
    const banded = series.find((entry) => visible.has(entry.key));
    const haulPlan: HaulPlan | null =
      banded && visible.has(MASS_HAUL_BALANCE_KEY)
        ? computeHaulPlan(banded.result, context.haulLimits)
        : null;
    const summarySeries = banded ?? series[0];
    bar.append(createMassHaulSummary(summarySeries, haulPlan));

    // 곡선 몫 = 스크롤러의 **안쪽 높이**(clientHeight = 가로 스크롤바 제외). 오버레이 전체
    // 높이로 잡으면 스크롤바가 곡선 바닥(Y축 -200 라벨)을 덮는다(2026-08-04 사용자 보고).
    // 첫 렌더(레이아웃 전)에는 0이 나올 수 있어 기본 높이로 시작한다 — Panel이 다음
    // 프레임에 한 번 더 그려 실측으로 수렴한다.
    const scrollHeight =
      scroll.clientHeight ||
      (overlay.clientHeight || OVERLAY_DEFAULT_HEIGHT) - bar.offsetHeight - 12;
    const chartHeight = Math.max(scrollHeight, MASS_HAUL_MIN_HEIGHT);

    let massAxis: { padLeft: number; ticks: Array<{ y: number; label: string }> } | null = null;
    const chart = createMassHaulChart(
      series,
      visible,
      params.stationSource,
      params.axis,
      params.selectedStationId,
      params.stationInterval,
      params.widthPx,
      chartHeight,
      params.widthPx,
      params.onSelectStation,
      haulPlan,
      (axis) => {
        massAxis = axis;
      },
    );
    // 종단 캔버스와 같은 폭의 래퍼 — sticky Y축 앵커의 기준(position: relative)이 된다.
    const wrap = document.createElement("div");
    wrap.className = "b05-profile__chart b05-profile__masshaul-chart";
    wrap.style.width = `${params.widthPx}px`;
    wrap.style.height = `${chartHeight}px`;
    wrap.append(chart);
    // 앵커는 첫 자식 — SVG 뒤면 흐름 위치가 밀려 스크롤 시 축이 안 보인다(B06과 같은 규칙).
    if (massAxis) wrap.prepend(buildStickyYAxis(massAxis, chartHeight));
    scroll.replaceChildren(wrap);
    // 종단 스크롤러가 이미 옆으로 가 있으면 새로 그린 곡선도 같은 자리에서 시작한다.
    if (syncedMain) scroll.scrollLeft = syncedMain.scrollLeft;

    legendLayer.append(
      createMassHaulLegend(series, visible, toggleSeries, () => {
        resetBalloonOffsets();
        onChanged();
      }),
    );
    drawnOnce = true;
  }

  return {
    handle,
    overlay,
    isOpen: () => open,
    desiredHeight() {
      const raw = parseFloat(overlay.style.getPropertyValue(HEIGHT_VAR));
      return Number.isFinite(raw) && raw > 0 ? raw : OVERLAY_DEFAULT_HEIGHT;
    },
    commitHeight(px) {
      const next = Math.round(px);
      overlay.style.setProperty(HEIGHT_VAR, `${next}px`);
      sessionStorage.setItem(OVERLAY_HEIGHT_KEY, String(next));
      syncHandlePosition();
    },
    syncHandle: () => syncHandlePosition(),
    setContext(next) {
      context = next;
    },
    attachScrollSync,
    draw,
  };
}