Auth Magic

"use client";

import { useId, useState, type FormEvent } from "react";
import { MailOpen } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AuthMagicProps {
  brand?: string;
  brandHref?: string;
  onSend?: (email: string) => void;
  className?: string;
}

function GroveMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 32 32" className={cn("size-8 shrink-0", className)}>
      <circle cx="16" cy="16" r="16" fill="var(--da-primary)" />
      <path d="M16 25V13" stroke="var(--da-primary-fg)" strokeWidth="2" strokeLinecap="round" />
      <path d="M16 17c-4 0-6.5-2.6-6.5-6.5 4 0 6.5 2.6 6.5 6.5Z" fill="var(--da-primary-fg)" opacity=".85" />
      <path d="M16 14c3.6 0 6-2.3 6-6-3.6 0-6 2.3-6 6Z" fill="var(--da-primary-fg)" />
    </svg>
  );
}

/** Passwordless sign-in: one rounded email field and “Send me a link”, then a gentle sent state with an open-envelope in a sage circle, the address, resend and change-email links. */
export function AuthMagic({ brand = "Grove", brandHref = "/", onSend, className }: AuthMagicProps) {
  const id = useId();
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  const submit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    onSend?.(email);
    setSent(true);
  };
  return (
    <main className={cn("grid min-h-dvh place-items-center bg-da-surface-2 px-4 py-12 text-da-fg", className)}>
      <div className="w-full max-w-md text-center">
        <a href={brandHref} className="da-focus inline-flex items-center gap-2.5 rounded-da-pill font-da-display text-2xl">
          <GroveMark />
          {brand}
        </a>
        <div className="mt-10 rounded-da-lg bg-da-surface p-8 text-da-surface-fg shadow-da-md sm:p-10">
          {sent ? (
            <div role="status" className="transition-opacity duration-(--da-duration-slow) starting:opacity-0">
              <span aria-hidden className="mx-auto grid size-20 place-items-center rounded-full bg-da-accent text-da-accent-fg">
                <MailOpen className="size-9" />
              </span>
              <h1 className="mt-6 font-da-display text-3xl">Check your inbox</h1>
              <p className="mt-2 text-da-muted-fg">
                We sent a sign-in link to <strong className="font-medium text-da-fg">{email}</strong>. It’s valid for 15 minutes.
              </p>
              <div className="mt-8 flex justify-center gap-5 text-sm">
                <button
                  type="button"
                  onClick={() => onSend?.(email)}
                  className="da-focus rounded-da-sm font-medium text-da-primary underline underline-offset-4"
                >
                  Resend link
                </button>
                <button type="button" onClick={() => setSent(false)} className="da-focus rounded-da-sm text-da-muted-fg underline underline-offset-4">
                  Use another email
                </button>
              </div>
            </div>
          ) : (
            <>
              <h1 className="font-da-display text-3xl">Sign in without a password</h1>
              <p className="mt-2 text-da-muted-fg">We’ll email you a magic link. One less thing to remember.</p>
              <form onSubmit={submit} className="mt-8 grid gap-3 text-left">
                <label htmlFor={id} className="font-medium">
                  Work email
                </label>
                <input
                  id={id}
                  type="email"
                  required
                  autoComplete="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="you@company.com"
                  className="h-13 rounded-da-pill bg-da-surface-2 px-5 text-lg outline-none placeholder:text-da-muted-fg focus:bg-da-surface focus:ring-3 focus:ring-da-ring"
                />
                <button
                  type="submit"
                  className="da-focus mt-2 h-13 rounded-da-pill bg-da-primary text-lg font-medium text-da-primary-fg hover:bg-da-primary/90"
                >
                  Send me a link
                </button>
              </form>
            </>
          )}
        </div>
      </div>
    </main>
  );
}

export default AuthMagic;