Auth Signup Steps

"use client";

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

export interface AuthSignupValues {
  name: string;
  email: string;
  company: string;
  teamSize: string;
  useCase: string;
}

export interface AuthSignupStepsProps {
  brand?: string;
  onComplete?: (values: AuthSignupValues) => void | Promise<void>;
  teamSizes?: string[];
  useCases?: string[];
  className?: string;
}

const STEPS = ["You", "Team", "Goal"] as const;

export function AuthSignupSteps({
  brand = "Shipyard",
  onComplete,
  teamSizes = ["Just me", "2–10", "11–50", "51–200", "200+"],
  useCases = ["Public changelog", "In-app announcements", "Release emails", "All of it"],
  className,
}: AuthSignupStepsProps) {
  const [step, setStep] = useState(0);
  const [values, setValues] = useState<AuthSignupValues>({ name: "", email: "", company: "", teamSize: "2–10", useCase: "All of it" });
  const [done, setDone] = useState(false);
  const id = useId();
  const set = (k: keyof AuthSignupValues, v: string) => setValues((s) => ({ ...s, [k]: v }));

  async function next(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    if (step < STEPS.length - 1) return setStep(step + 1);
    await onComplete?.(values);
    setDone(true);
  }

  const field = "da-focus da-stroke h-12 w-full bg-da-input px-3 text-base text-da-fg";
  const label = "font-da-mono text-xs font-bold tracking-da-label uppercase";

  const choice = (k: "teamSize" | "useCase", options: string[], legend: string) => (
    <fieldset>
      <legend className={label}>{legend}</legend>
      <div className="mt-3 grid grid-cols-2 gap-2">
        {options.map((o) => (
          <label
            key={o}
            className={cn("da-stroke flex cursor-pointer items-center gap-2 px-3 py-3 font-bold has-[:focus-visible]:outline-[length:var(--da-ring-width)] has-[:focus-visible]:outline-da-ring has-[:focus-visible]:outline-solid", values[k] === o ? "bg-da-primary text-da-primary-fg shadow-da-sm" : "bg-da-surface")}
          >
            <input type="radio" name={`${id}-${k}`} value={o} checked={values[k] === o} onChange={() => set(k, o)} className="sr-only" />
            {o}
          </label>
        ))}
      </div>
    </fieldset>
  );

  return (
    <div className={cn("grid min-h-full place-items-center bg-da-bg px-4 py-12 text-da-fg", className)}>
      <div className="w-full max-w-lg">
        <p className="font-da-display text-2xl tracking-da-display uppercase">{brand}</p>
        <ol className="mt-6 grid grid-cols-3" aria-label="Signup progress">
          {STEPS.map((s, i) => (
            <li key={s} aria-current={i === step ? "step" : undefined} className={cn("da-stroke -ml-[var(--da-border-width)] px-3 py-2 font-da-mono text-xs font-bold uppercase first:ml-0", i < step ? "bg-da-fg text-da-bg" : i === step ? "bg-da-primary text-da-primary-fg" : "bg-da-surface text-da-muted-fg")}>
              {i + 1}. {s}
            </li>
          ))}
        </ol>
        <div className="da-stroke -mt-[var(--da-border-width)] bg-da-surface p-6 text-da-surface-fg shadow-da-lg sm:p-8">
          {done ? (
            <div role="status">
              <h1 className="font-da-display text-4xl leading-none tracking-da-display uppercase">You&apos;re in, {values.name.split(" ")[0] || "friend"}.</h1>
              <p className="mt-4 text-da-muted-fg">Your workspace for {values.company || "your team"} is ready. Next: connect a repository.</p>
              <a href="#connect" className="da-focus da-stroke mt-6 inline-block bg-da-fg px-5 py-3 font-bold text-da-bg shadow-da-sm">
                Connect GitHub →
              </a>
            </div>
          ) : (
            <form onSubmit={next} className="grid gap-5">
              <h1 className="font-da-display text-3xl leading-none tracking-da-display uppercase">
                {step === 0 ? "Create your account" : step === 1 ? "Tell us about the team" : "What will you ship?"}
              </h1>
              {step === 0 && (
                <>
                  <div className="grid gap-1.5">
                    <label htmlFor={`${id}-name`} className={label}>
                      Full name
                    </label>
                    <input id={`${id}-name`} required autoComplete="name" value={values.name} onChange={(e) => set("name", e.target.value)} className={field} />
                  </div>
                  <div className="grid gap-1.5">
                    <label htmlFor={`${id}-email`} className={label}>
                      Work email
                    </label>
                    <input id={`${id}-email`} type="email" required autoComplete="email" value={values.email} onChange={(e) => set("email", e.target.value)} className={field} />
                  </div>
                </>
              )}
              {step === 1 && (
                <>
                  <div className="grid gap-1.5">
                    <label htmlFor={`${id}-company`} className={label}>
                      Company
                    </label>
                    <input id={`${id}-company`} required autoComplete="organization" value={values.company} onChange={(e) => set("company", e.target.value)} className={field} />
                  </div>
                  {choice("teamSize", teamSizes, "Team size")}
                </>
              )}
              {step === 2 && choice("useCase", useCases, "Main use case")}
              <div className="flex gap-3 pt-2">
                {step > 0 && (
                  <button type="button" onClick={() => setStep(step - 1)} className="da-focus da-stroke bg-da-surface px-5 py-3 font-bold">
                    Back
                  </button>
                )}
                <button type="submit" className="da-focus da-stroke flex-1 bg-da-fg px-5 py-3 font-bold text-da-bg shadow-da-sm hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none">
                  {step === STEPS.length - 1 ? "Create workspace" : "Continue →"}
                </button>
              </div>
            </form>
          )}
        </div>
      </div>
    </div>
  );
}

export default AuthSignupSteps;