Aislo/B01_Dashboard/B01_Dashboard_UI_Modals.ts

import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
import {
  createButton,
  createInputField,
  createSelectField,
  showToast,
  showLoadingOverlay,
  hideLoadingOverlay,
} from "@ui/ui_template_elements";
import {
  updateProject,
  deleteProject,
  changeUserRole,
  updateDashboardUser,
  removeCompanyMember,
  createCompany,
  joinCompany,
  searchCompanies,
  addCompanyMember,
  type DashboardUser,
  type ProjectItem,
  type Member,
} from "./B01_Dashboard_Api_Fetch";

function L(key: keyof typeof ui_locales): string {
  return ui_locales[key][currentLanguageIndex];
}

function openModal(title: string, body: HTMLElement[], onConfirm: () => Promise<void>): void {
  const modal = document.createElement("div");
  modal.className = "b01-dashboard__modal";
  const panel = document.createElement("div");
  panel.className = "b01-dashboard__modal-panel";
  const heading = document.createElement("h3");
  heading.className = "b01-dashboard__modal-title";
  heading.textContent = title;
  const actions = document.createElement("div");
  actions.className = "b01-dashboard__actions";
  actions.append(
    createButton({
      label: L("Common_Btn_Cancel"),
      variant: "ghost",
      onClick: () => modal.remove(),
    }),
    createButton({
      label: L("Common_Btn_Confirm"),
      onClick: async () => {
        showLoadingOverlay();
        try {
          await onConfirm();
          modal.remove();
          window.dispatchEvent(new HashChangeEvent("hashchange"));
        } catch (error) {
          showToast(
            error instanceof Error ? error.message : L("B01_Dashboard_RequestFailed"),
            "error",
          );
        } finally {
          hideLoadingOverlay();
        }
      },
    }),
  );
  panel.append(heading, ...body, actions);
  modal.append(panel);
  document.body.append(modal);
}

export function openEditProjectModal(user: DashboardUser, project: ProjectItem): void {
  const isUserOnly = user.role === "USER";

  const name = createInputField({
    label: L("B01_Dashboard_Table_Project"),
    value: project.name,
    required: true,
  });
  const region = createInputField({
    label: L("B01_Dashboard_Table_Region"),
    value: project.region ?? "",
  });
  const roadType = createInputField({ label: "임도 종류", value: project.road_type ?? "" });
  const year = createInputField({
    label: "사업 연도",
    type: "number",
    value: String(project.project_year ?? ""),
  });
  const length = createInputField({
    label: "예상 연장 (m)",
    type: "number",
    value: String(project.estimated_length_m ?? ""),
  });
  const memo = createInputField({ label: "비고", value: project.memo ?? "" });
  // 도면 표제란·표지에 그대로 실리는 값 — 프로그램이 지어낼 수 없어 여기서 받는다.
  const clientOrg = createInputField({
    label: "시행청 (도면 표제란)",
    value: project.client_org ?? "",
  });
  const projectNumber = createInputField({
    label: "연도·기번 (표지)",
    value: project.project_number ?? "",
    placeholder: "예: 2026년 간선임도(기번3-울진.대흥)",
  });
  const workAmount = createInputField({
    label: "사업량 (표지)",
    value: project.work_amount ?? "",
    placeholder: "예: L=2.14km",
  });

  if (isUserOnly) {
    name.input.disabled = true;
    region.input.disabled = true;
    roadType.input.disabled = true;
    year.input.disabled = true;
    length.input.disabled = true;
    memo.input.disabled = true;
    clientOrg.input.disabled = true;
    projectNumber.input.disabled = true;
    workAmount.input.disabled = true;
  }

  openModal(
    L("B01_Dashboard_EditProject"),
    [
      name.root,
      region.root,
      roadType.root,
      year.root,
      length.root,
      memo.root,
      clientOrg.root,
      projectNumber.root,
      workAmount.root,
    ],
    async () => {
      await updateProject(project.id, {
        name: name.input.value.trim(),
        region: region.input.value.trim() || null,
        road_type: roadType.input.value.trim() || null,
        project_year: year.input.value ? Number(year.input.value) : null,
        estimated_length_m: length.input.value ? Number(length.input.value) : null,
        memo: memo.input.value.trim() || null,
        status: project.status,
        client_org: clientOrg.input.value.trim() || null,
        project_number: projectNumber.input.value.trim() || null,
        work_amount: workAmount.input.value.trim() || null,
      });
      showToast(L("B01_Dashboard_Saved"), "success");
    },
  );
}

export function openDeleteProjectModal(user: DashboardUser, project: ProjectItem): void {
  const warning = document.createElement("p");
  warning.className = "b01-dashboard__modal-text";
  // 하드 삭제 모드에서는 업로드 원본까지 사라진다 — 문구를 바꿔 실수로 날리는 걸 막는다.
  warning.textContent = user.project_delete_hard
    ? L("B01_Dashboard_Confirm_DeleteProject_Hard")
    : L("B01_Dashboard_Confirm_DeleteProject");

  openModal(L("B01_Dashboard_DeleteProject"), [warning], async () => {
    await deleteProject(project.id);
    showToast(L("B01_Dashboard_Saved"), "success");
  });
}

export function openEditUserModal(user: DashboardUser, target: Member | DashboardUser): void {
  const name = createInputField({
    label: L("B01_Dashboard_Table_Name"),
    value: target.name,
    required: true,
  });
  const position = createInputField({
    label: L("B01_Dashboard_Table_Position"),
    value: target.position ?? "",
  });
  const department = createInputField({
    label: L("B01_Dashboard_Table_Department"),
    value: target.department ?? "",
  });

  const phoneVal = (target as DashboardUser).phone || "";
  const phone = createInputField({ label: L("B01_Account_Field_Phone"), value: phoneVal });

  if (user.role === "ADMIN") {
    // ADMIN은 직책(position) / 부서(department)만 수정 정보 가능
    name.input.disabled = true;
    phone.input.disabled = true;
  } else if (user.role === "USER" && user.id !== target.id) {
    name.input.disabled = true;
    position.input.disabled = true;
    department.input.disabled = true;
    phone.input.disabled = true;
  }

  openModal(
    L("B01_Dashboard_EditUser"),
    [name.root, position.root, department.root, phone.root],
    async () => {
      await updateDashboardUser(target.id, {
        name: name.input.value.trim(),
        position: position.input.value.trim() || null,
        department: department.input.value.trim() || null,
        phone: phone.input.value.trim() || null,
        status: target.status,
      });
      showToast(L("B01_Dashboard_Saved"), "success");
    },
  );
}

export function openChangeRoleModal(target: Member | DashboardUser): void {
  const roleField = createSelectField({
    label: L("B01_Dashboard_Table_Role"),
    options: [
      { value: "USER", text: "USER" },
      { value: "ADMIN", text: "ADMIN" },
    ],
    value: target.role,
  });

  openModal(L("B01_Dashboard_ChangeRole"), [roleField.root], async () => {
    await changeUserRole(target.id, roleField.select.value);
    showToast(L("B01_Dashboard_Saved"), "success");
  });
}

export function openDeleteUserModal(target: Member | DashboardUser): void {
  const warning = document.createElement("p");
  warning.className = "b01-dashboard__modal-text";
  warning.textContent = L("B01_Dashboard_Confirm_DeleteUser");

  openModal(L("B01_Dashboard_DeleteUser"), [warning], async () => {
    await removeCompanyMember(target.id);
    showToast(L("B01_Dashboard_Saved"), "success");
  });
}

export function openCreateCompanyModal(): void {
  const name = createInputField({ label: L("B01_Dashboard_Table_Company"), required: true });
  const number = createInputField({
    label: L("B01_Dashboard_Field_BusinessNumber"),
    required: true,
  });
  const address = createInputField({ label: L("B01_Dashboard_Field_Address") });
  const owner = createInputField({ label: L("B01_Dashboard_Field_Owner") });

  openModal(
    L("B01_Dashboard_Modal_CreateCompany"),
    [name.root, number.root, address.root, owner.root],
    async () => {
      if (!name.input.value.trim() || !number.input.value.trim()) return;
      await createCompany({
        name: name.input.value.trim(),
        business_registration_number: number.input.value.trim(),
        business_address: address.input.value.trim() || null,
        business_owner: owner.input.value.trim() || null,
      });
      showToast(L("B01_Dashboard_Saved"), "success");
    },
  );
}

export function openFindCompanyModal(): void {
  const query = createInputField({ label: L("B01_Dashboard_Field_Search"), required: true });
  const results = document.createElement("div");
  results.className = "b01-dashboard__actions";
  const search = createButton({
    label: L("Common_Btn_Search"),
    variant: "ghost",
    onClick: async function onB01_Company_Search_Click() {
      results.innerHTML = "";
      const companies = await searchCompanies(query.input.value.trim());
      for (const company of companies) {
        results.append(
          createButton({
            label: `${company.name} ${L("B01_Dashboard_JoinCompany")}`,
            variant: "ghost",
            onClick: async () => {
              showLoadingOverlay();
              try {
                await joinCompany(company.id);
                showToast(L("B01_Dashboard_Saved"), "success");
              } catch (e) {
                showToast("요청 실패", "error");
              } finally {
                hideLoadingOverlay();
              }
            },
          }),
        );
      }
    },
  });
  openModal(
    L("B01_Dashboard_Modal_FindCompany"),
    [query.root, search, results],
    async () => undefined,
  );
}

export function openAddMemberModal(): void {
  const email = createInputField({
    label: L("B01_Dashboard_Field_MemberEmail"),
    type: "email",
    required: true,
  });
  openModal(L("B01_Dashboard_Modal_AddMember"), [email.root], async () => {
    if (!email.input.value.trim()) return;
    await addCompanyMember(email.input.value.trim());
    showToast(L("B01_Dashboard_Saved"), "success");
  });
}