Aislo/A00_Common/line_stack_edit.ts

/* =============================================================================
 * line_stack_edit.ts
 * 줄 쌓기 왼쪽 편집(PLAN 804-2 · 요구 670~677) — 항목(제목 · 가나다 · [+ 줄] · 지움) 안 줄 카드(위 · 아래 · 지움)
 *   줄 = 인력 · 재료 · 기계 · 다른 단가산출 · 율 · 식(금액 줄 — 이름 · 단위 · 비목 · 수량 식 · 단가 고르기 또는 식)
 *       · 공식 묶음(`line_stack_rows.ts`) · 글 줄
 *   고침 = 부른 쪽 `change(fn)` — fn 이 문서 · 차림을 고치면 부른 쪽이 `docOf` 로 굳히고 미리 셈 · 다시 그림(입력은 change 때)
 *   자원 고르기(804-3) = 찾아 넣기 창(`line_stack_pick.ts` — M02 [항목 추가] 창 그대로) · [+ 줄] 인력 · 재료 · 기계 · 다른 단가산출 =
 *     고르면 줄이 생김(닫으면 안 생김) · 있는 줄 = [찾아 바꾸기]
 * ========================================================================== */

import { createButton } from "@ui/ui_template_button";
import { createCheckbox } from "@ui/ui_template_checkbox";
import { el } from "@ui/ui_template_elements";
import { createInputField, createSelectField } from "@ui/ui_template_input";
import { varId, type FormulaDoc, type MoneyLine } from "../common_util/common_util_formula_doc";
import type { DocAnswer } from "../common_util/common_util_formula_doc_calc";
import type { DocTable } from "../common_util/common_util_formula_doc_table";
import {
  dropSyms,
  freshId,
  kindOf,
  newVar,
  ownedOf,
  type MoneyKind,
  type StackDoc,
  type StackItem,
} from "../common_util/common_util_line_stack";
import { addPicked, repick } from "../common_util/common_util_line_stack_pick";
import { openStackPick } from "./line_stack_pick";
import { buildBlock, insertTpl, type Tpl } from "./line_stack_rows";
import { lt, type LsKey } from "./line_stack_text";

export interface EditHooks {
  doc: StackDoc;
  answer: DocAnswer;
  items: StackItem[];
  change: (fn: (d: StackDoc, items: StackItem[]) => void) => void;
  /** 품셈 표 하나(표 고르기 창) */
  table: (key: string) => Promise<DocTable | null>;
  subDoc: (key: string) => FormulaDoc | null;
  name: (key: string) => string;
  /** 공식 묶음 펼친 자리(`항목.줄`) — 화면 상태만 */
  open: Set<string>;
  templates: () => Tpl[];
  /** 줄 · 항목 누름 — 오른쪽 짝 강조(679) */
  pair: (loc: string) => void;
  saveTpl: (tpl: Tpl) => void;
}

const field = (
  label: string,
  value: unknown,
  set: (t: string) => void,
  size: "s" | "m" | "l" = "m",
): HTMLElement => {
  const f = createInputField({
    label,
    value: value === undefined || value === null ? "" : String(value),
    compact: true,
    size: 24,
  });
  f.root.classList.add(`lstk-f-${size}`);
  f.input.addEventListener("change", () => set(f.input.value));
  return f.root;
};
const btn = (label: string, onClick: () => void, variant: "ghost" | "danger-ghost" = "ghost") =>
  createButton({ label, variant, size: 24, onClick });

const KIND_KEY: Record<MoneyKind, LsKey> = {
  인력: "K_인력",
  재료: "K_재료",
  기계: "K_기계",
  단가산출: "K_단가산출",
  율: "K_율",
};

/** 금액 줄 몸 */
function moneyBody(h: EditHooks, i: number): HTMLElement[] {
  const d = h.doc;
  const line = (d.금액 ?? [])[i];
  const kind = kindOf(d, i, h.subDoc);
  const own = ownedOf(d).get(i);
  const v = own ? d.변수?.find((x) => varId(x) === own) : undefined;
  const put = (fn: (l: MoneyLine & { 규격?: string }) => void): void =>
    h.change((doc) => fn(doc.금액![i]));
  const head = el("div", {
    className: "lstk-row",
    children: [
      field(lt("Name"), line.이름, (t) => put((l) => (l.이름 = t)), "l"),
      field(lt("Unit"), line.단위, (t) => put((l) => (l.단위 = t)), "s"),
      ...(line.비목 === "묶음"
        ? []
        : [
            createSelectField({
              label: lt("Cost"),
              options: ["노무비", "재료비", "경비"].map((x) => ({ value: x, text: x })),
              value: line.비목 ?? "노무비",
              compact: true,
              size: 24,
              onChange: (x) => put((l) => (l.비목 = x)),
            }).root,
          ]),
    ],
  });
  const qty = field(
    lt("Qty"),
    line.수량 ?? "",
    (t) => put((l) => (t.trim() ? (l.수량 = t.trim()) : delete l.수량)),
    "l",
  );
  const price: HTMLElement[] = [];
  if (own && v) {
    const link = v.연결 ?? {};
    const mat = link.재료 as Record<string, unknown> | undefined;
    const spec = [line.이름, (line as { 규격?: string }).규격].filter(Boolean).join(" ");
    const label = link.키
      ? kind === "기계" && spec
        ? spec // 기계 = 기종 이름 · 규격(679 — 코드 번호 아님)
        : link.갈래 === "단가산출"
          ? (h.subDoc(link.키)?.이름 ?? h.name(link.키))
          : h.name(link.키)
      : mat
        ? String(mat.검색어 ?? mat.이름 ?? mat.상세구분 ?? "")
        : "";
    price.push(
      el("span", { className: "lstk-link", text: label || "—" }),
      btn(lt("Repick"), () =>
        openStackPick(kind, (p) => h.change((doc) => repick(doc, i, own, kind, p))),
      ),
    );
  } else price.push(field(lt("Price"), line.단가, (t) => put((l) => (l.단가 = t.trim())), "l"));
  const why = (h.answer.줄?.[i] as { 까닭?: string } | undefined)?.까닭;
  return [
    el("span", { className: "lstk-kind", text: lt(KIND_KEY[kind]) }),
    head,
    el("div", { className: "lstk-row", children: [qty, el("span", { text: "×" }), ...price] }),
    ...(why ? [el("div", { className: "lstk-miss", text: why })] : []),
  ];
}

/** [+ 줄] 고르개 값 → 새 줄 */
function addLine(h: EditHooks, at: number, kind: string): void {
  if (["인력", "재료", "기계", "단가산출"].includes(kind))
    return openStackPick(kind as MoneyKind, (p) =>
      h.change((d, items) => void addPicked(d, items[at], kind as MoneyKind, p)),
    );
  if (kind.startsWith("tpl:")) {
    const t = h.templates().find((x) => x.id === kind.slice(4));
    if (t) h.change((d, items) => items[at].줄.push(insertTpl(d, t)));
    return;
  }
  h.change((d, items) => {
    const it = items[at];
    const n = (d.금액 ??= []).length;
    const money = (line: MoneyLine): void => {
      d.금액!.push(line);
      it.줄.push({ 꼴: "금액", i: n });
    };
    if (kind === "율")
      money({ 이름: "공구손료 및 경장비", 단위: "식", 비목: "경비", 단가: "노무비 × 3 %" });
    else if (kind === "공식") {
      const id = freshId(d, "x");
      (d.변수 ??= []).push(newVar(id, { 갈래: "숫자", 값: 0 }));
      it.줄.push({ 꼴: "공식", 기호: [id] });
      h.open.add(`${at}.${it.줄.length - 1}`);
    } else if (kind === "틀") {
      const id = freshId(d, "Q", "틀");
      (d.변수 ??= []).push(newVar(id, { 갈래: "단가산출", 키: "", 입력: {} }));
      it.줄.push({ 꼴: "공식", 기호: [id] });
    } else if (kind === "글") it.줄.push({ 꼴: "글", 글: "" });
  });
}

/** 줄 옮김 — 항목 끝을 넘으면 옆 항목으로 */
function move(items: StackItem[], i: number, j: number, by: -1 | 1): void {
  const [line] = items[i].줄.splice(j, 1);
  const to = j + by;
  if (to < 0 && i > 0) items[i - 1].줄.push(line);
  else if (to > items[i].줄.length && i < items.length - 1) items[i + 1].줄.unshift(line);
  else items[i].줄.splice(Math.max(0, Math.min(to, items[i].줄.length)), 0, line);
}

/** 줄 지움 — 금액 줄은 그 줄이 가진 연결 기호까지 · 공식 묶음은 기호까지 */
function dropLine(d: StackDoc, items: StackItem[], i: number, j: number): void {
  const line = items[i].줄[j];
  if (line.꼴 === "금액") {
    const own = ownedOf(d).get(line.i);
    if (own) dropSyms(d, [own]);
  } else if (line.꼴 === "공식") dropSyms(d, line.기호);
  items[i].줄.splice(j, 1);
}

export function buildEdit(h: EditHooks): HTMLElement {
  const add = (at: number): HTMLElement => {
    const pick = createSelectField({
      options: [
        { value: "", text: `${lt("Add_Line")} ▾` },
        ...(["인력", "재료", "기계", "단가산출", "율"] as MoneyKind[]).map((k) => ({
          value: k,
          text: lt(KIND_KEY[k]),
        })),
        { value: "공식", text: lt("K_새공식") },
        { value: "틀", text: lt("K_틀") },
        ...h
          .templates()
          .map((t) => ({ value: `tpl:${t.id}`, text: `${lt("K_공식")} — ${t.name}` })),
        { value: "글", text: lt("K_글") },
      ],
      value: "",
      compact: true,
      size: 24,
      ariaLabel: lt("Add_Line"),
      onChange: (x) => {
        pick.select.value = ""; // 창을 닫아도 [+ 줄 ▾] 로 돌아옴
        if (x) addLine(h, at, x);
      },
    });
    return pick.root;
  };
  const items = h.items.map((it, i) => {
    const head = el("div", {
      className: "lstk-ihead",
      children: [
        field(lt("Title"), it.제목, (t) => h.change((_, items) => (items[i].제목 = t.trim())), "l"),
        createCheckbox(lt("Gana"), {
          checked: !!it.가나다,
          size: 24,
          onChange: (c) =>
            h.change((_, items) => (c ? (items[i].가나다 = true) : delete items[i].가나다)),
        }).root,
        add(i),
        btn(
          lt("Del_Item"),
          () =>
            h.change((d, items) => {
              for (let j = items[i].줄.length - 1; j >= 0; j--) dropLine(d, items, i, j);
              items.splice(i, 1);
            }),
          "danger-ghost",
        ),
      ],
    });
    const lines = it.줄.map((line, j) => {
      const tools = el("div", {
        className: "lstk-ltools",
        children: [
          btn("↑", () => h.change((_, items) => move(items, i, j, -1))),
          btn("↓", () => h.change((_, items) => move(items, i, j, 1))),
          btn(lt("Del"), () => h.change((d, items) => dropLine(d, items, i, j)), "danger-ghost"),
        ],
      });
      const body =
        line.꼴 === "금액"
          ? moneyBody(h, line.i)
          : line.꼴 === "글"
            ? [
                field(
                  lt("K_글"),
                  line.글,
                  (t) => h.change((_, items) => ((items[i].줄[j] as { 글: string }).글 = t)),
                  "l",
                ),
              ]
            : buildBlock(h, i, j, line);
      const card = el("div", { className: `lstk-line k-${line.꼴}`, children: [tools, ...body] });
      card.dataset.loc = `${i}.${j}`;
      card.addEventListener("pointerdown", () => h.pair(`${i}.${j}`));
      return card;
    });
    const box = el("div", {
      className: "lstk-item",
      attrs: { "data-loc": String(i) },
      children: [
        head,
        ...(lines.length
          ? lines
          : [el("div", { className: "lstk-empty", text: lt("Empty_Item") })]),
      ],
    });
    head.addEventListener("pointerdown", () => h.pair(String(i)));
    return box;
  });
  return el("div", {
    className: "lstk-edit",
    children: [
      ...items,
      btn(lt("Add_Item"), () => h.change((_, items) => items.push({ 제목: "", 줄: [] }))),
    ],
  });
}