Aislo/M01_MasterData/M01_MasterData_UI_Page.ts

/* =============================================================================
 * M01_MasterData_UI_Page.ts
 * 마스터 요소 화면 — 좌측 도킹 패널(컨테이너 여덟: 인력·재료·기계·소요량·계수·환율·요율·일위대가 로직)
 * / 우측 요소 표 · 표 목록 · 로직 편집
 *
 * 시스템 관리자만. 고친 것은 초안(sessionStorage)에 쌓이고 [저장] 한 번에 서버로 —
 * 자동저장 없음.
 * ========================================================================== */

import "@ui/ui_template_workflow_layout.css";
import {
  createButton,
  createInputField,
  el,
  showConfirmDialog,
  showToast,
} from "@ui/ui_template_elements";
import { t as L } from "@ui/ui_template_locale";
import { createWorkflowOverlays } from "@ui/ui_template_overlay";
import { ROUTES } from "@config/config_frontend";
import { navigateTo } from "../A00_Common/router";
import { fetchSessionUser } from "../A06_Login/A06_Login_Api_Fetch";
import { saveFiles } from "./M01_MasterData_Api_Fetch";
import { discard, isStale, onDraftChange, payload, totalCount } from "./M01_MasterData_Draft";
import { renderRows } from "./M01_MasterData_UI_Rows";
import { buildSide, fileLabel, type Pick } from "./M01_MasterData_UI_Side";
import { renderTables } from "./M01_MasterData_UI_Tables";
import "./M01_MasterData_UI_Style.css";

const TABLE_GROUPS = ["소요량", "계수"];

export async function renderM01MasterData(root: HTMLElement): Promise<void> {
  const user = await fetchSessionUser().catch(() => null);
  if (user?.role !== "SYSTEM_ADMIN") {
    showToast(L("M01_AdminOnly"), "error");
    navigateTo(ROUTES.B01_ACCOUNT);
    return;
  }
  root.innerHTML = "";
  root.append(buildPage());
}

function buildPage(): HTMLElement {
  let current: Pick | null = null;
  let query = "";
  let dispose = (): void => {};
  let logicMounted = false;

  /* --- 우측: 머리(제목·찾기·저장) + 알림 + 본문 --- */
  const title = el("h2", { className: "m01-master__title", text: L("M01_PickFile") });
  const searchField = createInputField({ type: "search", placeholder: L("M01_Search") });
  const search = searchField.input;
  const summary = el("span", { className: "m01-master__summary" });
  const save = createButton({ label: L("M01_Save"), variant: "filled" });
  const drop = createButton({ label: L("M01_Discard"), variant: "ghost" });
  const notice = el("div", { className: "m01-master__notice", attrs: { hidden: "" } });
  const body = el("div", { className: "m01-master__body" });
  const head = el("div", {
    className: "m01-master__head",
    children: [title, searchField.root, summary, drop, save],
  });
  const logicHost = el("div", { className: "m01-master__logic", attrs: { hidden: "" } });
  const elementView = el("div", {
    className: "m01-master__elements",
    children: [head, notice, body],
  });

  const showNotice = (nodes: (HTMLElement | string)[]): void => {
    notice.replaceChildren(...nodes);
    notice.hidden = nodes.length === 0;
  };
  const refreshBar = (): void => {
    const n = totalCount();
    summary.textContent = n ? L("M01_Changed").replace("{value}", String(n)) : "";
    save.disabled = drop.disabled = n === 0;
  };
  onDraftChange(refreshBar);
  refreshBar();

  const showMode = (logic: boolean): void => {
    logicHost.hidden = !logic;
    elementView.hidden = logic;
  };

  const openFile = (pick: Pick): void => {
    dispose();
    showMode(false);
    current = pick;
    const groupTitle = pick.group === pick.label ? [pick.group] : [pick.group, pick.label];
    title.textContent = groupTitle.join(" · ");
    const view = TABLE_GROUPS.includes(pick.group) ? renderTables : renderRows;
    dispose = view(body, pick, query);
    showNotice(isStale(pick.file.file, pick.file.version) ? [L("M01_FileStale")] : []);
  };

  let searchTimer: number | undefined;
  search.addEventListener("input", () => {
    window.clearTimeout(searchTimer);
    searchTimer = window.setTimeout(() => {
      query = search.value.trim();
      if (current) openFile(current);
    }, 300);
  });

  drop.addEventListener("click", async () => {
    if (!(await showConfirmDialog(L("M01_DiscardConfirm")))) return;
    discard();
    showNotice([]);
  });

  /** 저장·되받기 뒤 — 지금 열린 그룹의 새 판본으로 다시 그림 */
  const reloadFiles = async (): Promise<void> => {
    if (!current) return;
    const pick = current;
    try {
      const again = (await side.refresh(pick.group)).find((f) => f.file === pick.file.file);
      if (again) openFile({ ...pick, file: again });
    } catch (error) {
      showToast(error instanceof Error ? error.message : L("M01_LoadFailed"), "error");
    }
  };

  save.addEventListener("click", async () => {
    save.disabled = true;
    try {
      const result = await saveFiles(payload());
      if (result.status === 200 && "files" in result) {
        discard(result.files.map((f) => f.file));
        showNotice([]);
        showToast(L("M01_Saved"), "success");
        await reloadFiles();
      } else if (result.status === 409 && "stale" in result) {
        showNotice(staleNotice(result.stale));
      } else if (result.status === 422 && "errors" in result) {
        showNotice([
          el("strong", { text: L("M01_CheckErrors") }),
          ...result.errors.map((e) => el("p", { text: e })),
        ]);
      } else if ("detail" in result) {
        showNotice([L("M01_SaveFailed").replace("{value}", result.detail)]);
      }
    } catch (error) {
      showNotice([
        L("M01_SaveFailed").replace("{value}", error instanceof Error ? error.message : ""),
      ]);
    } finally {
      refreshBar();
    }
  });

  const staleNotice = (stale: string[]): (HTMLElement | string)[] => {
    const again = createButton({ label: L("M01_StaleReload"), variant: "ghost" });
    again.addEventListener("click", async () => {
      discard(stale);
      showNotice([]);
      await reloadFiles();
    });
    return [L("M01_Stale").replace("{value}", stale.map(fileLabel).join(", ")), again];
  };

  /* --- 좌측: 컨테이너 여덟 --- */
  const side = buildSide(openFile, () => {
    dispose();
    dispose = (): void => {};
    current = null;
    showMode(true);
    if (logicMounted) return;
    logicMounted = true;
    void import("./M01_MasterData_UI_Logic_Page").then((m) => m.mountM01Logic(logicHost, side));
  });

  const layout = el("div", { className: "ui-workflow-layout m01-master" });
  const main = el("main", {
    className: "ui-workflow-layout__main",
    children: [el("div", { className: "m01-master__panel", children: [elementView, logicHost] })],
  });
  const overlays = createWorkflowOverlays({
    title: L("M01_Title"),
    optionsContent: el("div", { className: "m01-master__side", children: [side.root] }),
    showProjectName: false,
    onOptionsOpenChange: (isOpen) => layout.classList.toggle("is-options-open", isOpen),
  });
  layout.append(
    el("div", { className: "ui-workflow-layout__body", children: [main] }),
    overlays.root,
  );
  return layout;
}