Auth Steps

"use client";

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

export interface AuthStepsProps {
  brand?: string;
  brandHref?: string;
  onFinish?: (data: Record<string, string>) => void;
  className?: string;
}

function FrameMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 24 24" className={cn("size-6 shrink-0", className)}>
      <rect x="1" y="1" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" />
      <path d="M7 1v22M1 7h22" stroke="currentColor" strokeWidth="2" />
      <rect x="15" y="15" width="4" height="4" fill="var(--da-accent)" />
    </svg>
  );
}

const STEPS = [
  {
    title: "Your account",
    fields: [
      { name: "email", label: "Email", type: "email", auto: "email" },
      { name: "password", label: "Password", type: "password", auto: "new-password" },
    ],
  },
  {
    title: "Your studio",
    fields: [
      { name: "studio", label: "Studio name", type: "text", auto: "organization" },
      { name: "city", label: "City", type: "text", auto: "address-level2" },
    ],
  },
  { title: "Your address", fields: [{ name: "slug", label: "frame.studio/", type: "text", auto: "off" }] },
] as const;

/** Three-step sign-up with an index header “01 / 03 — Your account” and segmented hairline progress; underline fields per step, Back text link and ink Continue; final step shows the site address preview. */
export function AuthSteps({ brand = "Frame", brandHref = "/", onFinish, className }: AuthStepsProps) {
  const id = useId();
  const [step, setStep] = useState(0);
  const [data, setData] = useState<Record<string, string>>({ slug: "nord" });
  const s = STEPS[step]!;
  const last = step === STEPS.length - 1;
  const submit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (last) onFinish?.(data);
    else setStep(step + 1);
  };
  return (
    <main className={cn("flex min-h-dvh flex-col bg-da-bg px-6 py-8 text-da-fg sm:px-12", className)}>
      <a href={brandHref} className="da-focus flex w-fit items-center gap-2.5 rounded-da-sm font-da-display text-lg font-semibold tracking-da-display">
        <FrameMark />
        {brand}
      </a>
      <form onSubmit={submit} className="mx-auto my-auto w-full max-w-md py-12" aria-labelledby={`${id}-t`}>
        <p className="font-da-mono text-[11px] tracking-da-label uppercase">
          <span aria-hidden>
            {String(step + 1).padStart(2, "0")} / {String(STEPS.length).padStart(2, "0")} —{" "}
          </span>
          <span className="sr-only">
            Step {step + 1} of {STEPS.length}:{" "}
          </span>
          <span className="text-da-muted-fg">{s.title}</span>
        </p>
        <div aria-hidden className="mt-3 grid grid-cols-3 gap-1">
          {STEPS.map((_, i) => (
            <span key={i} className={cn("h-0.5", i <= step ? "bg-da-fg" : "bg-da-border")} />
          ))}
        </div>
        <h1 id={`${id}-t`} className="mt-10 font-da-display text-4xl font-medium tracking-da-display">
          {step === 2 ? "Pick your address" : step === 1 ? "Tell us about the studio" : "Create your account"}
        </h1>
        <div key={step} className="mt-8 grid gap-7 transition-opacity duration-(--da-duration) starting:opacity-0">
          {s.fields.map((f) => (
            <div key={f.name} className="grid gap-1">
              <label htmlFor={`${id}-${f.name}`} className="font-da-mono text-[11px] tracking-da-label text-da-muted-fg uppercase">
                {f.label}
              </label>
              <input
                id={`${id}-${f.name}`}
                name={f.name}
                type={f.type}
                required
                autoComplete={f.auto}
                value={data[f.name] ?? ""}
                onChange={(e) => setData({ ...data, [f.name]: e.target.value })}
                className="h-11 border-b border-da-border-strong/40 bg-transparent text-lg outline-none focus:border-da-fg focus:shadow-[0_1px_0_0_var(--da-fg)]"
              />
            </div>
          ))}
          {last && (
            <p className="border border-da-border p-4 font-da-mono text-sm">
              <span className="text-da-muted-fg">https://</span>frame.studio/{data.slug || "…"}
            </p>
          )}
        </div>
        <div className="mt-10 flex items-center justify-between">
          {step > 0 ? (
            <button
              type="button"
              onClick={() => setStep(step - 1)}
              className="da-focus rounded-da-sm font-da-mono text-[11px] tracking-da-label uppercase hover:underline"
            >
              ← Back
            </button>
          ) : (
            <span />
          )}
          <button type="submit" className="da-focus h-11 rounded-da-sm bg-da-primary px-6 font-medium text-da-primary-fg hover:opacity-85">
            {last ? "Create site" : "Continue"}
          </button>
        </div>
      </form>
    </main>
  );
}

export default AuthSteps;