Auth Screen

"use client";

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

export interface AuthScreenProps {
  brand?: string;
  brandHref?: string;
  title?: string;
  subtitle?: string;
  /** Called with the email; resolve to show the "check your inbox" state. */
  onEmailSubmit?: (email: string) => void | Promise<void>;
  onProvider?: (provider: "google" | "github" | "sso") => void;
  error?: string;
  legal?: { termsHref: string; privacyHref: string };
  className?: string;
}

export function AuthScreen({
  brand = "Tracewise",
  brandHref = "/",
  title = "Log in to Tracewise",
  subtitle = "Welcome back. Use your work account to continue.",
  onEmailSubmit,
  onProvider,
  error,
  legal = { termsHref: "#terms", privacyHref: "#privacy" },
  className,
}: AuthScreenProps) {
  const [step, setStep] = useState<"choose" | "email" | "sent">("choose");
  const [email, setEmail] = useState("");
  const [pending, setPending] = useState(false);
  const emailId = useId();
  const errorId = useId();

  async function submit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setPending(true);
    try {
      await onEmailSubmit?.(email);
      setStep("sent");
    } finally {
      setPending(false);
    }
  }

  const providerBtn =
    "da-focus da-transition da-stroke flex h-10 w-full items-center justify-center gap-2.5 rounded-da-md bg-da-surface text-sm font-medium text-da-surface-fg shadow-da-sm hover:bg-da-muted";

  return (
    <div className={cn("relative isolate flex min-h-full flex-col items-center justify-center bg-da-bg px-4 py-16 text-da-fg", className)}>
      <div aria-hidden className="absolute inset-x-0 top-0 -z-10 h-72 [background:radial-gradient(ellipse_50%_60%_at_50%_0%,color-mix(in_oklab,var(--da-primary)_14%,transparent),transparent)]" />

      <a href={brandHref} className="da-focus mb-10 grid size-10 place-items-center rounded-da-md bg-da-fg text-da-bg shadow-da-md" aria-label={`${brand} home`}>
        <svg aria-hidden viewBox="0 0 24 24" className="size-5" fill="none">
          <path d="M3 12h4l2.5-6 5 12 2.5-6H21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>

      <div className="w-full max-w-[340px] text-center">
        {step === "sent" ? (
          <div role="status">
            <span className="mx-auto grid size-10 place-items-center rounded-full bg-da-accent text-da-accent-fg">
              <Mail aria-hidden className="size-4" />
            </span>
            <h1 className="mt-5 text-xl font-semibold tracking-tight">Check your email</h1>
            <p className="mt-2 text-sm text-da-muted-fg">
              We sent a login link to <span className="font-medium text-da-fg">{email}</span>. It expires in 10 minutes.
            </p>
            <button type="button" onClick={() => setStep("email")} className="da-focus mt-6 rounded-da-sm text-sm text-da-muted-fg hover:text-da-fg">
              Use a different email
            </button>
          </div>
        ) : (
          <>
            <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
            <p className="mt-2 text-sm text-da-muted-fg">{subtitle}</p>

            <div className="mt-8 flex flex-col gap-2.5">
              {step === "choose" ? (
                <>
                  <button type="button" className={providerBtn} onClick={() => onProvider?.("google")}>
                    <svg aria-hidden viewBox="0 0 24 24" className="size-4">
                      <path fill="#4285F4" d="M23.5 12.3c0-.8-.1-1.6-.2-2.3H12v4.5h6.5a5.6 5.6 0 0 1-2.4 3.6v3h3.9c2.2-2.1 3.5-5.1 3.5-8.8Z" />
                      <path fill="#34A853" d="M12 24c3.2 0 6-1.1 8-2.9l-3.9-3c-1.1.7-2.5 1.2-4.1 1.2-3.1 0-5.8-2.1-6.7-5H1.3v3.1A12 12 0 0 0 12 24Z" />
                      <path fill="#FBBC05" d="M5.3 14.3a7.2 7.2 0 0 1 0-4.6V6.6H1.3a12 12 0 0 0 0 10.8l4-3.1Z" />
                      <path fill="#EA4335" d="M12 4.8c1.8 0 3.3.6 4.6 1.8l3.4-3.4A12 12 0 0 0 1.3 6.6l4 3.1c.9-2.9 3.6-4.9 6.7-4.9Z" />
                    </svg>
                    Continue with Google
                  </button>
                  <button type="button" className={providerBtn} onClick={() => setStep("email")}>
                    <Mail aria-hidden className="size-4" />
                    Continue with email
                  </button>
                  <button type="button" className={cn(providerBtn, "bg-transparent shadow-none [--da-border:transparent]")} onClick={() => onProvider?.("sso")}>
                    Continue with SAML SSO
                  </button>
                </>
              ) : (
                <form onSubmit={submit} className="flex flex-col gap-2.5 text-left" aria-describedby={error ? errorId : undefined}>
                  <label htmlFor={emailId} className="sr-only">
                    Work email
                  </label>
                  <input
                    id={emailId}
                    type="email"
                    required
                    autoFocus
                    autoComplete="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="Enter your work email…"
                    aria-invalid={error ? true : undefined}
                    className="da-focus da-stroke h-10 rounded-da-md bg-da-input px-3 text-sm shadow-da-sm placeholder:text-da-muted-fg"
                  />
                  {error && (
                    <p id={errorId} role="alert" className="text-[13px] text-da-danger">
                      {error}
                    </p>
                  )}
                  <button
                    type="submit"
                    disabled={pending}
                    className="da-focus da-transition h-10 rounded-da-md bg-da-primary text-sm font-medium text-da-primary-fg hover:bg-da-primary/90 disabled:opacity-60"
                  >
                    {pending ? "Sending link…" : "Continue with email"}
                  </button>
                  <button
                    type="button"
                    onClick={() => setStep("choose")}
                    className="da-focus mt-2 inline-flex items-center justify-center gap-1.5 self-center rounded-da-sm text-[13px] text-da-muted-fg hover:text-da-fg"
                  >
                    <ArrowLeft aria-hidden className="size-3.5" /> Back to login options
                  </button>
                </form>
              )}
            </div>
          </>
        )}
        <p className="mt-10 text-xs leading-relaxed text-da-muted-fg">
          By continuing you agree to our{" "}
          <a href={legal.termsHref} className="da-focus rounded-[2px] underline underline-offset-2 hover:text-da-fg">
            Terms
          </a>{" "}
          and{" "}
          <a href={legal.privacyHref} className="da-focus rounded-[2px] underline underline-offset-2 hover:text-da-fg">
            Privacy Policy
          </a>
          .
        </p>
      </div>
    </div>
  );
}

export default AuthScreen;