import { ROUTES } from "@config/config_frontend";
import { isBlank, isValidEmail } from "@util/common_util_validate";
import {
  createButton,
  createInputField,
  hideLoadingOverlay,
  showLoadingOverlay,
  showToast,
} from "@ui/ui_template_elements";
import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
import { navigateTo } from "../A00_Common/router";
import { requestLogin, verifyLogin } from "./A06_Login_Api_Fetch";
import "./A06_Login_UI_Style.css";

const L = (key: keyof typeof ui_locales): string => ui_locales[key][currentLanguageIndex];

export function renderA06Login(root: HTMLElement): void {
  const page = document.createElement("div");
  page.className = "a06-login";
  const card = document.createElement("div");
  card.className = "a06-login__card";
  const title = document.createElement("h1");
  title.className = "a06-login__title";
  title.textContent = L("A06_Login_Title");
  const email = createInputField({ label: L("A06_Login_Field_Email"), type: "email" });
  const password = createInputField({ label: L("A06_Login_Field_Password"), type: "password" });
  const otp = createInputField({ label: L("A06_Login_Field_Otp"), type: "text" });
  otp.root.hidden = true;
  const submit = createButton({ label: L("A06_Login_Submit"), type: "submit" });
  const form = document.createElement("form");
  form.className = "a06-login__form";
  let otpRequired = false;

  async function onA06_Login_Submit_Click(event: Event): Promise<void> {
    event.preventDefault();
    const emailValue = email.input.value.trim();
    if (isBlank(emailValue) || !isValidEmail(emailValue)) {
      email.setError(L("A06_Login_Error_Email"));
      return;
    }
    if (
      (!otpRequired && isBlank(password.input.value)) ||
      (otpRequired && !/^\d{6}$/.test(otp.input.value))
    ) {
      showToast(L("A06_Login_Error_Required"), "error");
      return;
    }
    showLoadingOverlay();
    try {
      const result = otpRequired
        ? await verifyLogin(emailValue, otp.input.value)
        : await requestLogin(emailValue, password.input.value);
      if (result.status === "otp_required") {
        otpRequired = true;
        otp.root.hidden = false;
        password.root.hidden = true;
        submit.querySelector(".ui-btn__label")!.textContent = L("A06_Login_Verify");
        showToast(L("A06_Login_OtpSent"), "info");
      } else {
        showToast(L("A06_Login_Success"), "success");
        navigateTo(ROUTES.B01_ACCOUNT);
      }
    } catch (error) {
      showToast(error instanceof Error ? error.message : L("A06_Login_Error_Request"), "error");
    } finally {
      hideLoadingOverlay();
    }
  }

  form.addEventListener("submit", onA06_Login_Submit_Click);
  form.append(email.root, password.root, otp.root, submit);
  const register = createButton({
    label: L("A06_Login_ToRegister"),
    variant: "ghost",
    onClick: () => navigateTo(ROUTES.A07_REGISTER),
  });
  card.append(title, form, register);
  page.append(card);
  root.append(page);
}