Auth Screen

"use client";

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

export interface AuthScreenValues {
  email: string;
  password: string;
}

export interface AuthScreenProps {
  mode?: "sign-in" | "sign-up";
  brand?: string;
  brandHref?: string;
  onSubmit?: (values: AuthScreenValues) => void | Promise<void>;
  onProvider?: (provider: "google" | "microsoft") => void;
  error?: string;
  forgotHref?: string;
  switchHref?: string;
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-[40px] backdrop-saturate-150 shadow-da-lg";
const FIELD =
  "da-transition h-11 w-full rounded-da-md border border-da-border-strong/60 bg-da-input px-3.5 text-sm outline-none placeholder:text-da-muted-fg focus:border-da-primary/60 focus:ring-4 focus:ring-da-primary/15";

export function AuthScreen({
  mode = "sign-in",
  brand = "Halo",
  brandHref = "/",
  onSubmit,
  onProvider,
  error,
  forgotHref = "#forgot",
  switchHref = mode === "sign-in" ? "#sign-up" : "#sign-in",
  className,
}: AuthScreenProps) {
  const [show, setShow] = useState(false);
  const [pending, setPending] = useState(false);
  const emailId = useId();
  const passwordId = useId();
  const errorId = useId();

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

  return (
    <div className={cn("relative isolate flex min-h-full items-center justify-center overflow-hidden px-4 py-16 text-da-fg", className)}>
      {/* Two soft orbs behind the panel for extra depth */}
      <div aria-hidden className="absolute top-1/4 left-1/2 -z-10 size-72 -translate-x-[120%] rounded-full bg-da-primary/40 blur-[80px]" />
      <div aria-hidden className="absolute bottom-1/4 left-1/2 -z-10 size-72 translate-x-[20%] rounded-full bg-da-accent/35 blur-[80px]" />

      <div className={cn("w-full max-w-[400px] rounded-da-lg p-8 sm:p-10", GLASS)}>
        <a href={brandHref} aria-label={`${brand} home`} className="da-focus mx-auto grid size-12 place-items-center rounded-full bg-gradient-to-br from-da-primary to-da-accent shadow-da-md">
          <span className="size-5 rounded-full bg-da-bg/90" />
        </a>
        <h1 className="mt-6 text-center font-da-display text-2xl font-semibold tracking-da-display">
          {mode === "sign-in" ? `Welcome back to ${brand}` : `Create your ${brand} account`}
        </h1>
        <p className="mt-2 text-center text-sm text-da-muted-fg">
          {mode === "sign-in" ? "Your recaps are waiting." : "Free forever for individuals. No credit card."}
        </p>

        <div className="mt-8 grid grid-cols-2 gap-3">
          {(["google", "microsoft"] as const).map((p) => (
            <button
              key={p}
              type="button"
              onClick={() => onProvider?.(p)}
              className="da-focus da-transition da-stroke flex h-11 items-center justify-center gap-2 rounded-da-md bg-da-secondary text-sm font-semibold text-da-secondary-fg hover:-translate-y-0.5"
            >
              {p === "google" ? (
                <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.5h6.5a5.6 5.6 0 0 1-2.4 3.6v3h3.9c2.2-2.1 3.5-5.1 3.5-8.8Z" />
                  <path fill="#34A853" d="M12 24c3.2 0 6-1.1 8-2.9l-3.9-3c-1.1.7-2.5 1.2-4.1 1.2-3.1 0-5.8-2.1-6.7-5H1.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.1c.9-2.9 3.6-4.9 6.7-4.9Z" />
                </svg>
              ) : (
                <svg aria-hidden viewBox="0 0 24 24" className="size-4">
                  <path fill="#F25022" d="M1 1h10v10H1z" />
                  <path fill="#7FBA00" d="M13 1h10v10H13z" />
                  <path fill="#00A4EF" d="M1 13h10v10H1z" />
                  <path fill="#FFB900" d="M13 13h10v10H13z" />
                </svg>
              )}
              {p === "google" ? "Google" : "Microsoft"}
            </button>
          ))}
        </div>

        <p className="my-6 flex items-center gap-3 text-xs text-da-muted-fg" aria-hidden>
          <span className="h-px flex-1 bg-da-border-strong/60" /> or with email <span className="h-px flex-1 bg-da-border-strong/60" />
        </p>

        <form onSubmit={submit} className="grid gap-4" aria-describedby={error ? errorId : undefined}>
          <div className="grid gap-1.5">
            <label htmlFor={emailId} className="text-sm font-semibold">
              Work email
            </label>
            <input id={emailId} name="email" type="email" required autoComplete="email" placeholder="you@company.com" className={FIELD} />
          </div>
          <div className="grid gap-1.5">
            <div className="flex items-center justify-between">
              <label htmlFor={passwordId} className="text-sm font-semibold">
                Password
              </label>
              {mode === "sign-in" && (
                <a href={forgotHref} className="da-focus rounded-da-sm text-xs font-semibold text-da-primary hover:underline">
                  Forgot password?
                </a>
              )}
            </div>
            <div className="relative">
              <input
                id={passwordId}
                name="password"
                type={show ? "text" : "password"}
                required
                minLength={8}
                autoComplete={mode === "sign-in" ? "current-password" : "new-password"}
                className={cn(FIELD, "pr-11")}
              />
              <button
                type="button"
                onClick={() => setShow((s) => !s)}
                aria-label={show ? "Hide password" : "Show password"}
                aria-pressed={show}
                className="da-focus absolute inset-y-0 right-0 grid w-11 place-items-center rounded-r-da-md text-da-muted-fg hover:text-da-fg"
              >
                {show ? <EyeOff aria-hidden className="size-4" /> : <Eye aria-hidden className="size-4" />}
              </button>
            </div>
          </div>
          {error && (
            <p id={errorId} role="alert" className="rounded-da-md bg-da-danger/12 px-3 py-2 text-sm font-medium text-da-fg ring-1 ring-da-danger/30 ring-inset">
              {error}
            </p>
          )}
          <button
            type="submit"
            disabled={pending}
            className="da-focus mt-2 h-11 rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent text-sm font-semibold text-da-primary-fg shadow-da-md transition-[translate,opacity] duration-(--da-duration) ease-da-emphasized hover:-translate-y-0.5 disabled:opacity-60 motion-reduce:transition-none"
          >
            {pending ? "Signing in…" : mode === "sign-in" ? "Sign in" : "Create account"}
          </button>
        </form>

        <p className="mt-6 text-center text-sm text-da-muted-fg">
          {mode === "sign-in" ? "New here? " : "Already have an account? "}
          <a href={switchHref} className="da-focus rounded-da-sm font-semibold text-da-fg hover:underline">
            {mode === "sign-in" ? "Create an account" : "Sign in"}
          </a>
        </p>
      </div>
    </div>
  );
}

export default AuthScreen;