/* =============================================================================
 * A00_Common/design/design_profile_frame.ts
 * 종단도 한 벌의 **판 뼈대**(DOM 틀) — `design_profile.ts` 에서 갈라냄(700줄 한계 · 472-5).
 * 그리기 · 편집 · 상태는 저쪽 몫 · 여기는 칸만 만들어 돌려줌.
 * ========================================================================== */

import { createWorkflowPanelHandle } from "@ui/ui_template_overlay";
import { createProgressCircle } from "@ui/ui_template_progress";
import "../../B06_Section/B06_Section_UI_Style.css";
// SVG 차트 색상(.b06-chart__*)의 정의처는 _Style_Cross.css다. 이걸 빼면 B05로 바로 진입했을 때
// 배경 rect가 브라우저 기본 fill(검정)로 그려진다 — B06을 먼저 방문해야 정상으로 보이던 원인.
import "../../B06_Section/B06_Section_UI_Style_Cross.css";
import "../../B06_Section/B06_Section_UI_Style_Cross_Chart.css";
import "../../B06_Section/B06_Section_UI_Style_Cross_Areas.css";

export function createProfileFrame(view: string) {
  const root = document.createElement("section");
  root.className = "b05-route-profile";
  root.dataset.view = view;
  // 이름표 "종단" — 무엇의 손잡이인지 화살표 옆에 밝힌다(2026-08-04 사용자 지시).
  const panelHandle = createWorkflowPanelHandle("bottom", "down", "종단");
  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);
  // 종단면 본문 + 우측 판(배수유역도)을 나란히 놓는 2단 구성.
  // 우측 판이 이 안에 있으므로 하단 패널을 접으면 함께 사라진다(사용자 지시).
  // 그래프 영역 정중앙 로딩 서클 — 종단면 자료가 도착할 때까지 빈 안내만 보인다.
  // body는 그릴 때마다 자식이 통째로 교체되므로 서클은 감싸는 칸에 둔다.
  const progress = createProgressCircle({ overlay: true });
  progress.root.hidden = true;
  const bodyWrap = document.createElement("div");
  bodyWrap.className = "b05-route-profile__body-wrap";
  // 절토·성토 요약 줄은 **종단 쪽 열 안**에 둔다 — 패널 전체 폭에 걸치면 우측 배수유역도
  // 구분선이 그 높이만큼 끊겨 보인다(2026-08-04 사용자 보고).
  bodyWrap.append(balanceBar, body, progress.root);
  const content = document.createElement("div");
  content.className = "b05-route-profile__content";
  const trailing = document.createElement("div");
  trailing.className = "b05-route-profile__trailing";
  return { root, panelHandle, balanceBar, body, empty, progress, bodyWrap, content, trailing };
}