Aislo/M02_MasterTemplete/StructOptions/M02_SO_Def.ts

/* =============================================================================
 * M02_SO_Def.ts
 * 구조물 정의 편집 화면(PLAN 48-2 · 메인 칸) — 탭 셋(322-2): 「한눈 표」(종류마다 반영 한 줄 ·
 * `M02_SO_Def_Table`) · 「종류별」(왼쪽 구조물군 · 종류 목록 · 오른쪽 고른 종류 이름 · 반영 · 명세 이름 나무 ·
 * 줄마다 보임 · 미리보기) · 「부품」(`M02_SO_Def_Parts`) ·
 * 아래 검사(화면 = 서버 짝 `M02_SO_Def_Check`) · [저장](판 +1 · 목록 + enabled 함께 · 시스템 관리자만) ·
 * 지난 판 목록(누르면 그 판을 읽기만으로 봄).
 * 다른 역할은 읽기만. 고칠 사본은 저장 전까지 서버에 안 감 · 정본 = `구조물정의.json`(48-1).
 * ========================================================================== */

import { createButton, createTag, el, showToast } from "@ui/ui_template_elements";
import { StaleError } from "../M02_MasterTemplete_Api_Fetch";
import {
  fetchStructureDef,
  fetchStructureDefAt,
  fetchStructureDefHistory,
  saveStructureDef,
  type DefVersion,
} from "./M02_SO_Api";
import { buildLayoutBlock } from "./M02_SO_Def_Layout";
import {
  baseShown,
  clone,
  problems,
  stepFamily,
  stepType,
  type StructDef,
} from "./M02_SO_Def_Model";
import { buildOptionsBlock } from "./M02_SO_Def_Options";
import { buildRulesBlock } from "./M02_SO_Def_Rules";
import { buildSpecBlock } from "./M02_SO_Def_Spec";
import { specFor } from "../../A00_Common/design/design_structure_pipe";
import { catalogProblems, type CheckDef } from "./M02_SO_Def_Check";
import { buildParts } from "./M02_SO_Def_Parts";
import { differs, setReflect, tidy } from "./M02_SO_Def_Reflect";
import { buildReflectBlock, buildTable } from "./M02_SO_Def_Table";
import { checkBox, pickBox, textBox } from "./M02_SO_Def_Ui";
import { addFromTemplate, templates } from "./M02_SO_Def_Add";
import { buildGroupBlock } from "./M02_SO_Groups";
import { to } from "./M02_SO_Text";

/** 옛 편집기(옵션 · 배치 · 그룹 · 규칙 · 기준 측점) — 모든 종류에서 숨김(52-12 · 정의 화면 = 이름만) */
const OLD_EDITOR = false;

export interface DefScreenOptions {
  /** 시스템 관리자 — 아니면 읽기만 */
  isAdmin: boolean;
  /** 메인 칸에 화면을 띄움 — 고침 표시 손잡이를 돌려받음 */
  show: (label: string, node: HTMLElement) => (dirty: boolean) => void;
}

const why = (error: unknown): string => (error instanceof Error ? error.message : "");

/** 작은 단추 */
function smallButton(
  label: string,
  run: () => void,
  off = false,
  variant: "ghost" | "danger" = "ghost",
): HTMLButtonElement {
  const b = createButton({ label, variant, size: "sm" });
  b.disabled = off;
  b.addEventListener("click", run);
  return b;
}

/** 화면을 받아 띄움 — 못 받으면 알림만 · 띄웠으면 참 */
export async function openDefScreen(opt: DefScreenOptions): Promise<boolean> {
  let def: StructDef;
  try {
    def = await fetchStructureDef();
  } catch (error) {
    showToast(to("Load_Failed", why(error)), "error");
    return false;
  }
  drawDef(def, opt);
  return true;
}

function drawDef(first: StructDef, opt: DefScreenOptions): void {
  /** 지금 판(서버) · 고칠 사본 · 보는 지난 판(있으면 읽기만) */
  let base = first;
  let work = clone(first);
  let past: StructDef | null = null;
  let dirty = false;
  let current: string | null = null;
  const open = new Set<string>(); // 선택지를 펼친 옵션
  let versions: DefVersion[] | null = null;
  type Tab = "table" | "kinds" | "parts";
  let tab: Tab = "table";

  const shown = (): StructDef => past ?? work;
  const canEdit = (): boolean => opt.isAdmin && !past;
  const kindList = el("div", { className: "m02-opts__kinds", attrs: { "data-sod-kinds": "" } });
  const detail = el("div", { className: "m02-opts__list", attrs: { "data-sod-detail": "" } });
  const banner = el("div", { className: "m02-sod__banner", attrs: { "data-sod-banner": "" } });
  const issues = el("div", { className: "m02-sod__issues", attrs: { "data-sod-issues": "" } });
  const historyBox = el("div", {
    className: "m02-sod__history",
    attrs: { "data-sod-history": "" },
  });

  /** 검사 글 — 이름 · 배치 · 규칙(`problems`) + 구조물 표(서버 짝 · 앞 판 = 지금 서버 판) */
  const allProblems = (): string[] =>
    past ? [] : [...problems(work), ...catalogProblems(work as CheckDef, base as CheckDef)];
  const tabBar = el("div", { className: "m02-sod__tabs", attrs: { "data-sod-tabs": "" } });
  const body = el("div", { className: "m02-sod__body" });
  const panes = el("div", { className: "m02-opts__panes", children: [kindList, detail] });

  const changed = (): void => {
    dirty = differs(work, base);
    sync();
    paint();
  };

  const paintKinds = (): void => {
    const d = shown();
    const edit = canEdit();
    const parts: HTMLElement[] = [];
    // 종류 더하기(323-7) — 본보기 고름 + 단추 · 새 종류를 골라 둠(이름 · 반영은 오른쪽에서 고침)
    if (edit) {
      const pairs = templates(d);
      let pick = pairs.find(([key]) => key === current)?.[0] ?? pairs[0]?.[0] ?? "";
      const box = pickBox(pairs, pick, (v) => (pick = v), { edit, attr: "data-sod-add-from" });
      box.title = to("AddKindNote");
      const add = smallButton(to("AddKind"), () => {
        const key = addFromTemplate(d, pick);
        if (!key) return;
        current = key;
        changed();
      });
      add.setAttribute("data-sod-add", "");
      parts.push(el("div", { className: "m02-sod__family", children: [box, add] }));
    }
    const families = Object.keys(d.구조물군);
    families.forEach((g, gi) => {
      parts.push(
        el("div", {
          className: "m02-sod__family",
          attrs: { "data-sod-family": g },
          children: [
            textBox(d.구조물군[g], (v) => (d.구조물군[g] = v), changed, {
              edit,
              attr: "data-sod-family-name",
            }),
            ...(edit
              ? [
                  smallButton(to("GroupUp"), () => stepFamily(d, g, -1) && changed(), gi === 0),
                  smallButton(
                    to("GroupDown"),
                    () => stepFamily(d, g, 1) && changed(),
                    gi === families.length - 1,
                  ),
                ]
              : []),
          ],
        }),
      );
      const kinds = d.types.filter((t) => t.group === g);
      kinds.forEach((t, ti) => {
        const off = t.enabled === false;
        const groups = d.그룹[t.type_id]?.length ?? 0;
        const b = el("button", {
          className: `m02-opts__kind${t.type_id === current ? " is-active" : ""}${off ? " is-off" : ""}`,
          attrs: { type: "button", "data-sod-kind": t.type_id },
          children: [
            el("span", { text: t.name }),
            ...(groups ? [createTag(to("GroupTag", String(groups)), "accent")] : []),
            ...(off ? [createTag(to("Off"), "neutral")] : []),
          ],
        });
        b.addEventListener("click", () => {
          current = t.type_id;
          paint();
        });
        parts.push(
          el("div", {
            className: "m02-sod__kindrow",
            children: [
              b,
              ...(edit
                ? [
                    smallButton(
                      to("GroupUp"),
                      () => stepType(d, t.type_id, -1) && changed(),
                      ti === 0,
                    ),
                    smallButton(
                      to("GroupDown"),
                      () => stepType(d, t.type_id, 1) && changed(),
                      ti === kinds.length - 1,
                    ),
                  ]
                : []),
            ],
          }),
        );
      });
    });
    kindList.replaceChildren(...parts);
  };

  const paintDetail = (): void => {
    const d = shown();
    const type = d.types.find((t) => t.type_id === current);
    if (!type) {
      detail.replaceChildren(el("p", { className: "m02-side__empty", text: to("Pick") }));
      return;
    }
    const edit = canEdit();
    const extra = (): NonNullable<StructDef["종류"][string]> => (d.종류[type.type_id] ??= {});
    // 이름만 고침(PLAN 52-11 · 52-12) — 명세 종류 = 명세 나무 · 나머지 = 정의 그룹 나무
    const spec = specFor(type.type_id);
    detail.replaceChildren(
      el("div", {
        className: "m02-sod__kindhead",
        children: [
          textBox(type.name, (v) => (type.name = v), changed, {
            edit,
            attr: "data-sod-kind-name",
            cls: "m02-sod__name",
          }),
          el("small", { className: "m02-opts__key", text: type.type_id }),
          // 안 씀 = 목록 B06 만(enabled 는 목록 짝 · 322-2) · 숨김(hidden)은 한눈 표 목록 칸에서
          checkBox(
            to("Unused"),
            type.enabled === false,
            (v) => (setReflect(d, type.type_id, "목록", v ? "b06" : "both"), changed()),
            { edit, attr: "data-sod-kind-off" },
          ),
          ...(!OLD_EDITOR
            ? []
            : [
                checkBox(
                  to("BaseStationShow"),
                  baseShown(d, type.type_id),
                  (v) => {
                    if (v) delete extra().기준측점;
                    else extra().기준측점 = false;
                    changed();
                  },
                  { edit, attr: "data-sod-base" },
                ),
              ]),
          ...(d.종류[type.type_id]?.동작 ?? []).map((a) => {
            const tag = createTag(a, "neutral");
            tag.title = d.동작[a] ?? "";
            return tag;
          }),
        ],
      }),
      ...(!OLD_EDITOR
        ? [
            buildReflectBlock(d, type, edit, changed),
            buildSpecBlock({ def: d, base, type, spec, edit, changed }),
          ]
        : [
            buildOptionsBlock({ def: d, type, edit, open, changed }),
            buildLayoutBlock({ def: d, type, edit, changed }),
            buildGroupBlock({ list: (d.그룹[type.type_id] ??= []), edit, changed }),
            buildRulesBlock({ def: d, type, edit, changed }),
          ]),
    );
  };

  const paintTabs = (): void => {
    const pairs: Array<[Tab, string]> = [
      ["table", to("TabTable")],
      ["kinds", to("TabKinds")],
      ["parts", to("TabParts")],
    ];
    tabBar.replaceChildren(
      ...pairs.map(([key, label]) => {
        const b = createButton({ label, variant: key === tab ? "filled" : "ghost", size: "sm" });
        b.setAttribute("data-sod-tab", key);
        b.addEventListener("click", () => ((tab = key), paint()));
        return b;
      }),
    );
    const edit = canEdit();
    if (tab === "table")
      body.replaceChildren(buildTable({ def: shown(), edit, changed, issues: allProblems() }));
    else if (tab === "parts") body.replaceChildren(buildParts({ def: shown(), edit, changed }));
    else body.replaceChildren(panes);
  };

  const paintFoot = (): void => {
    banner.replaceChildren(
      ...(past
        ? [
            el("span", { text: to("PastView", String(past.판)) }),
            smallButton(to("PastBack"), () => ((past = null), paint(), paintHistory())),
          ]
        : [
            el("span", { text: to("Version", String(base.판)) }),
            ...(opt.isAdmin ? [] : [createTag(to("ReadOnly"), "neutral")]),
          ]),
    );
    banner.classList.toggle("is-past", !!past);
    const list = allProblems();
    issues.replaceChildren(...list.map((t) => el("p", { className: "m02-sod__bad", text: t })));
    save.disabled = !opt.isAdmin || !!past || !dirty || list.length > 0;
  };

  const paint = (): void => {
    paintKinds();
    paintDetail();
    paintTabs();
    paintFoot();
  };

  const reload = async (): Promise<void> => {
    try {
      base = await fetchStructureDef();
      work = clone(base);
      dirty = false;
      sync();
    } catch (again) {
      showToast(to("Load_Failed", why(again)), "error");
    }
  };

  const save = createButton({ label: to("Save"), variant: "filled" });
  save.setAttribute("data-sod-save", "");
  save.addEventListener("click", async () => {
    if (allProblems().length) return;
    save.disabled = true; // 연달아 눌러도 한 번만
    try {
      base = await saveStructureDef(base.판, tidy(work));
      work = clone(base);
      dirty = false;
      versions = null;
      sync();
      showToast(to("SavedVersion", String(base.판)), "success");
    } catch (error) {
      if (error instanceof StaleError) {
        showToast(to("Stale"), "error");
        await reload();
      } else showToast(to("Failed", why(error)), "error");
    } finally {
      paint();
      paintHistory();
    }
  });

  /** 지난 판 목록 — 펼칠 때 받음 · 누르면 그 판을 읽기만으로 */
  const paintHistory = (): void => {
    if (!versions) return historyBox.replaceChildren();
    historyBox.replaceChildren(
      ...(versions.length
        ? versions.map((v) => {
            const b = createButton({
              label: to("PastItem", `${v.판} · ${v.저장일}`),
              variant: past?.판 === v.판 ? "filled" : "ghost",
              size: "sm",
            });
            b.setAttribute("data-sod-past", String(v.판));
            b.addEventListener("click", async () => {
              try {
                past = await fetchStructureDefAt(v.판);
              } catch (error) {
                return showToast(to("Load_Failed", why(error)), "error");
              }
              paint();
              paintHistory();
            });
            return b;
          })
        : [el("p", { className: "m02-side__empty", text: to("PastNone") })]),
    );
  };
  const history = createButton({ label: to("PastList"), variant: "ghost" });
  history.setAttribute("data-sod-history-toggle", "");
  history.addEventListener("click", async () => {
    if (versions) {
      versions = null;
      return paintHistory();
    }
    try {
      versions = (await fetchStructureDefHistory()).sort((a, b) => b.판 - a.판);
    } catch (error) {
      return showToast(to("Load_Failed", why(error)), "error");
    }
    paintHistory();
  });

  const node = el("div", {
    className: "m02-opts m02-sod",
    children: [
      el("p", { className: "m02-side__empty", text: to("DefNote") }),
      banner,
      tabBar,
      body,
      issues,
      el("div", {
        className: "m02-side__row",
        children: [...(opt.isAdmin ? [save] : []), history],
      }),
      historyBox,
    ],
  });
  const setDirty = opt.show(to("Screen"), node);
  const sync = (): void => setDirty(dirty);
  paint();
}