CIAgent/apps/web/app/register/page.tsx

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { Loader2, UserPlus } from "lucide-react";
import { z } from "zod";
import { FormField } from "@/components/ui/form-field";
import { PasswordField } from "@/components/ui/password-field";
import { PasswordStrengthMeter } from "@/components/ui/password-strength-meter";
import { TurnstileWidget, type TurnstileWidgetHandle } from "@/components/ui/turnstile-widget";
import { authErrorMessage, useCurrentUser, useRegister, useSystemStatus } from "@/hooks/use-auth";

const registerSchema = z.object({
  displayName: z.string().min(1, "Enter your name"),
  email: z.string().email("Enter a valid email address"),
  password: z
    .string()
    .min(10, "Must be at least 10 characters")
    .refine((v) => /[a-zA-Z]/.test(v) && /\d/.test(v), {
      message: "Must contain at least one letter and one digit",
    }),
});

type RegisterForm = z.infer<typeof registerSchema>;

export default function RegisterPage() {
  const router = useRouter();
  const registerMutation = useRegister();
  const { data: currentUser } = useCurrentUser();
  const { data: status } = useSystemStatus();
  const turnstileRef = useRef<TurnstileWidgetHandle>(null);
  const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<RegisterForm>({ resolver: zodResolver(registerSchema) });

  // Mirrors the backend's turnstile_required(is_localhost, settings) gate -
  // skipped on loopback regardless of auth mode.
  const turnstileRequired = status ? !status.is_localhost : false;

  useEffect(() => {
    if (currentUser) {
      router.replace("/dashboard");
    }
  }, [currentUser, router]);

  const onSubmit = handleSubmit(async (values) => {
    try {
      await registerMutation.mutateAsync({
        email: values.email,
        password: values.password,
        display_name: values.displayName,
        turnstile_token: turnstileToken ?? undefined,
      });
      router.push(`/verify-email?email=${encodeURIComponent(values.email)}`);
    } catch {
      // Surfaced via registerMutation.isError below.
    } finally {
      // Tokens are single-use - always reset after a submit attempt,
      // success or failure, so a retry never reuses a stale token.
      turnstileRef.current?.reset();
      setTurnstileToken(null);
    }
  });

  return (
    <main className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-12">
      <div className="w-full max-w-sm animate-fade-in overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
        <div className="h-1.5 bg-gradient-to-r from-brand-500 via-brand-600 to-brand-700" />
        <div className="p-8">
          <div className="flex items-center gap-3">
            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-50 text-brand-600">
              <UserPlus className="h-4.5 w-4.5" aria-hidden />
            </span>
            <div>
              <h1 className="text-xl font-semibold text-slate-900">Create your account</h1>
              <p className="text-sm text-slate-600">Start monitoring your competitors.</p>
            </div>
          </div>

          <form onSubmit={onSubmit} className="mt-6 space-y-4" noValidate>
            <FormField
              label="Full name"
              type="text"
              autoComplete="name"
              {...register("displayName")}
              error={errors.displayName?.message}
            />
            <FormField
              label="Email"
              type="email"
              autoComplete="email"
              {...register("email")}
              error={errors.email?.message}
            />
            <div>
              <PasswordField
                label="Password"
                autoComplete="new-password"
                hint="At least 10 characters, with a letter and a digit."
                {...register("password")}
                error={errors.password?.message}
              />
              <PasswordStrengthMeter password={watch("password") ?? ""} />
            </div>

            {turnstileRequired && (
              <TurnstileWidget
                ref={turnstileRef}
                siteKey={status?.turnstile_site_key}
                onToken={setTurnstileToken}
              />
            )}

            {registerMutation.isError && (
              <p className="animate-fade-in text-sm text-red-600" role="alert">
                {authErrorMessage(registerMutation.error)}
              </p>
            )}

            <button
              type="submit"
              disabled={registerMutation.isPending}
              className="focus-ring inline-flex w-full items-center justify-center gap-2 rounded-md bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition-colors duration-200 hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-60"
            >
              {registerMutation.isPending && (
                <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
              )}
              {registerMutation.isPending ? "Creating account…" : "Create account"}
            </button>
          </form>

          <p className="mt-6 text-center text-sm text-slate-600">
            Already have an account?{" "}
            <Link
              href="/login"
              className="font-medium text-brand-600 transition-colors duration-150 hover:text-brand-700"
            >
              Sign in
            </Link>
          </p>
        </div>
      </div>
    </main>
  );
}