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 {
  title?: string;
  subtitle?: string;
  onSubmit?: (v: { email: string; password: string }) => void | Promise<void>;
  onGoogle?: () => void;
  className?: string;
}

/** Centered friendly sign-in: shape logo, big white rounded card with Google button, divider, soft email/password fields with reveal and a periwinkle pill; pastel shapes around it. */
export function AuthScreen({ title = "Welcome back 👋", subtitle = "Log in to see your week.", onSubmit, onGoogle, className }: AuthScreenProps) {
  const id = useId();
  const [show, setShow] = useState(false);
  const [error, setError] = useState("");
  const [pending, setPending] = useState(false);
  const submit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const d = new FormData(e.currentTarget);
    setPending(true);
    setError("");
    try {
      await onSubmit?.({ email: String(d.get("email")), password: String(d.get("password")) });
    } catch {
      setError("Hmm, that email and password don’t match.");
    } finally {
      setPending(false);
    }
  };
  const field = "da-focus h-12 w-full rounded-da-md bg-da-surface-2 px-4 text-[15px] placeholder:text-da-muted-fg focus:bg-da-input";

  return (
    <div className={cn("relative 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-16 -left-16 size-56 rounded-full bg-da-accent" />
      <span aria-hidden className="absolute -right-12 -bottom-20 size-64 rounded-[64px] bg-da-secondary" />
      <span aria-hidden className="absolute top-24 right-[12%] hidden size-10 rounded-full bg-da-warning sm:block" />
      <main className="relative w-full max-w-sm rounded-[32px] bg-da-surface p-8 shadow-da-lg">
        <p className="flex items-center gap-2 font-da-display text-xl font-extrabold">
          <span aria-hidden className="relative grid size-8 rounded-[11px] bg-da-primary">
            <span className="absolute top-1.5 left-1.5 size-2.5 rounded-full bg-da-accent" />
            <span className="absolute right-1.5 bottom-1.5 size-3 rounded-[4px] bg-da-secondary" />
          </span>
          Planta
        </p>
        <h1 className="mt-6 font-da-display text-3xl font-extrabold tracking-da-display">{title}</h1>
        <p className="mt-1 text-da-muted-fg">{subtitle}</p>
        <button
          type="button"
          onClick={onGoogle}
          className="da-focus da-transition mt-6 flex h-12 w-full items-center justify-center gap-2.5 rounded-da-pill border-2 border-da-border font-semibold hover:bg-da-surface-2"
        >
          <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>
          Continue with Google
        </button>
        <p className="my-5 flex items-center gap-3 text-sm text-da-muted-fg">
          <span className="h-0.5 flex-1 rounded-full bg-da-border" /> or <span className="h-0.5 flex-1 rounded-full bg-da-border" />
        </p>
        <form onSubmit={submit} className="grid gap-3" aria-describedby={error ? `${id}-err` : undefined}>
          <label htmlFor={`${id}-e`} className="sr-only">
            Email
          </label>
          <input id={`${id}-e`} name="email" type="email" required autoComplete="email" placeholder="you@team.com" className={field} />
          <div className="relative">
            <label htmlFor={`${id}-p`} className="sr-only">
              Password
            </label>
            <input
              id={`${id}-p`}
              name="password"
              type={show ? "text" : "password"}
              required
              autoComplete="current-password"
              placeholder="Password"
              className={cn(field, "pr-12")}
            />
            <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-2 grid size-9 -translate-y-1/2 place-items-center rounded-full text-da-muted-fg hover:bg-da-surface"
            >
              {show ? <EyeOff aria-hidden className="size-4" /> : <Eye aria-hidden className="size-4" />}
            </button>
          </div>
          {error && (
            <p id={`${id}-err`} role="alert" className="rounded-da-md bg-da-danger/10 px-4 py-2.5 text-sm font-medium text-da-danger">
              {error}
            </p>
          )}
          <button
            type="submit"
            disabled={pending}
            className="da-focus da-transition mt-1 h-12 rounded-da-pill bg-da-primary font-semibold text-da-primary-fg shadow-da-sm hover:-translate-y-0.5 disabled:opacity-60"
          >
            {pending ? "Logging in…" : "Log in"}
          </button>
        </form>
        <p className="mt-5 text-center text-sm text-da-muted-fg">
          New here?{" "}
          <a href="#signup" className="da-focus rounded-da-sm font-semibold text-da-fg underline-offset-4 hover:underline">
            Create a free account
          </a>
        </p>
      </main>
    </div>
  );
}

export default AuthScreen;