Two-Factor Setup

import { defineStepper } from "@stepperize/react";
import { ShieldCheck, Smartphone } from "lucide-react";
import { useState } from "react";
import { buttonVariants } from "@/components/ui/button";
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@/components/ui/input-otp";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

const { Stepper } = defineStepper([
  { id: "method", title: "Choose a method" },
  { id: "verify", title: "Enter the code" },
  { id: "backup", title: "Save backup codes" },
]);

export function TwoFactorBlock() {
  const [enabled, setEnabled] = useState(false);

  return (
    <Stepper.Root
      linear
      className="w-full max-w-sm rounded-xl border bg-background p-6 shadow-sm"
    >
      {({ stepper }) => (
        <>
          <div className="mb-4 flex items-center justify-between">
            <span className="grid size-9 place-items-center rounded-lg bg-primary/10 text-primary">
              <ShieldCheck className="size-5" />
            </span>
            <Stepper.List className="flex gap-1.5">
              <Stepper.Items>
                {(step) => (
                  <Stepper.Item key={step.id} step={step.id}>
                    <Stepper.Indicator className="block h-1.5 w-6 rounded-full transition-colors data-[status=active]:bg-primary data-[status=previous]:bg-primary data-[status=upcoming]:bg-muted" />
                  </Stepper.Item>
                )}
              </Stepper.Items>
            </Stepper.List>
          </div>

          <h3 className="text-base font-semibold">{stepper.current.title}</h3>

          <div className="mt-4 min-h-32">
            <Stepper.Content step="method">
              <RadioGroup defaultValue="app">
                <Method
                  value="app"
                  icon={Smartphone}
                  label="Authenticator app"
                  hint="Recommended"
                />
                <Method
                  value="sms"
                  icon={ShieldCheck}
                  label="Text message"
                  hint="SMS code"
                />
              </RadioGroup>
            </Stepper.Content>

            <Stepper.Content step="verify" className="space-y-3">
              <p className="text-sm text-muted-foreground">
                Enter the 6-digit code from your app.
              </p>
              <InputOTP maxLength={6}>
                <InputOTPGroup className="w-full justify-between">
                  {[0, 1, 2, 3, 4, 5].map((i) => (
                    <InputOTPSlot
                      key={i}
                      index={i}
                      className="size-11 text-lg"
                    />
                  ))}
                </InputOTPGroup>
              </InputOTP>
            </Stepper.Content>

            <Stepper.Content step="backup" className="space-y-3">
              <p className="text-sm text-muted-foreground">
                {enabled
                  ? "Two-factor authentication is enabled."
                  : "Store these somewhere safe."}
              </p>
              <div className="grid grid-cols-2 gap-2 rounded-lg border bg-muted/30 p-3 font-mono text-sm">
                {["9F2A-7C1B", "4E8D-22A9", "B0C3-9911", "77AF-DE02"].map(
                  (code) => (
                    <span key={code}>{code}</span>
                  ),
                )}
              </div>
            </Stepper.Content>
          </div>

          <Stepper.Actions className="mt-6 flex justify-between">
            <Stepper.Prev className={buttonVariants({ variant: "outline" })}>
              Back
            </Stepper.Prev>
            {enabled ? (
              <button
                type="button"
                onClick={() => {
                  setEnabled(false);
                  stepper.reset();
                }}
                className={buttonVariants()}
              >
                Start over
              </button>
            ) : stepper.isLast ? (
              <button
                type="button"
                onClick={() => setEnabled(true)}
                className={buttonVariants()}
              >
                Enable 2FA
              </button>
            ) : (
              <Stepper.Next className={buttonVariants()}>Continue</Stepper.Next>
            )}
          </Stepper.Actions>
        </>
      )}
    </Stepper.Root>
  );
}

function Method({
  value,
  icon: Icon,
  label,
  hint,
}: {
  value: string;
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  hint: string;
}) {
  return (
    <Label className="flex cursor-pointer items-center gap-3 rounded-lg border p-3 text-sm font-normal transition-colors has-data-checked:border-primary has-data-checked:bg-primary/5">
      <RadioGroupItem value={value} />
      <Icon className="size-5 text-muted-foreground" />
      <span className="font-medium">{label}</span>
      <span className="ml-auto text-xs text-muted-foreground">{hint}</span>
    </Label>
  );
}