import { useTranslation } from "@buzzwaretech/i18n";
import { Button } from "@buzzwaretech/propel/button";
import { Input } from "@buzzwaretech/ui";
import { XCircle } from "lucide-react";
import { useState } from "react";
// helpers
import { EAuthModes } from "@/helpers/authentication.helper";
// hooks
import useTimer from "@/hooks/use-timer";
// services

type TAuthUniqueCodeForm = {
  mode: EAuthModes;
  email: string;
  handleEmailClear: () => void;
  generateEmailUniqueCode: (
    email: string,
  ) => Promise<{ code: string } | undefined>;
};

export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
  const { email, handleEmailClear, generateEmailUniqueCode } = props;
  // derived values
  const defaultResetTimerValue = 60;
  // states
  const [isRequestingNewCode, setIsRequestingNewCode] = useState(false);
  // timer
  const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(0);
  // buzzwareTech hooks
  const { t } = useTranslation();

  const generateNewCode = async (email: string) => {
    try {
      setIsRequestingNewCode(true);
      await generateEmailUniqueCode(email);
      setResendCodeTimer(defaultResetTimerValue);
      setIsRequestingNewCode(false);
    } catch {
      setResendCodeTimer(0);
      console.error("Error while requesting new code");
      setIsRequestingNewCode(false);
    }
  };

  const isRequestNewCodeDisabled = isRequestingNewCode || resendTimerCode > 0;

  return (
    <div className="space-y-4">
      <div className="space-y-1">
        <label htmlFor="email" className="text-13 font-medium text-tertiary">
          {t("auth.common.email.label")}
        </label>
        <div
          className={`relative flex items-center rounded-md border border-strong bg-surface-1`}
        >
          <Input
            id="email"
            name="email"
            type="email"
            value={email}
            placeholder={t("auth.common.email.placeholder")}
            className="h-10 w-full border-0 disable-autofill-style placeholder:text-placeholder"
            autoComplete="off"
            disabled
          />
          {email.length > 0 && (
            <button
              type="button"
              className="absolute right-3 grid size-5 place-items-center"
              aria-label={t("aria_labels.auth_forms.clear_email")}
              onClick={handleEmailClear}
            >
              <XCircle className="size-5 stroke-placeholder" />
            </button>
          )}
        </div>
      </div>

      <div className="text-center text-sm">
        <p>We've sent a magic link to your email.</p>
        <p>Click the link to sign in.</p>
      </div>

      <div className="flex w-full items-center justify-center px-1 pt-1 text-11">
        <button
          type="button"
          onClick={() => generateNewCode(email)}
          className={
            isRequestNewCodeDisabled
              ? "text-placeholder"
              : "font-medium text-accent-secondary hover:text-accent-secondary"
          }
          disabled={isRequestNewCodeDisabled}
        >
          {resendTimerCode > 0
            ? t("auth.common.resend_in", { seconds: resendTimerCode })
            : isRequestingNewCode
            ? t("auth.common.unique_code.requesting_new_code")
            : t("common.resend")}
        </button>
      </div>
    </div>
  );
}