Aislo/M02_MasterTemplete/M02_MasterTemplete_Structure.ts

/* =============================================================================
 * M02_MasterTemplete_Structure.ts
 * 구조물집계표 아래 설계 컨테이너 — 고른 열의 구조물 도면 미리보기 · [도면 수정] · 상세 산출근거 미리보기 · [산출근거 수정].
 * 카드 둘(도면 정보 · 상세 산출근거)은 좌측 패널과 같은 공용 ui-sidebar 틀 — 둘 다 보기만(고침은 전체 화면 편집).
 * 상세 산출근거 = 스프레드시트(`A00_Common/spreadsheet/`) · 열마다 따로 파일(`basis/<열 id>.json`) ·
 * 부품은 이 카드를 열 때만 `import()` 로 받음(다른 페이지 번들에 안 섞임) · 고침·저장은 [산출근거 수정] 이
 * 여는 M02 메인 칸 전체 편집 화면(`M02_MasterTemplete_UI_Main.ts`)이 맡음.
 *
 * 구조물 도면은 집계표 열마다 하나(`resources/master_template/structure/<열 id>.json`) ·
 * 서버가 열마다 미리 만들어 둠(도번 자동 · 새 열도 집계표 저장 때 서버가 같이 만듦 — `M02_MasterTemplete_Store.py`).
 * 이 칸은 표 부품 host 밖 형제 자리에 붙음 — 집계표는 그대로 두고 여기만 열마다 다시 그림.
 * 글자는 이 파일에 둠(도면 부품 `M02_MasterTemplete_Drawing.ts` 와 같은 방식).
 * ========================================================================== */

import { createButton, el, showToast } from "@ui/ui_template_elements";
import { attachCollapsible } from "@ui/ui_template_collapsible";
import type { SpreadsheetHandle, Workbook } from "../A00_Common/spreadsheet/spreadsheet";
import {
  fetchStructureNumbers,
  readTemplate,
  type StructureDoc,
  type StructureNumbers,
} from "./M02_MasterTemplete_Api_Fetch";
import {
  mountDrawingTemplate,
  type DrawingTemplateDoc,
  type DrawingTemplateHandle,
} from "./M02_MasterTemplete_Drawing";
import "./M02_MasterTemplete_Structure.css";

/** 구조물 도면이 걸리는 집계표 이름 — 서버 `M02_MasterTemplete_Store.STRUCTURE_TABLE` 과 같은 글 */
export const STRUCTURE_TABLE = "구조물집계표";

const TEXT = {
  drawingInfo: "도면 정보",
  edit: "도면 수정",
  editBasis: "산출근거 수정",
  basis: "상세 산출근거",
  noNumber: "도번 없음",
  noTableNumber: "표번 없음",
  noDrawing: "도면 없음",
  noBasis: "산출근거 없음",
  noSheet: "스프레드시트를 못 띄움 — {value}",
  readFailed: "구조물 도면을 못 읽음 — {value}",
};

const why = (error: unknown): string => (error instanceof Error ? error.message : "");
const fill = (text: string, value: string): string => text.replace("{value}", value);
/** 스프레드시트는 산출근거 카드를 열 때만 받음 */
const loadSpreadsheet = () => import("../A00_Common/spreadsheet/spreadsheet");

/** 집계표 열 — 머리 글(제목행 종류 · 분류1 · 분류2) · 꼴만 씀 */
export interface StructureColumn {
  id: string;
  머리: (string | null)[];
  꼴?: string | null;
}

/** 구조물 열 = 꼴=수 — NO · 측점 · 비고 같은 글 열은 도면 · 산출근거 · 번호가 없음(서버와 같은 규칙) */
export const isStructureColumn = (col: StructureColumn): boolean => col.꼴 === "수";

/** 구조물 이름 + 변수값 — 제목행 층을 빈칸으로 이음(빈 층은 건너뜀 · 다 비면 열 id) */
export const columnHead = (col: StructureColumn): string =>
  col.머리.filter((part): part is string => !!part && part.trim() !== "").join(" ") || col.id;

/** 번호가 맨 앞 — 「SD010101 돌기슭막이 H=1.0」(번호가 없으면 이름만) */
export const structureLabel = (number: string, col: StructureColumn): string =>
  [number, columnHead(col)].filter(Boolean).join(" ");

export interface StructurePanelOptions {
  /** 시스템 관리자만 저장함(구조물 도면은 서버가 미리 만들어 둠) */
  isAdmin: boolean;
  /** [도면 수정]·[산출근거 수정] — 그 열을 CAD·스프레드시트 전체 편집으로 엶(페이지의 `open`) ·
   * label 은 화면 제목에 씀 */
  onEdit: (column: string, label: string, kind: "structure" | "basis") => void;
  /** 집계표에 저장 안 한 고침이 있으면 버릴지 물음 — 취소면 false */
  confirmLeave: () => Promise<boolean>;
}

export interface StructurePanelHandle {
  root: HTMLElement;
  /** `{열 id: 도번}` — 집계표 `drawingLabel` 이 씀 */
  numbers: () => Record<string, string>;
  /** 도번 목록 다시 받기 */
  reload: () => Promise<void>;
  /** 고른 열이 바뀜 — 같은 열이면 아무것도 안 함(CAD 를 다시 안 띄움) */
  show: (colId: string | null, columns: StructureColumn[]) => void;
  destroy: () => void;
}

export function createStructurePanel(opts: StructurePanelOptions): StructurePanelHandle {
  let numbers: Record<string, StructureNumbers> = {};
  let column: string | null = null;
  let columnLabel = "";
  let doc: StructureDoc | null = null;
  let basisDoc: Workbook | null = null;
  let basisNumber = "";
  let preview: DrawingTemplateHandle | null = null;
  let basis: SpreadsheetHandle | null = null;
  let seq = 0;

  const columnName = el("span", { className: "m02-struct__title" });
  const number = el("span", { className: "m02-struct__no" });
  const edit = createButton({ label: TEXT.edit, variant: "filled" });
  const previewHost = el("div", { className: "m02-struct__preview" });
  const infoCard = el("section", {
    className: "m02-struct__card ui-collapsible ui-sidebar-section ui-sidebar-card",
    children: [
      el("h3", { className: "ui-collapsible__title", text: TEXT.drawingInfo }),
      el("div", { className: "m02-struct__head", children: [number, columnName, edit] }),
      previewHost,
    ],
  });

  const basisNo = el("span", { className: "m02-struct__no" });
  const editBasis = createButton({ label: TEXT.editBasis, variant: "ghost" });
  const basisHost = el("div", { className: "m02-struct__sheet" });
  const basisCard = el("section", {
    className: "m02-struct__card ui-collapsible ui-sidebar-section ui-sidebar-card",
    children: [
      el("h3", { className: "ui-collapsible__title", text: TEXT.basis }),
      el("div", { className: "m02-struct__subhead", children: [basisNo, editBasis] }),
      basisHost,
    ],
  });

  const root = el("div", {
    className: "m02-struct ui-sidebar-panel",
    attrs: { hidden: "" },
    children: [infoCard, basisCard],
  });
  attachCollapsible(root);

  const drop = (): void => {
    preview?.destroy();
    preview = null;
    basis?.destroy();
    basis = null;
  };

  const note = (text: string): HTMLElement => el("p", { className: "m02-struct__empty", text });

  /** 미리보기 CAD 는 iframe — 안쪽 도구 모음(제목줄 · 리본)을 스타일로 숨김(같은 출처라 접근 가능) */
  const hideToolbar = (frame: HTMLIFrameElement): void => {
    const apply = (): void => {
      const inner = frame.contentDocument;
      if (!inner?.head || inner.getElementById("m02-struct-hide")) return;
      const style = inner.createElement("style");
      style.id = "m02-struct-hide";
      style.textContent =
        ".cad-titlebar, .cad-ribbon, .cad-inspector { display: none !important; }";
      inner.head.append(style);
    };
    frame.addEventListener("load", apply);
    apply();
  };

  /** 산출근거 스프레드시트 미리보기 — 보기만(고침은 [산출근거 수정] 이 여는 전체 화면) ·
   * 부품을 늦게 받음 · 그 사이 열이 바뀌면 버림 */
  const paintBasis = async (mine: number): Promise<void> => {
    if (!basisDoc) return void basisHost.replaceChildren(note(TEXT.noBasis));
    try {
      const { createSpreadsheet } = await loadSpreadsheet();
      if (mine !== seq || !basisDoc) return;
      basis = createSpreadsheet(basisHost, basisDoc, { readOnly: true });
    } catch (error) {
      if (mine === seq) basisHost.replaceChildren(note(fill(TEXT.noSheet, why(error))));
    }
  };

  /** 미리보기 · 산출근거 — 문서가 없으면 없음 글(서버가 열마다 미리 만들어 둬 보통은 없음) */
  const paintBody = (mine: number): void => {
    drop();
    number.textContent = doc?.도번 || numbers[column ?? ""]?.도번 || TEXT.noNumber;
    edit.hidden = !opts.isAdmin;
    basisNo.textContent = basisNumber || TEXT.noTableNumber;
    editBasis.hidden = !opts.isAdmin;
    basisHost.replaceChildren();
    void paintBasis(mine);
    if (!doc) {
      previewHost.replaceChildren(note(TEXT.noDrawing));
      return;
    }
    previewHost.replaceChildren();
    // 미리보기 — 도면 양식과 같은 부품을 읽기만으로. 자동백업 칸은 편집 화면과 갈라 둠.
    preview = mountDrawingTemplate(previewHost, doc.도면 as unknown as DrawingTemplateDoc, {
      readOnly: true,
      name: `preview:${column ?? ""}`,
      layer: "system",
    });
    const frame = previewHost.querySelector("iframe");
    if (frame) hideToolbar(frame);
  };

  async function load(col: StructureColumn | null): Promise<void> {
    const mine = ++seq;
    drop();
    if (!col) {
      root.hidden = true;
      column = null;
      doc = null;
      return;
    }
    root.hidden = false;
    column = col.id;
    columnLabel = columnHead(col);
    columnName.textContent = columnLabel;
    number.textContent = numbers[col.id]?.도번 || TEXT.noNumber;
    doc = null;
    basisDoc = null;
    basisNumber = "";
    previewHost.replaceChildren();
    basisHost.replaceChildren();
    const [drawing, sheet] = await Promise.allSettled([
      readTemplate("system", "structure", col.id, null),
      readTemplate("system", "basis", col.id, null),
    ]);
    if (mine !== seq) return;
    if (drawing.status === "fulfilled") doc = drawing.value.문서 as StructureDoc;
    // 도번 목록에 있는 열인데 못 읽으면 알림 — 없는 열은 그냥 「도면 없음」
    else if (numbers[col.id]) showToast(fill(TEXT.readFailed, why(drawing.reason)), "error");
    if (sheet.status === "fulfilled") {
      basisDoc = sheet.value.문서 as Workbook;
      basisNumber = (sheet.value.문서 as { 표번?: string })?.표번 ?? "";
    }
    paintBody(mine);
  }

  /** 글 열(NO · 측점 · 비고)은 구조물이 아니라 컨테이너를 닫음 */
  const show = (colId: string | null, columns: StructureColumn[]): void => {
    const col = columns.find((c) => c.id === colId && isStructureColumn(c)) ?? null;
    if ((col?.id ?? null) === column) return;
    void load(col);
  };

  edit.addEventListener("click", async () => {
    const at = column;
    if (!at) return;
    if (!(await opts.confirmLeave())) return;
    opts.onEdit(at, columnLabel, "structure");
  });

  editBasis.addEventListener("click", async () => {
    const at = column;
    if (!at) return;
    if (!(await opts.confirmLeave())) return;
    opts.onEdit(at, columnLabel, "basis");
  });

  return {
    root,
    numbers: () => Object.fromEntries(Object.entries(numbers).map(([id, n]) => [id, n.도번])),
    reload: async () => {
      numbers = await fetchStructureNumbers().catch(() => ({}));
    },
    show,
    destroy: () => {
      seq += 1;
      drop();
      root.remove();
    },
  };
}