Welcome Modal

"use client";

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

export interface WelcomeStep {
  title: string;
  text: string;
  tone: "sage" | "clay" | "sand";
}

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

const TONE = { sage: "bg-da-accent text-da-accent-fg", clay: "bg-da-secondary text-da-secondary-fg", sand: "bg-da-muted text-da-fg" } as const;

const DEFAULT_STEPS: WelcomeStep[] = [
  { title: "Welcome to Grove", text: "Let’s get your first footprint in an afternoon. We’ll go gently.", tone: "sage" },
  { title: "Connect your tools", text: "Accounting, cloud and travel — Grove reads the numbers so you don’t have to.", tone: "clay" },
  { title: "Pick your first actions", text: "We’ll suggest three changes with the most impact for the least effort.", tone: "sand" },
];

/** Onboarding dialog: an illustrated tinted header (sprout growing with each step), serif title and copy, leaf-shaped step dots, Back/Next pills and “Let’s begin” on the last step. */
export function WelcomeModal({ trigger, defaultOpen, steps = DEFAULT_STEPS, onFinish, da = "organic-soft" }: WelcomeModalProps) {
  const [open, setOpen] = useState(defaultOpen ?? false);
  const [i, setI] = useState(0);
  const s = steps[i] ?? steps[0]!;
  const last = i === steps.length - 1;
  return (
    <Dialog.Root
      open={open}
      onOpenChange={(o) => {
        setOpen(o);
        if (!o) setI(0);
      }}
    >
      {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}
      <Dialog.Portal>
        <Dialog.Overlay
          data-da={da}
          className="fixed inset-0 z-50 bg-da-overlay backdrop-blur-[2px] transition-opacity duration-(--da-duration) starting:opacity-0 motion-reduce:transition-none"
        />
        <Dialog.Content
          data-da={da}
          className="fixed top-1/2 left-1/2 z-50 w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-lg outline-none transition-[opacity,scale] duration-(--da-duration-slow) ease-da-emphasized starting:scale-95 starting:opacity-0 motion-reduce:transition-none"
        >
          <div aria-hidden className={cn("grid h-44 place-items-center transition-colors duration-(--da-duration-slow)", TONE[s.tone])}>
            <svg viewBox="0 0 100 100" className="h-28">
              <ellipse cx="50" cy="92" rx="30" ry="4" fill="currentColor" opacity=".2" />
              <path
                d="M50 92V40"
                stroke="currentColor"
                strokeWidth="3"
                strokeLinecap="round"
                style={{
                  transform: `scaleY(${0.45 + i * 0.28})`,
                  transformOrigin: "50px 92px",
                  transition: "transform var(--da-duration-slow) var(--da-ease)",
                }}
              />
              <path d="M50 70c-14 0-22-8-22-22 14 0 22 8 22 22Z" fill="currentColor" opacity={i >= 0 ? 0.8 : 0} />
              <path
                d="M50 58c12 0 19-7 19-19-12 0-19 7-19 19Z"
                fill="currentColor"
                style={{ opacity: i >= 1 ? 1 : 0, transition: "opacity var(--da-duration-slow)" }}
              />
              <circle cx="50" cy="30" r="7" fill="var(--da-secondary-fg)" style={{ opacity: i >= 2 ? 1 : 0, transition: "opacity var(--da-duration-slow)" }} />
            </svg>
          </div>
          <div className="p-8">
            <Dialog.Title className="font-da-display text-3xl">{s.title}</Dialog.Title>
            <Dialog.Description className="mt-2 text-da-muted-fg">{s.text}</Dialog.Description>
            <div className="mt-8 flex items-center justify-between gap-4">
              <div className="flex gap-1.5" aria-label={`Step ${i + 1} of ${steps.length}`} role="img">
                {steps.map((_, j) => (
                  <span
                    key={j}
                    className={cn("h-2.5 rounded-[60%_0] transition-all duration-(--da-duration)", j === i ? "w-6 bg-da-primary" : "w-2.5 bg-da-border-strong")}
                  />
                ))}
              </div>
              <div className="flex gap-2">
                {i > 0 && (
                  <button type="button" onClick={() => setI(i - 1)} className="da-focus h-11 rounded-da-pill px-4 font-medium hover:bg-da-surface-2">
                    Back
                  </button>
                )}
                <button
                  type="button"
                  onClick={() => {
                    if (last) {
                      onFinish?.();
                      setOpen(false);
                      setI(0);
                    } else setI(i + 1);
                  }}
                  className="da-focus h-11 rounded-da-pill bg-da-primary px-6 font-medium text-da-primary-fg hover:bg-da-primary/90"
                >
                  {last ? "Let’s begin" : "Next"}
                </button>
              </div>
            </div>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

export default WelcomeModal;