Aislo/B06_Section/B06_Section_UI_Cross_Culvert.ts

/* =============================================================================
 * B06_Section_UI_Cross_Culvert.ts
 * 배수관 측점 횡단 카드의 배수관 세트(배관·기슭막이·보호공) **오버레이 그리기**.
 *
 * 기하 계산은 `B06_Section_UI_Cross_Culvert_Geom.ts`가 맡는다(700줄 제한 분리).
 * 여기서는 계산 결과(`CulvertLayout`)를 SVG 도형으로 옮기기만 한다 — 치수 결정 금지.
 *
 * 그리는 순서 = 시공·계산 순서(2026-08-20 사용자 확정):
 *   ① 유출구측 구조물(기슭막이·추가 기슭막이) → ② 유입구측 구조물(기슭막이 또는
 *   집수정) → ③ 배관 → ④ 유출구측 성토부선(보호공 삭제 — 2026-08-22)
 * ========================================================================== */

import {
  REVET_EMBED_DEPTH_M,
  REVET_LEAN_RATIO,
  pipeWallThicknessM,
  revetHeightLimit,
} from "./B06_Section_UI_Cross_Culvert_Geom";
import type {
  BasinShape,
  CulvertLayout,
  PipeEnd,
  WallLayout,
} from "./B06_Section_UI_Cross_Culvert_Geom";
import { appendWallHatch } from "./B06_Section_UI_Cross_Wall_Hatch";

// 기하 계산 진입점과 공개 상수·타입은 여기서 재수출한다 — B05(최소 토피)와 횡단 뷰가
// 이 모듈 경로로 이미 참조하고 있어 분리 후에도 import 경로를 바꾸지 않는다.
export { MIN_PIPE_COVER_M, computeCulvertLayout } from "./B06_Section_UI_Cross_Culvert_Geom";
export type {
  BasinLayout,
  BasinShape,
  CulvertDesignTrim,
  CulvertLayout,
  EndFace,
  InletStructureChoice,
} from "./B06_Section_UI_Cross_Culvert_Geom";

const SVG_NS = "http://www.w3.org/2000/svg";

function polygon(
  points: Array<[number, number]>,
  className: string,
  tooltip: string,
): SVGPolygonElement {
  const shape = document.createElementNS(SVG_NS, "polygon");
  shape.setAttribute("points", points.map(([px, py]) => `${px},${py}`).join(" "));
  shape.setAttribute("class", className);
  const title = document.createElementNS(SVG_NS, "title");
  title.textContent = tooltip;
  shape.append(title);
  return shape;
}

/** 기슭막이 선택 키 — 측점 안에서 어느 벽인지 가린다. 추가 벽은 `extra{n}`. */
// "own" = 배관과 무관한 **독립 기슭막이**(구조물 정본 D군). 조정창·조작값 저장은
// 배관 벽과 같은 체계를 그대로 쓴다(2026-08-28 사용자: 배관측점처럼 이동).
export type RevetKey = "inlet" | "outlet" | "own" | `extra${number}` | `bextra${number}`;

/** 벽 강조를 카드 재생성 없이 갈아 끼우는 setter. */
export type RevetHighlightSetter = (key: RevetKey | null) => void;

/**
 * 배수관 세트 오버레이 — computeCulvertLayout 결과를 그린다.
 *
 * `onSelectRevet`이 오면 기슭막이 폴리곤이 **선택 대상**이 된다(2026-08-21 사용자 ①).
 * 클릭은 여기서 멈춘다 — 밑에 깔린 절·성토 밴드와 카드 선택으로 번지면 강조가 다른
 * 것으로 바뀌거나 카드가 다시 그려진다(**구조물 선택이 면적 선택보다 우선**).
 */
export function appendCulvertOverlay(
  layer: SVGElement,
  layout: CulvertLayout,
  x: (offset: number) => number,
  toDisplayY: (elevation: number) => number,
  onSelectRevet?: (key: RevetKey) => void,
  /** 관을 그리지 않는다 — 관은 한 측점에만 있고, 연장이 넘어온 옆 측점 카드에는
   *  기슭막이만 링크로 보인다(2026-08-24 사용자). */
  hidePipe?: boolean,
): RevetHighlightSetter {
  const { culvert, pipe, pipeCorners } = layout;
  const diameter = culvert.diameter_m;
  const roleLabel = (role: "inlet" | "outlet" | "extra") =>
    role === "inlet" ? "유입" : role === "outlet" ? "유출" : "추가(성토부)";

  // ④ 유출구측 성토부선(2026-08-22 사용자 — 보호공 삭제, 윗면 선만 성토부선으로).
  //    구간별 폴리라인: 관 하단 꼭짓점(또는 앞 추가 벽 전면 상단) → 다음 벽/원지반.
  const planLine = (points: (typeof pipe.inlet)[], tooltip: string): void => {
    if (points.length < 2) return;
    const line = document.createElementNS(SVG_NS, "polyline");
    line.setAttribute(
      "points",
      points.map((p) => `${x(p.offset)},${toDisplayY(p.elevation)}`).join(" "),
    );
    // 성토·절토 접속선은 공사 계획선 — 설계선과 같은 보라 실선.
    line.setAttribute("class", "b06-chart__design-cross");
    const title = document.createElementNS(SVG_NS, "title");
    title.textContent = tooltip;
    line.append(title);
    layer.append(line);
  };
  const drawOutletFill = (): void => {
    for (const segment of layout.outletFill.segments) {
      // 유출부가 지면에 닿은 뒤의 절토선은 그리지 않는다(2026-08-24 사용자) — 벽이
      // 이미 원지반에 묻힌 구간이라 도면에 더 보탤 정보가 없다. 면적·수량 계산은
      // 건드리지 않는다(그림만 — 면적은 전면 개편 대상).
      if (segment.kind === "cut") continue;
      planLine(
        segment.points,
        `유출부 성토부선 — 사면길이 ${segment.lengthM.toFixed(2)}m` +
          (segment.overLimit
            ? " (법정 5m 이상 — 기슭막이 의무 구간, 조정창에서 추가)"
            : " (법정 5m 이내)") +
          ` · 성토 물매 1:${(segment.ratio ?? layout.fillSlope.ratio).toFixed(2)}` +
          (layout.fillSlope.roadWideningM > 0.01
            ? ` · 노폭 연장 ${layout.fillSlope.roadWideningM.toFixed(2)}m`
            : "") +
          (layout.fillSlope.structureRequired
            ? " · ⚠ 기슭막이로 성토를 못 받는 자리 — 옹벽·석축 검토(성토_비탈면 §2)"
            : ""),
      );
    }
    // 집수정(ㄴ·ㄷ형) 계류측 성토부선 — 유출측과 같은 체계(2026-08-22 사용자 확정).
    // 독립 기슭막이(관 숨김)에는 집수정이 없다 — 이 채널이 **유입측 벽**의 성토부선이라
    // 이름도 그렇게 적는다(2026-08-29 좌우 통일).
    const basinFillName = layout.culvert.hidden_pipe ? "유입부" : "집수정 계류측";
    for (const segment of layout.basinFill.segments) {
      planLine(
        segment.points,
        segment.kind === "cut"
          ? `${basinFillName} 3도 절토선 — 구조물이 원지반에 묻혀 성토 불필요, 원지반 교차까지 ${segment.lengthM.toFixed(2)}m`
          : `${basinFillName} 성토부선 — 사면길이 ${segment.lengthM.toFixed(2)}m` +
              (segment.overLimit
                ? " (법정 5m 이상 — 기슭막이 의무 구간, 조정창에서 추가)"
                : " (법정 5m 이내)") +
              ` · 성토 물매 1:${(segment.ratio ?? 1.2).toFixed(2)}`,
      );
    }
    // 유입 기슭막이 **이후**의 절·성토선(옛 관 시작 접속선 — 2026-08-22 ②)은 그리지
    // 않는다(2026-08-24 사용자). 기하(`layout.inletFill`)는 남겨 둔다 — 3D 트림과
    // 면적 개편이 그 값을 쓴다. 여기서는 도면에 얹지 않을 뿐이다.
  };

  // ①·② 구조물 — 유출측(추가 벽 포함)이 먼저 서고, 그 다음 유입측.
  // 다단 벽은 유출측(extra)·집수정측(bextra) 두 갈래라 **출처를 키에 담아** 돈다.
  const wallsInOrder: Array<{ wall: WallLayout; key: RevetKey }> = [
    ...layout.walls
      .filter((w) => w.role === "outlet")
      .map((wall) => ({ wall, key: "outlet" as RevetKey })),
    ...layout.extraWalls.map((wall) => ({
      wall,
      key: `extra${wall.extraIndex ?? 0}` as RevetKey,
    })),
    ...layout.basinExtras.map((wall) => ({
      wall,
      key: `bextra${wall.extraIndex ?? 0}` as RevetKey,
    })),
    ...layout.walls
      .filter((w) => w.role === "inlet")
      .map((wall) => ({ wall, key: "inlet" as RevetKey })),
  ];
  const revetShapes = new Map<RevetKey, SVGPolygonElement>();
  /** 집수정 부재 도형 — 유입 선택 강조에 쓴다(2026-08-22 사용자 ③). */
  const basinShapes: SVGPolygonElement[] = [];
  for (const { wall, key: wallKey } of wallsInOrder) {
    // 합성 단면(하부 사다리꼴 + 상부 평행사변형) — 상단 배면이 사면선 접점(사용자 ①·②).
    const revetShape = polygon(
      wall.points.map((p) => [x(p.offset), toDisplayY(p.elevation)] as [number, number]),
      "b06-chart__culvert-revet",
      // 높이 표기 = 순수 높이(바닥~상단, 근입 0.5 포함). 추가 기슭막이도 같은 기준으로
      // 통일했다(2026-08-23 배관 벽 → 2026-08-29 추가 벽).
      `${roleLabel(wall.role)} 기슭막이 ${wall.form ?? ""} H=${(
        wall.height + REVET_EMBED_DEPTH_M
      ).toFixed(1)}m` +
        `(상단 = 사면선 접점, 전면 1:${REVET_LEAN_RATIO}` +
        `, 높이 한계 ${revetHeightLimit(wall.form).toFixed(1)}m — 교본 7-3)` +
        (wall.floatGapM > 0.01
          ? ` · ⚠ 바닥 원지반 이격 ${wall.floatGapM.toFixed(2)}m — 하부 지지 구조물 별도(추가 예정)`
          : ` · 근입 ${REVET_EMBED_DEPTH_M.toFixed(2)}m(실무 기초콘크리트 H=0.5 — 법정 규정 없음)`) +
        (wall.lengthM ? ` · 연장 ${wall.lengthM.toFixed(1)}m` : "") +
        (wall.shiftBlockedM
          ? ` · ⚠ 좌우 이동 ${wall.shiftBlockedM.toFixed(2)}m 는 지형에 막힘(더 나가면 벽이 묻힘)`
          : "") +
        (wall.shiftFloorM
          ? ` · ⚠ 좌우 이동 하한 ${wall.shiftFloorM.toFixed(2)}m — 상하 내림의 1.2배까지는` +
            ` 따라 나가야 함(그보다 안쪽은 선반이 사라짐). 그 아래로 넣으면 안 움직임`
          : ""),
    );
    if (onSelectRevet) revetShape.classList.add("is-selectable");
    revetShapes.set(wallKey, revetShape);
    layer.append(revetShape);
    // 이음선 + 형태별 표현(돌쌓기 메/찰·콘크리트·돌망태·통나무·바자)은 공용 해칭이
    // 맡는다 — 독립 기슭막이(`_Cross_Wall`)와 같은 함수다(2026-08-30 사용자 지시 3).
    appendWallHatch(layer, wall, x, toDisplayY, wallKey);
  }
  if (layout.basin) {
    const basin = layout.basin;
    const shapeName = ((shape: BasinShape) =>
      shape === "L" ? "ㄴ형" : shape === "U" ? "ㄷ형" : "I형")(basin.shape);
    const reasonText =
      basin.reason === "cut"
        ? "절토측 유입 — 집수정 기본(성토사면 없음)"
        : basin.reason === "manual"
          ? "사용자 선택 집수정(규칙상 기슭막이 자리)"
          : "유입측 성토사면 3m 이하 — 기슭막이 대신 집수정 기본";
    for (const part of basin.parts) {
      const shape = polygon(
        part.points.map((p) => [x(p.offset), toDisplayY(p.elevation)] as [number, number]),
        "b06-chart__culvert-basin",
        `유입 집수정(${shapeName}) ${part.kind === "floor" ? "바닥" : "벽"}` +
          ` — ${reasonText} · 내공 1.0m(실무 돌집수정) · 부재 두께 0.2m`,
      );
      basinShapes.push(shape);
      layer.append(shape);
    }
    if (basin.cutLine) {
      const cut = document.createElementNS(SVG_NS, "line");
      cut.setAttribute("x1", String(x(basin.cutLine.from.offset)));
      cut.setAttribute("y1", String(toDisplayY(basin.cutLine.from.elevation)));
      cut.setAttribute("x2", String(x(basin.cutLine.to.offset)));
      cut.setAttribute("y2", String(toDisplayY(basin.cutLine.to.elevation)));
      // 절토선은 **공사 계획선**이다 — 설계선과 같은 보라 실선으로 그린다
      // (2026-08-20 사용자 ②).
      cut.setAttribute("class", "b06-chart__design-cross");
      const cutTitle = document.createElementNS(SVG_NS, "title");
      cutTitle.textContent = `집수정(${shapeName}) 설치 절토선(계획선) — 구조물이 원지반 안쪽에 들어가 절토 필요`;
      cut.append(cutTitle);
      layer.append(cut);
    }
    if (basin.fillLine) {
      // 구조물이 원지반 밖으로 나온 경우의 성토(되메움) 계획선 — 성토 비탈 1:1.2.
      const fill = document.createElementNS(SVG_NS, "line");
      fill.setAttribute("x1", String(x(basin.fillLine.from.offset)));
      fill.setAttribute("y1", String(toDisplayY(basin.fillLine.from.elevation)));
      fill.setAttribute("x2", String(x(basin.fillLine.to.offset)));
      fill.setAttribute("y2", String(toDisplayY(basin.fillLine.to.elevation)));
      fill.setAttribute("class", "b06-chart__design-cross");
      const fillTitle = document.createElementNS(SVG_NS, "title");
      fillTitle.textContent =
        basin.shape === "I"
          ? "집수정(I형) 되메움(성토)선 — 관 하단에서 3도(계류 쪽 오름)로 원지반과 연결"
          : `집수정(${shapeName}) 성토(되메움)선 — 구조물이 원지반 밖으로 나와 1:1.2로 채움`;
      fill.append(fillTitle);
      layer.append(fill);
    }
    const label = document.createElementNS(SVG_NS, "text");
    label.setAttribute("x", String(x(basin.label.offset)));
    // 라벨은 I형 벽 **하단** 바깥에 붙인다(2026-08-20 사용자) — 글자 높이만큼 내린다.
    label.setAttribute("y", String(toDisplayY(basin.label.elevation) + 11));
    label.setAttribute("text-anchor", "middle");
    label.setAttribute("class", "b06-chart__culvert-label");
    label.textContent = `집수정(${shapeName})`;
    layer.append(label);
  }

  // ③ 관 — 축 법선 두께의 직사각형. 끝단면은 구조물 계류측 변에서 잘려 온다(Geom).
  const { axis, normal } = layout.pipeAxis;
  // 미세한 틈 방지: 양 끝을 축 방향으로 아주 조금만 밀어 넣는다. 벽 전면이 1:0.3으로
  // 기울어 있어 크게 밀면 관 하단이 벽 **바깥으로 삐져나온다**(2026-08-20 사용자 ③
  // 위치 어긋남 원인) — 렌더링 틈만 덮을 만큼(2㎝)으로 줄였다.
  const OVERLAP_M = 0.02;
  const pushOut = (corner: PipeEnd, dirSign: number): PipeEnd => ({
    bottom: {
      offset: corner.bottom.offset + dirSign * axis.offset * OVERLAP_M,
      elevation: corner.bottom.elevation + dirSign * axis.elevation * OVERLAP_M,
    },
    top: {
      offset: corner.top.offset + dirSign * axis.offset * OVERLAP_M,
      elevation: corner.top.elevation + dirSign * axis.elevation * OVERLAP_M,
    },
  });
  const inletFinal = pushOut(pipeCorners.inlet, -1);
  const outletFinal = pushOut(pipeCorners.outlet, 1);

  const kindLabel = culvert.pipe_kind ? `${culvert.pipe_kind} ` : "";
  const wallThickness = pipeWallThicknessM(culvert.pipe_kind, diameter);
  const tip =
    `관매설 ${kindLabel}Φ${Math.round(diameter * 1000)}m/m, L=${pipe.lengthM}.0m` +
    ` · 매설 경사 ${pipe.slopePct.toFixed(1)}%(수평 가능)` +
    ` · 관 두께 ${(wallThickness * 1000).toFixed(1)}㎜(외경선 기준)` +
    ` · 최소 토피 ${culvert.min_cover_m.toFixed(1)}m(별표2 복토 교차 참조)`;
  // 외경(관 두께 바깥) → 내경 순으로 2겹. 도면처럼 관벽 두께가 보이게 한다(사용자 ③).
  const shifted = (corner: PipeEnd, delta: number): PipeEnd => ({
    bottom: {
      offset: corner.bottom.offset - normal.offset * delta,
      elevation: corner.bottom.elevation - normal.elevation * delta,
    },
    top: {
      offset: corner.top.offset + normal.offset * delta,
      elevation: corner.top.elevation + normal.elevation * delta,
    },
  });
  const pipeLayers = hidePipe
    ? []
    : ([
        [wallThickness, "b06-chart__culvert-pipe b06-chart__culvert-pipe--outer"],
        [0, "b06-chart__culvert-pipe"],
      ] as const);
  for (const [delta, cls] of pipeLayers) {
    const a = shifted(inletFinal, delta);
    const b = shifted(outletFinal, delta);
    layer.append(
      polygon(
        [
          [x(a.bottom.offset), toDisplayY(a.bottom.elevation)],
          [x(b.bottom.offset), toDisplayY(b.bottom.elevation)],
          [x(b.top.offset), toDisplayY(b.top.elevation)],
          [x(a.top.offset), toDisplayY(a.top.elevation)],
        ],
        cls,
        tip,
      ),
    );
  }
  drawOutletFill();

  // 클릭 판정용 투명 겹면 — **맨 마지막에** 얹는다. 관·보호공이 벽 위를 지나가 그리기
  // 순서상 벽 가운데를 덮으므로, 벽 폴리곤에 직접 핸들러를 달면 가운데를 눌러도 관이
  // 먼저 먹는다(2026-08-21 화면 확인). 그리기 순서(벽 → 관 → 보호공)는 그대로 두고
  // 판정면만 위로 올린다. 관 자체의 툴팁은 벽 밖 구간에서 그대로 뜬다.
  if (onSelectRevet) {
    for (const { wall, key: wallKey } of wallsInOrder) {
      const hit = polygon(
        wall.points.map((p) => [x(p.offset), toDisplayY(p.elevation)] as [number, number]),
        "b06-chart__culvert-revet-hit",
        `${roleLabel(wall.role)} 기슭막이 선택 — 카드 하단 ◀/▶로 자리 조절`,
      );
      hit.addEventListener("click", (event) => {
        event.stopPropagation();
        onSelectRevet(wallKey);
      });
      layer.append(hit);
    }
    // 집수정도 선택 대상(2026-08-22 사용자 — 형식 드롭다운). 자리 이동은 없고
    // 조정창에서 구조물 형식만 고른다.
    if (layout.basin) {
      for (const part of layout.basin.parts) {
        const hit = polygon(
          part.points.map((p) => [x(p.offset), toDisplayY(p.elevation)] as [number, number]),
          "b06-chart__culvert-revet-hit",
          "유입 집수정 선택 — 조정창에서 구조물 형식 선택",
        );
        hit.addEventListener("click", (event) => {
          event.stopPropagation();
          onSelectRevet("inlet");
        });
        layer.append(hit);
      }
    }
  }

  // 강조는 클래스만 갈아 끼운다 — 카드를 다시 그리면 휠 줌·팬이 초기화된다.
  return (key) => {
    for (const [role, shape] of revetShapes) shape.classList.toggle("is-active", role === key);
    // 유입이 집수정이면 부재 전체를 함께 강조한다(2026-08-22 사용자 ③).
    for (const shape of basinShapes) shape.classList.toggle("is-active", key === "inlet");
  };
}