"use client";

import { useRouter, useSearchParams } from "next/navigation";
import { FormEvent, Suspense, useState } from "react";

type LoginFormProps = Readonly<{ portal?: "participant" | "admin"; buttonLabel?: string }>;

export function LoginForm(props: LoginFormProps) {
  return (
    <Suspense fallback={<LoginFormFallback buttonLabel={props.buttonLabel ?? "Sign In"} />}>
      <LoginFormFields {...props} />
    </Suspense>
  );
}

function LoginFormFields({ portal = "participant", buttonLabel = "Sign In" }: LoginFormProps) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [error, setError] = useState("");
  const [requiresTwoFactor, setRequiresTwoFactor] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError("");
    setIsSubmitting(true);
    const formData = new FormData(event.currentTarget);
    const response = await fetch("/api/v1/auth/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        email: formData.get("email"),
        password: formData.get("password"),
        twoFactorCode: formData.get("twoFactorCode"),
        redirect: searchParams.get("redirect"),
        portal
      })
    });
    const result = await response.json().catch(() => null) as { data?: { redirectTo?: string; requiresTwoFactor?: boolean }; error?: { message?: string } } | null;
    setIsSubmitting(false);
    if (response.ok && result?.data?.requiresTwoFactor) {
      setRequiresTwoFactor(true);
      setError("");
      return;
    }
    if (!response.ok) {
      setError(result?.error?.message ?? "Login failed. Please check your credentials.");
      return;
    }
    router.replace(result?.data?.redirectTo ?? "/");
    router.refresh();
  }

  return (
    <form className="auth-form" onSubmit={handleSubmit}>
      <label className="field">
        Email
        <input autoComplete="email" name="email" placeholder="name@example.com" required type="email" />
      </label>
      <label className="field">
        Password
        <input autoComplete="current-password" name="password" placeholder="Enter password" required type="password" />
      </label>
      {requiresTwoFactor ? (
        <label className="field">
          Authenticator Code
          <input autoComplete="one-time-code" inputMode="numeric" maxLength={6} name="twoFactorCode" pattern="[0-9]{6}" placeholder="123456" required type="text" />
        </label>
      ) : null}
      {error ? <p className="auth-error" role="alert">{error}</p> : null}
      <button className="button" disabled={isSubmitting} type="submit">{isSubmitting ? "Signing in..." : buttonLabel}</button>
    </form>
  );
}

function LoginFormFallback({ buttonLabel }: Readonly<{ buttonLabel: string }>) {
  return (
    <form className="auth-form">
      <label className="field">
        Email
        <input autoComplete="email" disabled name="email" placeholder="name@example.com" type="email" />
      </label>
      <label className="field">
        Password
        <input autoComplete="current-password" disabled name="password" placeholder="Enter password" type="password" />
      </label>
      <button className="button" disabled type="button">{buttonLabel}</button>
    </form>
  );
}