CIAgent/apps/web/app/forgot-password/page.tsx

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import Link from "next/link";
import { useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { KeyRound, Loader2 } from "lucide-react";
import { z } from "zod";
import { FormField } from "@/components/ui/form-field";
import { TurnstileWidget, type TurnstileWidgetHandle } from "@/components/ui/turnstile-widget";
import { authErrorMessage, useRequestPasswordReset, useSystemStatus } from "@/hooks/use-auth";

const forgotSchema = z.object({
  email: z.string().email("Enter a valid email address"),
});

type ForgotForm = z.infer<typeof forgotSchema>;

export default function ForgotPasswordPage() {
  const { data: status } = useSystemStatus();
  const resetMutation = useRequestPasswordReset();
  const turnstileRef = useRef<TurnstileWidgetHandle>(null);
  const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
  const [submittedEmail, setSubmittedEmail] = useState<string | null>(null);
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<ForgotForm>({ resolver: zodResolver(forgotSchema) });

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

  const onSubmit = handleSubmit(async (values) => {
    try {
      await resetMutation.mutateAsync({
        email: values.email,
        turnstile_token: turnstileToken ?? undefined,
      });
      setSubmittedEmail(values.email);
    } catch {
      // Surfaced via resetMutation.isError below.
    } finally {
      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">
              <KeyRound className="h-4.5 w-4.5" aria-hidden />
            </span>
            <div>
              <h1 className="text-xl font-semibold text-slate-900">Reset your password</h1>
              <p className="text-sm text-slate-600">We&apos;ll email you a code to reset it.</p>
            </div>
          </div>

          {submittedEmail ? (
            <div className="mt-6 animate-fade-in space-y-4">
              <p className="rounded-md bg-green-50 px-3 py-2 text-sm text-green-700">
                If an account exists for {submittedEmail}, a reset code is on its way.
              </p>
              <Link
                href={`/reset-password?email=${encodeURIComponent(submittedEmail)}`}
                className="focus-ring inline-flex w-full items-center justify-center rounded-md bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition-colors duration-200 hover:bg-brand-700"
              >
                I have a code
              </Link>
            </div>
          ) : (
            <form onSubmit={onSubmit} className="mt-6 space-y-4" noValidate>
              <FormField
                label="Email"
                type="email"
                autoComplete="email"
                {...register("email")}
                error={errors.email?.message}
              />

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

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

              <button
                type="submit"
                disabled={resetMutation.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"
              >
                {resetMutation.isPending && (
                  <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
                )}
                {resetMutation.isPending ? "Sending…" : "Send reset code"}
              </button>
            </form>
          )}

          <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>
    </main>
  );
}