import { requestPasswordReset } from "@features/auth/api/auth.api.js";
import { forgotPasswordSchema } from "@features/auth/schemas/auth.schema.js";
import { zodResolver } from "@hookform/resolvers/zod";
import clsx from "clsx";
import { ArrowRight, Mail, MailCheck } from "lucide-react";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom";

function ForgotPasswordRoute() {
  const navigate = useNavigate();

  const {
    register,
    handleSubmit,
    setFocus,
    setError,
    getValues,
    formState: { errors, isSubmitting, isSubmitSuccessful },
  } = useForm({
    resolver: zodResolver(forgotPasswordSchema),
    defaultValues: { email: "" },
  });

  useEffect(() => {
    setFocus("email");
  }, [setFocus]);

  const onSubmit = async ({ email }) => {
    const { error } = await requestPasswordReset(email);
    if (error) {
      setError("root", { message: error.message || "Something went wrong." });
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate className="flex flex-col gap-8">
      <div>
        <h2 className="text-3xl font-semibold leading-[1.1] tracking-[-0.03em] text-fg">
          Reset password.
        </h2>
        <p className="mt-2.5 text-sm leading-[1.55] text-fg-secondary max-w-[280px]">
          Enter your email and we'll send you a reset link.
        </p>
      </div>

      {!isSubmitSuccessful ? (
        <>
          <Field label="Email" error={errors.email?.message}>
            <IconInput
              icon={Mail}
              type="email"
              autoComplete="email"
              inputMode="email"
              placeholder="you@studio.dev"
              error={errors.email}
              {...register("email")}
            />
          </Field>

          {errors.root && (
            <div className="text-[12px] text-error-fg font-mono tracking-[-0.005em]">
              {errors.root.message}
            </div>
          )}

          <button
            type="submit"
            disabled={isSubmitting}
            className={clsx(
              "w-full h-12 px-5 border-0 rounded-md font-sans text-[15px] font-medium tracking-[-0.005em] inline-flex items-center justify-between gap-2 transition-colors duration-fast ease-out-expo",
              isSubmitting
                ? "bg-overlay text-fg-disabled cursor-not-allowed"
                : "bg-accent text-accent-fg cursor-pointer"
            )}
          >
            <span className="flex-1 text-left">{isSubmitting ? "…" : "Send reset link"}</span>
            <ArrowRight size={18} strokeWidth={1.75} />
          </button>
        </>
      ) : (
        <div className="flex flex-col items-center text-center gap-4">
          <div className="w-12 h-12 rounded-full bg-accent-subtle flex items-center justify-center text-accent">
            <MailCheck size={22} strokeWidth={1.75} />
          </div>
          <p className="text-sm leading-[1.55] text-fg-secondary">
            If <span className="text-fg font-medium">{getValues("email")}</span> is registered,
            you'll receive a reset link shortly.
          </p>
        </div>
      )}

      <button
        type="button"
        onClick={() => navigate("/login")}
        className="bg-transparent border-0 p-0 text-[13px] text-fg-secondary cursor-pointer hover:text-fg transition-colors duration-fast text-center font-sans"
      >
        ← Back to sign in
      </button>
    </form>
  );
}

window.ForgotPasswordRoute = ForgotPasswordRoute;