Auth Split

"use client";

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

export interface AuthSplitProps {
  brand?: string;
  title?: string;
  subtitle?: string;
  /** Called on submit; throw to show an error. */
  onSubmit?: (values: { email: string; password: string }) => void | Promise<void>;
  quote?: { text: string; author: string; role: string };
  stats?: { value: string; label: string }[];
  signupHref?: string;
  forgotHref?: string;
  className?: string;
}

/** Split sign-in screen: form on the left (email, password with reveal, remember me), dark brand panel with a customer quote and stats on the right. */
export function AuthSplit({
  brand = "Tracewise",
  title = "Welcome back",
  subtitle = "Sign in to your workspace",
  onSubmit,
  quote = {
    text: "We cut our pages by 70% in the first month. On-call finally feels like a normal week.",
    author: "Priya Raman",
    role: "VP Engineering, Northwind",
  },
  stats = [
    { value: "2,400+", label: "teams" },
    { value: "99.99%", label: "delivery SLA" },
    { value: "4.2 min", label: "median MTTA" },
  ],
  signupHref = "#signup",
  forgotHref = "#forgot",
  className,
}: AuthSplitProps) {
  const id = useId();
  const [show, setShow] = useState(false);
  const [pending, setPending] = useState(false);
  const [error, setError] = useState("");

  const submit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    setPending(true);
    setError("");
    try {
      await onSubmit?.({ email: String(data.get("email")), password: String(data.get("password")) });
    } catch {
      setError("Incorrect email or password.");
    } finally {
      setPending(false);
    }
  };

  const field =
    "da-focus da-transition h-10 w-full rounded-da-md border border-da-border bg-da-input px-3 text-sm placeholder:text-da-muted-fg hover:border-da-border-strong";

  return (
    <div className={cn("grid min-h-dvh bg-da-bg text-da-fg lg:grid-cols-2", className)}>
      <main className="flex flex-col px-6 py-8 sm:px-12">
        <p className="flex items-center gap-2 text-[15px] font-semibold">
          <span aria-hidden className="grid size-6 place-items-center rounded-da-sm bg-da-primary text-[11px] font-bold text-da-primary-fg">
            {brand[0]}
          </span>
          {brand}
        </p>
        <div className="mx-auto my-auto w-full max-w-sm py-12">
          <h1 className="text-2xl font-semibold tracking-da-display">{title}</h1>
          <p className="mt-1.5 text-sm text-da-muted-fg">{subtitle}</p>
          <form onSubmit={submit} className="mt-8 grid gap-4" aria-describedby={error ? `${id}-err` : undefined}>
            <div className="grid gap-1.5">
              <label htmlFor={`${id}-email`} className="text-[13px] font-medium">
                Work email
              </label>
              <input id={`${id}-email`} name="email" type="email" required autoComplete="email" placeholder="maya@acme.io" className={field} />
            </div>
            <div className="grid gap-1.5">
              <div className="flex items-center justify-between">
                <label htmlFor={`${id}-pw`} className="text-[13px] font-medium">
                  Password
                </label>
                <a href={forgotHref} className="da-focus rounded-da-sm text-[12px] text-da-muted-fg hover:text-da-fg">
                  Forgot password?
                </a>
              </div>
              <div className="relative">
                <input
                  id={`${id}-pw`}
                  name="password"
                  type={show ? "text" : "password"}
                  required
                  autoComplete="current-password"
                  className={cn(field, "pr-10")}
                />
                <button
                  type="button"
                  onClick={() => setShow((s) => !s)}
                  aria-label={show ? "Hide password" : "Show password"}
                  aria-pressed={show}
                  className="da-focus absolute top-1/2 right-1.5 grid size-7 -translate-y-1/2 place-items-center rounded-da-sm text-da-muted-fg hover:text-da-fg"
                >
                  {show ? <EyeOff aria-hidden className="size-4" /> : <Eye aria-hidden className="size-4" />}
                </button>
              </div>
            </div>
            <label className="flex items-center gap-2 text-[13px] text-da-muted-fg">
              <input type="checkbox" name="remember" defaultChecked className="size-4 accent-(--da-primary)" />
              Keep me signed in for 30 days
            </label>
            {error && (
              <p id={`${id}-err`} role="alert" className="rounded-da-md bg-da-danger/10 px-3 py-2 text-[13px] text-da-danger">
                {error}
              </p>
            )}
            <button
              type="submit"
              disabled={pending}
              className="da-focus da-transition h-10 rounded-da-md bg-da-fg text-sm font-medium text-da-bg hover:bg-da-fg/85 disabled:opacity-60"
            >
              {pending ? "Signing in…" : "Sign in"}
            </button>
          </form>
          <p className="mt-6 text-center text-[13px] text-da-muted-fg">
            New to {brand}?{" "}
            <a href={signupHref} className="da-focus rounded-da-sm font-medium text-da-fg hover:underline">
              Create a workspace
            </a>
          </p>
        </div>
      </main>
      <aside className="relative hidden overflow-hidden bg-[#0b0c0f] p-12 text-white lg:flex lg:flex-col lg:justify-end">
        <div aria-hidden className="absolute -top-32 -right-32 size-[520px] rounded-full bg-da-primary/40 blur-[120px]" />
        <div
          aria-hidden
          className="absolute inset-0 opacity-[0.08] [background-image:linear-gradient(white_1px,transparent_1px),linear-gradient(90deg,white_1px,transparent_1px)] [background-size:48px_48px] [mask-image:linear-gradient(to_bottom,black,transparent)]"
        />
        <figure className="relative max-w-md">
          <blockquote className="text-2xl leading-snug font-medium tracking-da-display">“{quote.text}”</blockquote>
          <figcaption className="mt-5 text-sm text-white/70">
            <span className="font-medium text-white">{quote.author}</span> · {quote.role}
          </figcaption>
        </figure>
        <dl className="relative mt-12 grid grid-cols-3 gap-6 border-t border-white/15 pt-6">
          {stats.map((s) => (
            <div key={s.label}>
              <dt className="text-[12px] text-white/65">{s.label}</dt>
              <dd className="mt-1 font-da-mono text-lg">{s.value}</dd>
            </div>
          ))}
        </dl>
      </aside>
    </div>
  );
}

export default AuthSplit;