import { isBlank } from "@util/common_util_validate";
import { createButton, createInputField } from "@ui/ui_template_elements";
import { changePassword, updateUserProfile, type DashboardUser } from "./B01_Dashboard_Api_Fetch";
import { L, runRequest } from "./B01_Dashboard_UI_Common";

const PASSWORD_MIN_LENGTH = 8;

export function buildProfileForm(user: DashboardUser): HTMLElement {
  const name = createInputField({
    label: L("B01_Account_Field_Name"),
    value: user.name,
    required: true,
  });
  const position = createInputField({
    label: L("B01_Dashboard_Table_Position"),
    value: user.position ?? "",
  });
  const department = createInputField({
    label: L("B01_Dashboard_Table_Department"),
    value: user.department ?? "",
  });
  const phone = createInputField({ label: L("B01_Account_Field_Phone"), value: user.phone ?? "" });
  const grid = document.createElement("div");
  grid.className = "b01-dashboard__form-grid";
  grid.append(name.root, position.root, department.root, phone.root);
  const save = createButton({
    label: L("B01_Dashboard_SaveProfile"),
    onClick: async function onB01_Profile_Save_Click() {
      name.setError();
      if (isBlank(name.input.value)) {
        name.setError(L("Common_Msg_RequiredField"));
        return;
      }
      await runRequest(() =>
        updateUserProfile({
          name: name.input.value.trim(),
          position: position.input.value.trim() || null,
          department: department.input.value.trim() || null,
          phone: phone.input.value.trim() || null,
        }),
      );
    },
  });
  const wrap = document.createElement("div");
  wrap.append(grid, 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;
}