"use client";

import { useState } from "react";
import Link from "next/link";
import { register } from "@/lib/api/auth";
import { AuthCard, Field, FormAlert, PasswordField, Submit, readError, type FieldErrors } from "./Form";
import GoogleButton from "./GoogleButton";
import VerifyEmail from "./VerifyEmail";
import { useFinish, useNextQuery } from "./useFinish";

export default function RegisterForm() {
  const finish = useFinish();
  const q = useNextQuery();
  const [f, setF] = useState({ first_name: "", last_name: "", email: "", password: "", password_confirmation: "" });
  const [busy, setBusy] = useState(false);
  const [errors, setErrors] = useState<FieldErrors>({});
  const [message, setMessage] = useState<string | null>(null);
  const [verifyFor, setVerifyFor] = useState<string | null>(null);

  const set = (k: keyof typeof f) => (v: string) => {
    setF((p) => ({ ...p, [k]: v }));
    setErrors(({ [k]: _drop, ...rest }) => rest);
  };

  // Catch the two mistakes people make most before a round trip; the server still validates everything.
  const local = (): FieldErrors => {
    const e: FieldErrors = {};
    if (f.password && f.password.length < 8) e.password = ["Use at least 8 characters."];
    if (f.password_confirmation && f.password_confirmation !== f.password) e.password_confirmation = ["The passwords do not match."];
    return e;
  };

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    const pre = local();
    if (Object.keys(pre).length) return setErrors(pre);
    setBusy(true);
    setErrors({});
    setMessage(null);
    try {
      await register({ ...f, email: f.email.trim(), first_name: f.first_name.trim(), last_name: f.last_name.trim() });
      setVerifyFor(f.email.trim());
    } catch (err) {
      const r = readError(err);
      setErrors(r.fields);
      setMessage(r.message);
    } finally {
      setBusy(false);
    }
  };

  if (verifyFor) {
    return (
      <AuthCard title="Verify your email">
        <VerifyEmail email={verifyFor} onVerified={finish} />
      </AuthCard>
    );
  }

  return (
    <AuthCard title="Create your account" lead="Save places, build trips and share reviews.">
      <form className="acct-form" onSubmit={submit} noValidate>
        <div className="acct-row">
          <Field label="First name" value={f.first_name} onChange={set("first_name")} error={errors.first_name} autoComplete="given-name" required autoFocus />
          <Field label="Last name" value={f.last_name} onChange={set("last_name")} error={errors.last_name} autoComplete="family-name" required />
        </div>
        <Field label="Email" type="email" value={f.email} onChange={set("email")} error={errors.email} autoComplete="email" required />
        <PasswordField label="Password" value={f.password} onChange={set("password")} error={errors.password} hint="At least 8 characters." autoComplete="new-password" required onBlur={() => setErrors((e) => ({ ...e, ...local() }))} />
        <PasswordField label="Confirm password" value={f.password_confirmation} onChange={set("password_confirmation")} error={errors.password_confirmation} autoComplete="new-password" required onBlur={() => setErrors((e) => ({ ...e, ...local() }))} />
        {message && <FormAlert>{message}</FormAlert>}
        <Submit busy={busy}>Create account</Submit>
      </form>
      <GoogleButton onSignedIn={finish} />
      <p className="acct-alt">
        Already have an account?{" "}
        <Link className="acct-link" href={`/login${q}`}>
          Sign in
        </Link>
      </p>
    </AuthCard>
  );
}