Auth Onboarding

"use client";

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

export interface AuthOnboardingProps {
  brand?: string;
  brandHref?: string;
  industries?: string[];
  goals?: string[];
  onFinish?: (data: { industry: string; goals: string[] }) => void;
  className?: string;
}

function GroveMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 32 32" className={cn("size-8 shrink-0", className)}>
      <circle cx="16" cy="16" r="16" fill="var(--da-primary)" />
      <path d="M16 25V13" stroke="var(--da-primary-fg)" strokeWidth="2" strokeLinecap="round" />
      <path d="M16 17c-4 0-6.5-2.6-6.5-6.5 4 0 6.5 2.6 6.5 6.5Z" fill="var(--da-primary-fg)" opacity=".85" />
      <path d="M16 14c3.6 0 6-2.3 6-6-3.6 0-6 2.3-6 6Z" fill="var(--da-primary-fg)" />
    </svg>
  );
}

/** Post-signup onboarding: two gentle steps (industry as pill radio cards, goals as check cards) with a leaf progress bar, back/continue pills and a warm “all set” finish. */
export function AuthOnboarding({
  brand = "Grove",
  brandHref = "/",
  industries = ["Retail & e-commerce", "Food & drink", "Software", "Manufacturing", "Travel & hospitality", "Services"],
  goals = ["Measure our footprint", "Set a reduction target", "Engage suppliers", "Prepare a CSRD report"],
  onFinish,
  className,
}: AuthOnboardingProps) {
  const [step, setStep] = useState(0);
  const [industry, setIndustry] = useState(industries[0] ?? "");
  const [picked, setPicked] = useState<string[]>([goals[0] ?? ""]);
  const pct = step === 0 ? 33 : step === 1 ? 66 : 100;
  return (
    <main className={cn("min-h-dvh bg-da-bg px-4 py-8 text-da-fg sm:px-8", className)}>
      <div className="mx-auto flex max-w-2xl items-center gap-4">
        <a href={brandHref} className="da-focus inline-flex items-center gap-2.5 rounded-da-pill font-da-display text-2xl">
          <GroveMark />
          {brand}
        </a>
        <div
          role="progressbar"
          aria-label="Onboarding progress"
          aria-valuemin={0}
          aria-valuemax={100}
          aria-valuenow={pct}
          className="ml-auto h-2.5 w-40 rounded-full bg-da-surface-2"
        >
          <div className="h-full rounded-full bg-da-primary transition-[width] duration-(--da-duration-slow) ease-da" style={{ width: `${pct}%` }} />
        </div>
      </div>
      <div className="mx-auto mt-14 max-w-2xl">
        {step === 0 && (
          <fieldset className="transition-opacity duration-(--da-duration-slow) starting:opacity-0">
            <legend className="font-da-display text-4xl">What does your company do?</legend>
            <p className="mt-2 text-da-muted-fg">We’ll tailor emission factors and suggested actions.</p>
            <div className="mt-8 grid gap-3 sm:grid-cols-2">
              {industries.map((x) => (
                <label
                  key={x}
                  className={cn(
                    "da-transition flex cursor-pointer items-center justify-between rounded-da-lg p-5 text-lg has-focus-visible:ring-3 has-focus-visible:ring-da-ring",
                    x === industry ? "bg-da-accent text-da-accent-fg" : "bg-da-surface shadow-da-sm hover:shadow-da-md",
                  )}
                >
                  <input type="radio" name="industry" checked={x === industry} onChange={() => setIndustry(x)} className="sr-only" />
                  {x}
                  {x === industry && <Check aria-hidden className="size-5" />}
                </label>
              ))}
            </div>
          </fieldset>
        )}
        {step === 1 && (
          <fieldset className="transition-opacity duration-(--da-duration-slow) starting:opacity-0">
            <legend className="font-da-display text-4xl">What would you like to do first?</legend>
            <p className="mt-2 text-da-muted-fg">Pick as many as you like.</p>
            <div className="mt-8 grid gap-3">
              {goals.map((g) => {
                const on = picked.includes(g);
                return (
                  <label
                    key={g}
                    className={cn(
                      "da-transition flex cursor-pointer items-center gap-4 rounded-da-lg p-5 text-lg has-focus-visible:ring-3 has-focus-visible:ring-da-ring",
                      on ? "bg-da-accent text-da-accent-fg" : "bg-da-surface shadow-da-sm",
                    )}
                  >
                    <input type="checkbox" checked={on} onChange={() => setPicked(on ? picked.filter((x) => x !== g) : [...picked, g])} className="sr-only" />
                    <span
                      aria-hidden
                      className={cn(
                        "grid size-7 place-items-center rounded-full border-2",
                        on ? "border-da-primary bg-da-primary text-da-primary-fg" : "border-da-border-strong",
                      )}
                    >
                      {on && <Check className="size-4" strokeWidth={3} />}
                    </span>
                    {g}
                  </label>
                );
              })}
            </div>
          </fieldset>
        )}
        {step === 2 && (
          <div role="status" className="text-center transition-opacity duration-(--da-duration-slow) starting:opacity-0">
            <svg aria-hidden viewBox="0 0 120 120" className="mx-auto h-32 text-da-primary">
              <circle cx="60" cy="60" r="56" fill="var(--da-accent)" />
              <path d="M60 96V50" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
              <path d="M60 72c-14 0-22-8-22-22 14 0 22 8 22 22Zm0-10c12 0 20-8 20-20-12 0-20 8-20 20Z" fill="currentColor" />
            </svg>
            <h1 className="mt-6 font-da-display text-4xl">You’re all set</h1>
            <p className="mt-2 text-da-muted-fg">
              {industry} · {picked.length} {picked.length === 1 ? "goal" : "goals"}. Let’s connect your first tool.
            </p>
          </div>
        )}
        <div className="mt-10 flex items-center justify-between">
          {step > 0 && step < 2 ? (
            <button
              type="button"
              onClick={() => setStep(step - 1)}
              className="da-focus inline-flex h-12 items-center gap-2 rounded-da-pill px-5 font-medium hover:bg-da-surface-2"
            >
              <ArrowLeft aria-hidden className="size-4" /> Back
            </button>
          ) : (
            <span />
          )}
          <button
            type="button"
            onClick={() => {
              if (step === 1) onFinish?.({ industry, goals: picked });
              setStep(step < 2 ? step + 1 : 0);
            }}
            className="da-focus h-12 rounded-da-pill bg-da-primary px-7 font-medium text-da-primary-fg hover:bg-da-primary/90"
          >
            {step === 0 ? "Continue" : step === 1 ? "Finish" : "Connect a tool"}
          </button>
        </div>
      </div>
    </main>
  );
}

export default AuthOnboarding;