Auth Magic

"use client";

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

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

function FrameMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 24 24" className={cn("size-6 shrink-0", className)}>
      <rect x="1" y="1" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" />
      <path d="M7 1v22M1 7h22" stroke="currentColor" strokeWidth="2" />
      <rect x="15" y="15" width="4" height="4" fill="var(--da-accent)" />
    </svg>
  );
}

/** Passwordless: a huge “Enter your email” prompt with a single oversized underline input and ↵ button; after submit, a large confirmation with the address and a mono resend link. */
export function AuthMagic({ brand = "Frame", 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("flex min-h-dvh flex-col bg-da-bg px-6 py-8 text-da-fg sm:px-12", className)}>
      <a href={brandHref} className="da-focus flex w-fit items-center gap-2.5 rounded-da-sm font-da-display text-lg font-semibold tracking-da-display">
        <FrameMark />
        {brand}
      </a>
      <div className="my-auto w-full max-w-3xl py-16">
        {sent ? (
          <div role="status">
            <p className="font-da-mono text-[11px] tracking-da-label text-da-muted-fg uppercase">(02) Check your inbox</p>
            <h1 className="mt-4 font-da-display text-[clamp(2.25rem,6vw,4.5rem)] leading-[0.95] font-medium tracking-da-display break-words">
              Link sent to <span className="underline decoration-da-accent decoration-4 underline-offset-8">{email}</span>
            </h1>
            <div className="mt-10 flex gap-6 font-da-mono text-[11px] tracking-da-label uppercase">
              <button type="button" onClick={() => onSend?.(email)} className="da-focus rounded-da-sm hover:underline">
                Resend
              </button>
              <button type="button" onClick={() => setSent(false)} className="da-focus rounded-da-sm text-da-muted-fg hover:text-da-fg hover:underline">
                Use another email
              </button>
            </div>
          </div>
        ) : (
          <form onSubmit={submit}>
            <p className="font-da-mono text-[11px] tracking-da-label text-da-muted-fg uppercase">(01) Log in or sign up</p>
            <label htmlFor={id} className="mt-4 block font-da-display text-[clamp(2.25rem,6vw,4.5rem)] leading-[0.95] font-medium tracking-da-display">
              Enter your email
            </label>
            <div className="mt-10 flex items-center border-b-2 border-da-border-strong">
              <input
                id={id}
                type="email"
                required
                autoComplete="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="you@studio.com"
                className="h-16 min-w-0 flex-1 bg-transparent text-[clamp(1.25rem,3vw,2rem)] outline-none placeholder:text-da-muted-fg"
              />
              <button
                type="submit"
                aria-label="Send login link"
                className="da-focus grid size-12 place-items-center rounded-da-sm bg-da-primary text-xl text-da-primary-fg hover:opacity-85"
              >
                ↵
              </button>
            </div>
            <p className="mt-4 text-sm text-da-muted-fg">We’ll email you a one-time link. No password needed.</p>
          </form>
        )}
      </div>
    </main>
  );
}

export default AuthMagic;