Auth Screen

"use client";

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

export interface AuthScreenProps {
  brand?: string;
  brandHref?: string;
  onSubmit?: (data: { email: string; password: string }) => void;
  className?: string;
}

function GroveMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 32 32" className={cn("size-8 shrink-0", className)}>
      <circle cx="16" cy="16" r="16" fill="var(--da-primary)" />
      <path d="M16 25V13" stroke="var(--da-primary-fg)" strokeWidth="2" strokeLinecap="round" />
      <path d="M16 17c-4 0-6.5-2.6-6.5-6.5 4 0 6.5 2.6 6.5 6.5Z" fill="var(--da-primary-fg)" opacity=".85" />
      <path d="M16 14c3.6 0 6-2.3 6-6-3.6 0-6 2.3-6 6Z" fill="var(--da-primary-fg)" />
    </svg>
  );
}

/** Centered sign-in on cream with two soft blobs behind a rounded card: serif welcome, filled inputs, password reveal, sage pill submit, Google alternative and a sign-up link. */
export function AuthScreen({ brand = "Grove", brandHref = "/", onSubmit, className }: AuthScreenProps) {
  const id = useId();
  const [show, setShow] = useState(false);
  const submit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const f = new FormData(e.currentTarget);
    onSubmit?.({ email: String(f.get("email")), password: String(f.get("password")) });
  };
  const field = "da-transition h-12 w-full rounded-da-md bg-da-surface-2 px-4 outline-none focus:bg-da-surface focus:ring-3 focus:ring-da-ring";
  return (
    <main className={cn("relative isolate grid min-h-dvh place-items-center overflow-hidden bg-da-bg px-4 py-12 text-da-fg", className)}>
      <span aria-hidden className="absolute -top-24 -left-24 -z-10 size-96 rounded-[60%_40%_55%_45%/50%_60%_40%_50%] bg-da-accent" />
      <span aria-hidden className="absolute -right-20 -bottom-28 -z-10 size-80 rounded-[45%_55%_40%_60%/55%_45%_60%_40%] bg-da-secondary" />
      <div className="w-full max-w-sm rounded-da-lg bg-da-surface p-8 text-da-surface-fg shadow-da-lg">
        <a href={brandHref} className="da-focus inline-flex items-center gap-2.5 rounded-da-pill font-da-display text-2xl">
          <GroveMark />
          {brand}
        </a>
        <h1 className="mt-8 font-da-display text-3xl">
          Welcome <em className="text-da-primary">back</em>
        </h1>
        <p className="mt-1 text-da-muted-fg">Good to see you again.</p>
        <form onSubmit={submit} className="mt-8 grid gap-4">
          <label className="grid gap-2 font-medium">
            Email
            <input name="email" type="email" required autoComplete="email" defaultValue="lea@ateliernord.fr" className={cn(field, "font-normal")} />
          </label>
          <div className="grid gap-2">
            <div className="flex justify-between">
              <label htmlFor={`${id}-p`} className="font-medium">
                Password
              </label>
              <a href="#forgot" className="da-focus rounded-da-sm text-sm text-da-primary underline-offset-4 hover:underline">
                Forgot it?
              </a>
            </div>
            <div className="relative">
              <input id={`${id}-p`} name="password" type={show ? "text" : "password"} required autoComplete="current-password" className={cn(field, "pr-12")} />
              <button
                type="button"
                aria-label={show ? "Hide password" : "Show password"}
                aria-pressed={show}
                onClick={() => setShow(!show)}
                className="da-focus absolute top-1/2 right-2 grid size-9 -translate-y-1/2 place-items-center rounded-full text-da-muted-fg hover:text-da-fg"
              >
                {show ? <EyeOff aria-hidden className="size-4" /> : <Eye aria-hidden className="size-4" />}
              </button>
            </div>
          </div>
          <button
            type="submit"
            className="da-focus da-transition mt-2 h-12 rounded-da-pill bg-da-primary font-medium text-da-primary-fg hover:bg-da-primary/90"
          >
            Sign in
          </button>
          <button type="button" className="da-focus da-transition h-12 rounded-da-pill bg-da-surface-2 font-medium hover:bg-da-muted">
            Continue with Google
          </button>
        </form>
        <p className="mt-6 text-center text-sm text-da-muted-fg">
          New here?{" "}
          <a href="#signup" className="da-focus rounded-da-sm font-medium text-da-primary underline underline-offset-4">
            Plant your first seed
          </a>
        </p>
      </div>
    </main>
  );
}

export default AuthScreen;