Aislo/M01_MasterData/M01_MasterData_UI_Logic_List.ts

/* =============================================================================
 * M01_MasterData_UI_Logic_List.ts
 * 왼쪽 로직 목록 — 원문 · 장 · 이름 찾기 · 막힘만 · 막힘(⛔)·고침(●) 표시
 * 거르기는 화면에서(목록은 한 번 받음 · 391 줄 남짓)
 * ========================================================================== */

import { createInputField, el } from "@ui/ui_template_elements";
import { renderTree, type MakeRow, type TreeNode } from "./M01_MasterData_UI_Tree";
import type { LogicSummary } from "./M01_MasterData_UI_Logic_Api";
import { tx } from "./M01_MasterData_UI_Logic_Text";

export type ListMark = "edited" | "new" | "deleted";

export interface ListItem {
  id: string;
  book: string;
  chapter: string;
  key: string;
  number: string;
  name: string;
  blocked: boolean;
  reasons: string[];
}

export interface ListHandle {
  root: HTMLElement;
  setItems: (items: LogicSummary[]) => void;
  /** 저장 안 한 새 로직도 목록 맨 위에 */
  setMarks: (marks: Map<string, ListMark>, extra: ListItem[]) => void;
  setActive: (id: string | null) => void;
}

export const logicId = (book: string, key: string): string => `${book}\n${key}`;

export function buildList(onOpen: (item: ListItem) => void): ListHandle {
  let items: ListItem[] = [];
  let extra: ListItem[] = [];
  let marks = new Map<string, ListMark>();
  let active: string | null = null;
  /** 트리에서 고른 범위 — 원문 · 부문 · 장(비면 전체) */
  const pick = { book: "", division: "", chapter: "" };
  const tree = el("div", { className: "m01-logic__tree" });
  const searchField = createInputField({ type: "search", placeholder: tx("List_Search") });
  const search = searchField.input;
  const blockedOnly = el("input", { attrs: { type: "checkbox" } });
  const count = el("span", { className: "m01-logic__muted" });
  const list = el("ul", { className: "m01-logic__list" });

  const divisionOf = (chapter: string): string => /^(\S+) \d+장/.exec(chapter)?.[1] ?? "";
  const inPick = (x: ListItem): boolean =>
    (!pick.book || x.book === pick.book) &&
    (!pick.division || divisionOf(x.chapter) === pick.division) &&
    (!pick.chapter || x.chapter === pick.chapter);

  const make: MakeRow = (node, caret, depth, onClick) => {
    const button = el("button", {
      className: `m01-side__item${node.id === pickId ? " is-active" : ""}`,
      attrs: { type: "button" },
      children: [
        el("span", {
          children: [
            el("span", { className: "m01-tree__caret", text: caret }),
            el("span", { text: node.label }),
          ],
        }),
        el("span", { className: "m01-side__muted", text: String(node.count ?? "") }),
      ],
    });
    button.style.paddingLeft = `calc(var(--spacing-8) + ${depth} * var(--spacing-16))`;
    button.addEventListener("click", () => {
      onClick();
      for (const b of tree.querySelectorAll(".is-active")) b.classList.remove("is-active");
      button.classList.add("is-active");
    });
    return button;
  };
  let pickId = "";
  /** 원문 › 부문 › 장 — 눌러 범위를 고름 */
  const drawTree = (): void => {
    const count = (f: (x: ListItem) => boolean): number => items.filter(f).length;
    const books = [...new Set(items.map((x) => x.book))];
    const set = (id: string, book: string, division: string, chapter: string): void => {
      pickId = id;
      Object.assign(pick, { book, division, chapter });
      draw();
    };
    const nodes: TreeNode[] = [
      {
        id: "all",
        label: tx("List_AllBooks"),
        count: items.length,
        open: true,
        run: () => set("all", "", "", ""),
        children: books.map((b): TreeNode => {
          const chapters = [...new Set(items.filter((x) => x.book === b).map((x) => x.chapter))];
          const leaf = (c: string, label: string): TreeNode => ({
            id: `${b}|${c}`,
            label,
            count: count((x) => x.book === b && x.chapter === c),
            run: () => set(`${b}|${c}`, b, "", c),
          });
          const divisions = [...new Set(chapters.map(divisionOf).filter(Boolean))];
          return {
            id: b,
            label: b,
            count: count((x) => x.book === b),
            run: () => set(b, b, "", ""),
            children: [
              ...chapters.filter((c) => !divisionOf(c)).map((c) => leaf(c, c)),
              ...divisions.map((d): TreeNode => ({
                id: `${b}|#${d}`,
                label: d,
                count: count((x) => x.book === b && divisionOf(x.chapter) === d),
                run: () => set(`${b}|#${d}`, b, d, ""),
                children: chapters
                  .filter((c) => divisionOf(c) === d)
                  .map((c) => leaf(c, c.slice(d.length + 1))),
              })),
            ],
          };
        }),
      },
    ];
    tree.replaceChildren(...renderTree(nodes, make));
  };

  const draw = (): void => {
    const q = search.value.trim().toLowerCase();
    const shown = [...extra, ...items].filter(
      (x) =>
        inPick(x) &&
        (!blockedOnly.checked || x.blocked) &&
        (!q || [x.key, x.number, x.name].some((v) => v.toLowerCase().includes(q))),
    );
    count.textContent = tx("List_Count", { n: shown.length });
    list.replaceChildren(...shown.slice(0, 500).map(line));
  };
  const line = (item: ListItem): HTMLElement => {
    const mark = marks.get(item.id);
    const badges: HTMLElement[] = [];
    if (item.blocked) {
      badges.push(
        el("span", {
          className: "m01-logic__badge m01-logic__badge--blocked",
          text: `⛔ ${tx("List_Blocked")}`,
          attrs: { title: item.reasons.join("\n") },
        }),
      );
    }
    if (mark) {
      const label = { edited: "List_Edited", new: "List_New", deleted: "List_Deleted" } as const;
      badges.push(el("span", { className: "m01-logic__badge", text: `● ${tx(label[mark])}` }));
    }
    const button = el("button", {
      className: `m01-logic__item${item.id === active ? " is-active" : ""}`,
      attrs: { type: "button", title: item.key },
      children: [
        el("span", {
          className: "m01-logic__muted",
          text: `${item.book} ${item.chapter} · ${item.number}`,
        }),
        el("span", { text: item.name || item.number || item.key }),
        el("span", { className: "m01-logic__badges", children: badges }),
      ],
    });
    button.addEventListener("click", () => onOpen(item));
    return el("li", { children: [button] });
  };

  search.addEventListener("input", draw);
  blockedOnly.addEventListener("change", draw);

  const root = el("aside", {
    className: "m01-logic__side",
    children: [
      el("div", {
        className: "m01-logic__filters",
        children: [
          searchField.root,
          el("label", {
            className: "m01-logic__check",
            children: [blockedOnly, el("span", { text: tx("List_BlockedOnly") })],
          }),
          count,
        ],
      }),
      list,
    ],
  });
  root.prepend(tree);
  return {
    root,
    setItems: (logics) => {
      items = logics.map((x) => ({
        id: logicId(x.book, x.키),
        book: x.book,
        chapter: x.chapter,
        key: x.키,
        number: x.원문번호,
        name: x.이름,
        blocked: x.blocked,
        reasons: x.reasons,
      }));
      drawTree();
      draw();
    },
    setMarks: (next, more) => {
      marks = next;
      extra = more;
      draw();
    },
    setActive: (id) => {
      active = id;
      draw();
    },
  };
}