/* =============================================================================
 * M02_SO_Def.ts
 * 구조물 정의 편집 화면(PLAN 48-2 · 메인 칸) — 왼쪽 구조물군 · 종류 목록(이름 바꿈 · 순서 · 안 씀) ·
 * 오른쪽 고른 종류(이름 · 안 씀 · 기준 측점 표시 · 옵션 · 배치 격자 · 그룹 · 규칙) ·
 * 아래 [저장](판 +1 · 시스템 관리자만) · 지난 판 목록(누르면 그 판을 읽기만으로 봄).
 * 다른 역할은 읽기만. 고칠 사본은 저장 전까지 서버에 안 감 · 정본 = `구조물정의.json`(48-1).
 * ========================================================================== */

import { createButton, createTag, el, showToast } from "@ui/ui_template_elements";
import { StaleError } from "../M02_MasterTemplete_Api_Fetch";
import {
  fetchStructureDef,
  fetchStructureDefAt,
  fetchStructureDefHistory,
  saveStructureDef,
  type DefVersion,
} from "./M02_SO_Api";
import { buildLayoutBlock } from "./M02_SO_Def_Layout";
import {
  baseShown,
  clone,
  problems,
  stepFamily,
  stepType,
  type StructDef,
} from "./M02_SO_Def_Model";
import { buildOptionsBlock } from "./M02_SO_Def_Options";
import { buildRulesBlock } from "./M02_SO_Def_Rules";
import { checkBox, textBox } from "./M02_SO_Def_Ui";
import { buildGroupBlock } from "./M02_SO_Groups";
import { to } from "./M02_SO_Text";

export interface DefScreenOptions {
  /** 시스템 관리자 — 아니면 읽기만 */
  isAdmin: boolean;
  /** 메인 칸에 화면을 띄움 — 고침 표시 손잡이를 돌려받음 */
  show: (label: string, node: HTMLElement) => (dirty: boolean) => void;
}

const why = (error: unknown): string => (error instanceof Error ? error.message : "");

/** 빈 묶음 걷어냄 — 그리기 중 만든 빈 그룹 목록 · 배치 · 종류 덧칸 */
function tidy(def: StructDef): StructDef {
  const out = clone(def);
  for (const part of [out.그룹, out.배치, out.종류, out.표시] as Record<string, unknown>[])
    for (const [k, v] of Object.entries(part))
      if (Array.isArray(v) ? !v.length : !Object.keys(v as object).length) delete part[k];
  return out;
}

/** 작은 단추 */
function smallButton(
  label: string,
  run: () => void,
  off = false,
  variant: "ghost" | "danger" = "ghost",
): HTMLButtonElement {
  const b = createButton({ label, variant, size: "sm" });
  b.disabled = off;
  b.addEventListener("click", run);
  return b;
}

/** 화면을 받아 띄움 — 못 받으면 알림만 · 띄웠으면 참 */
export async function openDefScreen(opt: DefScreenOptions): Promise<boolean> {
  let def: StructDef;
  try {
    def = await fetchStructureDef();
  } catch (error) {
    showToast(to("Load_Failed", why(error)), "error");
    return false;
  }
  drawDef(def, opt);
  return true;
}

function drawDef(first: StructDef, opt: DefScreenOptions): void {
  /** 지금 판(서버) · 고칠 사본 · 보는 지난 판(있으면 읽기만) */
  let base = first;
  let work = clone(first);
  let past: StructDef | null = null;
  let dirty = false;
  let current: string | null = null;
  const open = new Set<string>(); // 선택지를 펼친 옵션
  let versions: DefVersion[] | null = null;

  const shown = (): StructDef => past ?? work;
  const canEdit = (): boolean => opt.isAdmin && !past;
  const kindList = el("div", { className: "m02-opts__kinds", attrs: { "data-sod-kinds": "" } });
  const detail = el("div", { className: "m02-opts__list", attrs: { "data-sod-detail": "" } });
  const banner = el("div", { className: "m02-sod__banner", attrs: { "data-sod-banner": "" } });
  const issues = el("div", { className: "m02-sod__issues", attrs: { "data-sod-issues": "" } });
  const historyBox = el("div", {
    className: "m02-sod__history",
    attrs: { "data-sod-history": "" },
  });

  const changed = (): void => {
    dirty = true;
    sync();
    paint();
  };

  const paintKinds = (): void => {
    const d = shown();
    const edit = canEdit();
    const parts: HTMLElement[] = [];
    const families = Object.keys(d.구조물군);
    families.forEach((g, gi) => {
      parts.push(
        el("div", {
          className: "m02-sod__family",
          attrs: { "data-sod-family": g },
          children: [
            textBox(d.구조물군[g], (v) => (d.구조물군[g] = v), changed, {
              edit,
              attr: "data-sod-family-name",
            }),
            ...(edit
              ? [
                  smallButton(to("GroupUp"), () => stepFamily(d, g, -1) && changed(), gi === 0),
                  smallButton(
                    to("GroupDown"),
                    () => stepFamily(d, g, 1) && changed(),
                    gi === families.length - 1,
                  ),
                ]
              : []),
          ],
        }),
      );
      const kinds = d.types.filter((t) => t.group === g);
      kinds.forEach((t, ti) => {
        const off = t.enabled === false;
        const groups = d.그룹[t.type_id]?.length ?? 0;
        const b = el("button", {
          className: `m02-opts__kind${t.type_id === current ? " is-active" : ""}${off ? " is-off" : ""}`,
          attrs: { type: "button", "data-sod-kind": t.type_id },
          children: [
            el("span", { text: t.name }),
            ...(groups ? [createTag(to("GroupTag", String(groups)), "accent")] : []),
            ...(off ? [createTag(to("Off"), "neutral")] : []),
          ],
        });
        b.addEventListener("click", () => {
          current = t.type_id;
          paint();
        });
        parts.push(
          el("div", {
            className: "m02-sod__kindrow",
            children: [
              b,
              ...(edit
                ? [
                    smallButton(
                      to("GroupUp"),
                      () => stepType(d, t.type_id, -1) && changed(),
                      ti === 0,
                    ),
                    smallButton(
                      to("GroupDown"),
                      () => stepType(d, t.type_id, 1) && changed(),
                      ti === kinds.length - 1,
                    ),
                  ]
                : []),
            ],
          }),
        );
      });
    });
    kindList.replaceChildren(...parts);
  };

  const paintDetail = (): void => {
    const d = shown();
    const type = d.types.find((t) => t.type_id === current);
    if (!type) {
      detail.replaceChildren(el("p", { className: "m02-side__empty", text: to("Pick") }));
      return;
    }
    const edit = canEdit();
    const extra = (): NonNullable<StructDef["종류"][string]> => (d.종류[type.type_id] ??= {});
    detail.replaceChildren(
      el("div", {
        className: "m02-sod__kindhead",
        children: [
          textBox(type.name, (v) => (type.name = v), changed, {
            edit,
            attr: "data-sod-kind-name",
            cls: "m02-sod__name",
          }),
          el("small", { className: "m02-opts__key", text: type.type_id }),
          checkBox(to("Unused"), type.enabled === false, (v) => ((type.enabled = !v), changed()), {
            edit,
            attr: "data-sod-kind-off",
          }),
          checkBox(
            to("BaseStationShow"),
            baseShown(d, type.type_id),
            (v) => {
              if (v) delete extra().기준측점;
              else extra().기준측점 = false;
              changed();
            },
            { edit, attr: "data-sod-base" },
          ),
          ...(d.종류[type.type_id]?.동작 ?? []).map((a) => {
            const tag = createTag(a, "neutral");
            tag.title = d.동작[a] ?? "";
            return tag;
          }),
        ],
      }),
      buildOptionsBlock({ def: d, type, edit, open, changed }),
      buildLayoutBlock({ def: d, type, edit, changed }),
      buildGroupBlock({ list: (d.그룹[type.type_id] ??= []), edit, changed }),
      buildRulesBlock({ def: d, type, edit, changed }),
    );
  };

  const paintFoot = (): void => {
    banner.replaceChildren(
      ...(past
        ? [
            el("span", { text: to("PastView", String(past.판)) }),
            smallButton(to("PastBack"), () => ((past = null), paint(), paintHistory())),
          ]
        : [
            el("span", { text: to("Version", String(base.판)) }),
            ...(opt.isAdmin ? [] : [createTag(to("ReadOnly"), "neutral")]),
          ]),
    );
    banner.classList.toggle("is-past", !!past);
    const list = past ? [] : problems(work);
    issues.replaceChildren(...list.map((t) => el("p", { className: "m02-sod__bad", text: t })));
    save.disabled = !opt.isAdmin || !!past || !dirty || list.length > 0;
  };

  const paint = (): void => {
    paintKinds();
    paintDetail();
    paintFoot();
  };

  const reload = async (): Promise<void> => {
    try {
      base = await fetchStructureDef();
      work = clone(base);
      dirty = false;
      sync();
    } catch (again) {
      showToast(to("Load_Failed", why(again)), "error");
    }
  };

  const save = createButton({ label: to("Save"), variant: "filled" });
  save.setAttribute("data-sod-save", "");
  save.addEventListener("click", async () => {
    if (problems(work).length) return;
    save.disabled = true; // 연달아 눌러도 한 번만
    try {
      base = await saveStructureDef(base.판, tidy(work));
      work = clone(base);
      dirty = false;
      versions = null;
      sync();
      showToast(to("SavedVersion", String(base.판)), "success");
    } catch (error) {
      if (error instanceof StaleError) {
        showToast(to("Stale"), "error");
        await reload();
      } else showToast(to("Failed", why(error)), "error");
    } finally {
      paint();
      paintHistory();
    }
  });

  /** 지난 판 목록 — 펼칠 때 받음 · 누르면 그 판을 읽기만으로 */
  const paintHistory = (): void => {
    if (!versions) return historyBox.replaceChildren();
    historyBox.replaceChildren(
      ...(versions.length
        ? versions.map((v) => {
            const b = createButton({
              label: to("PastItem", `${v.판} · ${v.저장일}`),
              variant: past?.판 === v.판 ? "filled" : "ghost",
              size: "sm",
            });
            b.setAttribute("data-sod-past", String(v.판));
            b.addEventListener("click", async () => {
              try {
                past = await fetchStructureDefAt(v.판);
              } catch (error) {
                return showToast(to("Load_Failed", why(error)), "error");
              }
              paint();
              paintHistory();
            });
            return b;
          })
        : [el("p", { className: "m02-side__empty", text: to("PastNone") })]),
    );
  };
  const history = createButton({ label: to("PastList"), variant: "ghost" });
  history.setAttribute("data-sod-history-toggle", "");
  history.addEventListener("click", async () => {
    if (versions) {
      versions = null;
      return paintHistory();
    }
    try {
      versions = (await fetchStructureDefHistory()).sort((a, b) => b.판 - a.판);
    } catch (error) {
      return showToast(to("Load_Failed", why(error)), "error");
    }
    paintHistory();
  });

  const node = el("div", {
    className: "m02-opts m02-sod",
    children: [
      el("p", { className: "m02-side__empty", text: to("DefNote") }),
      banner,
      el("div", { className: "m02-opts__panes", children: [kindList, detail] }),
      issues,
      el("div", {
        className: "m02-side__row",
        children: [...(opt.isAdmin ? [save] : []), history],
      }),
      historyBox,
    ],
  });
  const setDirty = opt.show(to("Screen"), node);
  const sync = (): void => setDirty(dirty);
  paint();
}