import { redirect } from "next/navigation";
import Link from "next/link";
import { getCurrentUser } from "@/lib/auth";
import { registerAction } from "@/app/register/actions";
import { ANNUAL_FEE_USD } from "@/lib/payments";

const inputCls =
  "w-full rounded-md border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-neutral-900 dark:text-neutral-200 focus:border-neutral-500 focus:dark:border-neutral-400 focus:outline-none";

export default async function RegisterPage(props: PageProps<"/register">) {
  const sp = await props.searchParams;
  const error = typeof sp.error === "string" ? sp.error : null;

  const user = await getCurrentUser();
  if (user) redirect("/account");

  return (
    <div className="mx-auto max-w-sm space-y-6">
      <div>
        <h1 className="text-2xl font-semibold">Create a Breeder Account</h1>
        <p className="mt-1 text-sm text-neutral-700 dark:text-neutral-300">
          ${ANNUAL_FEE_USD}/year. Lets you register horses you own or breed, keep their records up to date, and
          transfer them to other breeders. You&apos;ll pick a payment method after this step.
        </p>
      </div>
      {error && (
        <p className="rounded-md border border-red-300 dark:border-red-700 bg-red-50 dark:bg-red-950 px-3 py-2 text-sm text-red-800 dark:text-red-300">{error}</p>
      )}
      <form action={registerAction} className="space-y-3">
        <div>
          <label className="mb-1 block text-sm font-medium text-neutral-800 dark:text-neutral-300">Full Name</label>
          <input name="name" required autoFocus className={inputCls} />
        </div>
        <div>
          <label className="mb-1 block text-sm font-medium text-neutral-800 dark:text-neutral-300">Email</label>
          <input type="email" name="email" required className={inputCls} />
        </div>
        <div>
          <label className="mb-1 block text-sm font-medium text-neutral-800 dark:text-neutral-300">Password</label>
          <input type="password" name="password" required minLength={8} className={inputCls} />
        </div>
        <div>
          <label className="mb-1 block text-sm font-medium text-neutral-800 dark:text-neutral-300">Confirm Password</label>
          <input type="password" name="confirmPassword" required minLength={8} className={inputCls} />
        </div>
        <button type="submit" className="w-full rounded-md bg-neutral-900 dark:bg-neutral-100 dark:text-neutral-900 px-4 py-2 text-sm font-medium text-white hover:bg-neutral-800 dark:hover:bg-neutral-200">
          Create Account
        </button>
      </form>
      <p className="text-sm text-neutral-600 dark:text-neutral-400">
        Already have an account? <Link href="/login" className="underline">Log in</Link>
      </p>
    </div>
  );
}