Aislo/M02_MasterTemplete/M02_MasterTemplete_ItemCards.ts

/* =============================================================================
 * M02_MasterTemplete_ItemCards.ts
 * 항목 카드 — 도면 정보 · 면적산출 · 재료산출(보기만 + [수정]) + 덧붙는 카드(선택 입력 …).
 * M02 구조물 설계 컨테이너(`M02_MasterTemplete_Structure.ts`)에서 떼어 냄(계획서 25-2d) — 항목 고르기
 * 모달(`ui_template_item_picker_detail.ts`)이 **같은 카드**를 쓰려고. 문서를 어디서 읽는지는
 * 자료 자리(`ItemSource`)가 정함 · 카드는 몰라도 됨.
 * 카드 겉 틀 · 제목 줄 · 부제 · [저장] · ? · 점(●) · 상태 글은 공용 틀(`M02_MasterTemplete_CardShell` · 31-7).
 * 면적산출 · 재료산출 = 스프레드시트 · 부품은 카드를 열 때만 `import()`(다른 페이지 번들에 안 섞임).
 * 덧붙는 카드는 `extraCards` 로 끼움 — 선택 입력 카드(`M02_MasterTemplete_Inputs.ts`)가 그 자리.
 * `sheetEdit` 가 있으면 면적산출 · 재료산출 카드를 미리보기에서 고침(31-3) — 스프레드시트 `preview`(메뉴 없이
 * 수식 입력 줄 · 칸 고침 · 단축키) + 아래 알약 줄 + 카드 [저장] · 없으면 보기만(고르기 모달).
 * ========================================================================== */

import { createButton, el, showConfirmDialog } from "@ui/ui_template_elements";
import { attachCollapsible } from "@ui/ui_template_collapsible";
import type {
  LinkOptions,
  SpreadsheetHandle,
  Workbook,
} from "../A00_Common/spreadsheet/spreadsheet";
import type { StructureDoc, StructureNumbers } from "./M02_MasterTemplete_Api_Fetch";
import {
  cardShell,
  helpButton,
  saveControl,
  type CardShell,
  type SaveControl,
} from "./M02_MasterTemplete_CardShell";
import {
  DRAWING_HELP,
  DRAWING_KEYS,
  drawingEditable,
  mountDrawingCard,
  type DrawingCardHandle,
} from "./M02_MasterTemplete_DrawingCard";
import type { ItemPart, ItemSource } from "./M02_MasterTemplete_ItemSource";
import "./M02_MasterTemplete_Structure.css";

/** 집계표 열 하나에 딸린 문서 셋 — 번호 칸 · 이름 */
export type EditKind = ItemPart;
export type SheetKind = Exclude<EditKind, "structure">;
export const PART_FIELD: Record<EditKind, keyof StructureNumbers> = {
  structure: "도번",
  area: "면적번",
  material: "재료번",
};
export const PART_WORD: Record<EditKind, string> = {
  structure: "도면",
  area: "면적산출",
  material: "재료산출",
};

const TEXT = {
  drawingInfo: "도면 정보",
  edit: "도면 수정",
  noNumber: "도번 없음",
  noDrawing: "도면 없음",
  editSheet: "{value} 수정",
  noSheetDoc: "{value} 없음",
  noFieldNumber: "{value} 없음",
  noSheet: "스프레드시트를 못 띄움 — {value}",
  readFailed: "{value} 파일을 못 읽음 — {why}",
  discard: "카드에 저장 안 한 고침이 있음 — 버리고 다른 항목을 열까요?",
  sheetHelp: "단축키 — 칸을 고르고 바로 침",
};

/** 엑셀 카드 단축키 — 스프레드시트 미리보기(`spreadsheet_keys.ts`)가 받는 것만 */
const SHEET_KEYS: [string, string][] = [
  ["글자 · Enter · F2", "칸 고침(= 로 시작하면 식)"],
  ["화살표 · Tab · Enter", "칸 옮기기"],
  ["Shift+화살표 · Ctrl+A", "고르기 · 전부"],
  ["Delete · Backspace", "비우기 · 새로 쓰기"],
  ["Ctrl+C · Ctrl+V", "복사 · 붙여넣기"],
  ["Ctrl+D · Ctrl+R", "아래로 · 오른쪽으로 채우기"],
  ["Ctrl+Z · Ctrl+Y", "되돌리기 · 다시 하기"],
  ["Esc", "고침 멈춤"],
  ["Ctrl+S", "저장(카드 [저장]과 같음)"],
];

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

export interface ItemCardsOptions {
  /** 지금 자료 자리 — 열을 읽을 때마다 부름(층이 바뀌어도 따라감) */
  source: () => ItemSource;
  /** [수정] 단추를 보일까 — 부를 때마다 다시 봄 */
  editable: () => boolean;
  /** [도면 수정] · [면적산출 수정] · [재료산출 수정] */
  onEdit: (kind: EditKind) => void;
  /** 문서에 번호가 없을 때 쓸 번호(집계표 번호 줄) */
  numberOf?: (kind: EditKind, column: string) => string | undefined;
  /** 못 읽었을 때 카드에 까닭을 보일까 — 기본 보임(M02 는 번호가 있는 열만 · 없는 열은 「없음」) */
  warnOnFail?: (column: string) => boolean;
  /** 세 카드 뒤에 덧붙는 카드(선택 입력 …) */
  extraCards?: HTMLElement[];
  /** 카드 가운데 하나라도 저장 안 한 고침이 생김 · 없어짐(PLAN 31-4 · 31-7) */
  onDirty?: (dirty: boolean) => void;
  /** 면적산출 · 재료산출 카드를 미리보기에서 고침(31-3) — 없으면 보기만 */
  sheetEdit?: SheetEditOptions;
}

/** 카드 스프레드시트를 다루는 손잡이 — 알약 · 자재 조합 판이 씀 */
export interface SheetCardControl {
  column: string;
  label: string;
  host: HTMLElement;
  handle: () => SpreadsheetHandle | null;
  /** 시트만 다시 붙임(저장 안 한 고침은 그대로) — 새 알약 목록으로 */
  remount: (links: LinkOptions | undefined) => void;
  /** 알약 · 판에서 시트 문서를 고쳤음 */
  touched: () => void;
}

export interface SheetEditOptions {
  /** 지금 고칠 수 있나 — 부를 때마다 다시 봄 */
  can: () => boolean;
  /** 아래 알약 줄(입력 연결) · 카드 아래 덧붙는 판(재료산출 = 자재 조합) — 전체 편집기와 같은 부품 */
  links: (
    kind: SheetKind,
    control: SheetCardControl,
  ) => Promise<{ links?: LinkOptions; below?: HTMLElement; refresh?: () => void }>;
  /** 카드 [저장] — 전체 편집기와 같은 저장 길 · 새 판을 돌려줌 */
  save: (kind: SheetKind, column: string, doc: unknown, version: string) => Promise<string>;
}

export interface ItemCardsHandle {
  root: HTMLElement;
  /** 그 열을 읽어 카드를 그림 — `null` 이면 카드를 숨김 */
  load: (col: { id: string; label: string } | null) => Promise<void>;
  /** 이름만 새로(CAD 를 다시 안 띄움) */
  setLabel: (label: string) => void;
  /** [수정] 단추 글 — 종류마다 · `null` 은 기본 글 */
  relabel: (labels: Partial<Record<EditKind, string | null>>) => void;
  /** 지금 보이는 열 id */
  column: () => string | null;
  /** 카드(도면 · 면적산출 · 재료산출)에 저장 안 한 고침이 있나 — 페이지가 떠날 때 물음 */
  dirty: () => boolean;
  /** 고친 카드를 모두 저장(도면 · 엑셀) — 실패하면 던짐 */
  saveAll: () => Promise<void>;
  /** 저장 안 한 카드 고침을 버림(물음에서 「확인」 뒤) */
  discard: () => void;
  destroy: () => void;
}

/** 카드 하나 — 틀 · [저장] · ? · [수정] · 부제 번호 · 이름 */
interface Card {
  kind: EditKind;
  shell: CardShell;
  saver: SaveControl;
  help: HTMLElement;
  edit: HTMLButtonElement;
  no: HTMLElement;
  name: HTMLElement;
}

export function createItemCards(opts: ItemCardsOptions): ItemCardsHandle {
  let column: string | null = null;
  let label = "";
  let doc: StructureDoc | null = null;
  let docVersion: string | null = null;
  let preview: DrawingCardHandle | null = null;
  let seq = 0;

  const numberOf = (kind: EditKind, id: string): string => opts.numberOf?.(kind, id) ?? "";
  const anyDirty = (): boolean => cards.some((c) => c.saver.dirty());
  const reload = (): void => void load(column ? { id: column, label } : null, true);

  /** 카드 틀 하나 — 제목 줄 오른쪽 = ? · [저장] · [〇〇 수정](빈 단추 한 모양) · 부제 = 번호 · 이름 */
  const makeCard = (
    kind: EditKind,
    title: string,
    body: HTMLElement,
    save: () => Promise<void>,
  ) => {
    const no = el("span", { className: "m02-struct__no" });
    const name = el("span", { className: "m02-struct__title" });
    const shell = cardShell({ title, body, sub: [no, name] });
    const saver = saveControl(shell, save, () => opts.onDirty?.(anyDirty()));
    const help = helpButton(
      shell,
      kind === "structure" ? DRAWING_HELP : TEXT.sheetHelp,
      kind === "structure" ? DRAWING_KEYS : SHEET_KEYS,
    );
    const edit = createButton({
      label: kind === "structure" ? TEXT.edit : fill(TEXT.editSheet, PART_WORD[kind]),
      variant: "ghost",
      size: "sm",
    });
    edit.addEventListener("click", () => opts.onEdit(kind));
    shell.tools.append(help, saver.button, edit);
    return { kind, shell, saver, help, edit, no, name };
  };

  const previewHost = el("div", { className: "m02-struct__preview" });
  const info = makeCard("structure", TEXT.drawingInfo, previewHost, () =>
    preview ? preview.write() : Promise.resolve(),
  );

  /** 면적산출 · 재료산출 카드 — 스프레드시트 미리보기 · 카드 고침(31-3) */
  interface SheetCard extends Card {
    kind: SheetKind;
    host: HTMLElement;
    doc: Workbook | null;
    number: string;
    handle: SpreadsheetHandle | null;
    version: string;
  }
  const sheetCard = (kind: SheetKind): SheetCard => {
    const host = el("div", { className: "m02-struct__sheet" });
    const card = {
      ...makeCard(kind, PART_WORD[kind], host, () => saveSheet(card)),
      kind,
      host,
      doc: null,
      number: "",
      handle: null,
      version: "",
    } as SheetCard;
    return card;
  };
  const sheets = [sheetCard("area"), sheetCard("material")];
  const cards: Card[] = [info, ...sheets];
  const defaults: Record<EditKind, string> = {
    structure: TEXT.edit,
    area: fill(TEXT.editSheet, PART_WORD.area),
    material: fill(TEXT.editSheet, PART_WORD.material),
  };

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

  /** [저장] · ? 는 고칠 수 있는 카드에서 늘 보임(고쳐야 켜짐) · [수정] 은 editable 일 때 */
  const paintTools = (): void => {
    const drawEdit = drawingEditable(opts.editable(), opts.source());
    const sheetEdit = !!opts.sheetEdit?.can();
    for (const c of cards) {
      const can = c.kind === "structure" ? drawEdit : sheetEdit;
      c.saver.button.hidden = c.help.hidden = !can;
      c.edit.hidden = !opts.editable();
    }
  };

  const drop = (): void => {
    preview?.destroy();
    preview = null;
    for (const c of sheets) {
      c.handle?.destroy();
      c.handle = null;
    }
    for (const c of cards) c.saver.mark(false);
  };

  /** 카드 [저장] 길 — 읽은 문서(번호 등 계약 밖 칸)에 시트를 덮어 저장(전체 편집기 `doSave` 와 같은 모양) */
  async function saveSheet(c: SheetCard): Promise<void> {
    const at = column;
    if (!opts.sheetEdit || !c.handle || !at) return;
    const next = { ...(c.doc as unknown as Record<string, unknown>), ...c.handle.getDoc() };
    c.version = await opts.sheetEdit.save(c.kind, at, next, c.version);
    c.doc = next as Workbook;
  }

  /** 미리보기 수정 — 메뉴 없이 수식 입력 줄 · 칸 고침 · 아래 알약 줄 · 덧붙는 판(재료산출 = 자재 조합) */
  const paintEditable = async (
    c: SheetCard,
    mine: number,
    create: (typeof import("../A00_Common/spreadsheet/spreadsheet"))["createSpreadsheet"],
  ): Promise<void> => {
    const grid = el("div", { className: "m02-struct__sheet-grid" });
    c.host.classList.add("is-edit");
    c.host.replaceChildren(grid);
    const mountGrid = (book: Workbook, links: LinkOptions | undefined): void => {
      c.handle?.destroy();
      c.handle = create(grid, book, {
        preview: true,
        tabs: false,
        links,
        onChange: () => {
          c.saver.mark(true);
          extra.refresh?.();
        },
      });
    };
    const control: SheetCardControl = {
      column: column ?? "",
      label,
      host: c.host,
      handle: () => c.handle,
      remount: (links) => {
        const kept = c.handle?.getDoc();
        if (kept) mountGrid(kept, links);
      },
      touched: () => c.saver.mark(true),
    };
    // 알약을 못 받아도 칸은 고침 — 알약 줄만 없음
    const extra: Awaited<ReturnType<SheetEditOptions["links"]>> = await opts
      .sheetEdit!.links(c.kind, control)
      .catch(() => ({}));
    if (mine !== seq || !c.doc) return;
    mountGrid(c.doc, extra.links);
    if (extra.below) c.host.append(extra.below);
  };

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

  /** 미리보기 · 스프레드시트 — 문서가 없으면 없음 글(서버가 열마다 미리 만들어 둬 보통은 없음) */
  const paintBody = (mine: number): void => {
    const at = column ?? "";
    paintTools();
    info.no.textContent = doc?.도번 || numberOf("structure", at) || TEXT.noNumber;
    for (const c of sheets) {
      c.no.textContent =
        c.number || numberOf(c.kind, at) || fill(TEXT.noFieldNumber, PART_FIELD[c.kind]);
      void paintSheet(c, mine);
    }
    if (!doc) return;
    previewHost.replaceChildren();
    // 미리보기 — 고칠 수 있으면 메뉴 없이 단축키로 고치고 카드 [저장](31-4 · `DrawingCard`)
    preview = mountDrawingCard(previewHost, {
      doc,
      version: docVersion,
      source: opts.source(),
      column: at,
      editable: opts.editable(),
      saver: info.saver,
    });
  };

  /** 못 읽음 — 번호 있는 열이면 카드 안 까닭 + [다시 불러오기] · 없는 열이면 「없음」 */
  const missing = (c: Card, reason: unknown, empty: string): void => {
    if (opts.warnOnFail?.(column ?? "") ?? true)
      c.shell.fail(
        TEXT.readFailed.replace("{value}", PART_WORD[c.kind]).replace("{why}", why(reason)),
        reload,
      );
    else c.shell.note(empty);
  };

  async function load(col: { id: string; label: string } | null, again = false): Promise<void> {
    // 카드 고침을 저장 안 했으면 버릴지 물음(한 번) — 취소면 보던 열 그대로
    if (!again && anyDirty() && col?.id !== column && !(await showConfirmDialog(TEXT.discard)))
      return;
    const mine = ++seq;
    drop();
    if (!col) {
      root.hidden = true;
      column = null;
      doc = null;
      return;
    }
    root.hidden = false;
    column = col.id;
    label = col.label;
    for (const c of cards) c.name.textContent = label;
    info.no.textContent = numberOf("structure", col.id) || TEXT.noNumber;
    doc = null;
    docVersion = null;
    previewHost.replaceChildren();
    for (const c of sheets) {
      c.doc = null;
      c.number = "";
      c.version = "";
      c.host.classList.remove("is-edit");
      c.host.replaceChildren();
    }
    const source = opts.source();
    // 0.3초 넘으면 카드마다 칸 안 「불러오는 중」(PLAN 30-6 · 31-7)
    const stops = cards.map((c) => c.shell.loading());
    const [drawing, ...books] = await Promise.allSettled([
      source.read("structure", col.id),
      ...sheets.map((c) => source.read(c.kind, col.id)),
    ]);
    stops.forEach((stop) => stop());
    if (mine !== seq) return;
    if (drawing.status === "fulfilled") {
      doc = drawing.value.문서 as StructureDoc;
      docVersion = drawing.value.판 ?? null;
    } else missing(info, drawing.reason, TEXT.noDrawing);
    books.forEach((got, i) => {
      const c = sheets[i];
      if (got.status !== "fulfilled")
        return missing(c, got.reason, fill(TEXT.noSheetDoc, PART_WORD[c.kind]));
      const book = got.value.문서 as Workbook & Record<string, unknown>;
      c.doc = book;
      c.version = String((got.value as { 판?: string | null }).판 ?? "");
      c.number = String(book?.[PART_FIELD[c.kind]] ?? "");
    });
    paintBody(mine);
  }

  return {
    root,
    load: (col) => load(col),
    setLabel: (next) => {
      label = next;
      for (const c of cards) c.name.textContent = next;
    },
    relabel: (labels) => {
      for (const c of cards) {
        (c.edit.querySelector(".ui-btn__label") ?? c.edit).textContent =
          labels[c.kind] ?? defaults[c.kind];
      }
    },
    column: () => column,
    dirty: anyDirty,
    saveAll: async () => {
      for (const c of cards) if (c.saver.dirty() && !(await c.saver.run())) throw new Error();
    },
    discard: () => {
      drop();
      opts.onDirty?.(false);
    },
    destroy: () => {
      seq += 1;
      drop();
      root.remove();
    },
  };
}