"use client";
import * as React from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { AlertTriangle, LockKeyhole } from "lucide-react";
import { authClient } from "@/lib/auth-client";
import { Button } from "@/components/ui/button";
import { Field } from "@/components/ui/input";
import { toast } from "@/components/ui/toast";
import { AuthCard, FormError } from "./auth-card";
import { PasswordInput } from "./password-input";
import { PasswordStrength, scorePassword } from "./password-strength";
import { humanAuthError, passwordLengthError, type AuthClientError } from "./auth-errors";

export function ResetForm({ token, errorCode }: { token: string | null; errorCode: string | null }) {
  const router = useRouter();
  const [password, setPassword] = React.useState("");
  const [confirm, setConfirm] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const [fieldErrors, setFieldErrors] = React.useState<{ password?: string; confirm?: string }>({});
  const [invalidLink, setInvalidLink] = React.useState<string | null>(errorCode ? humanAuthError({ code: errorCode }, "reset") : token ? null : "This reset link is missing its token. Request a new one.");

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError(null);
    const fe: typeof fieldErrors = {};
    const pwErr = passwordLengthError(password);
    if (pwErr) fe.password = pwErr;
    else if (scorePassword(password).score < 2) fe.password = "That password is too easy to guess. Try a longer or less common one.";
    if (confirm !== password) fe.confirm = "The passwords don't match.";
    setFieldErrors(fe);
    if (Object.keys(fe).length || !token) return;

    setLoading(true);
    try {
      const { error: err } = await authClient.resetPassword({ newPassword: password, token });
      if (err) {
        const ae = err as AuthClientError;
        if (ae.code === "INVALID_TOKEN" || ae.code === "TOKEN_EXPIRED") {
          setInvalidLink(humanAuthError(ae, "reset"));
          return;
        }
        setError(humanAuthError(ae, "reset"));
        return;
      }
      toast.success("Password updated", "Sign in with your new password.");
      router.push("/login?notice=reset");
    } catch {
      setError("We couldn't reach the server. Check your connection and try again.");
    } finally {
      setLoading(false);
    }
  }

  if (invalidLink) {
    return (
      <AuthCard
        icon={<AlertTriangle />}
        title="This link doesn't work"
        description={invalidLink}
        footer={
          <Link href="/login" className="font-medium text-accent underline-offset-4 hover:underline">
            Back to sign in
          </Link>
        }
      >
        <Button asChild size="lg" className="w-full">
          <Link href="/forgot-password">Request a new link</Link>
        </Button>
      </AuthCard>
    );
  }

  return (
    <AuthCard icon={<LockKeyhole />} title="Choose a new password" description="For your security, all other sessions will be signed out once the password changes.">
      <form onSubmit={onSubmit} noValidate className="space-y-4">
        <FormError id="reset-error">{error}</FormError>
        <Field label="New password" htmlFor="reset-password" error={fieldErrors.password}>
          <PasswordInput
            id="reset-password"
            name="new-password"
            autoComplete="new-password"
            required
            minLength={10}
            maxLength={128}
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="10 to 128 characters"
            invalid={!!fieldErrors.password}
            aria-describedby="reset-password-strength"
            autoFocus
          />
          <PasswordStrength password={password} id="reset-password-strength" />
        </Field>
        <Field label="Confirm new password" htmlFor="reset-confirm" error={fieldErrors.confirm}>
          <PasswordInput id="reset-confirm" name="confirm-password" autoComplete="new-password" required value={confirm} onChange={(e) => setConfirm(e.target.value)} placeholder="Type it once more" invalid={!!fieldErrors.confirm} />
        </Field>
        <Button type="submit" size="lg" className="mt-2 w-full" loading={loading}>
          Update password
        </Button>
      </form>
    </AuthCard>
  );
}