Aislo/M01_MasterData/M01_MasterData_UI_LogicLab_Side.ts

/* =============================================================================
 * M01_MasterData_UI_LogicLab_Side.ts
 * 로직 상세 — 왼쪽 지금 내용 · 오른쪽 접는 패널 둘 「흐름도」(M02_DF_Panel) · 「원문」(품셈 본문 절)
 * 공용 오른쪽 접는 패널(ui_template_side_panels) — 하나만 열림 · 모두 접힘 됨 · 폭 공유 · 접힌 패널 = 세로 글 띠
 * 열린 패널 · 폭은 취향 키(`m01-logic-side`) · 원문은 출처 글로 서버가 찾음(`GET /m01/logic/source`)
 * ========================================================================== */

import { currentLanguageIndex } from "@ui/ui_template_locale";
import { createSidePanels } from "@ui/ui_template_side_panels";
import { el } from "@ui/ui_template_elements";
import { API_BASE_URL } from "@config/config_frontend";
import type { SplitHandle } from "./M01_MasterData_UI_LogicLab_Flow";
import "../M02_MasterTemplete/DataFlow/M02_DF_Panel.css";
import "./M01_MasterData_UI_LogicLab_Side.css";

const TEXT = {
  Flow: ["흐름도", "Flow"],
  Source: ["원문", "Source"],
  Loading: ["원문 찾는 중", "Looking up the source"],
  None: ["원문 연결 없음", "No linked source"],
  From: ["출처", "Source"],
  NoSource: ["출처 없음", "No source"],
  Near: ["{v} 절이 없어 위 절", "No {v} section — showing the parent"],
} as const;

const ts = (key: keyof typeof TEXT, v = ""): string =>
  TEXT[key][currentLanguageIndex === 1 ? 1 : 0].replace("{v}", v);

export type PanelPick = "flow" | "source" | "none";

interface Block {
  h?: number;
  text?: string;
  p?: string;
  table?: string[][];
}
interface Found {
  number: string;
  matched: string;
  file: string;
  blocks: Block[];
}

export interface LogicSide {
  /** [왼쪽 지금 내용, 오른쪽 패널] 칸 */
  root: HTMLElement;
  /** 흐름도 패널에 넘길 칸 — right = 흐름도 자리 · 폭은 오른쪽 패널 몫(setRight 안 씀) */
  flowSplit: SplitHandle;
  flowFolded(): boolean;
  pick(next: PanelPick): void;
  /** 흐름도 패널이 뜨면 접기 함수 · 내리면 null */
  bindFlow(fold: ((on: boolean) => void) | null): void;
  /** 연 로직의 출처 글 — 원문 패널이 열려 있으면 찾음 */
  showSource(src: string): void;
}

function blockNode(b: Block): HTMLElement {
  if (b.table)
    return el("div", {
      className: "m01-logic__scroll",
      children: [
        el("table", {
          className: "m01-logic__grid m01lab-src__table",
          children: [
            el("tbody", {
              children: b.table.map((r) =>
                el("tr", { children: r.map((c) => el("td", { text: c })) }),
              ),
            }),
          ],
        }),
      ],
    });
  if (b.h) return el("h4", { className: "m01lab-src__head", text: b.text ?? "" });
  return el("p", { className: "m01lab-src__p", text: b.p ?? "" });
}

export function buildLogicSide(left: HTMLElement): LogicSide {
  const flowSlot = el("div", { className: "m01lab-side__slot" });
  const body = el("div", { className: "m01lab-src__body" });
  const title = el("strong", { className: "m02-dfp__title" });
  const sp = createSidePanels({
    prefKey: "m01-logic-side",
    defaultWidth: 520,
    minWidth: 320,
    panels: [
      { id: "flow", title: ts("Flow"), body: flowSlot },
      {
        id: "source",
        title: ts("Source"),
        body: el("div", { className: "m01lab-src", children: [title, body] }),
      },
    ],
    onChange: () => {
      flowFold?.(sp.current() !== "flow"); // 다시 펴면 흐름도 판을 폭에 맞춤
      load();
    },
  });
  const root = el("div", {
    className: "m01lab-side ui-side-panels-row",
    children: [left, sp.root],
  });

  let flowFold: ((on: boolean) => void) | null = null;
  let want = "";
  let shown: string | null = null;

  const load = (): void => {
    if (sp.current() !== "source" || shown === want) return;
    const src = (shown = want);
    title.textContent = src || ts("NoSource");
    body.replaceChildren(el("p", { className: "m01-logic__muted", text: ts("Loading") }));
    const none = (): void =>
      body.replaceChildren(
        el("p", { className: "m01lab-src__none", text: ts("None") }),
        el("p", { className: "m01-logic__muted", text: `${ts("From")} · ${src || "—"}` }),
      );
    if (!src.trim()) return none();
    void fetch(`${API_BASE_URL}/m01/logic/source?${new URLSearchParams({ src })}`, {
      credentials: "include",
    })
      .then((r) => (r.ok ? (r.json() as Promise<{ found: Found[] }>) : { found: [] }))
      .catch(() => ({ found: [] as Found[] }))
      .then(({ found }) => {
        if (shown !== src) return;
        if (!found.length) return none();
        body.replaceChildren(
          ...found.flatMap((f) => [
            el("p", {
              className: "m01-logic__muted m01lab-src__file",
              text: f.matched === f.number ? f.file : `${f.file} · ${ts("Near", f.number)}`,
            }),
            ...f.blocks.map(blockNode),
          ]),
        );
      });
  };

  return {
    root,
    flowSplit: { right: flowSlot, setRight: () => undefined },
    flowFolded: () => sp.current() !== "flow",
    pick: (next) => sp.open(next === "none" ? null : next),
    bindFlow: (f) => {
      flowFold = f;
    },
    showSource: (src) => {
      want = src;
      load();
    },
  };
}