Aislo/B01_Dashboard/B01_Dashboard_UI_Profile.ts

import { isBlank } from "@util/common_util_validate";
import { createButton, createInputField } from "@ui/ui_template_elements";
import { section } from "@ui/ui_template_general_blocks";
import {
  changePassword,
  fetchCompanyAssets,
  updateCompanyAsset,
  updateUserProfile,
  type DashboardUser,
} from "./B01_Dashboard_Api_Fetch";
import { createAssetField } from "./B01_Dashboard_UI_AssetPicker";
import { buildUserFields, formatDate, formatTime, L, runRequest } from "./B01_Dashboard_UI_Common";

const PASSWORD_MIN_LENGTH = 8;

export function buildProfileForm(user: DashboardUser): HTMLElement {
  // 로그인한 본인의 정보다 — 이메일 라벨도 「이메일」로 나간다 (2026-09-06 사용자 지시).
  const fields = buildUserFields(user, { self: true });
  const grid = fields.grid;
  // 본인 서명 — 사용자 수정 모달과 같은 칸이다. 도면 표제란이 이 사람 자리를 채울 때
  // 그대로 실리므로 본인이 여기서 바로 걸 수 있게 둔다 (2026-09-06 사용자 지시).
  const signatureSlot = document.createElement("div");
  if (user.company_id) {
    void fetchCompanyAssets(user.company_id).then((assets) => {
      const owned = assets.find((asset) => asset.kind === "SIGNATURE" && asset.user_id === user.id);
      signatureSlot.append(
        createAssetField("서명", "SIGNATURE", assets, owned?.id ?? null, user.company_id!, user, {
          owner: { id: user.id, name: user.name },
          onChange: async (assetId) => {
            if (assetId === null) return;
            const picked = assets.find((asset) => asset.id === assetId);
            if (picked)
              await updateCompanyAsset(assetId, { label: picked.label, user_id: user.id });
          },
        }).root,
      );
    });
  }
  const save = createButton({
    label: L("B01_Dashboard_SaveProfile"),
    onClick: async function onB01_Profile_Save_Click() {
      if (!fields.validate()) return;
      await runRequest(() => updateUserProfile(fields.values()));
    },
  });
  const wrap = document.createElement("div");
  wrap.append(grid, signatureSlot, save);
  return wrap;
}

export function buildSecurityForm(): HTMLElement {
  const currentPassword = createInputField({
    label: L("B01_Account_Field_CurrentPw"),
    type: "password",
    required: true,
  });
  const newPassword = createInputField({
    label: L("B01_Account_Field_NewPw"),
    type: "password",
    required: true,
  });
  const confirmPassword = createInputField({
    label: L("B01_Account_Field_ConfirmPw"),
    type: "password",
    required: true,
  });
  const grid = document.createElement("div");
  grid.className = "b01-dashboard__form-grid";
  grid.append(currentPassword.root, newPassword.root, confirmPassword.root);
  const save = createButton({
    label: L("B01_Account_Save_Password"),
    variant: "ghost",
    onClick: async function onB01_Password_Save_Click() {
      currentPassword.setError();
      newPassword.setError();
      confirmPassword.setError();

      const currentValue = currentPassword.input.value;
      const nextValue = newPassword.input.value;
      const confirmValue = confirmPassword.input.value;
      if (isBlank(currentValue) || isBlank(nextValue) || isBlank(confirmValue)) {
        currentPassword.setError(isBlank(currentValue) ? L("Common_Msg_RequiredField") : undefined);
        newPassword.setError(isBlank(nextValue) ? L("Common_Msg_RequiredField") : undefined);
        confirmPassword.setError(isBlank(confirmValue) ? L("Common_Msg_RequiredField") : undefined);
        return;
      }
      if (nextValue.length < PASSWORD_MIN_LENGTH) {
        newPassword.setError(L("B01_Account_Error_PwLength"));
        return;
      }
      if (nextValue !== confirmValue) {
        confirmPassword.setError(L("B01_Account_Error_PwMismatch"));
        return;
      }
      await runRequest(() =>
        changePassword({
          current_password: currentValue,
          new_password: nextValue,
          new_password_confirm: confirmValue,
          logout_all: false,
        }),
      );
      currentPassword.input.value = "";
      newPassword.input.value = "";
      confirmPassword.input.value = "";
    },
  });
  const wrap = document.createElement("div");
  wrap.append(grid, save);
  return wrap;
}

/** 계정 정보 — 마지막 로그인 · 이메일 인증 만료일(`/me` 가 줌) */
export function buildAccountInfo(user: DashboardUser): HTMLElement {
  const info = document.createElement("dl");
  info.className = "b01-dashboard__info";
  const when = (value?: string | null): string =>
    value ? `${formatDate(value)} ${formatTime(value)}` : "-";
  const rows: [string, string][] = [
    [L("B01_Ac_LastLogin"), when(user.last_login)],
    [L("B01_Ac_AuthExpires"), formatDate(user.auth_expires_at)],
  ];
  for (const [label, value] of rows) {
    const term = document.createElement("dt");
    term.textContent = label;
    const detail = document.createElement("dd");
    detail.textContent = value;
    info.append(term, detail);
  }
  return info;
}

/** 「내 계정」 탭 — 기본정보(+ 계정 정보 · 서명) · 보안 */
export function buildAccountTab(user: DashboardUser): HTMLElement[] {
  const profile = document.createElement("div");
  profile.append(buildAccountInfo(user), buildProfileForm(user));
  return [
    section(L("B01_Dashboard_Profile"), profile),
    section(L("B01_Account_Section_Security"), buildSecurityForm()),
  ];
}