Aislo/M02_MasterTemplete/M02_MasterTemplete_Structure.ts

/* =============================================================================
 * M02_MasterTemplete_Structure.ts
 * 구조물집계표 아래 설계 컨테이너 — 고른 열의 도면 정보 · 면적산출 · 재료산출 카드(보기만 + [수정]).
 * 카드 셋은 좌측 패널과 같은 공용 ui-sidebar 틀 — 고침은 [수정] 이 여는 M02 메인 칸 전체 편집 화면
 * (`M02_MasterTemplete_UI_Main.ts`)이 맡음.
 * 면적산출 · 재료산출 = 스프레드시트(`A00_Common/spreadsheet/`) · 열마다 따로 파일(`area|material/<열 id>.json`) ·
 * 부품은 카드를 열 때만 `import()` 로 받음(다른 페이지 번들에 안 섞임).
 *
 * 구조물 도면은 집계표 열마다 하나(`resources/master_template/structure/<열 id>.json`) ·
 * 서버가 열마다 미리 만들어 둠(번호 자동 · 새 열도 집계표 저장 때 서버가 같이 만듦 — `M02_MasterTemplete_Store.py`).
 * 이 칸은 표 부품 host 밖 형제 자리에 붙음 — 집계표는 그대로 두고 여기만 열마다 다시 그림.
 * 집계표 일위대가 · 도면 · 면적산출 · 재료산출 줄의 조회 후 선택(`pick`)도 여기 — 일위대가 = M01 일위대가
 * 목록에서 고름 · 나머지 = 다른 열 것을 골라 내용만 복사해 가져옴(번호 · 열은 그대로 · 서버가 복사).
 * 글자는 이 파일에 둠(도면 부품 `M02_MasterTemplete_Drawing.ts` 와 같은 방식).
 * ========================================================================== */

import {
  createButton,
  createInputField,
  el,
  showConfirmDialog,
  showToast,
} from "@ui/ui_template_elements";
import { attachCollapsible } from "@ui/ui_template_collapsible";
import { openModal } from "@ui/ui_template_modal";
import type { SpreadsheetHandle, Workbook } from "../A00_Common/spreadsheet/spreadsheet";
import type { LinkOptions } from "../A00_Common/spreadsheet/spreadsheet_links";
import { fetchComboInputs, searchMaterials } from "../M01_MasterData/M01_MasterData_Api_Fetch";
import { type ComboSummary, fetchCombos } from "../M01_MasterData/M01_MasterData_UI_Combo_Api";
import {
  copyArea,
  copyMaterial,
  copyStructure,
  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: "도면 수정",
  noNumber: "도번 없음",
  noDrawing: "도면 없음",
  editSheet: "{value} 수정",
  noSheetDoc: "{value} 없음",
  noFieldNumber: "{value} 없음",
  noSheet: "스프레드시트를 못 띄움 — {value}",
  readFailed: "구조물 도면을 못 읽음 — {value}",
  close: "닫기",
  find: "찾기",
  clear: "비움",
  none: "고를 것이 없음",
  pickPrice: "일위대가 고르기",
  combosFailed: "일위대가 목록을 못 받음 — {value}",
  saveFirst: "새 열은 집계표를 먼저 저장해야 번호가 생김",
  overwrite: "{from} 의 {what} 내용을 {to} 에 덮어씀 — 번호 · 열은 그대로",
  pickCopy: "{value} 복사해 가져오기",
  copied: "복사해 가져옴",
  copyFailed: "복사 실패 — {value}",
  noPrice: "이 열에 일위대가가 없어 알약 없음 — 구조물집계표 일위대가 줄에서 고름",
  noInputs: "일위대가 {value} 에 입력값이 없어 알약 없음",
  inputsFailed: "일위대가 입력값을 못 받음 — {value}",
};

/** 집계표 열 하나에 딸린 문서 셋 — 번호 칸 · 이름 · 복사 */
export type EditKind = "structure" | "area" | "material";
export type SheetKind = Exclude<EditKind, "structure">;
const PARTS: Record<
  EditKind,
  { field: keyof StructureNumbers; word: string; copy: (to: string, from: string) => Promise<void> }
> = {
  structure: { field: "도번", word: "도면", copy: copyStructure },
  area: { field: "면적번", word: "면적산출", copy: copyArea },
  material: { field: "재료번", word: "재료산출", copy: copyMaterial },
};
/** 집계표 줄 열쇠 → 문서 */
const ROW_KIND: Record<string, EditKind> = {
  "s:drawing": "structure",
  "s:area": "area",
  "s:material": "material",
};

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");

/** `{열 id: {도번, 면적번, 재료번}}` — 집계표 번호 줄(없는 열은 키 없음 = 「없음」) */
export type ColumnNumbers = Record<string, StructureNumbers>;

/** 일위대가 목록 — 처음 한 번만 받음(못 받으면 다음에 다시) */
let combos: Promise<ComboSummary[]> | null = null;
const loadCombos = (): Promise<ComboSummary[]> =>
  (combos ??= fetchCombos().catch((error: unknown) => {
    combos = null;
    throw error;
  }));

interface Choice {
  value: string;
  key: string;
  label: string;
}

/** 찾기 칸 + 목록 창 — 고른 값(「비움」 = 빈 글) · 그냥 닫으면 null */
function choose(title: string, items: Choice[], clearable: boolean): Promise<string | null> {
  return new Promise((resolve) => {
    let done = false;
    const finish = (value: string | null): void => {
      if (!done) resolve(value);
      done = true;
    };
    openModal({
      title,
      closeLabel: TEXT.close,
      dialogClass: "m02-modal m02-pick",
      mount: (body, close) => {
        const search = createInputField({ placeholder: TEXT.find, type: "search" });
        const list = el("div", { className: "m02-pick__list" });
        const paint = (): void => {
          const words = search.input.value.trim().toLowerCase().split(/\s+/).filter(Boolean);
          const hits = items.filter((it) =>
            words.every((w) => `${it.key} ${it.label}`.toLowerCase().includes(w)),
          );
          list.replaceChildren(
            ...(hits.length
              ? hits.map((it) =>
                  el("button", {
                    className: "m02-pick__item",
                    attrs: { type: "button", "data-value": it.value },
                    children: [el("span", { className: "m02-pick__key", text: it.key }), it.label],
                  }),
                )
              : [el("p", { className: "m02-struct__empty", text: TEXT.none })]),
          );
        };
        list.addEventListener("click", (event) => {
          const item = (event.target as HTMLElement).closest<HTMLElement>("[data-value]");
          if (!item) return;
          finish(item.dataset.value!);
          close();
        });
        search.input.addEventListener("input", paint);
        search.input.addEventListener("keydown", (event) => {
          if (event.key !== "Enter") return;
          list.querySelector<HTMLElement>("[data-value]")?.click(); // 첫 줄
        });
        const foot = clearable
          ? [
              createButton({
                label: TEXT.clear,
                variant: "ghost",
                onClick: () => {
                  finish("");
                  close();
                },
              }),
            ]
          : [];
        body.append(search.root, list, ...foot);
        paint();
        search.input.focus();
      },
    });
    // 닫기 단추 · Esc · 바깥 누르기 — 창이 빠지면 null
    const watch = new MutationObserver(() => {
      if (document.querySelector(".m02-pick")) return;
      watch.disconnect();
      finish(null);
    });
    watch.observe(document.body, { childList: true });
  });
}

/** 집계표 열 — 머리 글(제목행 종류 · 분류1 · 분류2 · 분류3) · 꼴만 씀 */
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(" ");

/** 면적산출 · 재료산출 편집 화면 위 알약 막대 — 면적 = 그 열 일위대가 입력값(물량) · 재료 = 자재DB 찾기.
 * 알약이 없으면 까닭 글(`notice`)을 같이 돌려줌 */
export async function pillsFor(
  kind: SheetKind,
  column: string,
): Promise<{ links: LinkOptions; notice?: string }> {
  if (kind === "material") return { links: { 항목: [], 모드: "자재", 자재찾기: searchMaterials } };
  const none = (notice: string) => ({ links: { 항목: [], 모드: "입력" as const }, notice });
  const table = await readTemplate("system", "table", STRUCTURE_TABLE, null).catch(() => null);
  const cols = (table?.문서 as { 열?: { id: string; 일위대가?: string | null }[] } | null)?.열;
  const combo = cols?.find((c) => c.id === column)?.일위대가;
  if (!combo) return none(TEXT.noPrice);
  try {
    const got = await fetchComboInputs(combo);
    const 항목 = got.물량.map((q) => ({ 키: q.키, 이름: q.이름, 단위: q.단위 }));
    return 항목.length ? { links: { 항목, 모드: "입력" } } : none(fill(TEXT.noInputs, combo));
  } catch (error) {
    return none(fill(TEXT.inputsFailed, why(error)));
  }
}

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

export interface StructurePanelHandle {
  root: HTMLElement;
  /** `{열 id: {도번, 면적번, 재료번}}` — 집계표 `drawingLabel` · `areaLabel` · `materialLabel` 이 씀 */
  numbers: () => ColumnNumbers;
  /** 번호 목록 다시 받기 */
  reload: () => Promise<void>;
  /** 고른 열이 바뀜 — 같은 열이면 이름만 새로(CAD 를 다시 안 띄움) */
  show: (colId: string | null, columns: StructureColumn[]) => void;
  /** 보던 열을 다시 읽음 — 집계표 [저장] 뒤(서버가 새 열 파일 · 번호를 만듦) */
  refresh: (columns: StructureColumn[]) => void;
  /** 집계표 조회 후 선택(`onPick`) — 일위대가 = 고른 키(「비움」 = 빈 글 · 닫으면 null) ·
   * 도면 · 면적산출 · 재료산출 = 다른 열 것을 복사해 가져옴(돌려주는 글 없음) */
  pick: (row: string, colId: string | null, columns: StructureColumn[]) => Promise<string | null>;
  destroy: () => void;
}

export function createStructurePanel(opts: StructurePanelOptions): StructurePanelHandle {
  let numbers: ColumnNumbers = {};
  let shown: StructureColumn | null = null;
  let column: string | null = null;
  let columnLabel = "";
  let doc: StructureDoc | null = null;
  let preview: DrawingTemplateHandle | null = null;
  let seq = 0;

  const card = (title: string, head: HTMLElement, body: HTMLElement): HTMLElement =>
    el("section", {
      className: "m02-struct__card ui-collapsible ui-sidebar-section ui-sidebar-card",
      children: [el("h3", { className: "ui-collapsible__title", text: title }), head, body],
    });

  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 = card(
    TEXT.drawingInfo,
    el("div", { className: "m02-struct__head", children: [number, columnName, edit] }),
    previewHost,
  );

  /** 면적산출 · 재료산출 카드 — 번호 · [수정] · 스프레드시트 미리보기 */
  interface SheetCard {
    kind: SheetKind;
    root: HTMLElement;
    no: HTMLElement;
    edit: HTMLButtonElement;
    host: HTMLElement;
    doc: Workbook | null;
    number: string;
    handle: SpreadsheetHandle | null;
  }
  const sheetCard = (kind: SheetKind): SheetCard => {
    const no = el("span", { className: "m02-struct__no" });
    const editButton = createButton({
      label: fill(TEXT.editSheet, PARTS[kind].word),
      variant: "ghost",
    });
    const host = el("div", { className: "m02-struct__sheet" });
    editButton.addEventListener("click", () => void openEdit(kind));
    return {
      kind,
      root: card(
        PARTS[kind].word,
        el("div", { className: "m02-struct__subhead", children: [no, editButton] }),
        host,
      ),
      no,
      edit: editButton,
      host,
      doc: null,
      number: "",
      handle: null,
    };
  };
  const sheets = [sheetCard("area"), sheetCard("material")];

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

  const drop = (): void => {
    preview?.destroy();
    preview = null;
    for (const c of sheets) {
      c.handle?.destroy();
      c.handle = 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 { display: none !important; }";
      inner.head.append(style);
    };
    frame.addEventListener("load", apply);
    apply();
  };

  /** 스프레드시트 미리보기 — 보기만(고침은 [수정] 이 여는 전체 화면) · 부품을 늦게 받음 ·
   * 그 사이 열이 바뀌면 버림 */
  const paintSheet = async (c: SheetCard, mine: number): Promise<void> => {
    if (!c.doc) return void c.host.replaceChildren(note(fill(TEXT.noSheetDoc, PARTS[c.kind].word)));
    try {
      const { createSpreadsheet } = await loadSpreadsheet();
      if (mine !== seq || !c.doc) return;
      c.handle = createSpreadsheet(c.host, c.doc, { readOnly: true, tabs: false });
    } catch (error) {
      if (mine === seq) c.host.replaceChildren(note(fill(TEXT.noSheet, why(error))));
    }
  };

  /** 미리보기 · 스프레드시트 — 문서가 없으면 없음 글(서버가 열마다 미리 만들어 둬 보통은 없음) */
  const paintBody = (mine: number): void => {
    drop();
    number.textContent = doc?.도번 || numbers[column ?? ""]?.도번 || TEXT.noNumber;
    edit.hidden = !opts.isAdmin;
    for (const c of sheets) {
      const field = PARTS[c.kind].field;
      c.no.textContent =
        c.number || numbers[column ?? ""]?.[field] || fill(TEXT.noFieldNumber, field);
      c.edit.hidden = !opts.isAdmin;
      c.host.replaceChildren();
      void paintSheet(c, 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",
      panelsCollapsed: true, // 특성 · 도면층 패널은 접힌 채 — › 를 누르면 펼침
      preview: true, // 왼쪽 끌기 = 화면 옮기기 · 두 번 누름 = 전체 맞춤
      originMarker: true, // 좌표 0,0 기준점 십자
      noArea: true, // 구조물도는 도각이 없음 — 작도 영역 단추 없음
    });
    const frame = previewHost.querySelector("iframe");
    if (frame) hideToolbar(frame);
  };

  async function load(col: StructureColumn | null): Promise<void> {
    const mine = ++seq;
    drop();
    shown = col;
    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;
    previewHost.replaceChildren();
    for (const c of sheets) {
      c.doc = null;
      c.number = "";
      c.host.replaceChildren();
    }
    const [drawing, ...books] = await Promise.allSettled([
      readTemplate("system", "structure", col.id, null),
      ...sheets.map((c) => readTemplate("system", c.kind, 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");
    books.forEach((got, i) => {
      if (got.status !== "fulfilled") return;
      const c = sheets[i];
      const book = got.value.문서 as Workbook & Record<string, unknown>;
      c.doc = book;
      c.number = String(book?.[PARTS[c.kind].field] ?? "");
    });
    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);
    if (col) columnName.textContent = columnLabel = columnHead(col); // 머리를 고쳤을 수 있음
  };

  const pickPrice = async (colId: string, columns: StructureColumn[]): Promise<string | null> => {
    let list: ComboSummary[];
    try {
      list = await loadCombos();
    } catch (error) {
      showToast(fill(TEXT.combosFailed, why(error)), "error");
      return null;
    }
    const col = columns.find((c) => c.id === colId);
    const items = list.map((c) => ({
      value: c.키,
      key: c.키,
      // 이름에 단위가 이미 붙은 조합이 있음 — 겹치면 뺌
      label: [c.이름, c.단위 && !c.이름.includes(`(${c.단위})`) && `(${c.단위})`, c.구분]
        .filter(Boolean)
        .join(" "),
    }));
    return choose(col ? `${TEXT.pickPrice} — ${columnHead(col)}` : TEXT.pickPrice, items, true);
  };

  /** 다른 열의 도면 · 면적산출 · 재료산출을 골라 내용만 복사 — 덮어쓰기 확인 · 보고 있던 열이면 다시 읽음 */
  const pickCopy = async (
    kind: EditKind,
    colId: string,
    columns: StructureColumn[],
  ): Promise<void> => {
    const { field, word, copy } = PARTS[kind];
    const to = columns.find((c) => c.id === colId);
    const toNo = numbers[colId]?.[field];
    if (!to || !toNo) return void showToast(TEXT.saveFirst, "error");
    const items = columns
      .filter((c) => c.id !== colId && numbers[c.id]?.[field])
      .map((c) => ({ value: c.id, key: numbers[c.id][field]!, label: columnHead(c) }));
    const from = await choose(
      `${fill(TEXT.pickCopy, word)} — ${toNo} ${columnHead(to)}`,
      items,
      false,
    );
    const src = columns.find((c) => c.id === from);
    if (!from || !src) return;
    const ask = TEXT.overwrite
      .replace("{from}", `${numbers[from][field]} ${columnHead(src)}`)
      .replace("{what}", word)
      .replace("{to}", `${toNo} ${columnHead(to)}`);
    if (!(await showConfirmDialog(ask))) return;
    try {
      await copy(colId, from);
      showToast(TEXT.copied, "success");
      if (column === colId) void load(shown);
    } catch (error) {
      showToast(fill(TEXT.copyFailed, why(error)), "error");
    }
  };

  const pick = async (
    row: string,
    colId: string | null,
    columns: StructureColumn[],
  ): Promise<string | null> => {
    if (!opts.isAdmin || !colId) return null;
    if (row === "s:price") return pickPrice(colId, columns);
    if (ROW_KIND[row]) await pickCopy(ROW_KIND[row], colId, columns);
    return null;
  };

  async function openEdit(kind: EditKind): Promise<void> {
    const at = column;
    if (!at) return;
    if (!(await opts.confirmLeave())) return;
    opts.onEdit(at, columnLabel, kind);
  }
  edit.addEventListener("click", () => void openEdit("structure"));

  return {
    root,
    numbers: () => numbers,
    reload: async () => {
      numbers = await fetchStructureNumbers().catch(() => ({}));
    },
    show,
    refresh: (columns) => {
      const at = column;
      column = null;
      show(at, columns);
    },
    pick,
    destroy: () => {
      seq += 1;
      drop();
      root.remove();
    },
  };
}