"use client";
import * as React from "react";
import Link from "next/link";
import { MailCheck } from "lucide-react";
import { authClient } from "@/lib/auth-client";
import { Button } from "@/components/ui/button";
import { Field, Input } 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 { ResendVerification, RESEND_COOLDOWN_S } from "./resend-verification";
import { humanAuthError, isValidEmail, passwordLengthError, type AuthClientError } from "./auth-errors";

export function SignupForm() {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const [fieldErrors, setFieldErrors] = React.useState<{ name?: string; email?: string; password?: string }>({});
  const [sentTo, setSentTo] = React.useState<string | null>(null);

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError(null);
    const fe: typeof fieldErrors = {};
    if (name.trim().length < 1) fe.name = "Tell us what to call you.";
    if (name.trim().length > 80) fe.name = "Keep it under 80 characters.";
    if (!isValidEmail(email)) fe.email = "Enter a valid email address.";
    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.";
    setFieldErrors(fe);
    if (Object.keys(fe).length) return;

    setLoading(true);
    try {
      const { error: err } = await authClient.signUp.email({ name: name.trim(), email: email.trim(), password, callbackURL: "/verify-email" });
      if (err) {
        setError(humanAuthError(err as AuthClientError, "signup"));
        return;
      }
      toast.success("Account created", "Check your inbox to verify your email.");
      setSentTo(email.trim());
    } catch {
      setError("We couldn't reach the server. Check your connection and try again.");
    } finally {
      setLoading(false);
    }
  }

  if (sentTo) {
    return (
      <AuthCard
        icon={<MailCheck />}
        title="Check your inbox"
        description={
          <>
            We sent a verification link to <span className="font-medium text-fg">{sentTo}</span>. Open it to activate your account — the link is valid for 24 hours.
          </>
        }
        footer={
          <>
            Wrong address?{" "}
            <button type="button" className="font-medium text-accent underline-offset-4 hover:underline" onClick={() => setSentTo(null)}>
              Edit and try again
            </button>
          </>
        }
      >
        <div className="space-y-3">
          <ResendVerification email={sentTo} initialCooldown={RESEND_COOLDOWN_S} className="w-full" />
          <Button asChild variant="ghost" className="w-full">
            <Link href="/login">Back to sign in</Link>
          </Button>
          <p className="text-center text-xs text-fg-subtle">Nothing after a minute? Check your spam folder or try resending.</p>
        </div>
      </AuthCard>
    );
  }

  return (
    <AuthCard
      title="Create your account"
      description="Free to use. You bring the API keys; we bring the workspace."
      footer={
        <>
          Already have an account?{" "}
          <Link href="/login" className="font-medium text-accent underline-offset-4 hover:underline">
            Sign in
          </Link>
        </>
      }
    >
      <form onSubmit={onSubmit} noValidate className="space-y-4">
        <FormError id="signup-error">{error}</FormError>
        <Field label="Name" htmlFor="signup-name" error={fieldErrors.name}>
          <Input id="signup-name" name="name" type="text" autoComplete="name" required maxLength={80} value={name} onChange={(e) => setName(e.target.value)} placeholder="Ada Lovelace" aria-invalid={!!fieldErrors.name || undefined} autoFocus />
        </Field>
        <Field label="Email" htmlFor="signup-email" error={fieldErrors.email}>
          <Input
            id="signup-email"
            name="email"
            type="email"
            inputMode="email"
            autoComplete="email"
            autoCapitalize="none"
            spellCheck={false}
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="you@company.com"
            aria-invalid={!!fieldErrors.email || undefined}
          />
        </Field>
        <Field label="Password" htmlFor="signup-password" error={fieldErrors.password}>
          <PasswordInput
            id="signup-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="signup-password-strength"
          />
          <PasswordStrength password={password} id="signup-password-strength" />
        </Field>
        <Button type="submit" size="lg" className="mt-2 w-full" loading={loading}>
          Create account
        </Button>
        <p className="text-center text-xs leading-5 text-fg-subtle">
          By creating an account you agree to the{" "}
          <Link href="/terms" className="underline underline-offset-4 hover:text-fg">
            Terms
          </Link>{" "}
          and{" "}
          <Link href="/privacy" className="underline underline-offset-4 hover:text-fg">
            Privacy Policy
          </Link>
          .
        </p>
      </form>
    </AuthCard>
  );
}