Aislo/B05_Profile/B05_Profile_UI_Structures_List.ts

/* =============================================================================
 * B05_Profile_UI_Structures_List.ts
 * 「구조물 배치」 폼 아래 목록 — 구조물 정본(structures)과 계곡 통과 시설 정본
 * (pipe_points)을 기준점 오름차순으로 하나의 목록에 병합해 그린다.
 *
 * 패널 본체(B05_Profile_UI_Structures_Panel)가 700줄 한계에 닿아 분리했다.
 * 목록은 상태를 갖지 않는다 — 그릴 때마다 현재 목록·선택 상태를 인자로 받고,
 * 항목을 누르면 넘겨받은 콜백으로 폼 로드를 되돌려 준다.
 * ========================================================================== */

import {
  structureAnchorM,
  type StructureInstance,
  type StructureType,
} from "./B05_Profile_Api_Structures";
import type { PipeFacilityItem } from "./B05_Profile_UI_Structures_Panel";
import { stationLabel as formatStation } from "../common_util/common_util_station";

export interface StructureListParams {
  /** 목록을 담을 <ul>. 그릴 때마다 통째로 갈아 끼운다. */
  list: HTMLElement;
  structures: ReadonlyArray<StructureInstance>;
  pipeFacilities: ReadonlyArray<PipeFacilityItem>;
  /** 타입 이름을 찾을 레지스트리 사전. */
  typeMap: Map<string, StructureType>;
  /** 측점 표기용 측점 간격(m). */
  intervalM: number;
  /** 지금 폼에 올라와 있는 구조물(없으면 null). */
  editingId: string | null;
  /** 지금 폼에 올라와 있는 계곡 통과 시설의 누가거리(없으면 null). */
  selectedPipeChainage: number | null;
  onSelectStructure: (structure: StructureInstance) => void;
  onSelectPipe: (pipe: PipeFacilityItem) => void;
}

/** 구조물 한 건의 측점 표기 — 점형은 기준 측점, 구간형은 시작~종료 측점. */
export function stationOfStructure(structure: StructureInstance, intervalM: number): string {
  return structure.placement === "interval"
    ? `${formatStation(structure.start_m ?? 0, intervalM)}~${formatStation(structure.end_m ?? 0, intervalM)}`
    : formatStation(structure.chainage_m ?? 0, intervalM);
}

/** 중복 이름 번호 규칙 — 같은 이름이 여럿이면 노선 시점에 가까운 순서로 "이름 1",
 *  "이름 2"…를 붙인다(2026-08-19 사용자 지시, B05·B06 공통 규칙). 입력은 시점
 *  오름차순으로 정렬된 이름 목록이어야 한다. 하나뿐인 이름은 그대로 둔다. */
export function numberDuplicateNames(names: ReadonlyArray<string>): string[] {
  const totals = new Map<string, number>();
  names.forEach((name) => totals.set(name, (totals.get(name) ?? 0) + 1));
  const seen = new Map<string, number>();
  return names.map((name) => {
    if ((totals.get(name) ?? 0) < 2) return name;
    const seq = (seen.get(name) ?? 0) + 1;
    seen.set(name, seq);
    return `${name} ${seq}`;
  });
}

export function renderStructureList(params: StructureListParams): void {
  const { list, typeMap, intervalM, editingId, selectedPipeChainage } = params;
  list.replaceChildren();
  // 두 정본을 하나의 목록으로 — 기준점 오름차순 병합 (2026-08-17 통합 표시).
  const rows: Array<
    | { kind: "structure"; anchor: number; structure: StructureInstance }
    | { kind: "pipe"; anchor: number; pipe: PipeFacilityItem }
  > = [
    ...params.structures.map((structure) => ({
      kind: "structure" as const,
      anchor: structureAnchorM(structure),
      structure,
    })),
    ...params.pipeFacilities.map((pipe) => ({
      kind: "pipe" as const,
      anchor: pipe.chainage_m,
      pipe,
    })),
  ].sort((left, right) => left.anchor - right.anchor);

  if (!rows.length) {
    const empty = document.createElement("li");
    empty.className = "b05-route__irregular-empty";
    empty.textContent = "배치된 구조물이 없습니다.";
    list.append(empty);
    return;
  }
  // 한 항목 = [측점(좌측 맞춤)][구조물 이름(우측 맞춤)] — 메모·연동 표기 등 그 외
  // 정보는 적지 않는다(2026-08-18 사용자 지시). 같은 이름이 여럿이면 시점에 가까운
  // 순서로 번호를 붙인다(2026-08-19 사용자 지시).
  const displayNames = numberDuplicateNames(
    rows.map((row) =>
      row.kind === "structure"
        ? (typeMap.get(row.structure.type_id)?.name ?? row.structure.type_id)
        : (typeMap.get(row.pipe.facility)?.name ?? row.pipe.facility),
    ),
  );
  rows.forEach((row, index) => {
    const item = document.createElement("li");
    item.className = "b05-route__irregular-item";
    const station = document.createElement("strong");
    const name = document.createElement("span");
    name.textContent = displayNames[index];
    if (row.kind === "structure") {
      const { structure } = row;
      item.classList.toggle("is-selected", structure.structure_id === editingId);
      station.textContent = stationOfStructure(structure, intervalM);
      item.addEventListener("click", () => params.onSelectStructure(structure));
      if (structure.structure_id === editingId) {
        requestAnimationFrame(() => item.scrollIntoView({ block: "nearest" }));
      }
    } else {
      const { pipe } = row;
      const picked =
        selectedPipeChainage !== null && Math.abs(selectedPipeChainage - pipe.chainage_m) < 0.05;
      item.classList.toggle("is-selected", picked);
      station.textContent = formatStation(pipe.chainage_m, intervalM);
      item.addEventListener("click", () => params.onSelectPipe(pipe));
      // 하이라이트만으로는 목록 밖에 있으면 안 보인다 — 그 자리로 끌어온다(2026-09-04
      // 사용자). 패널이 막 펼쳐진 참이라 자리가 잡힌 다음 프레임에 민다.
      if (picked) requestAnimationFrame(() => item.scrollIntoView({ block: "nearest" }));
    }
    item.append(station, name);
    list.append(item);
  });
}