Onboarding Modal

"use client";

import { useState, type ReactNode } from "react";
import { Dialog } from "radix-ui";
import { X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface OnboardingStep {
  title: string;
  description: string;
  /** Visual block for the step (illustration, mini-UI…). */
  visual?: ReactNode;
}

export interface OnboardingModalProps {
  trigger?: ReactNode;
  defaultOpen?: boolean;
  steps?: OnboardingStep[];
  finishLabel?: string;
  onFinish?: () => void;
  da?: string;
}

const TONES = ["bg-da-primary text-da-primary-fg", "bg-da-accent text-da-accent-fg", "bg-da-secondary text-da-secondary-fg", "bg-da-success text-da-success-fg"];

const DEFAULT_STEPS: OnboardingStep[] = [
  { title: "Welcome aboard", description: "Shipyard turns merged pull requests into release notes. Let's get your first changelog live in three steps." },
  { title: "Connect a repo", description: "Install the GitHub app on one repository. We only read PR titles, labels and descriptions." },
  { title: "Label your PRs", description: "Use feature, fix, improvement or breaking. Anything unlabelled stays out of the changelog." },
  { title: "Publish", description: "Review the AI draft and hit publish. Your page, widget and digests update at once." },
];

export function OnboardingModal({ trigger, defaultOpen, steps = DEFAULT_STEPS, finishLabel = "Let's ship", onFinish, da = "brutalist" }: OnboardingModalProps) {
  const [step, setStep] = useState(0);
  const [open, setOpen] = useState(defaultOpen ?? false);
  const current = steps[step] ?? steps[0];
  const last = step === steps.length - 1;
  if (!current) return null;

  return (
    <Dialog.Root
      open={open}
      onOpenChange={(o) => {
        setOpen(o);
        if (o) setStep(0);
      }}
    >
      {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}
      <Dialog.Portal>
        <Dialog.Overlay data-da={da} className="fixed inset-0 z-50 bg-da-overlay" />
        <Dialog.Content
          data-da={da}
          className="da-stroke fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] max-w-3xl -translate-x-1/2 -translate-y-1/2 bg-da-surface text-da-surface-fg shadow-da-lg outline-none md:grid-cols-2"
        >
          <div aria-hidden className={cn("da-stroke-b md:da-stroke-r relative grid min-h-48 place-items-center p-8 md:border-b-0", TONES[step % TONES.length])}>
            {current.visual ?? <span className="font-da-display text-[9rem] leading-none tracking-da-display">{step + 1}</span>}
          </div>
          <div className="flex flex-col p-6 sm:p-8">
            <div className="flex items-center justify-between">
              <p className="font-da-mono text-xs font-bold tracking-da-label uppercase" aria-live="polite">
                Step {step + 1} of {steps.length}
              </p>
              <Dialog.Close aria-label="Skip onboarding" className="da-focus grid size-8 place-items-center hover:bg-da-muted">
                <X aria-hidden className="size-5" />
              </Dialog.Close>
            </div>
            <Dialog.Title className="mt-6 font-da-display text-3xl leading-none tracking-da-display uppercase">{current.title}</Dialog.Title>
            <Dialog.Description className="mt-4 text-lg text-da-muted-fg">{current.description}</Dialog.Description>
            <div className="mt-8 flex gap-1.5" aria-hidden>
              {steps.map((s, i) => (
                <span key={s.title} className={cn("da-stroke h-3 flex-1", i <= step ? "bg-da-fg" : "bg-da-surface")} />
              ))}
            </div>
            <div className="mt-auto flex gap-3 pt-8">
              <button
                type="button"
                onClick={() => setStep((s) => s - 1)}
                disabled={step === 0}
                className="da-focus da-stroke bg-da-surface px-5 py-3 font-bold disabled:opacity-40"
              >
                Back
              </button>
              <button
                type="button"
                onClick={() => {
                  if (last) {
                    onFinish?.();
                    setOpen(false);
                  } else setStep((s) => s + 1);
                }}
                className="da-focus da-stroke flex-1 bg-da-fg px-5 py-3 font-bold text-da-bg shadow-da-sm hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none"
              >
                {last ? finishLabel : "Next →"}
              </button>
            </div>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

export default OnboardingModal;