Auth Sso

"use client";

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

export interface AuthSsoProps {
  brand?: string;
  brandHref?: string;
  /** Email domains that have SSO configured, mapped to the IdP name. */
  ssoDomains?: Record<string, string>;
  onContinue?: (email: string, method: "sso" | "password") => void;
  className?: string;
}

function LedgerlyMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 28 28" className={cn("size-7 shrink-0", className)}>
      <rect width="28" height="28" rx="7" fill="var(--da-primary)" />
      <path d="M8 8v12h12" stroke="var(--da-primary-fg)" strokeWidth="2.6" fill="none" strokeLinecap="round" />
      <path d="M13 15h7M13 11h7" stroke="var(--da-primary-fg)" strokeWidth="2.2" strokeLinecap="round" opacity=".7" />
    </svg>
  );
}

/** Enterprise SSO sign-in: email-first step that detects the domain; SSO domains show the org + identity provider and a “Continue with Okta” button, others fall back to a password field. */
export function AuthSso({
  brand = "Ledgerly",
  brandHref = "/",
  ssoDomains = { "northwind.com": "Okta", "lumen.health": "Microsoft Entra ID", "parcel.io": "Google Workspace" },
  onContinue,
  className,
}: AuthSsoProps) {
  const id = useId();
  const [email, setEmail] = useState("priya@northwind.com");
  const [step, setStep] = useState<"email" | "checking" | "sso" | "password">("email");
  const domain = email.split("@")[1]?.toLowerCase() ?? "";
  const idp = ssoDomains[domain];
  const next = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (step === "email") {
      setStep("checking");
      setTimeout(() => setStep(idp ? "sso" : "password"), 600);
    } else if (step === "sso" || step === "password") onContinue?.(email, step);
  };
  const field =
    "da-stroke h-10 w-full rounded-da-md bg-da-surface px-3 text-sm shadow-da-sm outline-none focus:border-da-primary focus:ring-3 focus:ring-da-ring/25";
  return (
    <main className={cn("grid min-h-dvh place-items-center bg-da-bg px-4 py-12 text-da-fg", className)}>
      <div className="w-full max-w-sm">
        <a href={brandHref} className="da-focus flex w-fit items-center gap-2 rounded-da-sm font-da-display text-lg font-extrabold">
          <LedgerlyMark />
          {brand}
        </a>
        <h1 className="mt-10 font-da-display text-2xl font-extrabold tracking-da-display">Sign in with your work account</h1>
        <p className="mt-1.5 text-sm text-da-muted-fg">We’ll redirect you to your company’s identity provider if SSO is enabled.</p>
        <form onSubmit={next} className="mt-8 grid gap-4">
          <div className="grid gap-1.5">
            <label htmlFor={`${id}-e`} className="text-sm font-medium">
              Work email
            </label>
            <div className="flex gap-2">
              <input
                id={`${id}-e`}
                type="email"
                required
                autoComplete="email"
                value={email}
                readOnly={step !== "email"}
                onChange={(e) => setEmail(e.target.value)}
                className={cn(field, step !== "email" && "bg-da-surface-2 text-da-muted-fg")}
              />
              {step !== "email" && step !== "checking" && (
                <button
                  type="button"
                  onClick={() => setStep("email")}
                  aria-label="Change email"
                  className="da-focus da-stroke grid size-10 shrink-0 place-items-center rounded-da-md bg-da-surface hover:bg-da-surface-2"
                >
                  <ArrowLeft aria-hidden className="size-4" />
                </button>
              )}
            </div>
          </div>
          <div aria-live="polite">
            {step === "sso" && (
              <div className="da-stroke flex items-center gap-3 rounded-da-md bg-da-accent/60 p-3 text-sm transition-opacity duration-(--da-duration) starting:opacity-0">
                <Building2 aria-hidden className="size-5 text-da-accent-fg" />
                <p>
                  <span className="font-semibold">{domain}</span> uses single sign-on via <span className="font-semibold">{idp}</span>.
                </p>
              </div>
            )}
            {step === "password" && (
              <label className="grid gap-1.5 text-sm font-medium transition-opacity duration-(--da-duration) starting:opacity-0">
                Password
                <input type="password" required autoComplete="current-password" autoFocus className={field} />
              </label>
            )}
          </div>
          <button
            type="submit"
            disabled={step === "checking"}
            className="da-focus da-transition inline-flex h-10 items-center justify-center gap-2 rounded-da-md bg-da-primary text-sm font-semibold text-da-primary-fg hover:bg-da-primary/90 disabled:opacity-70"
          >
            {step === "checking" && <Loader2 aria-hidden className="size-4 animate-spin motion-reduce:animate-none" />}
            {step === "email" ? "Continue" : step === "checking" ? "Checking your domain…" : step === "sso" ? `Continue with ${idp}` : "Sign in"}
          </button>
        </form>
        <p className="mt-10 flex items-center gap-2 border-t border-da-border pt-6 text-xs text-da-muted-fg">
          <ShieldCheck aria-hidden className="size-4 text-da-success" /> SAML 2.0 &amp; OIDC · SCIM provisioning · Enforced MFA
        </p>
      </div>
    </main>
  );
}

export default AuthSso;