"use client";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { ErrorText } from "@/components/forms";
import { Button } from "@/components/ui/button";
import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { authClient } from "@/lib/auth-client";

export function SignUpForm() {
  const router = useRouter();
  const [error, setError] = useState("");
  const [pending, setPending] = useState(false);

  async function submit(form: FormData) {
    const username = String(form.get("username"));
    const password = String(form.get("password"));
    if (password !== form.get("password2")) {
      setError("The passwords don't match.");
      return;
    }
    setError("");
    setPending(true);
    const { error } = await authClient.signUp.email({
      username,
      name: username,
      email: String(form.get("email")),
      password,
    });
    if (error) {
      setError(error.message ?? "That didn't work. Try again.");
      setPending(false);
      return;
    }
    router.push("/account?welcome=1");
    router.refresh();
  }

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        void submit(new FormData(e.currentTarget));
      }}
    >
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="username">Username</FieldLabel>
          <Input
            id="username"
            name="username"
            autoComplete="username"
            required
            autoFocus
            pattern="[A-Za-z0-9_]{3,32}"
            title="3 to 32 letters, digits or underscores"
          />
        </Field>
        <Field>
          <FieldLabel htmlFor="email">Email</FieldLabel>
          <Input id="email" name="email" type="email" autoComplete="email" required />
        </Field>
        <Field>
          <FieldLabel htmlFor="password">Password</FieldLabel>
          <Input id="password" name="password" type="password" autoComplete="new-password" required minLength={10} />
        </Field>
        <Field>
          <FieldLabel htmlFor="password2">Password again</FieldLabel>
          <Input id="password2" name="password2" type="password" autoComplete="new-password" required minLength={10} />
          <FieldDescription>Not your IMVU password: use a new one.</FieldDescription>
        </Field>
        {error && <ErrorText>{error}</ErrorText>}
        <Field>
          <Button type="submit" disabled={pending}>
            {pending ? "Creating account…" : "Create account"}
          </Button>
          <FieldDescription className="text-center">
            Have one? <Link href="/signin">Sign in</Link>
          </FieldDescription>
        </Field>
      </FieldGroup>
    </form>
  );
}