/* =============================================================================
 * M02_MasterTemplete_UI_Page.ts
 * 마스터 템플릿 · 구조물 관리 화면 — 좌측 도킹 패널(양식 목록) / 우측 편집 칸(표·도면 부품) ·
 * 「구조물 조합」을 열면 편집 칸 왼쪽에 항목 나무(주 · 고치는 자리) · 오른쪽 참조표(PLAN 26-7c)
 *
 * 층 = 주소 인자 `?layer=personal|company`(없으면 시스템) — 같은 화면 한 벌.
 * 화면은 로그인만 확인 — 고치기는 층별 권한일 때만 켬(서버도 막음 · `M02_MasterTemplete_Layer.ts`).
 * ========================================================================== */

import "@ui/ui_template_workflow_layout.css";
import { el } from "@ui/ui_template_elements";
import { t as L } from "@ui/ui_template_locale";
import { createWorkflowOverlays } from "@ui/ui_template_overlay";
import { fetchSessionUser } from "../A06_Login/A06_Login_Api_Fetch";
import { setActiveLayer } from "./M02_MasterTemplete_Api_Fetch";
import {
  accessFor,
  buildNeedCompany,
  buildReadOnlyBar,
  layerFromHash,
  titleOf,
} from "./M02_MasterTemplete_Layer";
import { STRUCTURE_TABLE } from "./M02_MasterTemplete_Structure";
import { createTreePanel } from "./M02_MasterTemplete_TreePanel";
import { canEdit, createMain, type Selection } from "./M02_MasterTemplete_UI_Main";
import { buildSide } from "./M02_MasterTemplete_UI_Side";
import "./M02_MasterTemplete_UI_Style.css";

export async function renderM02MasterTemplate(root: HTMLElement): Promise<void> {
  const user = await fetchSessionUser().catch(() => null);
  const layer = layerFromHash();
  setActiveLayer(layer);
  const access = accessFor(layer, user);
  if (access.needCompany) {
    root.replaceChildren(buildNeedCompany());
    return;
  }
  const isAdmin = access.canWrite; // 이 층을 고칠 수 있나(하위 부품의 「관리자」 = 같은 뜻)
  // 회사용을 읽기만 볼 때 — 안내 + [개인용으로 복사]
  const readOnlyBar = layer === "company" && !isAdmin ? buildReadOnlyBar(user) : null;
  // 항목 나무 — 고르기 모달과 같은 폴더 나무(세 층 공용) · 「구조물 조합」 편집 칸 왼쪽
  const tree = createTreePanel({
    layer,
    canEdit: canEdit(layer, isAdmin),
    onPick: (item) => void main.openTable(layer, item.열),
    settle: () => main.settle(),
    onChanged: (colId) => main.openTable(layer, colId, true),
  });
  const aside = el("aside", {
    className: "m02-shell__tree",
    children: [el("h3", { className: "m02-shell__title", text: L("M02_TreeTitle") }), tree.root],
  });
  const main = createMain(
    isAdmin,
    () => void Promise.all([side.refresh(), tree.refresh()]),
    () => side.paint(),
    {
      top: readOnlyBar?.root,
      aside,
      onColumn: (column) => {
        readOnlyBar?.setColumn(column);
        tree.select(column);
      },
    },
  );
  // 첫 화면 · 닫은 뒤(양식 지움 · 자재 조합 상세 닫음) = 구조물집계표 — 빈 화면 없음
  const home: Selection = {
    layer,
    projectId: null,
    kind: "table",
    name: STRUCTURE_TABLE,
  };
  const side = buildSide({
    layer,
    isAdmin,
    onOpen: (sel) => void main.open(sel ?? home),
    getOpen: main.current,
    confirmLeave: main.confirmLeave,
    showView: main.showView,
  });

  const layout = el("div", { className: "ui-workflow-layout m02-master" });
  const overlays = createWorkflowOverlays({
    title: titleOf(layer),
    optionsContent: el("div", { className: "m02-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: [el("main", { className: "ui-workflow-layout__main", children: [main.root] })],
    }),
    overlays.root,
  );
  root.innerHTML = "";
  root.append(layout);
  void main.open(home);
  void tree.refresh();
}