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

function LoginForm() {
  const navigate = useNavigate();
  const [showPwd, setShowPwd] = useState(false);

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

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

  const onSubmit = async ({ email, password }) => {
    const { error } = await signIn({ email, password });

    if (error?.status === 403) return navigate("/verify-email", { state: { email } });
    if (error) return setError("root", { message: error.message || "Sign in failed." });
    navigate("/");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate className="flex flex-col gap-8">
      <div className="flex flex-col gap-3.5">
        <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>
        <Field label="Password" error={errors.password?.message}>
          <IconInput
            icon={Lock}
            type={showPwd ? "text" : "password"}
            autoComplete="current-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>
        <div className="flex justify-end -mt-1">
          <button
            type="button"
            onClick={() => navigate("/forgot-password")}
            className="bg-transparent border-0 p-0 text-[12px] text-fg-secondary font-mono cursor-pointer hover:text-fg transition-colors duration-fast"
          >
            Forgot password?
          </button>
        </div>
      </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 ? "…" : "Sign in"}</span>
        <ArrowRight size={18} strokeWidth={1.75} />
      </button>
    </form>
  );
}

window.LoginForm = LoginForm;