Onboarding Wizard

"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Progress } from "@/components/ui/progress";
import { Badge } from "@/components/ui/badge";
import {
  ArrowLeftIcon,
  ArrowRightIcon,
  CheckIcon,
  UserIcon,
  SparklesIcon,
  SlidersHorizontalIcon,
  PartyPopperIcon,
} from "lucide-react";

const steps = [
  { label: "Welcome", icon: SparklesIcon },
  { label: "Profile", icon: UserIcon },
  { label: "Preferences", icon: SlidersHorizontalIcon },
  { label: "Complete", icon: PartyPopperIcon },
] as const;

export default function OnboardingWizard() {
  const [currentStep, setCurrentStep] = React.useState(0);
  const [name, setName] = React.useState("");
  const [darkMode, setDarkMode] = React.useState(false);
  const [emailNotifs, setEmailNotifs] = React.useState(true);
  const [weeklyDigest, setWeeklyDigest] = React.useState(true);

  const progressValue = ((currentStep + 1) / steps.length) * 100;

  const next = () => setCurrentStep((s) => Math.min(s + 1, steps.length - 1));
  const prev = () => setCurrentStep((s) => Math.max(s - 1, 0));

  return (
    <div className="mx-auto flex w-full max-w-xl flex-col items-center gap-8 p-6">
      {/* Progress Indicator */}
      <div className="w-full space-y-4">
        <div className="flex items-center justify-between">
          {steps.map((step, i) => {
            const Icon = step.icon;
            const isActive = i === currentStep;
            const isComplete = i < currentStep;
            return (
              <div key={step.label} className="flex flex-col items-center gap-1.5">
                <div
                  className={cn(
                    "flex size-10 items-center justify-center rounded-full border-2 transition-colors",
                    isComplete
                      ? "border-primary bg-primary text-primary-foreground"
                      : isActive
                        ? "border-primary bg-background text-primary"
                        : "border-muted bg-muted/50 text-muted-foreground"
                  )}
                >
                  {isComplete ? (
                    <CheckIcon className="size-5" />
                  ) : (
                    <Icon className="size-5" />
                  )}
                </div>
                <span
                  className={cn(
                    "text-xs font-medium",
                    isActive ? "text-foreground" : "text-muted-foreground"
                  )}
                >
                  {step.label}
                </span>
              </div>
            );
          })}
        </div>
        <Progress value={progressValue} />
      </div>

      {/* Step Content */}
      <Card className="w-full">
        {/* Step 1: Welcome */}
        {currentStep === 0 && (
          <>
            <CardHeader className="text-center">
              <div className="mx-auto mb-2 flex size-16 items-center justify-center rounded-full bg-primary/10">
                <SparklesIcon className="size-8 text-primary" />
              </div>
              <CardTitle className="text-xl">Welcome to UI Anvil</CardTitle>
              <CardDescription>
                Your forge for production-ready UI blocks. Let&apos;s set up your
                workspace in just a few quick steps.
              </CardDescription>
            </CardHeader>
            <CardContent className="flex justify-center pb-6">
              <Button size="lg" onClick={next}>
                Get Started
                <ArrowRightIcon data-icon="inline-end" className="size-4" />
              </Button>
            </CardContent>
          </>
        )}

        {/* Step 2: Profile */}
        {currentStep === 1 && (
          <>
            <CardHeader>
              <CardTitle>Set up your profile</CardTitle>
              <CardDescription>
                Tell us a bit about yourself so we can personalize your experience.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center gap-4">
                <div className="flex size-16 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
                  <UserIcon className="size-7" />
                </div>
                <Button variant="outline" size="sm">
                  Upload Avatar
                </Button>
              </div>
              <div className="space-y-2">
                <Label htmlFor="onboarding-name">Display Name</Label>
                <Input
                  id="onboarding-name"
                  placeholder="Enter your name"
                  value={name}
                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
                />
              </div>
            </CardContent>
          </>
        )}

        {/* Step 3: Preferences */}
        {currentStep === 2 && (
          <>
            <CardHeader>
              <CardTitle>Your preferences</CardTitle>
              <CardDescription>
                Customize how UI Anvil works for you. You can change these later.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-5">
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Dark mode</Label>
                  <p className="text-xs text-muted-foreground">
                    Use a darker color scheme.
                  </p>
                </div>
                <Switch checked={darkMode} onCheckedChange={setDarkMode} />
              </div>
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Email notifications</Label>
                  <p className="text-xs text-muted-foreground">
                    Receive updates about new blocks.
                  </p>
                </div>
                <Switch checked={emailNotifs} onCheckedChange={setEmailNotifs} />
              </div>
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Weekly digest</Label>
                  <p className="text-xs text-muted-foreground">
                    A summary of activity each week.
                  </p>
                </div>
                <Switch checked={weeklyDigest} onCheckedChange={setWeeklyDigest} />
              </div>
            </CardContent>
          </>
        )}

        {/* Step 4: Complete */}
        {currentStep === 3 && (
          <>
            <CardHeader className="text-center">
              <div className="mx-auto mb-2 flex size-16 items-center justify-center rounded-full bg-emerald-500/10">
                <CheckIcon className="size-8 text-emerald-500" />
              </div>
              <CardTitle className="text-xl">You&apos;re all set!</CardTitle>
              <CardDescription>
                Your workspace is ready. Start exploring the block gallery or
                jump straight into your dashboard.
              </CardDescription>
            </CardHeader>
            <CardContent className="flex flex-col items-center gap-3 pb-6">
              <div className="flex flex-wrap justify-center gap-2">
                <Badge variant="secondary">Dark mode: {darkMode ? "On" : "Off"}</Badge>
                <Badge variant="secondary">
                  Emails: {emailNotifs ? "On" : "Off"}
                </Badge>
                <Badge variant="secondary">
                  Digest: {weeklyDigest ? "On" : "Off"}
                </Badge>
              </div>
              <Button size="lg" className="mt-2">
                Go to Dashboard
                <ArrowRightIcon data-icon="inline-end" className="size-4" />
              </Button>
            </CardContent>
          </>
        )}
      </Card>

      {/* Navigation */}
      {currentStep > 0 && currentStep < steps.length - 1 && (
        <div className="flex w-full items-center justify-between">
          <Button variant="outline" onClick={prev}>
            <ArrowLeftIcon data-icon="inline-start" className="size-4" />
            Previous
          </Button>
          <Button onClick={next}>
            Next
            <ArrowRightIcon data-icon="inline-end" className="size-4" />
          </Button>
        </div>
      )}
    </div>
  );
}