Auth Sso

"use client";

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

export interface AuthSsoProvider {
  id: string;
  label: string;
  icon: ReactNode;
}

export interface AuthSsoProps {
  title?: string;
  subtitle?: string;
  providers?: AuthSsoProvider[];
  onProvider?: (id: string) => void;
  /** Called with the work email for SAML discovery. */
  onSaml?: (email: string) => void | Promise<void>;
  legal?: ReactNode;
  className?: string;
}

/* Brand marks: decorative data, hard-coded colors allowed (see notes). */
const GoogleIcon = (
  <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.4h6.5a5.6 5.6 0 0 1-2.4 3.6v3h3.9c2.2-2.1 3.5-5.1 3.5-8.7Z" />
    <path fill="#34A853" d="M12 24c3.2 0 6-1.1 7.9-2.9l-3.9-3a7.2 7.2 0 0 1-10.7-3.8H1.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.1A7.2 7.2 0 0 1 12 4.8Z" />
  </svg>
);
const GithubIcon = (
  <svg aria-hidden viewBox="0 0 24 24" className="size-4" fill="currentColor">
    <path d="M12 .5a11.5 11.5 0 0 0-3.6 22.4c.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-1.3-1.7-1.3-1.7-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.4 1 .1-.8.4-1.3.8-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.2 1.2a11 11 0 0 1 5.8 0c2.2-1.5 3.2-1.2 3.2-1.2.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A11.5 11.5 0 0 0 12 .5Z" />
  </svg>
);
const MicrosoftIcon = (
  <svg aria-hidden viewBox="0 0 24 24" className="size-4">
    <path fill="#F25022" d="M1 1h10.5v10.5H1z" />
    <path fill="#7FBA00" d="M12.5 1H23v10.5H12.5z" />
    <path fill="#00A4EF" d="M1 12.5h10.5V23H1z" />
    <path fill="#FFB900" d="M12.5 12.5H23V23H12.5z" />
  </svg>
);

/** SSO-first sign-in card: Google / GitHub / Microsoft buttons, divider, then SAML discovery by work email. */
export function AuthSso({
  title = "Sign in to Tracewise",
  subtitle = "Use your company identity provider.",
  providers = [
    { id: "google", label: "Continue with Google", icon: GoogleIcon },
    { id: "github", label: "Continue with GitHub", icon: GithubIcon },
    { id: "microsoft", label: "Continue with Microsoft", icon: MicrosoftIcon },
  ],
  onProvider,
  onSaml,
  legal = (
    <>
      By continuing you agree to the{" "}
      <a href="#terms" className="da-focus rounded-da-sm underline underline-offset-2 hover:text-da-fg">
        Terms
      </a>{" "}
      and{" "}
      <a href="#privacy" className="da-focus rounded-da-sm underline underline-offset-2 hover:text-da-fg">
        Privacy Policy
      </a>
      .
    </>
  ),
  className,
}: AuthSsoProps) {
  const id = useId();
  const [pending, setPending] = useState(false);
  const [message, setMessage] = useState("");

  const submit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const email = String(new FormData(e.currentTarget).get("email"));
    setPending(true);
    try {
      await onSaml?.(email);
      setMessage(`Redirecting to the identity provider for ${email.split("@")[1] ?? "your domain"}…`);
    } finally {
      setPending(false);
    }
  };

  return (
    <div className={cn("grid min-h-dvh place-items-center bg-da-surface-2 px-4 py-12 text-da-fg", className)}>
      <main className="w-full max-w-sm">
        <div className="da-stroke rounded-da-lg bg-da-surface p-6 text-da-surface-fg shadow-da-md sm:p-8">
          <span aria-hidden className="grid size-10 place-items-center rounded-da-md bg-da-accent text-da-accent-fg">
            <KeyRound className="size-5" />
          </span>
          <h1 className="mt-5 text-xl font-semibold tracking-da-display">{title}</h1>
          <p className="mt-1 text-sm text-da-muted-fg">{subtitle}</p>
          <div className="mt-6 grid gap-2">
            {providers.map((p) => (
              <button
                key={p.id}
                type="button"
                onClick={() => onProvider?.(p.id)}
                className="da-focus da-transition da-stroke flex h-10 items-center justify-center gap-2.5 rounded-da-md bg-da-surface text-sm font-medium hover:bg-da-muted"
              >
                {p.icon}
                {p.label}
              </button>
            ))}
          </div>
          <div className="my-6 flex items-center gap-3 text-[12px] text-da-muted-fg">
            <span className="h-px flex-1 bg-da-border" />
            or use SAML SSO
            <span className="h-px flex-1 bg-da-border" />
          </div>
          <form onSubmit={submit} className="grid gap-2">
            <label htmlFor={`${id}-email`} className="text-[13px] font-medium">
              Work email
            </label>
            <div className="flex gap-2">
              <input
                id={`${id}-email`}
                name="email"
                type="email"
                required
                autoComplete="email"
                placeholder="you@company.com"
                className="da-focus h-10 min-w-0 flex-1 rounded-da-md border border-da-border bg-da-input px-3 text-sm placeholder:text-da-muted-fg"
              />
              <button
                type="submit"
                disabled={pending}
                aria-label="Continue with SAML"
                className="da-focus da-transition grid size-10 shrink-0 place-items-center rounded-da-md bg-da-fg text-da-bg hover:bg-da-fg/85 disabled:opacity-60"
              >
                <ArrowRight aria-hidden className="size-4" />
              </button>
            </div>
            <p role="status" className="min-h-5 text-[12px] text-da-muted-fg">
              {message}
            </p>
          </form>
        </div>
        <p className="mt-6 text-center text-[12px] text-da-muted-fg">{legal}</p>
      </main>
    </div>
  );
}

export default AuthSso;