Auth Onboarding

"use client";

import { useId, useState } from "react";
import { ArrowLeft, ArrowRight, CalendarDays, Check } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AuthOnboardingProps {
  onFinish?: (data: { workspace: string; role: string; calendar: string | null }) => void;
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";
const STEPS = ["Workspace", "Your role", "Calendar"];
const ROLES = ["Product", "Engineering", "Design", "Sales", "Leadership", "Other"];

/** Three-step onboarding in a glass card: workspace name, role chips, calendar connection; gradient progress bar, back/next and a finish state. */
export function AuthOnboarding({ onFinish, className }: AuthOnboardingProps) {
  const id = useId();
  const [step, setStep] = useState(0);
  const [workspace, setWorkspace] = useState("Lumen");
  const [role, setRole] = useState("Product");
  const [calendar, setCalendar] = useState<string | null>(null);
  const [done, setDone] = useState(false);

  const next = () => {
    if (step < 2) setStep(step + 1);
    else {
      setDone(true);
      onFinish?.({ workspace, role, calendar });
    }
  };

  return (
    <div className={cn("grid min-h-dvh place-items-center px-4 py-12 text-da-fg", className)}>
      <main className={cn("w-full max-w-md rounded-da-lg p-8 shadow-da-lg", GLASS)}>
        {done ? (
          <div className="text-center" role="status">
            <span
              aria-hidden
              className="mx-auto grid size-16 place-items-center rounded-full bg-gradient-to-br from-da-primary to-da-accent text-da-primary-fg shadow-da-lg"
            >
              <Check className="size-8" />
            </span>
            <h1 className="mt-6 font-da-display text-2xl font-semibold tracking-da-display">You’re all set, {workspace}!</h1>
            <p className="mt-2 text-da-muted-fg">Halo will join your next meeting{calendar ? ` from ${calendar}` : ""}. Your first recap lands right after.</p>
            <a href="#app" className="da-focus mt-8 inline-flex h-12 items-center rounded-da-pill bg-da-fg px-6 font-semibold text-da-bg">
              Go to my meetings
            </a>
          </div>
        ) : (
          <>
            <div className="flex items-center justify-between text-xs font-semibold text-da-muted-fg">
              <span>
                Step {step + 1} of {STEPS.length}
              </span>
              <span>{STEPS[step]}</span>
            </div>
            <div
              className="mt-2 h-1.5 overflow-hidden rounded-full bg-da-muted"
              role="progressbar"
              aria-valuemin={1}
              aria-valuemax={3}
              aria-valuenow={step + 1}
              aria-label="Onboarding progress"
            >
              <div
                className="h-full rounded-full bg-gradient-to-r from-da-primary to-da-accent transition-[width] duration-(--da-duration-slow) ease-da"
                style={{ width: `${((step + 1) / 3) * 100}%` }}
              />
            </div>

            {step === 0 && (
              <section className="mt-8">
                <h1 className="font-da-display text-2xl font-semibold tracking-da-display">Name your workspace</h1>
                <p className="mt-1 text-sm text-da-muted-fg">Usually your company or team name.</p>
                <label htmlFor={`${id}-ws`} className="mt-6 block text-sm font-semibold">
                  Workspace name
                </label>
                <input
                  id={`${id}-ws`}
                  value={workspace}
                  onChange={(e) => setWorkspace(e.target.value)}
                  className="da-focus da-stroke mt-2 h-12 w-full rounded-da-pill bg-da-input px-5"
                />
                <p className="mt-2 font-da-mono text-xs text-da-muted-fg">halo.app/{workspace.toLowerCase().replace(/[^a-z0-9]+/g, "-") || "…"}</p>
              </section>
            )}
            {step === 1 && (
              <fieldset className="mt-8">
                <legend className="font-da-display text-2xl font-semibold tracking-da-display">What do you do?</legend>
                <p className="mt-1 text-sm text-da-muted-fg">We’ll tailor your recap templates.</p>
                <div className="mt-6 grid grid-cols-2 gap-2 sm:grid-cols-3">
                  {ROLES.map((r) => (
                    <label
                      key={r}
                      className={cn(
                        "da-transition cursor-pointer rounded-da-pill px-3 py-2.5 text-center text-sm font-medium has-focus-visible:ring-(length:--da-ring-width) has-focus-visible:ring-da-ring",
                        role === r
                          ? "bg-gradient-to-r from-da-primary to-da-accent text-da-primary-fg shadow-da-sm"
                          : "da-stroke bg-da-surface hover:bg-da-secondary",
                      )}
                    >
                      <input type="radio" name={`${id}-role`} value={r} checked={role === r} onChange={() => setRole(r)} className="sr-only" />
                      {r}
                    </label>
                  ))}
                </div>
              </fieldset>
            )}
            {step === 2 && (
              <section className="mt-8">
                <h1 className="font-da-display text-2xl font-semibold tracking-da-display">Connect your calendar</h1>
                <p className="mt-1 text-sm text-da-muted-fg">Halo joins meetings you choose. You can skip this.</p>
                <div className="mt-6 grid gap-2">
                  {["Google Calendar", "Outlook"].map((c) => (
                    <button
                      key={c}
                      type="button"
                      aria-pressed={calendar === c}
                      onClick={() => setCalendar(calendar === c ? null : c)}
                      className={cn(
                        "da-focus da-transition flex h-14 items-center gap-3 rounded-da-md px-4 text-left font-semibold",
                        calendar === c ? "bg-da-success/15 ring-2 ring-da-success" : "da-stroke bg-da-surface hover:bg-da-secondary",
                      )}
                    >
                      <CalendarDays aria-hidden className="size-5 text-da-primary" />
                      <span className="flex-1">{c}</span>
                      {calendar === c && (
                        <span className="inline-flex items-center gap-1 text-xs text-da-success">
                          <Check aria-hidden className="size-4" /> Connected
                        </span>
                      )}
                    </button>
                  ))}
                </div>
              </section>
            )}

            <div className="mt-8 flex items-center justify-between">
              <button
                type="button"
                onClick={() => setStep((s) => Math.max(0, s - 1))}
                disabled={step === 0}
                className="da-focus inline-flex h-11 items-center gap-1.5 rounded-da-pill px-4 text-sm font-semibold text-da-muted-fg hover:text-da-fg disabled:invisible"
              >
                <ArrowLeft aria-hidden className="size-4" /> Back
              </button>
              <button
                type="button"
                onClick={next}
                disabled={step === 0 && !workspace.trim()}
                className="da-focus da-transition inline-flex h-11 items-center gap-1.5 rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent px-5 text-sm font-semibold text-da-primary-fg shadow-da-md hover:-translate-y-0.5 disabled:opacity-60"
              >
                {step === 2 ? (calendar ? "Finish" : "Skip & finish") : "Continue"} <ArrowRight aria-hidden className="size-4" />
              </button>
            </div>
          </>
        )}
      </main>
    </div>
  );
}

export default AuthOnboarding;