Settings Page

// Shared motion tokens. Easing curves mirror the CSS custom properties in
// globals.css; springs are the canonical physics used across components.
// Strong custom variants — defaults like `ease-in`/`ease-out` feel weak.

export const EASE_OUT = [0.16, 1, 0.3, 1] as const;
export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;
export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;

/** CSS string form of EASE_OUT for inline style transitions. */
export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)";

/** Press feedback on buttons and other tappable surfaces. */
export const SPRING_PRESS = {
  type: "spring",
  stiffness: 500,
  damping: 30,
  mass: 0.6,
} as const;

/** Content swaps — label/icon slots trading places inside a control. */
export const SPRING_SWAP = {
  type: "spring",
  stiffness: 460,
  damping: 30,
  mass: 0.55,
} as const;

/** Overlay panel entrances — modals and sheets summoned by pointer. */
export const SPRING_PANEL = {
  type: "spring",
  stiffness: 420,
  damping: 40,
  mass: 0.5,
} as const;

/** Shared-layout glides — pills, indicators and panels morphing between positions. */
export const SPRING_LAYOUT = {
  type: "spring",
  stiffness: 360,
  damping: 32,
  mass: 0.6,
} as const;

/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */
export const SPRING_MOUSE = {
  stiffness: 200,
  damping: 15,
  mass: 0.3,
} as const;

/** Dragged handles and fills (sliders) — critically damped `useSpring` config,
 * so the value follows the pointer butterily and never rebounds off an end. */
export const SPRING_GLIDE = {
  stiffness: 700,
  damping: 50,
  mass: 0.5,
} as const;

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

// Shared touch primitives. iOS and iPadOS run their own gestures on top of the
// page — the long-press selection callout and the selection it drags in with
// it — and they win: once the platform claims a touch it cancels ours
// mid-gesture, so a press-and-hold or a drag simply dies. Surfaces that own
// their gesture have to opt out.
//
// What the two classes below cover, precisely:
// - `-webkit-touch-callout: none` stops iOS's long-press callout. WebKit-only:
//   it is not a property other engines have, so it is inert everywhere else.
// - `user-select: none` stops the long-press selection on every engine,
//   Android included, and stops a drag from painting a selection under the
//   cursor. It is inherited, so it reaches every descendant — which is why the
//   two classes differ only in whether they apply it unconditionally.
// What neither covers:
// - Chrome for Android's long-press menu on a link or an image. No CSS
//   suppresses it; a gesture surface that wraps one needs its own
//   `onContextMenu` with `preventDefault()`.
// - The native drag of an `<img>` or `<a>` descendant. `-webkit-user-drag` is
//   not inherited and plain divs and buttons are not drag sources, so setting
//   it on the surface does nothing — the child itself needs `draggable={false}`.

/**
 * Classes for a surface that *is* the control: a thumb, a drum, a stage, a
 * handle, a hold button. Selection is suppressed on every input, because a
 * drag that highlights the control's own label is wrong on a mouse too.
 * Compose with `touch-none` when the surface also owns the scroll axis — leave
 * it off when the page must still scroll from there.
 */
export const TOUCH_GESTURE_CLASS = "select-none [-webkit-touch-callout:none]";

/**
 * The same opt-out for a gesture surface that wraps content the consumer owns:
 * a scroller, a context-menu trigger, a sheet header, a list row. Selection is
 * suppressed only where the platform runs its own press gestures — a coarse
 * pointer — so a mouse user can still select and copy that content. If the
 * gesture itself would paint a selection under the cursor, add `select-none`
 * for the duration of the gesture rather than reaching for
 * `TOUCH_GESTURE_CLASS`.
 *
 * `pointer: coarse` describes the *primary* pointer and nothing else, so a
 * hybrid machine reads it wrong in both directions: a tablet with a mouse
 * plugged in keeps touch as primary and loses mouse selection, and a laptop
 * with a touchscreen keeps the mouse as primary and leaves selection live
 * under a finger. No media query can answer per interaction — the query is
 * about the device, and the question is about the gesture in progress. The
 * default stays here because it is right on the machines that are one thing or
 * the other, and losing a selection is a nuisance; where the miss costs a
 * *gesture* instead, the surface pairs it with `holdSelection` on the press.
 */
export const TOUCH_GESTURE_CONTENT_CLASS =
  "[-webkit-touch-callout:none] pointer-coarse:select-none";

/**
 * Grow a small control's *hit area* to at least 44×44px (WCAG 2.5.5, Apple
 * HIG) on a coarse pointer, without changing what it looks like or the space
 * it takes in layout. An invisible `::after` box, centered on the control and
 * `max(100%, 2.75rem)` on each axis, catches the taps: a 32px icon button
 * reaches 6px past each edge, a wide 40px button only grows vertically, and a
 * control already 44px or larger is left as it is. Hit-testing a pseudo
 * element lands on its owner, so handlers, focus and `:active` all behave.
 *
 * Mouse and trackpad rendering is untouched — nothing here applies outside
 * `pointer: coarse`. Requirements on the element it goes on:
 * - It must be the containing block: add `relative` (and keep it mergeable, so
 *   a consumer's `absolute` still wins through `cn`).
 * - It must not clip itself (`overflow-hidden`), or the overhang is clipped
 *   away along with its hit area.
 * - It must render children: `<input>` and other void elements have no
 *   `::after`. Put it on the wrapper or label instead.
 * - It must not already use `::after` for something visible.
 *
 * Centered 44px means two 32px buttons with a 4px gap overlap by 8px; the
 * later one wins that strip, which still ends well short of the earlier
 * button's visual center. Below a ~32px pitch the later neighbour starts
 * eating into that center — use `TOUCH_TARGET_Y_CLASS` for such dense rows.
 *
 * The overhang is real geometry: inside a scroll container it counts as
 * scrollable overflow, so a control flush against a scroller's edge can add a
 * few pixels of scroll on touch screens. Give such a scroller a little padding
 * on that side.
 */
export const TOUCH_TARGET_CLASS =
  "pointer-coarse:after:absolute pointer-coarse:after:top-1/2 pointer-coarse:after:left-1/2 pointer-coarse:after:size-[max(100%,2.75rem)] pointer-coarse:after:-translate-x-1/2 pointer-coarse:after:-translate-y-1/2 pointer-coarse:after:content-['']";

/**
 * `TOUCH_TARGET_CLASS` on the vertical axis only, for controls packed tighter
 * than ~32px apart in a row (pagination dots, dense swatches), where growing
 * sideways would hand most of each control to its neighbour. Same rules.
 */
export const TOUCH_TARGET_Y_CLASS =
  "pointer-coarse:after:absolute pointer-coarse:after:inset-x-0 pointer-coarse:after:top-1/2 pointer-coarse:after:h-[max(100%,2.75rem)] pointer-coarse:after:-translate-y-1/2 pointer-coarse:after:content-['']";

/**
 * Suppress selection on `element` for as long as a gesture is running on it,
 * whatever the primary pointer of the machine happens to be. Returns the
 * release. Inline, so it wins over the class above and is gone again the
 * moment the gesture ends.
 *
 * For the press gestures a native selection would otherwise steal — a
 * long-press that opens a menu. Elsewhere prefer the classes: a surface that
 * takes selection away for the whole session is a surface whose text nobody
 * can copy.
 */
export function holdSelection(element: HTMLElement) {
  element.style.setProperty("user-select", "none");
  element.style.setProperty("-webkit-user-select", "none");
  return () => {
    element.style.removeProperty("user-select");
    element.style.removeProperty("-webkit-user-select");
  };
}

/**
 * Pointer capture, best effort. WebKit throws `NotFoundError` when the pointer
 * is already gone by the time the handler runs — routine on iOS, where the
 * system can claim the touch first — and an uncaught throw takes the rest of
 * the handler, the gesture included, down with it. Touch pointers carry
 * implicit capture anyway, so losing it is never fatal.
 */
export function capturePointer(element: Element, pointerId: number) {
  try {
    element.setPointerCapture(pointerId);
  } catch {
    // Pointer is no longer active — implicit capture still applies on touch.
  }
}

/** Release a capture taken with `capturePointer`, ignoring a stale pointer. */
export function releasePointer(element: Element, pointerId: number) {
  try {
    if (element.hasPointerCapture(pointerId)) {
      element.releasePointerCapture(pointerId);
    }
  } catch {
    // Capture was already dropped by the browser.
  }
}

/**
 * Whether this event came from a pointer that is *hovering*: not a touch, and
 * not currently pressed. Which input the user is holding right now is not
 * something a device capability can answer — a touchscreen laptop hovers and
 * taps, and iPadOS reports a fine hovering pointer for a finger — so both
 * paths stay live and each handler branches on the event it was given.
 *
 * A pen resting on the glass is making contact, not hovering: `buttons` is the
 * tell, and it sends a pen tap down the same route a finger takes.
 *
 * This answers what an *enter* asks. A leave is the other half of a pair and
 * has to be read against the enter that started it — `useHoverGesture` in
 * `lib/hooks/use-hover-gesture` does that, and hover surfaces should use it
 * rather than asking this question twice.
 */
export const isHoveringPointer = (event: {
  pointerType: string;
  buttons: number;
}) => event.pointerType !== "touch" && event.buttons === 0;

"use client";

import { useEffect, useState } from "react";

/**
 * Returns true only on devices that have a true hover (mouse / trackpad).
 * Touch devices fire phantom `:hover` on tap that sticks until tap-elsewhere
 * — gate hover-only effects (scale lifts, magnetic pulls) behind this.
 */
export function useHoverCapable() {
  const [canHover, setCanHover] = useState(false);

  useEffect(() => {
    if (typeof window === "undefined" || !window.matchMedia) return;
    const mq = window.matchMedia("(hover: hover) and (pointer: fine)");
    const update = () => setCanHover(mq.matches);
    update();
    mq.addEventListener?.("change", update);
    return () => mq.removeEventListener?.("change", update);
  }, []);

  return canHover;
}

"use client";
// karaui.kamisama-v0.my.id/components/blocks/settings-page

import {
  Bell,
  CreditCard,
  type LucideIcon,
  Monitor,
  Moon,
  Palette,
  Sun,
  Trash2,
  User,
} from "lucide-react";
import {
  AnimatePresence,
  animate,
  LayoutGroup,
  motion,
  useReducedMotion,
} from "motion/react";
import { type ReactNode, useEffect, useId, useMemo, useRef, useState } from "react";
import { Badge } from "@/components/motion/badge";
import { Button, StatefulButton } from "@/components/motion/button";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogConfirmInput,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/motion/dialog";
import { InlineEdit } from "@/components/motion/inline-edit";
import { Progress } from "@/components/motion/progress";
import { ScrollArea } from "@/components/motion/scroll-area";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/motion/select";
import { Switch } from "@/components/motion/switch";
import { ToggleGroup, ToggleGroupItem } from "@/components/motion/toggle-group";
import { EASE_OUT, SPRING_LAYOUT, SPRING_PANEL } from "@/lib/ease";
import { cn } from "@/lib/utils";

export type SettingsSection = "profile" | "notifications" | "appearance" | "billing";

export type SettingsValues = {
  name: string;
  username: string;
  email: string;
  bio: string;
  notifyMentions: boolean;
  notifyComments: boolean;
  notifyProduct: boolean;
  digest: "off" | "daily" | "weekly";
  theme: "system" | "light" | "dark";
  density: "comfortable" | "compact";
  reduceMotion: boolean;
};

export type SettingsBilling = {
  plan: string;
  price: string;
  renewal: string;
  seats: { used: number; total: number };
  storage: { used: number; total: number; unit: string };
  /** Display-only label such as "Card ending 4242". Never real card data. */
  paymentMethod?: string;
};

export interface SettingsPageProps {
  defaultValues?: Partial<SettingsValues>;
  /** Persist the draft. Reject to keep the bar open with an error and a shake. */
  onSave?: (values: SettingsValues) => void | Promise<void>;
  /** Fires after the type-to-confirm dialog. */
  onDeleteAccount?: () => void | Promise<void>;
  onManageBilling?: () => void;
  /** Controlled active section. */
  section?: SettingsSection;
  defaultSection?: SettingsSection;
  onSectionChange?: (section: SettingsSection) => void;
  billing?: SettingsBilling;
  className?: string;
}

const DEFAULT_VALUES: SettingsValues = {
  name: "Ada Lovelace",
  username: "ada",
  email: "ada@example.com",
  bio: "Writing the first programs for engines that don't exist yet.",
  notifyMentions: true,
  notifyComments: true,
  notifyProduct: false,
  digest: "weekly",
  theme: "system",
  density: "comfortable",
  reduceMotion: false,
};

const DEFAULT_BILLING: SettingsBilling = {
  plan: "Pro",
  price: "$12 / month",
  renewal: "Renews Nov 14, 2026",
  seats: { used: 3, total: 5 },
  storage: { used: 18, total: 50, unit: "GB" },
  paymentMethod: "Card ending 4242",
};

const SECTIONS: { id: SettingsSection; label: string; icon: LucideIcon }[] = [
  { id: "profile", label: "Profile", icon: User },
  { id: "notifications", label: "Notifications", icon: Bell },
  { id: "appearance", label: "Appearance", icon: Palette },
  { id: "billing", label: "Billing", icon: CreditCard },
];

const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const USERNAME_PATTERN = /^[a-z0-9_]{3,20}$/;
const SHAKE = { x: [0, -6, 6, -4, 4, -2, 0] };
const SAVED_HOLD_MS = 1100;

function SettingRow({
  title,
  description,
  children,
  stacked,
}: {
  title: string;
  description?: string;
  children: ReactNode;
  stacked?: boolean;
}) {
  return (
    <div
      className={cn(
        "flex gap-3 border-b border-border py-3.5 last:border-b-0",
        stacked ? "flex-col" : "items-center justify-between",
      )}
    >
      <div className="min-w-0">
        <p className="text-sm font-medium text-foreground">{title}</p>
        {description ? (
          <p className="text-xs text-muted-foreground">{description}</p>
        ) : null}
      </div>
      {children}
    </div>
  );
}

function SectionHeading({ title, description }: { title: string; description: string }) {
  return (
    <div className="mb-2 flex flex-col gap-0.5">
      <h3 className="text-base font-semibold tracking-tight text-foreground">{title}</h3>
      <p className="text-sm text-muted-foreground">{description}</p>
    </div>
  );
}

/**
 * Account settings block: a side nav whose active pill glides between
 * Profile / Notifications / Appearance / Billing, sections built from
 * `InlineEdit`, `Switch`, `Select`, `ToggleGroup` and `Progress`, a draft that
 * raises a sticky "unsaved changes" bar (Save via `StatefulButton`, Reset)
 * and a danger zone behind a type-to-confirm `AlertDialog`.
 */
export function SettingsPage({
  defaultValues,
  onSave,
  onDeleteAccount,
  onManageBilling,
  section: sectionProp,
  defaultSection = "profile",
  onSectionChange,
  billing = DEFAULT_BILLING,
  className,
}: SettingsPageProps) {
  const reduce = useReducedMotion();
  const navId = useId();

  const [internalSection, setInternalSection] = useState(defaultSection);
  const section = sectionProp ?? internalSection;
  const selectSection = (next: SettingsSection) => {
    if (sectionProp === undefined) setInternalSection(next);
    onSectionChange?.(next);
  };

  const [saved, setSaved] = useState<SettingsValues>(() => ({
    ...DEFAULT_VALUES,
    ...defaultValues,
  }));
  const [draft, setDraft] = useState<SettingsValues>(saved);
  const [saveState, setSaveState] = useState<"idle" | "loading" | "success" | "error">(
    "idle",
  );
  const barRef = useRef<HTMLDivElement>(null);

  const changed = useMemo(
    () => (Object.keys(draft) as (keyof SettingsValues)[]).filter((k) => draft[k] !== saved[k]),
    [draft, saved],
  );
  const dirty = changed.length > 0;
  const showBar = dirty || saveState === "success";

  useEffect(() => {
    if (saveState !== "success") return;
    const id = window.setTimeout(() => setSaveState("idle"), SAVED_HOLD_MS);
    return () => window.clearTimeout(id);
  }, [saveState]);

  const set = <K extends keyof SettingsValues>(key: K, value: SettingsValues[K]) => {
    setDraft((prev) => ({ ...prev, [key]: value }));
    if (saveState === "error") setSaveState("idle");
  };

  const save = async () => {
    setSaveState("loading");
    try {
      await onSave?.(draft);
      setSaved(draft);
      setSaveState("success");
    } catch {
      setSaveState("error");
      if (!reduce && barRef.current) {
        animate(barRef.current, SHAKE, { duration: 0.42, ease: EASE_OUT });
      }
    }
  };

  const reset = () => {
    setDraft(saved);
    setSaveState("idle");
  };

  const fade = reduce
    ? { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }
    : {
        initial: { opacity: 0, y: 8 },
        animate: { opacity: 1, y: 0 },
        exit: { opacity: 0, y: -4 },
      };

  let content: ReactNode;
  switch (section) {
    case "profile":
      content = (
        <>
          <SectionHeading title="Profile" description="How you appear to your team." />
          <div className="flex items-center gap-3 py-3">
            <span
              aria-hidden
              className="grid size-12 shrink-0 place-items-center rounded-full bg-foreground text-lg font-semibold text-background"
            >
              {draft.name.trim().slice(0, 1).toUpperCase() || "?"}
            </span>
            <div className="min-w-0">
              <p className="truncate text-sm font-medium text-foreground">{draft.name}</p>
              <p className="truncate text-xs text-muted-foreground">@{draft.username}</p>
            </div>
          </div>
          <SettingRow title="Display name" stacked>
            <InlineEdit
              label="Display name"
              value={draft.name}
              maxLength={48}
              validate={(next) => (next.trim() ? null : "Name can't be empty.")}
              onSave={(next) => set("name", next.trim())}
            />
          </SettingRow>
          <SettingRow title="Username" description="Lowercase letters, numbers, underscores." stacked>
            <InlineEdit
              label="Username"
              value={draft.username}
              maxLength={20}
              validate={(next) =>
                USERNAME_PATTERN.test(next) ? null : "Use 3–20 of a–z, 0–9 or _."
              }
              onSave={(next) => set("username", next)}
            />
          </SettingRow>
          <SettingRow title="Email" stacked>
            <InlineEdit
              label="Email"
              value={draft.email}
              validate={(next) =>
                EMAIL_PATTERN.test(next) ? null : "That doesn't look like an email address."
              }
              onSave={(next) => set("email", next.trim())}
            />
          </SettingRow>
          <SettingRow title="Bio" stacked>
            <InlineEdit
              label="Bio"
              multiline
              maxLength={160}
              placeholder="Tell people a little about yourself"
              value={draft.bio}
              onSave={(next) => set("bio", next)}
            />
          </SettingRow>

          <div className="mt-5 rounded-2xl border border-destructive/30 p-4">
            <p className="text-sm font-semibold text-destructive">Danger zone</p>
            <div className="mt-1 flex flex-wrap items-center justify-between gap-3">
              <p className="max-w-64 text-xs text-muted-foreground">
                Permanently delete your account and everything in it.
              </p>
              <AlertDialog confirmText={saved.username}>
                <AlertDialogTrigger
                  variant="outline"
                  size="sm"
                  className="border-destructive/40 text-destructive hover:bg-destructive/10"
                >
                  <Trash2 className="size-3.5" aria-hidden />
                  Delete account
                </AlertDialogTrigger>
                <AlertDialogContent>
                  <AlertDialogHeader>
                    <AlertDialogTitle>Delete your account?</AlertDialogTitle>
                    <AlertDialogDescription>
                      This removes your profile, projects and billing history. It
                      can&apos;t be undone.
                    </AlertDialogDescription>
                  </AlertDialogHeader>
                  <AlertDialogConfirmInput />
                  <AlertDialogFooter>
                    <AlertDialogCancel />
                    <AlertDialogAction onClick={() => void onDeleteAccount?.()}>
                      Delete account
                    </AlertDialogAction>
                  </AlertDialogFooter>
                </AlertDialogContent>
              </AlertDialog>
            </div>
          </div>
        </>
      );
      break;
    case "notifications":
      content = (
        <>
          <SectionHeading
            title="Notifications"
            description="Choose what reaches your inbox."
          />
          <SettingRow title="Mentions" description="When someone @mentions you.">
            <Switch
              ariaLabel="Mentions"
              checked={draft.notifyMentions}
              onCheckedChange={(next) => set("notifyMentions", next)}
            />
          </SettingRow>
          <SettingRow title="Comments" description="Replies on threads you follow.">
            <Switch
              ariaLabel="Comments"
              checked={draft.notifyComments}
              onCheckedChange={(next) => set("notifyComments", next)}
            />
          </SettingRow>
          <SettingRow title="Product updates" description="New features, at most monthly.">
            <Switch
              ariaLabel="Product updates"
              checked={draft.notifyProduct}
              onCheckedChange={(next) => set("notifyProduct", next)}
            />
          </SettingRow>
          <SettingRow title="Email digest" description="A summary of activity you missed.">
            <Select
              value={draft.digest}
              onValueChange={(next) => set("digest", next as SettingsValues["digest"])}
              className="w-32 shrink-0"
            >
              <SelectTrigger>
                <SelectValue placeholder="Digest" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="off">Off</SelectItem>
                <SelectItem value="daily">Daily</SelectItem>
                <SelectItem value="weekly">Weekly</SelectItem>
              </SelectContent>
            </Select>
          </SettingRow>
        </>
      );
      break;
    case "appearance":
      content = (
        <>
          <SectionHeading title="Appearance" description="Make the workspace yours." />
          <SettingRow title="Theme" description="Follow the system or pick one." stacked>
            <ToggleGroup
              type="single"
              required
              variant="outline"
              aria-label="Theme"
              value={draft.theme}
              onValueChange={(next) => set("theme", next as SettingsValues["theme"])}
              className="w-fit"
            >
              <ToggleGroupItem value="system">
                <Monitor aria-hidden />
                System
              </ToggleGroupItem>
              <ToggleGroupItem value="light">
                <Sun aria-hidden />
                Light
              </ToggleGroupItem>
              <ToggleGroupItem value="dark">
                <Moon aria-hidden />
                Dark
              </ToggleGroupItem>
            </ToggleGroup>
          </SettingRow>
          <SettingRow title="Density" description="Row height in lists and tables." stacked>
            <ToggleGroup
              type="single"
              required
              variant="outline"
              aria-label="Density"
              value={draft.density}
              onValueChange={(next) => set("density", next as SettingsValues["density"])}
              className="w-fit"
            >
              <ToggleGroupItem value="comfortable">Comfortable</ToggleGroupItem>
              <ToggleGroupItem value="compact">Compact</ToggleGroupItem>
            </ToggleGroup>
          </SettingRow>
          <SettingRow title="Reduce motion" description="Fade instead of slide.">
            <Switch
              ariaLabel="Reduce motion"
              checked={draft.reduceMotion}
              onCheckedChange={(next) => set("reduceMotion", next)}
            />
          </SettingRow>
        </>
      );
      break;
    case "billing":
      content = (
        <>
          <SectionHeading title="Billing" description="Your plan, usage and payment method." />
          <div className="mt-2 flex items-center justify-between gap-3 rounded-2xl border border-border bg-muted/40 p-4">
            <div>
              <div className="flex items-center gap-2">
                <p className="text-sm font-semibold text-foreground">{billing.plan} plan</p>
                <Badge variant="success" size="sm" dot>
                  Active
                </Badge>
              </div>
              <p className="text-xs text-muted-foreground">
                {billing.price} · {billing.renewal}
              </p>
            </div>
            <Button size="sm" variant="secondary" onClick={onManageBilling}>
              Manage
            </Button>
          </div>
          <div className="flex flex-col gap-4 py-4">
            <Progress
              size="sm"
              label="Seats"
              value={billing.seats.used}
              max={billing.seats.total}
              getValueText={() => `${billing.seats.used} of ${billing.seats.total}`}
              trackClassName="bg-foreground/10"
            />
            <Progress
              size="sm"
              label={`Storage · ${billing.storage.used} of ${billing.storage.total} ${billing.storage.unit}`}
              value={billing.storage.used}
              max={billing.storage.total}
              trackClassName="bg-foreground/10"
            />
          </div>
          {billing.paymentMethod ? (
            <SettingRow title="Payment method" description={billing.paymentMethod}>
              <Button size="sm" variant="ghost" onClick={onManageBilling}>
                Update
              </Button>
            </SettingRow>
          ) : null}
        </>
      );
      break;
  }

  return (
    <div className={cn("@container h-[28rem] w-full", className)}>
      <div className="flex h-full flex-col overflow-hidden rounded-3xl border border-border bg-card @lg:flex-row">
        <LayoutGroup id={navId}>
          <nav
            aria-label="Settings sections"
            className="flex shrink-0 gap-1 overflow-x-auto border-b border-border p-2 [scrollbar-width:none] @lg:w-44 @lg:flex-col @lg:border-r @lg:border-b-0 @lg:p-3 [&::-webkit-scrollbar]:hidden"
          >
            {SECTIONS.map((item) => {
              const active = item.id === section;
              const Icon = item.icon;
              return (
                <button
                  key={item.id}
                  type="button"
                  aria-current={active ? "page" : undefined}
                  onClick={() => selectSection(item.id)}
                  className={cn(
                    "relative flex shrink-0 items-center gap-2.5 rounded-xl px-3 py-2 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
                    active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
                  )}
                >
                  {active ? (
                    <motion.span
                      layoutId="settings-nav-pill"
                      transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
                      className="absolute inset-0 rounded-xl bg-muted"
                      aria-hidden
                    />
                  ) : null}
                  <Icon className="relative size-4" aria-hidden />
                  <span className="relative font-medium">{item.label}</span>
                </button>
              );
            })}
          </nav>
        </LayoutGroup>

        <div className="relative min-h-0 min-w-0 flex-1">
          <ScrollArea className="h-full" aria-label={`${section} settings`}>
            <div className="px-5 pt-5 pb-24">
              <AnimatePresence mode="wait" initial={false}>
                <motion.div
                  key={section}
                  {...fade}
                  transition={{ duration: 0.2, ease: EASE_OUT }}
                >
                  {content}
                </motion.div>
              </AnimatePresence>
            </div>
          </ScrollArea>

          <AnimatePresence>
            {showBar ? (
              <motion.div
                initial={reduce ? { opacity: 0 } : { opacity: 0, y: 72 }}
                animate={{ opacity: 1, y: 0 }}
                exit={
                  reduce
                    ? { opacity: 0 }
                    : { opacity: 0, y: 72, transition: { duration: 0.18, ease: EASE_OUT } }
                }
                transition={reduce ? { duration: 0.15 } : SPRING_PANEL}
                className="absolute inset-x-3 bottom-3 z-20"
              >
                <div
                  ref={barRef}
                  role="status"
                  className="flex items-center justify-between gap-3 rounded-2xl border border-border-strong bg-card py-2 pr-2 pl-4 shadow-lg"
                >
                  <p className="min-w-0 truncate text-sm text-foreground">
                    {saveState === "success"
                      ? "All changes saved"
                      : saveState === "error"
                        ? "Couldn't save. Try again."
                        : `${changed.length} unsaved ${changed.length === 1 ? "change" : "changes"}`}
                  </p>
                  <div className="flex shrink-0 items-center gap-1.5">
                    <Button
                      size="sm"
                      variant="ghost"
                      onClick={reset}
                      disabled={!dirty || saveState === "loading"}
                    >
                      Reset
                    </Button>
                    <StatefulButton
                      size="sm"
                      state={saveState}
                      loadingText="Saving"
                      successText="Saved"
                      errorText="Retry"
                      onClick={() => void save()}
                      disabled={!dirty && saveState !== "success"}
                    >
                      Save
                    </StatefulButton>
                  </div>
                </div>
              </motion.div>
            ) : null}
          </AnimatePresence>
        </div>
      </div>
    </div>
  );
}

"use client";

import { X } from "lucide-react";
import {
  AnimatePresence,
  motion,
  PresenceContext,
  useAnimate,
  useReducedMotion,
  type Variants,
} from "motion/react";
import {
  type KeyboardEvent as ReactKeyboardEvent,
  type ReactNode,
  useContext,
  useEffect,
  useRef,
  useState,
} from "react";
import { EASE_OUT, SPRING_LAYOUT, SPRING_PANEL, SPRING_SWAP } from "@/lib/ease";
import { cn } from "@/lib/utils";

export type BadgeVariant =
  | "default"
  | "secondary"
  | "outline"
  | "destructive"
  | "success"
  | "warning";

export type BadgeSize = "sm" | "md" | "lg";

/** Soft tinted surface or a filled one. Only the status variants differ. */
export type BadgeTone = "soft" | "solid";

const BASE: Record<"default" | "secondary" | "outline", string> = {
  default: "border-transparent bg-primary text-primary-foreground",
  secondary: "border-transparent bg-foreground/[0.07] text-foreground",
  outline: "border-border-strong bg-transparent text-foreground",
};

// Status tints mix the token toward --foreground/--background (as `alert`
// does), so the text keeps its contrast in both themes and every design style.
const SOFT: Record<"destructive" | "success" | "warning", string> = {
  destructive:
    "border-[color-mix(in_oklab,var(--destructive)_30%,transparent)] bg-[color-mix(in_oklab,var(--destructive)_10%,var(--background))] text-[color-mix(in_oklab,var(--destructive)_78%,var(--foreground))]",
  success:
    "border-[color-mix(in_oklab,var(--success)_32%,transparent)] bg-[color-mix(in_oklab,var(--success)_11%,var(--background))] text-[color-mix(in_oklab,var(--success)_60%,var(--foreground))]",
  warning:
    "border-[color-mix(in_oklab,var(--warning)_40%,transparent)] bg-[color-mix(in_oklab,var(--warning)_13%,var(--background))] text-[color-mix(in_oklab,var(--warning)_52%,var(--foreground))]",
};

// Filled status badges. Red reads best with light text in both themes;
// green and amber are light hues, so they always get dark text.
const SOLID: Record<"destructive" | "success" | "warning", string> = {
  destructive:
    "border-transparent bg-destructive text-background dark:text-foreground",
  success:
    "border-transparent bg-success text-[color-mix(in_oklab,var(--success)_22%,var(--foreground))] dark:text-[color-mix(in_oklab,var(--success)_22%,var(--background))]",
  warning:
    "border-transparent bg-warning text-[color-mix(in_oklab,var(--warning)_22%,var(--foreground))] dark:text-[color-mix(in_oklab,var(--warning)_22%,var(--background))]",
};

const SIZE: Record<BadgeSize, string> = {
  sm: "h-5 gap-1 px-1.5 text-[11px] [&_svg]:size-3",
  md: "h-6 gap-1.5 px-2 text-xs [&_svg]:size-3.5",
  lg: "h-7 gap-1.5 px-2.5 text-[13px] [&_svg]:size-3.5",
};

// Count badges are circles at one digit and pills beyond.
const COUNT_SIZE: Record<BadgeSize, string> = {
  sm: "h-4 min-w-4 px-1 text-[10px]",
  md: "h-5 min-w-5 px-1.5 text-[11px]",
  lg: "h-6 min-w-6 px-1.5 text-xs",
};

function variantClass(variant: BadgeVariant, tone: BadgeTone) {
  if (variant === "default" || variant === "secondary" || variant === "outline") {
    return BASE[variant];
  }
  return tone === "solid" ? SOLID[variant] : SOFT[variant];
}

export interface BadgeProps {
  children?: ReactNode;
  variant?: BadgeVariant;
  /** Status variants only (destructive/success/warning). Default "soft". */
  tone?: BadgeTone;
  size?: BadgeSize;
  /** Leading status dot in the text color; `"pulse"` adds a radiating ring. */
  dot?: boolean | "pulse";
  /** Leading icon (sized to the badge). Ignored when `dot` is set. */
  icon?: ReactNode;
  /**
   * Makes the badge removable: an × button plays the exit, then calls this.
   * Focus moves to the neighbouring chip's × when the removal came from it.
   */
  onRemove?: () => void;
  /** Accessible name of the × button. Default `Remove <text>`. */
  removeLabel?: string;
  /**
   * Count mode: renders a compact number that rolls up or down as it changes
   * and bumps when it rises. Hidden at 0 unless `showZero`.
   */
  count?: number;
  /** Counts above this read "max+". Default 99. */
  max?: number;
  showZero?: boolean;
  /** Spoken label for count mode, e.g. `(n) => \`${n} unread\``. */
  countLabel?: (count: number) => string;
  className?: string;
}

/**
 * General-purpose badge: six variants, three sizes, an optional (pulsing) dot
 * or icon, removable chips with an exit animation, and a count mode with
 * rolling digits capped at "99+". For animated status transitions
 * (loading → success) use `AnimatedBadge` instead.
 */
export function Badge(props: BadgeProps) {
  if (props.count !== undefined) return <CountBadge {...props} count={props.count} />;
  return <LabelBadge {...props} />;
}

/* -------------------------------------------------------------------------- */
/*                                 Label badge                                */
/* -------------------------------------------------------------------------- */

function LabelBadge({
  children,
  variant = "default",
  tone = "soft",
  size = "md",
  dot = false,
  icon,
  onRemove,
  removeLabel,
  className,
}: BadgeProps) {
  const reduce = useReducedMotion() ?? false;
  // Inside an AnimatePresence the badge pops in when added; anywhere else it
  // renders as-is so server HTML is visible before hydration.
  const inPresence = useContext(PresenceContext) !== null;
  const rootRef = useRef<HTMLSpanElement>(null);
  const [leaving, setLeaving] = useState(false);
  const refocus = useRef<HTMLElement | null>(null);
  const removable = Boolean(onRemove);

  const hidden = reduce ? { opacity: 0 } : { opacity: 0, scale: 0.8 };

  const startRemove = (fromKeyboardFocus: boolean) => {
    if (leaving) return;
    if (fromKeyboardFocus) refocus.current = neighbourRemoveButton(rootRef.current);
    setLeaving(true);
  };

  const finishRemove = () => {
    if (!leaving) return;
    const target = refocus.current;
    refocus.current = null;
    onRemove?.();
    if (target) requestAnimationFrame(() => target.focus({ preventScroll: true }));
  };

  const text = typeof children === "string" ? children : undefined;

  return (
    <motion.span
      ref={rootRef}
      data-badge=""
      // Siblings glide into the gap a removed chip leaves (transform-only).
      layout={removable && !reduce ? "position" : false}
      initial={inPresence ? hidden : false}
      animate={
        leaving
          ? { ...hidden, pointerEvents: "none" }
          : { opacity: 1, scale: 1, pointerEvents: "auto" }
      }
      // Already faded out by the × — leave at once so siblings close the gap.
      exit={{
        ...hidden,
        pointerEvents: "none",
        transition: { duration: leaving ? 0 : 0.12, ease: EASE_OUT },
      }}
      transition={
        leaving
          ? { duration: 0.14, ease: EASE_OUT }
          : reduce
            ? { duration: 0.12 }
            : { ...SPRING_PANEL, layout: SPRING_LAYOUT }
      }
      onAnimationComplete={finishRemove}
      className={cn(
        "inline-flex shrink-0 select-none items-center whitespace-nowrap rounded-full border font-medium leading-none",
        SIZE[size],
        variantClass(variant, tone),
        removable && (size === "sm" ? "pr-0.5" : "pr-1"),
        className,
      )}
    >
      {dot ? (
        <Dot pulse={dot === "pulse" && !reduce} />
      ) : icon ? (
        <span aria-hidden="true" className="inline-flex shrink-0">
          {icon}
        </span>
      ) : null}
      <span className="min-w-0 truncate">{children}</span>
      {removable ? (
        <button
          type="button"
          data-badge-remove=""
          aria-label={removeLabel ?? (text ? `Remove ${text}` : "Remove")}
          onClick={(event) => startRemove(event.detail === 0)}
          onKeyDown={(event: ReactKeyboardEvent<HTMLButtonElement>) => {
            if (event.key === "Backspace" || event.key === "Delete") {
              event.preventDefault();
              startRemove(true);
            }
          }}
          className={cn(
            "inline-flex shrink-0 items-center justify-center rounded-full opacity-70 outline-none transition-[opacity,background-color] hover:bg-current/15 hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-current/40",
            size === "sm" ? "size-4" : "size-[18px]",
          )}
        >
          <X aria-hidden="true" strokeWidth={2.4} className="size-3!" />
        </button>
      ) : null}
    </motion.span>
  );
}

/** The × of the next chip in the row, else the previous one. */
function neighbourRemoveButton(node: HTMLElement | null) {
  if (!node) return null;
  const pick = (el: Element | null) =>
    el?.querySelector<HTMLElement>("[data-badge-remove]") ?? null;
  let next = node.nextElementSibling;
  while (next && !pick(next)) next = next.nextElementSibling;
  if (next) return pick(next);
  let prev = node.previousElementSibling;
  while (prev && !pick(prev)) prev = prev.previousElementSibling;
  return prev ? pick(prev) : null;
}

// One pulse cycle of the dot's radiating ring, in seconds. Slow on purpose:
// an ambient "live" signal, not feedback, so it sits well outside UI timing.
const PULSE_DURATION = 1.6;

function Dot({ pulse }: { pulse: boolean }) {
  return (
    <span aria-hidden="true" className="relative inline-flex size-1.5 shrink-0">
      {pulse ? (
        <motion.span
          className="absolute inset-0 rounded-full bg-current"
          initial={{ scale: 1, opacity: 0.55 }}
          animate={{ scale: 2.6, opacity: 0 }}
          transition={{
            duration: PULSE_DURATION,
            ease: EASE_OUT,
            repeat: Number.POSITIVE_INFINITY,
          }}
        />
      ) : null}
      <span className="relative size-1.5 rounded-full bg-current" />
    </span>
  );
}

/* -------------------------------------------------------------------------- */
/*                                 Count badge                                */
/* -------------------------------------------------------------------------- */

function CountBadge({
  count,
  max = 99,
  showZero = false,
  countLabel,
  variant = "destructive",
  tone = "solid",
  size = "md",
  className,
}: BadgeProps & { count: number }) {
  const reduce = useReducedMotion() ?? false;
  const [scope, animate] = useAnimate<HTMLSpanElement>();
  const value = Math.max(0, Math.round(count));
  const visible = value > 0 || showZero;
  const text = value > max ? `${max}+` : String(value);

  // Direction is derived during render (not in an effect) so the very render
  // that swaps the digits already rolls them the right way.
  const [seen, setSeen] = useState(value);
  const [direction, setDirection] = useState<1 | -1>(1);
  if (value !== seen) {
    setSeen(value);
    setDirection(value > seen ? 1 : -1);
  }

  // Rising counts bump the pill (not on the pop-in from zero, which has its
  // own entrance).
  const previous = useRef(value);
  useEffect(() => {
    const prev = previous.current;
    previous.current = value;
    if (value > prev && prev > 0 && !reduce && scope.current) {
      animate(scope.current, { scale: [1, 1.18, 1] }, { duration: 0.32, ease: EASE_OUT });
    }
  }, [value, reduce, animate, scope]);

  return (
    <AnimatePresence initial={false}>
      {visible ? (
        <motion.span
          key="count"
          initial={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.4 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={
            reduce
              ? { opacity: 0, transition: { duration: 0.1 } }
              : { opacity: 0, scale: 0.4, transition: { duration: 0.14, ease: EASE_OUT } }
          }
          transition={reduce ? { duration: 0.12 } : SPRING_PANEL}
          className={cn("inline-flex shrink-0", className)}
        >
          <span
            ref={scope}
            data-badge-count=""
            className={cn(
              "inline-flex items-center justify-center rounded-full border font-semibold leading-none tabular-nums",
              COUNT_SIZE[size],
              variantClass(variant, tone),
            )}
          >
            <span className="sr-only">{countLabel ? countLabel(value) : text}</span>
            <RollingCount text={text} direction={direction} reduce={reduce} />
          </span>
        </motion.span>
      ) : null}
    </AnimatePresence>
  );
}

const roll: Variants = {
  enter: (dir: 1 | -1) => ({ y: dir > 0 ? "100%" : "-100%", opacity: 0 }),
  center: { y: "0%", opacity: 1 },
  exit: (dir: 1 | -1) => ({
    y: dir > 0 ? "-100%" : "100%",
    opacity: 0,
    transition: { duration: 0.14, ease: EASE_OUT },
  }),
};

const fade: Variants = {
  enter: { opacity: 0 },
  center: { opacity: 1 },
  exit: { opacity: 0, transition: { duration: 0.1 } },
};

/**
 * Direction-aware digit roll. `NumberTicker` spins each digit along a 0–9
 * strip, so 9 → 10 would roll the ones digit backwards; here every changed
 * glyph slides in from the direction of change instead.
 */
function RollingCount({
  text,
  direction,
  reduce,
}: {
  text: string;
  direction: 1 | -1;
  reduce: boolean;
}) {
  const chars = text.split("");
  // Keyed by place value from the right so a digit keeps its slot as the
  // number grows on the left.
  const glyphs = chars.map((char, i) => ({ char, place: chars.length - 1 - i }));
  return (
    <span aria-hidden="true" className="inline-flex">
      {glyphs.map(({ char, place }) => (
        <span
          key={place}
          className="relative inline-flex h-[1.2em] items-center justify-center overflow-hidden"
        >
          <span className="invisible">{char}</span>
          <AnimatePresence initial={false} custom={direction}>
            <motion.span
              key={char}
              custom={direction}
              variants={reduce ? fade : roll}
              initial="enter"
              animate="center"
              exit="exit"
              transition={reduce ? { duration: 0.12 } : SPRING_SWAP}
              className="absolute inset-0 flex items-center justify-center"
            >
              {char}
            </motion.span>
          </AnimatePresence>
        </span>
      ))}
    </span>
  );
}

export type {
  ButtonLinkProps,
  ButtonProps,
  ButtonSize,
  ButtonVariant,
} from "./base";
export { Button, ButtonLink } from "./base";
export type { MagneticButtonProps } from "./magnetic";
export { MagneticButton } from "./magnetic";
export type { ButtonState, StatefulButtonProps } from "./stateful";
export { StatefulButton } from "./stateful";

"use client";

import { X } from "lucide-react";
import {
  AnimatePresence,
  animate,
  motion,
  useIsPresent,
  useReducedMotion,
} from "motion/react";
import {
  type ComponentPropsWithoutRef,
  type MouseEvent,
  type ReactElement,
  type ReactNode,
  type RefObject,
  cloneElement,
  createContext,
  forwardRef,
  isValidElement,
  useCallback,
  useContext,
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
  useSyncExternalStore,
} from "react";
import { createPortal } from "react-dom";
import { Button, type ButtonProps } from "@/components/motion/button";
import { Input, type InputProps } from "@/components/motion/input";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

/* -------------------------------------------------------------------------- */
/*                               Shared plumbing                              */
/* -------------------------------------------------------------------------- */

const FOCUSABLE_SELECTOR = [
  "a[href]",
  "button:not([disabled])",
  "input:not([disabled]):not([type='hidden'])",
  "select:not([disabled])",
  "textarea:not([disabled])",
  "[contenteditable='true']",
  '[tabindex]:not([tabindex="-1"])',
].join(",");

function getFocusable(root: HTMLElement | null) {
  if (!root) return [];
  return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
    (el) => el.tabIndex >= 0 && !el.closest("[inert]") && el.getClientRects().length > 0,
  );
}

// Open dialogs, innermost last. Only the top one answers Escape and Tab, so an
// AlertDialog opened from inside a Dialog doesn't close both at once.
const dialogStack: string[] = [];

// Reference-counted body scroll lock. The scrollbar's width is put back as
// padding so the page behind doesn't jump sideways when the bar disappears.
let lockCount = 0;
let savedBodyStyle: { overflow: string; paddingRight: string } | null = null;

function lockScroll() {
  lockCount += 1;
  if (lockCount > 1) return;
  const body = document.body;
  const scrollbar = window.innerWidth - document.documentElement.clientWidth;
  savedBodyStyle = {
    overflow: body.style.overflow,
    paddingRight: body.style.paddingRight,
  };
  if (scrollbar > 0) {
    const current = Number.parseFloat(getComputedStyle(body).paddingRight) || 0;
    body.style.paddingRight = `${current + scrollbar}px`;
  }
  body.style.overflow = "hidden";
}

function unlockScroll() {
  lockCount = Math.max(0, lockCount - 1);
  if (lockCount > 0 || !savedBodyStyle) return;
  document.body.style.overflow = savedBodyStyle.overflow;
  document.body.style.paddingRight = savedBodyStyle.paddingRight;
  savedBodyStyle = null;
}

const SM_QUERY = "(max-width: 639.98px)";

function subscribeSmall(callback: () => void) {
  const mql = window.matchMedia(SM_QUERY);
  mql.addEventListener("change", callback);
  return () => mql.removeEventListener("change", callback);
}

/** True below Tailwind's `sm` breakpoint. Always false on the server. */
function useBelowSm() {
  return useSyncExternalStore(
    subscribeSmall,
    () => window.matchMedia(SM_QUERY).matches,
    () => false,
  );
}

const SHAKE_X = [0, -7, 7, -5, 5, -2, 0];

/* -------------------------------------------------------------------------- */
/*                                   Context                                  */
/* -------------------------------------------------------------------------- */

type DialogContextValue = {
  open: boolean;
  setOpen: (open: boolean) => void;
  alert: boolean;
  contentId: string;
  titleId: string;
  descriptionId: string;
  hasDescription: boolean;
  setHasDescription: (value: boolean) => void;
  /** Type-to-confirm (AlertDialog only). */
  confirmText?: string;
  confirmValue: string;
  setConfirmValue: (value: string) => void;
  confirmValid: boolean;
  confirmAttempted: boolean;
  setConfirmAttempted: (value: boolean) => void;
  confirmFieldRef: RefObject<HTMLDivElement | null>;
  confirmInputRef: RefObject<HTMLInputElement | null>;
};

const DialogContext = createContext<DialogContextValue | null>(null);

function useDialogContext(component: string) {
  const context = useContext(DialogContext);
  if (!context) {
    throw new Error(`${component} must be used within <Dialog> or <AlertDialog>`);
  }
  return context;
}

export interface DialogProps {
  children: ReactNode;
  /** Controlled open state. */
  open?: boolean;
  /** Initial open state when uncontrolled. */
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
}

function DialogRoot({
  children,
  open: openProp,
  defaultOpen = false,
  onOpenChange,
  alert,
  confirmText,
}: DialogProps & { alert: boolean; confirmText?: string }) {
  const id = useId();
  const [internalOpen, setInternalOpen] = useState(defaultOpen);
  const controlled = openProp !== undefined;
  const open = controlled ? openProp : internalOpen;
  const [hasDescription, setHasDescription] = useState(false);
  const [confirmValue, setConfirmValue] = useState("");
  const [confirmAttempted, setConfirmAttempted] = useState(false);
  const confirmFieldRef = useRef<HTMLDivElement>(null);
  const confirmInputRef = useRef<HTMLInputElement>(null);

  const setOpen = useCallback(
    (next: boolean) => {
      if (!controlled) setInternalOpen(next);
      onOpenChange?.(next);
    },
    [controlled, onOpenChange],
  );

  // A fresh confirmation every time the dialog opens.
  useEffect(() => {
    if (!open) return;
    setConfirmValue("");
    setConfirmAttempted(false);
  }, [open]);

  const confirmValid =
    confirmText === undefined || confirmValue.trim() === confirmText;

  const value = useMemo<DialogContextValue>(
    () => ({
      open,
      setOpen,
      alert,
      contentId: `${id}-content`,
      titleId: `${id}-title`,
      descriptionId: `${id}-description`,
      hasDescription,
      setHasDescription,
      confirmText,
      confirmValue,
      setConfirmValue,
      confirmValid,
      confirmAttempted,
      setConfirmAttempted,
      confirmFieldRef,
      confirmInputRef,
    }),
    [
      open,
      setOpen,
      alert,
      id,
      hasDescription,
      confirmText,
      confirmValue,
      confirmValid,
      confirmAttempted,
    ],
  );

  return <DialogContext.Provider value={value}>{children}</DialogContext.Provider>;
}

/**
 * Modal dialog root. Holds open state (controlled via `open`/`onOpenChange`
 * or uncontrolled via `defaultOpen`) for its Trigger, Content and Close parts.
 */
export function Dialog(props: DialogProps) {
  return <DialogRoot {...props} alert={false} />;
}

export interface AlertDialogProps extends DialogProps {
  /**
   * Require the user to type this exact text (e.g. the project name) into
   * `AlertDialogConfirmInput` before `AlertDialogAction` goes through.
   */
  confirmText?: string;
}

/**
 * Interrupting confirmation. Renders `role="alertdialog"`, never closes on an
 * outside click, and focuses `AlertDialogCancel` first so a stray Enter can't
 * confirm a destructive action.
 */
export function AlertDialog({ confirmText, ...props }: AlertDialogProps) {
  return <DialogRoot {...props} alert confirmText={confirmText} />;
}

/* -------------------------------------------------------------------------- */
/*                               Trigger & Close                              */
/* -------------------------------------------------------------------------- */

type ClonableChild = ReactElement<Record<string, unknown>>;

function composeClick(
  child: ClonableChild,
  action: () => void,
): (event: MouseEvent<HTMLElement>) => void {
  const childOnClick = child.props.onClick as
    | ((event: MouseEvent<HTMLElement>) => void)
    | undefined;
  return (event) => {
    childOnClick?.(event);
    if (!event.defaultPrevented) action();
  };
}

export interface DialogTriggerProps extends ButtonProps {
  /** Merge behaviour onto the single child element instead of rendering a `Button`. */
  asChild?: boolean;
}

/** Opens the dialog. Renders a library `Button`, or wraps its child with `asChild`. */
export const DialogTrigger = forwardRef<HTMLButtonElement, DialogTriggerProps>(
  function DialogTrigger({ asChild, children, onClick, ...rest }, ref) {
    const context = useDialogContext("DialogTrigger");
    const aria = {
      "aria-haspopup": "dialog" as const,
      "aria-expanded": context.open,
      "aria-controls": context.open ? context.contentId : undefined,
    };

    if (asChild && isValidElement(children)) {
      const child = children as ClonableChild;
      return cloneElement(child, {
        ...aria,
        onClick: composeClick(child, () => context.setOpen(true)),
      });
    }

    return (
      <Button
        ref={ref}
        {...rest}
        {...aria}
        onClick={(event) => {
          onClick?.(event);
          if (!event.defaultPrevented) context.setOpen(true);
        }}
      >
        {children}
      </Button>
    );
  },
);

export interface DialogCloseProps extends ButtonProps {
  /** Merge behaviour onto the single child element instead of rendering a `Button`. */
  asChild?: boolean;
}

/** Closes the dialog. Renders a library `Button` (outline by default), or wraps its child. */
export const DialogClose = forwardRef<HTMLButtonElement, DialogCloseProps>(
  function DialogClose(
    { asChild, children, onClick, variant = "outline", ...rest },
    ref,
  ) {
    const context = useDialogContext("DialogClose");

    if (asChild && isValidElement(children)) {
      const child = children as ClonableChild;
      return cloneElement(child, {
        onClick: composeClick(child, () => context.setOpen(false)),
      });
    }

    return (
      <Button
        ref={ref}
        variant={variant}
        {...rest}
        onClick={(event) => {
          onClick?.(event);
          if (!event.defaultPrevented) context.setOpen(false);
        }}
      >
        {children}
      </Button>
    );
  },
);

/* -------------------------------------------------------------------------- */
/*                                   Content                                  */
/* -------------------------------------------------------------------------- */

export interface DialogContentProps {
  children: ReactNode;
  className?: string;
  /** Class for the dimmed, blurred backdrop. */
  overlayClassName?: string;
  /** Show the corner close (X) button. Default true for Dialog, false for AlertDialog. */
  showCloseButton?: boolean;
  closeLabel?: string;
  /**
   * Close when the backdrop is pressed. Default true for Dialog; AlertDialog
   * ignores it and never closes on an outside press.
   */
  closeOnOutsideClick?: boolean;
  /** Element to focus on open. Falls back to `[data-dialog-autofocus]`, then the first focusable. */
  initialFocus?: RefObject<HTMLElement | null>;
  /** Become a bottom-anchored sheet below the `sm` breakpoint. Default true. */
  sheetOnMobile?: boolean;
  /** Accessible name, when the content has no `DialogTitle`. */
  "aria-label"?: string;
}

const ENTER = { duration: 0.22, ease: EASE_OUT } as const;
const EXIT = { duration: 0.14, ease: EASE_OUT } as const;

function DialogContentInner({
  children,
  className,
  overlayClassName,
  showCloseButton,
  closeLabel = "Close",
  closeOnOutsideClick = true,
  initialFocus,
  sheetOnMobile = true,
  "aria-label": ariaLabel,
}: DialogContentProps) {
  const context = useDialogContext("DialogContent");
  const reduce = useReducedMotion() ?? false;
  const isPresent = useIsPresent();
  const belowSm = useBelowSm();
  const sheet = sheetOnMobile && belowSm;
  const panelRef = useRef<HTMLDivElement>(null);
  const stackId = useId();
  const { setOpen } = context;
  // Read through a ref so a new onOpenChange identity (inline handlers) does
  // not re-run the focus/scroll-lock effect and yank focus mid-typing.
  const setOpenRef = useRef(setOpen);
  const initialFocusRef = useRef(initialFocus);
  useEffect(() => {
    setOpenRef.current = setOpen;
    initialFocusRef.current = initialFocus;
  });
  const dismissOutside = closeOnOutsideClick && !context.alert;
  const withClose = showCloseButton ?? !context.alert;

  // Scroll lock, stack registration, initial focus, focus trap, Escape and
  // focus return. Runs while this panel is mounted *and* present, so the
  // exit animation already behaves like a closed dialog.
  useEffect(() => {
    if (!isPresent) return;
    const returnTo =
      document.activeElement instanceof HTMLElement ? document.activeElement : null;
    dialogStack.push(stackId);
    lockScroll();

    const frame = requestAnimationFrame(() => {
      const panel = panelRef.current;
      if (!panel) return;
      const target =
        initialFocusRef.current?.current ??
        panel.querySelector<HTMLElement>("[data-dialog-autofocus]") ??
        getFocusable(panel).find((el) => !el.hasAttribute("data-dialog-close-x")) ??
        panel;
      target.focus({ preventScroll: true });
    });

    const onKeyDown = (event: KeyboardEvent) => {
      if (dialogStack[dialogStack.length - 1] !== stackId) return;
      if (event.key === "Escape") {
        event.preventDefault();
        setOpenRef.current(false);
        return;
      }
      if (event.key !== "Tab") return;
      const panel = panelRef.current;
      const focusable = getFocusable(panel);
      if (focusable.length === 0) {
        event.preventDefault();
        panel?.focus();
        return;
      }
      const first = focusable[0];
      const last = focusable[focusable.length - 1];
      const active = document.activeElement;
      const outside = !panel?.contains(active);
      if (event.shiftKey && (active === first || active === panel || outside)) {
        event.preventDefault();
        last.focus();
      } else if (!event.shiftKey && (active === last || outside)) {
        event.preventDefault();
        first.focus();
      }
    };

    document.addEventListener("keydown", onKeyDown);
    return () => {
      cancelAnimationFrame(frame);
      document.removeEventListener("keydown", onKeyDown);
      const index = dialogStack.lastIndexOf(stackId);
      if (index !== -1) dialogStack.splice(index, 1);
      unlockScroll();
      if (returnTo?.isConnected) returnTo.focus({ preventScroll: true });
    };
  }, [isPresent, stackId]);

  const panelInitial = reduce
    ? { opacity: 0 }
    : sheet
      ? { opacity: 0, y: "100%" }
      : { opacity: 0, scale: 0.96 };
  const panelExit = reduce
    ? { opacity: 0, transition: EXIT }
    : sheet
      ? { opacity: 0, y: "100%", transition: { duration: 0.2, ease: EASE_OUT } }
      : { opacity: 0, scale: 0.97, transition: EXIT };

  return (
    <div
      className="pointer-events-none fixed inset-0 z-[100]"
      style={{ pointerEvents: isPresent ? undefined : "none" }}
    >
      <motion.button
        type="button"
        aria-label={closeLabel}
        tabIndex={-1}
        disabled={!dismissOutside}
        onClick={() => setOpen(false)}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0, transition: EXIT }}
        transition={ENTER}
        className={cn(
          "pointer-events-auto absolute inset-0 h-full w-full cursor-default bg-black/35 backdrop-blur-sm disabled:cursor-default dark:bg-black/55",
          overlayClassName,
        )}
      />

      <div
        className={cn(
          "pointer-events-none absolute inset-0 flex justify-center",
          sheet ? "items-end" : "items-center p-4",
        )}
      >
        <motion.div
          ref={panelRef}
          id={context.contentId}
          role={context.alert ? "alertdialog" : "dialog"}
          aria-modal="true"
          aria-label={ariaLabel}
          aria-labelledby={ariaLabel ? undefined : context.titleId}
          aria-describedby={context.hasDescription ? context.descriptionId : undefined}
          tabIndex={-1}
          initial={panelInitial}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          exit={panelExit}
          transition={reduce ? ENTER : sheet ? { duration: 0.32, ease: EASE_OUT } : ENTER}
          style={{ pointerEvents: isPresent ? "auto" : "none" }}
          className={cn(
            "relative flex w-full flex-col gap-5 overflow-y-auto border-border bg-background p-6 text-foreground shadow-2xl outline-none",
            "[scrollbar-color:var(--border-strong)_transparent] [scrollbar-width:thin]",
            sheet
              ? "max-h-[88dvh] rounded-t-3xl border-t pb-[max(1.5rem,env(safe-area-inset-bottom))]"
              : "max-h-[calc(100dvh-2rem)] max-w-md rounded-3xl border",
            className,
          )}
        >
          {sheet ? (
            <span
              aria-hidden="true"
              className="mx-auto -mt-2 -mb-1 h-1 w-10 shrink-0 rounded-full bg-foreground/15"
            />
          ) : null}
          {children}
          {withClose ? (
            <button
              type="button"
              aria-label={closeLabel}
              data-dialog-close-x=""
              onClick={() => setOpen(false)}
              className="absolute top-4 right-4 inline-flex size-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-foreground/[0.06] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            >
              <X className="size-4" aria-hidden="true" />
            </button>
          ) : null}
        </motion.div>
      </div>
    </div>
  );
}

/**
 * The modal surface. Portals to `document.body`, fades a blurred backdrop in,
 * scales the panel from 0.96 (fade only under reduced motion), traps focus,
 * closes on Escape and returns focus to whatever opened it.
 */
export function DialogContent(props: DialogContentProps) {
  const context = useDialogContext("DialogContent");
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  if (!mounted) return null;
  return createPortal(
    <AnimatePresence>
      {context.open ? <DialogContentInner key="dialog" {...props} /> : null}
    </AnimatePresence>,
    document.body,
  );
}

/* -------------------------------------------------------------------------- */
/*                                Text & layout                               */
/* -------------------------------------------------------------------------- */

export function DialogHeader({
  className,
  ...props
}: ComponentPropsWithoutRef<"div">) {
  return (
    <div
      className={cn("flex flex-col gap-1.5 pr-8 text-left", className)}
      {...props}
    />
  );
}

export function DialogFooter({
  className,
  ...props
}: ComponentPropsWithoutRef<"div">) {
  return (
    <div
      className={cn(
        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
        className,
      )}
      {...props}
    />
  );
}

export function DialogTitle({
  className,
  ...props
}: Omit<ComponentPropsWithoutRef<"h2">, "id">) {
  const context = useDialogContext("DialogTitle");
  return (
    <h2
      id={context.titleId}
      className={cn("text-lg font-semibold tracking-tight", className)}
      {...props}
    />
  );
}

export function DialogDescription({
  className,
  ...props
}: Omit<ComponentPropsWithoutRef<"p">, "id">) {
  const context = useDialogContext("DialogDescription");
  const { setHasDescription } = context;
  useEffect(() => {
    setHasDescription(true);
    return () => setHasDescription(false);
  }, [setHasDescription]);
  return (
    <p
      id={context.descriptionId}
      className={cn("text-sm leading-relaxed text-muted-foreground", className)}
      {...props}
    />
  );
}

/* -------------------------------------------------------------------------- */
/*                              AlertDialog parts                             */
/* -------------------------------------------------------------------------- */

export const AlertDialogTrigger = DialogTrigger;
export type AlertDialogTriggerProps = DialogTriggerProps;
export const AlertDialogHeader = DialogHeader;
export const AlertDialogFooter = DialogFooter;
export const AlertDialogTitle = DialogTitle;
export const AlertDialogDescription = DialogDescription;

export type AlertDialogContentProps = Omit<
  DialogContentProps,
  "closeOnOutsideClick"
>;

export function AlertDialogContent(props: AlertDialogContentProps) {
  return <DialogContent {...props} />;
}

export interface AlertDialogCancelProps extends ButtonProps {}

/** The safe choice. Receives initial focus when the AlertDialog opens. */
export const AlertDialogCancel = forwardRef<HTMLButtonElement, AlertDialogCancelProps>(
  function AlertDialogCancel({ children = "Cancel", ...props }, ref) {
    return (
      <DialogClose ref={ref} data-dialog-autofocus="" {...props}>
        {children}
      </DialogClose>
    );
  },
);

export interface AlertDialogActionProps extends ButtonProps {
  /** `destructive` (default) paints the button in the destructive token. */
  tone?: "destructive" | "default";
}

/**
 * The confirming action. Closes the dialog after `onClick` unless the handler
 * calls `event.preventDefault()`. With `confirmText` set on the AlertDialog it
 * stays `aria-disabled` until the text matches; pressing it early shakes the
 * confirm field and moves focus there.
 */
export const AlertDialogAction = forwardRef<HTMLButtonElement, AlertDialogActionProps>(
  function AlertDialogAction(
    { tone = "destructive", className, onClick, children, ...props },
    ref,
  ) {
    const context = useDialogContext("AlertDialogAction");
    const reduce = useReducedMotion();
    const blocked = !context.confirmValid;

    return (
      <Button
        ref={ref}
        variant="primary"
        aria-disabled={blocked || undefined}
        data-alert-dialog-action=""
        {...props}
        className={cn(
          tone === "destructive" &&
            "bg-destructive text-white hover:bg-destructive/90",
          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
          blocked && "opacity-55",
          blocked &&
            (tone === "destructive" ? "hover:bg-destructive" : "hover:bg-primary"),
          className,
        )}
        onClick={(event) => {
          if (blocked) {
            event.preventDefault();
            // The field's own error shake plays the first time the message
            // appears; later attempts shake it here instead.
            const errorShowing = context.confirmAttempted;
            context.setConfirmAttempted(true);
            const field = context.confirmFieldRef.current;
            if (field && errorShowing && !reduce) {
              animate(field, { x: SHAKE_X }, { duration: 0.4 });
            }
            context.confirmInputRef.current?.focus();
            return;
          }
          onClick?.(event);
          if (!event.defaultPrevented) context.setOpen(false);
        }}
      >
        {children}
      </Button>
    );
  },
);

export interface AlertDialogConfirmInputProps
  extends Omit<InputProps, "value" | "defaultValue" | "onChange" | "error"> {
  /** Message shown when confirming with a mismatch. */
  mismatchMessage?: string;
}

/**
 * Type-to-confirm field for an `AlertDialog` with `confirmText`. Enter submits
 * through `AlertDialogAction`'s rules.
 */
export function AlertDialogConfirmInput({
  label,
  mismatchMessage = "That doesn't match. Check the spelling and try again.",
  className,
  onKeyDown,
  ...props
}: AlertDialogConfirmInputProps) {
  const context = useDialogContext("AlertDialogConfirmInput");
  const target = context.confirmText ?? "";
  const showError = context.confirmAttempted && !context.confirmValid;

  return (
    <div ref={context.confirmFieldRef} className={className}>
      <Input
        ref={context.confirmInputRef}
        label={label ?? `Type "${target}" to confirm`}
        autoComplete="off"
        autoCapitalize="off"
        spellCheck={false}
        {...props}
        value={context.confirmValue}
        onChange={context.setConfirmValue}
        error={showError ? mismatchMessage : undefined}
        success={target !== "" && context.confirmValid}
        onKeyDown={(event) => {
          onKeyDown?.(event);
          if (event.defaultPrevented || event.key !== "Enter") return;
          event.preventDefault();
          const panel = event.currentTarget.closest<HTMLElement>("[role='alertdialog']");
          panel?.querySelector<HTMLButtonElement>("[data-alert-dialog-action]")?.click();
        }}
      />
    </div>
  );
}