CIAgent/apps/web/app/verify-email/page.tsx

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { Suspense, useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { Loader2, MailCheck } from "lucide-react";
import { z } from "zod";
import { FormField } from "@/components/ui/form-field";
import { useCountdown } from "@/hooks/use-countdown";
import {
  authErrorMessage,
  retryAfterSeconds,
  useCurrentUser,
  useResendVerification,
  useVerifyEmail,
} from "@/hooks/use-auth";

const verifySchema = z.object({
  code: z
    .string()
    .length(6, "Enter the 6-digit code")
    .regex(/^\d{6}$/, "Digits only"),
});

type VerifyForm = z.infer<typeof verifySchema>;

function VerifyEmailCard() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const email = searchParams.get("email") ?? "";
  const verifyMutation = useVerifyEmail();
  const resendMutation = useResendVerification();
  const { data: currentUser } = useCurrentUser();
  const countdown = useCountdown();
  const [resent, setResent] = useState(false);
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<VerifyForm>({ resolver: zodResolver(verifySchema) });

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

  const onSubmit = handleSubmit(async (values) => {
    try {
      await verifyMutation.mutateAsync({ email, code: values.code });
      router.push("/login?verified=1");
    } catch {
      // Surfaced via verifyMutation.isError below - swallow here so a
      // wrong/expired code doesn't also trip Next's unhandled-rejection
      // dev overlay on top of the inline error message.
    }
  });

  const onResend = async () => {
    setResent(false);
    try {
      await resendMutation.mutateAsync({ email });
      setResent(true);
      countdown.start(30);
    } catch (error) {
      const retryAfter = retryAfterSeconds(error);
      if (retryAfter) countdown.start(retryAfter);
    }
  };

  return (
    <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">
            <MailCheck className="h-4.5 w-4.5" aria-hidden />
          </span>
          <div>
            <h1 className="text-xl font-semibold text-slate-900">Verify your email</h1>
            <p className="text-sm text-slate-600">
              {email ? (
                <>
                  We sent a 6-digit code to <span className="font-medium">{email}</span>.
                </>
              ) : (
                "Enter the 6-digit code we emailed you."
              )}
            </p>
          </div>
        </div>

        <form onSubmit={onSubmit} className="mt-6 space-y-4" noValidate>
          <FormField
            label="Verification code"
            inputMode="numeric"
            autoComplete="one-time-code"
            maxLength={6}
            placeholder="123456"
            {...register("code", {
              onChange: (e) => {
                e.target.value = e.target.value.replace(/\D/g, "").slice(0, 6);
              },
            })}
            error={errors.code?.message}
          />

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

          <button
            type="submit"
            disabled={verifyMutation.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"
          >
            {verifyMutation.isPending && <Loader2 className="h-4 w-4 animate-spin" aria-hidden />}
            {verifyMutation.isPending ? "Verifying…" : "Verify email"}
          </button>
        </form>

        <div className="mt-4 text-center text-sm text-slate-600">
          {resent && countdown.remaining === 0 && !resendMutation.isPending && (
            <p className="mb-2 animate-fade-in text-green-700">Code resent - check your inbox.</p>
          )}
          <button
            type="button"
            onClick={onResend}
            disabled={resendMutation.isPending || countdown.remaining > 0 || !email}
            className="focus-ring font-medium text-brand-600 transition-colors duration-150 hover:text-brand-700 disabled:cursor-not-allowed disabled:text-slate-400"
          >
            {countdown.remaining > 0
              ? `Resend in ${countdown.remaining}s`
              : resendMutation.isPending
                ? "Sending…"
                : "Resend code"}
          </button>
        </div>

        <p className="mt-6 text-center text-sm text-slate-600">
          <Link
            href="/login"
            className="font-medium text-brand-600 transition-colors duration-150 hover:text-brand-700"
          >
            Back to sign in
          </Link>
        </p>
      </div>
    </div>
  );
}

export default function VerifyEmailPage() {
  return (
    <main className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-12">
      <Suspense fallback={null}>
        <VerifyEmailCard />
      </Suspense>
    </main>
  );
}