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

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { Suspense, useEffect, useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { Loader2, ShieldCheck } from "lucide-react";
import { z } from "zod";
import { FormField } from "@/components/ui/form-field";
import { PasswordField } from "@/components/ui/password-field";
import { TurnstileWidget, type TurnstileWidgetHandle } from "@/components/ui/turnstile-widget";
import { useCountdown } from "@/hooks/use-countdown";
import { classifyLoginError, useCurrentUser, useLogin, useSystemStatus } from "@/hooks/use-auth";

const loginSchema = z.object({
  email: z.string().email("Enter a valid email address"),
  password: z.string().min(1, "Enter your password"),
});

type LoginForm = z.infer<typeof loginSchema>;

function LoginFormCard() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const loginMutation = useLogin();
  const { data: currentUser } = useCurrentUser();
  const { data: status } = useSystemStatus();
  const turnstileRef = useRef<TurnstileWidgetHandle>(null);
  const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
  const countdown = useCountdown();
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginForm>({ resolver: zodResolver(loginSchema) });

  // 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 loginMutation.mutateAsync({
        ...values,
        turnstile_token: turnstileToken ?? undefined,
      });
      router.push("/dashboard");
    } catch (error) {
      const failure = classifyLoginError(error);
      if (failure.kind === "verify_email") {
        router.push(`/verify-email?email=${encodeURIComponent(values.email)}`);
        return;
      }
      if (failure.retryAfterSeconds) {
        countdown.start(failure.retryAfterSeconds);
      }
    } 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);
    }
  });

  const failure = loginMutation.isError ? classifyLoginError(loginMutation.error) : null;

  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">
            <ShieldCheck className="h-4.5 w-4.5" aria-hidden />
          </span>
          <div>
            <h1 className="text-xl font-semibold text-slate-900">Sign in</h1>
            <p className="text-sm text-slate-600">Welcome back to CI Agent.</p>
          </div>
        </div>

        {searchParams.get("registered") && (
          <p className="mt-4 animate-fade-in rounded-md bg-green-50 px-3 py-2 text-sm text-green-700">
            Account created. Sign in below.
          </p>
        )}
        {searchParams.get("verified") && (
          <p className="mt-4 animate-fade-in rounded-md bg-green-50 px-3 py-2 text-sm text-green-700">
            Email verified. Sign in below.
          </p>
        )}
        {searchParams.get("reset") && (
          <p className="mt-4 animate-fade-in rounded-md bg-green-50 px-3 py-2 text-sm text-green-700">
            Password reset. Sign in with your new password.
          </p>
        )}

        <form onSubmit={onSubmit} className="mt-6 space-y-4" noValidate>
          <FormField
            label="Email"
            type="email"
            autoComplete="email"
            {...register("email")}
            error={errors.email?.message}
          />
          <PasswordField
            label="Password"
            autoComplete="current-password"
            {...register("password")}
            error={errors.password?.message}
          />

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

          {failure && (
            <div className="animate-fade-in space-y-1 text-sm text-red-600" role="alert">
              <p>{failure.message}</p>
              {failure.kind === "account_locked" && (
                <Link href="/forgot-password" className="font-medium underline">
                  Reset your password to unlock it
                </Link>
              )}
              {failure.kind === "banned" && (
                <Link href="/unban-request" className="font-medium underline">
                  Request an unban
                </Link>
              )}
            </div>
          )}

          <button
            type="submit"
            disabled={loginMutation.isPending || countdown.remaining > 0}
            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"
          >
            {loginMutation.isPending && <Loader2 className="h-4 w-4 animate-spin" aria-hidden />}
            {countdown.remaining > 0
              ? `Try again in ${countdown.remaining}s`
              : loginMutation.isPending
                ? "Signing in…"
                : "Sign in"}
          </button>
        </form>

        <p className="mt-4 text-center text-sm">
          <Link
            href="/forgot-password"
            className="font-medium text-brand-600 transition-colors duration-150 hover:text-brand-700"
          >
            Forgot your password?
          </Link>
        </p>

        <p className="mt-6 text-center text-sm text-slate-600">
          Don&apos;t have an account?{" "}
          <Link
            href="/register"
            className="font-medium text-brand-600 transition-colors duration-150 hover:text-brand-700"
          >
            Create one
          </Link>
        </p>
      </div>
    </div>
  );
}

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