import { resetPassword } from "@features/auth/api/auth.api.js";
import { resetPasswordSchema } from "@features/auth/schemas/auth.schema.js";
import { zodResolver } from "@hookform/resolvers/zod";
import clsx from "clsx";
import { ArrowRight, Check, Eye, EyeOff, Lock } from "lucide-react";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { useNavigate, useSearchParams } from "react-router-dom";

function ResetPasswordRoute() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const token = searchParams.get("token");
  const [showPwd, setShowPwd] = useState(false);

  const {
    register,
    handleSubmit,
    setFocus,
    setError,
    formState: { errors, isSubmitting, isSubmitSuccessful },
  } = useForm({
    resolver: zodResolver(resetPasswordSchema),
    defaultValues: { password: "", confirm: "" },
  });

  useEffect(() => {
    if (!token) navigate("/login", { replace: true });
  }, [token, navigate]);

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

  const onSubmit = async ({ password }) => {
    const { error } = await resetPassword({ token, password });
    if (error) {
      setError("root", {
        message: error.message || "Something went wrong. The link may have expired.",
      });
    }
  };

  if (isSubmitSuccessful && !errors.root) {
    return (
      <>
        <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">
            <Check size={22} strokeWidth={1.75} />
          </div>
          <div>
            <h2 className="text-2xl font-semibold leading-[1.1] tracking-[-0.03em] text-fg">
              Password updated.
            </h2>
            <p className="mt-2.5 text-sm leading-[1.55] text-fg-secondary">
              You can now sign in with your new password.
            </p>
          </div>
        </div>
        <button
          type="button"
          onClick={() => navigate("/login")}
          className="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 bg-accent text-accent-fg cursor-pointer"
        >
          <span className="flex-1 text-left">Sign in</span>
          <ArrowRight size={18} strokeWidth={1.75} />
        </button>
      </>
    );
  }

  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">
          New password.
        </h2>
        <p className="mt-2.5 text-sm leading-[1.55] text-fg-secondary max-w-[280px]">
          Choose a strong password for your account.
        </p>
      </div>

      <div className="flex flex-col gap-3.5">
        <Field
          label="New password"
          hint="8+ characters, one number."
          error={errors.password?.message}
        >
          <IconInput
            icon={Lock}
            type={showPwd ? "text" : "password"}
            autoComplete="new-password"
            placeholder="••••••••"
            error={errors.password}
            trailing={
              <button
                type="button"
                aria-label={showPwd ? "Hide password" : "Show password"}
                onClick={() => setShowPwd((v) => !v)}
                className="bg-transparent border-0 text-fg-tertiary cursor-pointer p-0 inline-flex hover:text-fg-secondary transition-colors duration-fast"
              >
                {showPwd ? (
                  <EyeOff size={16} strokeWidth={1.75} />
                ) : (
                  <Eye size={16} strokeWidth={1.75} />
                )}
              </button>
            }
            {...register("password")}
          />
        </Field>
        <Field label="Confirm password" error={errors.confirm?.message}>
          <IconInput
            icon={Lock}
            type={showPwd ? "text" : "password"}
            autoComplete="new-password"
            placeholder="••••••••"
            error={errors.confirm}
            {...register("confirm")}
          />
        </Field>
      </div>

      {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 ? "…" : "Set new password"}</span>
        <ArrowRight size={18} strokeWidth={1.75} />
      </button>
    </form>
  );
}

window.ResetPasswordRoute = ResetPasswordRoute;