Auth Screen

"use client";

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

export interface AuthScreenProps {
  brand?: string;
  brandHref?: string;
  title?: string;
  onSubmit?: (data: { email: string; password: string; remember: boolean }) => void;
  signupHref?: string;
  forgotHref?: string;
  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>
  );
}

function GoogleIcon() {
  return (
    <svg aria-hidden viewBox="0 0 24 24" className="size-4">
      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z" />
      <path
        fill="#34A853"
        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z"
      />
      <path fill="#FBBC05" d="M5.84 14.09A6.6 6.6 0 0 1 5.5 12c0-.73.13-1.43.34-2.09V7.07H2.18A11 11 0 0 0 1 12c0 1.78.43 3.45 1.18 4.93l3.66-2.84z" />
      <path
        fill="#EA4335"
        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 0 0 2.18 7.07l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z"
      />
    </svg>
  );
}

/** Centered sign-in card on a surface-2 page: logo, Google + SSO buttons, “or” divider, email/password (show/hide toggle, forgot link), remember me, blue submit, sign-up link and legal footer. */
export function AuthScreen({
  brand = "Ledgerly",
  brandHref = "/",
  title = "Sign in to Ledgerly",
  onSubmit,
  signupHref = "#signup",
  forgotHref = "#forgot",
  className,
}: AuthScreenProps) {
  const id = useId();
  const [show, setShow] = useState(false);
  const [error, setError] = useState("");
  const submit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const f = new FormData(e.currentTarget);
    const password = String(f.get("password"));
    if (password.length < 8) return setError("Password must be at least 8 characters.");
    setError("");
    onSubmit?.({ email: String(f.get("email")), password, remember: f.get("remember") === "on" });
  };
  const field =
    "da-stroke da-transition 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";
  const alt =
    "da-focus da-stroke da-transition inline-flex h-10 items-center justify-center gap-2 rounded-da-md bg-da-surface text-sm font-semibold shadow-da-sm hover:bg-da-surface-2";
  return (
    <main className={cn("grid min-h-dvh place-items-center bg-da-surface-2 px-4 py-12 text-da-fg", className)}>
      <div className="w-full max-w-sm">
        <a href={brandHref} className="da-focus mx-auto flex w-fit items-center gap-2 rounded-da-sm font-da-display text-lg font-extrabold">
          <LedgerlyMark />
          {brand}
        </a>
        <div className="da-stroke mt-8 rounded-da-lg bg-da-surface p-6 text-da-surface-fg shadow-da-md sm:p-8">
          <h1 className="font-da-display text-xl font-bold">{title}</h1>
          <div className="mt-6 grid grid-cols-2 gap-2">
            <button type="button" className={alt}>
              <GoogleIcon /> Google
            </button>
            <button type="button" className={alt}>
              <KeyRound aria-hidden className="size-4" /> SSO
            </button>
          </div>
          <p className="my-6 flex items-center gap-3 text-xs text-da-muted-fg before:h-px before:flex-1 before:bg-da-border after:h-px after:flex-1 after:bg-da-border">
            or
          </p>
          <form onSubmit={submit} className="grid gap-4" noValidate={false}>
            <div className="grid gap-1.5">
              <label htmlFor={`${id}-e`} className="text-sm font-medium">
                Work email
              </label>
              <input id={`${id}-e`} name="email" type="email" required autoComplete="email" defaultValue="priya@northwind.com" className={field} />
            </div>
            <div className="grid gap-1.5">
              <div className="flex justify-between">
                <label htmlFor={`${id}-p`} className="text-sm font-medium">
                  Password
                </label>
                <a href={forgotHref} className="da-focus rounded-da-sm text-sm font-medium text-da-primary hover:underline">
                  Forgot password?
                </a>
              </div>
              <div className="relative">
                <input
                  id={`${id}-p`}
                  name="password"
                  type={show ? "text" : "password"}
                  required
                  autoComplete="current-password"
                  aria-invalid={error ? true : undefined}
                  aria-describedby={error ? `${id}-err` : undefined}
                  className={cn(field, "pr-10", error && "border-da-danger")}
                />
                <button
                  type="button"
                  onClick={() => setShow(!show)}
                  aria-label={show ? "Hide password" : "Show password"}
                  aria-pressed={show}
                  className="da-focus absolute top-1/2 right-1 grid size-8 -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>
              {error && (
                <p id={`${id}-err`} className="text-xs font-medium text-da-danger">
                  {error}
                </p>
              )}
            </div>
            <label className="flex items-center gap-2 text-sm">
              <input type="checkbox" name="remember" defaultChecked className="da-focus size-4 accent-(--da-primary)" />
              Keep me signed in for 30 days
            </label>
            <button
              type="submit"
              className="da-focus da-transition h-10 rounded-da-md bg-da-primary text-sm font-semibold text-da-primary-fg hover:bg-da-primary/90"
            >
              Sign in
            </button>
          </form>
        </div>
        <p className="mt-6 text-center text-sm text-da-muted-fg">
          New to {brand}?{" "}
          <a href={signupHref} className="da-focus rounded-da-sm font-semibold text-da-primary hover:underline">
            Start a free trial
          </a>
        </p>
        <p className="mt-8 text-center text-xs text-da-muted-fg">© 2026 {brand}, Inc. · Privacy · Terms</p>
      </div>
    </main>
  );
}

export default AuthScreen;