Aislo/ui_template/ui_template_workflow_layout.ts

import "./ui_template_workflow_layout.css";
import { ROUTES } from "@config/config_frontend";
import { t } from "./ui_template_locale";
import { createWorkflowOverlays } from "./ui_template_overlay";
import { showToast } from "./ui_template_elements";
import { navigateTo } from "../A00_Common/router";
import { setDrawerSteps } from "../A00_Common/app_shell";
import { fetchDashboardMe } from "../B01_Dashboard/B01_Dashboard_Api_Fetch";

let dashboardRolePromise: Promise<string> | undefined;

function getDashboardRole(): Promise<string> {
  dashboardRolePromise ??= fetchDashboardMe().then((user) => user.role);
  return dashboardRolePromise;
}

export interface WorkflowStage {
  stage_no: number;
  stage_key: string;
  state: string;
}

export interface WorkflowLayoutOptions {
  title: string;
  steps: string[];
  activeStep: number;
  leftPanel?: HTMLElement;
  mainContent: HTMLElement;
  stages?: WorkflowStage[];
  /** 막힌(NOT_STARTED) 단계라도 켤 칸 — 수 하나 또는 목록(B05 · B06 = 2 · 3 · 4 · 496-1) */
  currentStage?: number | readonly number[];
  routes?: readonly string[];
  onStepClick?: (stepIndex: number, route: string) => void;
}

export interface WorkflowLayoutHandle {
  root: HTMLElement;
  setOptionsOpen: (isOpen: boolean) => void;
  setProgressOpen: (isOpen: boolean) => void;
  /** 한 페이지 두 보기(B05 · B06) — 보기가 바뀌면 제목 · 켜진 단계만 갈아 끼운다. */
  setTitle: (title: string) => void;
  setActiveStep: (stepIndex: number) => void;
  /** [저장] · [>] 뒤 서버 단계 상태로 색 · 켬을 다시 맞춘다(496-1). */
  setStages: (stages: WorkflowStage[]) => void;
}

export interface StepBarOptions {
  stages?: WorkflowStage[];
  currentStage?: number | readonly number[];
  routes?: readonly string[];
  compact?: boolean;
  orientation?: "horizontal" | "vertical";
  icons?: readonly string[];
  onStepClick?: (stepIndex: number, route: string) => void;
  /** 목록 최상단에 대시보드 이동 버튼을 단다(진행단계 오버레이 전용). */
  homeButton?: boolean;
}

type StepBarElement = HTMLElement & { repaintSteps?: (stages: WorkflowStage[]) => void };

export const WORKFLOW_STEP_ICONS = ["📁", "🗺️", "🛣️", "📐", "∑", "🏗️", "📄"] as const;

export function createStepBar(
  steps: readonly string[],
  activeStep: number,
  options?: StepBarOptions,
): HTMLElement {
  const bar = document.createElement("div");
  bar.className = "ui-workflow-layout__steps";
  // 단계 단추 다시 칠하기(`setStages`) — 단추 차례대로
  const painters: Array<(stages: WorkflowStage[]) => void> = [];
  (bar as StepBarElement).repaintSteps = (stages) => painters.forEach((paint) => paint(stages));
  if (options?.compact) bar.classList.add("is-compact");
  if (options?.orientation === "vertical") bar.classList.add("is-vertical");
  // 진행단계 오버레이(세로형) 최상단에 대시보드로 돌아가는 버튼을 둔다(2026-08-04 사용자
  // 지시). 워크플로 단계가 아니라 탈출구라 stage 배지 없이 항상 활성이다.
  if (options?.homeButton) {
    const home = document.createElement("button");
    home.type = "button";
    home.className = "ui-workflow-layout__step is-enabled ui-workflow-layout__step--home";
    const icon = document.createElement("span");
    icon.className = "ui-workflow-layout__step-icon";
    icon.setAttribute("aria-hidden", "true");
    icon.textContent = "🏠";
    const label = document.createElement("span");
    label.className = "ui-workflow-layout__step-label";
    label.textContent = t("Workflow_Step_Dashboard");
    home.append(icon, label);
    home.title = t("Workflow_Step_Dashboard");
    home.addEventListener("click", () => navigateTo(ROUTES.B01_ACCOUNT));
    bar.append(home);
  }
  steps.forEach((step, index) => {
    const button = document.createElement("button");
    button.type = "button";
    button.className = "ui-workflow-layout__step";
    if (index === activeStep) button.classList.add("is-active");
    const iconText = options?.icons?.[index];
    if (iconText) {
      const icon = document.createElement("span");
      icon.className = "ui-workflow-layout__step-icon";
      icon.setAttribute("aria-hidden", "true");
      icon.textContent = iconText;
      const label = document.createElement("span");
      label.className = "ui-workflow-layout__step-label";
      label.textContent = step;
      button.append(icon, label);
    } else {
      button.textContent = step;
    }

    const currents = ([] as number[]).concat(options?.currentStage ?? []);
    let adminOnly = false; // B04 = 시스템 관리자만
    const paint = (stages: WorkflowStage[] | undefined): void => {
      const stage = stages?.find((item) => item.stage_no === index) ?? stages?.[index];
      const hasStages = Boolean(stages?.length);
      // 막힘 = 시작 전만 — STALE(앞 단계 바뀜)은 색만 「다시 확인」 · 막지 않음(요구 300 B1)
      const isBlockedState = stage?.state === "NOT_STARTED";
      // ⚠ 개발 전용 — 막힌 단계도 눌러서 들어간다 (2026-09-09 사용자 지시).
      //   B08 의 「확정 없이 다음으로」 단추가 **B08 화면 안에** 있어서, B07 에서 B08 로 못
      //   넘어가면 그 단추에 닿을 길이 없었다(닫힌 문 안에 열쇠가 있는 꼴).
      //   ⚠ **잠금을 푸는 것이 아니라 가기만 한다** — 값이 없어 「미확보」로 뜨는 것이 정상이고,
      //     실제 우회는 B08 의 그 단추가 서버(`common_util_dev_unlock`)로 한다.
      //   ⚠ **서버는 그대로 막혀 있다** — 운영에서는 `ENVIRONMENT` 로 거절한다.
      const devBypass = import.meta.env.DEV;
      const isEnabled =
        !adminOnly &&
        (devBypass || !hasStages || !isBlockedState || currents.includes(stage?.stage_no ?? -1));
      button.classList.toggle("is-enabled", isEnabled);
      button.disabled = !isEnabled;
      button.title = "";

      // state 기반 스타일링 (표시 전용)
      button.className
        .split(/\s+/)
        .filter((name) => name.startsWith("state-"))
        .forEach((name) => button.classList.remove(name));
      button.classList.remove("is-dev-bypass");
      if (stage) {
        const state = stage.state;
        button.classList.add(`state-${state.toLowerCase()}`);
        if (state === "STALE") {
          button.title = t("WF_State_Stale");
        } else if (state === "FAILED") {
          button.title = t("WF_State_Failed");
        } else if (state === "COMPLETE") {
          button.title = t("WF_State_Complete");
        } else if (state === "IN_PROGRESS") {
          button.title = t("WF_State_InProgress");
        } else {
          button.title = t("WF_State_NotStarted");
        }
      }

      // 개발 우회로 열어 둔 단계는 **그렇다고 말해 준다** — 조용히 열면 다음 사람이
      // 「왜 값이 없나」로 헤맨다(B08 의 안내 줄과 같은 뜻).
      if (devBypass && isBlockedState && !adminOnly) {
        button.classList.add("is-dev-bypass");
        button.title = `${button.title} (개발: 확정 전이라 값이 비어 보일 수 있습니다)`;
      }
      if (adminOnly) button.title = "시스템 관리자 전용 단계입니다.";
    };
    let painted = options?.stages;
    paint(painted);
    painters.push((stages) => paint((painted = stages)));

    if (options?.routes?.[index] === ROUTES.B04_PREPROCESS) {
      void getDashboardRole()
        .then((role) => {
          if (role !== "SYSTEM_ADMIN") {
            adminOnly = true;
            paint(painted);
          }
        })
        .catch(() => undefined);
    }

    // 꺼진 단추는 누름이 안 감 — 켬 · 끔이 뒤에 바뀌어도 듣개 하나
    if (options?.routes?.[index]) {
      button.addEventListener("click", () => {
        options.onStepClick?.(index, options.routes![index]);
      });
    }

    bar.append(button);
  });
  return bar;
}

function helpOnlyRow(): HTMLElement {
  const row = document.createElement("div");
  row.className = "ui-sidebar-actions";
  return row;
}

export function createWorkflowLayout(options: WorkflowLayoutOptions): WorkflowLayoutHandle {
  const root = document.createElement("div");
  root.className = "ui-workflow-layout";

  const body = document.createElement("div");
  body.className = "ui-workflow-layout__body";

  const main = document.createElement("main");
  main.className = "ui-workflow-layout__main";
  main.append(options.mainContent);
  body.append(main);

  const progressContent = createStepBar(options.steps, options.activeStep, {
    stages: options.stages,
    currentStage: options.currentStage,
    routes: options.routes,
    orientation: "vertical",
    icons: WORKFLOW_STEP_ICONS,
    onStepClick: options.onStepClick,
    homeButton: true,
  });
  const overlays = createWorkflowOverlays({
    title: options.title,
    // 좌측 패널이 없는 화면(B08 · B09)도 [?] 줄은 둠(54-2)
    optionsContent: options.leftPanel ?? helpOnlyRow(),
    progressContent,
    onOptionsOpenChange: (isOpen) => root.classList.toggle("is-options-open", isOpen),
  });

  root.append(body, overlays.root);
  // ☰ 서랍 진행 단계 묶음(6-2) — 같은 단계 목록을 서랍이 열릴 때 빌려 감(그리기 · 누름 한 벌)
  setDrawerSteps(progressContent);
  const steps = [
    ...progressContent.querySelectorAll<HTMLElement>(
      ".ui-workflow-layout__step:not(.ui-workflow-layout__step--home)",
    ),
  ];
  // 좌측 아래 [<] [>](요구 280-2) = 이웃 단계 단추 누름 — 막힘 · 저장 · 이동은 그 단추의 `onStepClick` 한 길
  root.addEventListener("ui-step-nav", (event) => {
    const active = steps.findIndex((step) => step.classList.contains("is-active"));
    const target = active < 0 ? undefined : steps[active + (event as CustomEvent<number>).detail];
    if (!(target instanceof HTMLButtonElement)) return;
    if (target.disabled) showToast(target.title || t("WF_State_NotStarted"));
    else target.click();
  });
  return {
    root,
    setOptionsOpen: overlays.setTitleOpen,
    setProgressOpen: overlays.setProgressOpen,
    setTitle: (title) => {
      const heading = overlays.root.querySelector(".ui-workflow-overlay__title");
      if (heading) heading.textContent = title;
    },
    setActiveStep: (stepIndex) =>
      steps.forEach((step, index) => step.classList.toggle("is-active", index === stepIndex)),
    setStages: (stages) => (progressContent as StepBarElement).repaintSteps?.(stages),
  };
}