/* =============================================================================
 * B06_Section_UI_Cross_FillSlope_Notice.ts
 * 성토사면 5m 초과 **경고 줄** — 횡단 카드 목록 위 요약 한 줄 + 펼치면 측점 목록
 * (2026-09-14 브레인 승인 (나)). 판정은 `_Cross_FillSlope_Warn`, 여기는 그리기만.
 * 측점을 누르면 그 카드로 간다. 경고만 — 구조물을 세우거나 값을 바꾸지 않는다.
 * ⭐ 2026-09-15 — 그 밑에 사면길이 3m 초과 **소단 검토 정보 한 줄**(경고 모양 아님 · 브레인 ③).
 * ========================================================================== */

import type { CrossSection } from "./B06_Section_Api_Fetch";
import { BERM_INFO_TEXT, bermReviewStations } from "./B06_Section_UI_Cross_Berm_Info";
import { fillSlopeLengths, slopeRunLengths } from "./B06_Section_UI_Cross_Fit";
import {
  FILL_SLOPE_WARN_TEXT,
  fillSlopeWarnings,
  type FillSlopeWarning,
} from "./B06_Section_UI_Cross_FillSlope_Warn";
import { L, stationLabel } from "./B06_Section_UI_Section_Common";

export interface FillSlopeNotice {
  root: HTMLElement;
  /** 측점 설계가 바뀔 때마다 부른다 — 펼침 상태는 그대로 둔다. */
  update: (sections: ReadonlyArray<CrossSection>, stationInterval: number) => void;
}

function noticeBlock(className: string): {
  root: HTMLDetailsElement;
  fill: (head: string, rows: FillSlopeWarning[], stationInterval: number) => void;
} {
  const root = document.createElement("details");
  root.className = className;
  root.hidden = true;
  const summary = document.createElement("summary");
  const list = document.createElement("div");
  list.className = "b06-section__notice-list";
  root.append(summary, list);
  return {
    root,
    fill(head, rows, stationInterval) {
      root.hidden = !rows.length;
      summary.textContent = `${head} · ${rows.length}측점`;
      list.replaceChildren(
        ...rows.map(({ section, sides }) => {
          const button = document.createElement("button");
          button.type = "button";
          const parts = sides.map(({ side, lengthM, open }) => {
            const label = L(side === "left" ? "B06_Design_Ditch_Left" : "B06_Design_Ditch_Right");
            return `${label} ${open ? "≥" : ""}${lengthM.toFixed(2)}m`;
          });
          button.textContent = `${stationLabel(section.chainage_m, stationInterval)} ${parts.join(" · ")}`;
          button.dataset.stationId = section.station_id;
          return button;
        }),
      );
    },
  };
}

export function createFillSlopeNotice(onPick: (stationId: string) => void): FillSlopeNotice {
  const root = document.createElement("div");
  const warn = noticeBlock("b06-section__notice");
  const info = noticeBlock("b06-section__notice b06-section__notice--info");
  root.append(warn.root, info.root);
  root.addEventListener("click", (event) => {
    const id = (event.target as HTMLElement).closest("button")?.dataset.stationId;
    if (id) onPick(id);
  });

  return {
    root,
    update(sections, stationInterval) {
      warn.fill(
        `⚠ ${FILL_SLOPE_WARN_TEXT}`,
        fillSlopeWarnings(sections, fillSlopeLengths),
        stationInterval,
      );
      info.fill(
        `ⓘ ${BERM_INFO_TEXT}`,
        bermReviewStations(sections, slopeRunLengths),
        stationInterval,
      );
    },
  };
}