Approval Queue

// 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/approval-queue

import {
  Check,
  CreditCard,
  Inbox,
  KeyRound,
  Plane,
  RotateCcw,
  Rocket,
  ShoppingCart,
  X,
} from "lucide-react";
import { AnimatePresence, motion, useReducedMotion, type Variants } from "motion/react";
import {
  type ReactNode,
  type Ref,
  useCallback,
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
} from "react";
import {
  AnimatedToastStack,
  useAnimatedToastStack,
} from "@/components/motion/animated-toast-stack";
import { Button } from "@/components/motion/button";
import { Checkbox } from "@/components/motion/checkbox";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/motion/dialog";
import { EmptyState } from "@/components/motion/empty-state";
import { Kbd } from "@/components/motion/kbd";
import { NumberTicker } from "@/components/motion/number-ticker";
import { Tabs, TabsList, TabsTrigger } from "@/components/motion/tabs";
import { EASE_OUT, SPRING_LAYOUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export type ApprovalStatus = "pending" | "approved" | "rejected";
export type ApprovalPriority = "low" | "normal" | "high" | "urgent";
export type ApprovalKind = "expense" | "access" | "deploy" | "purchase" | "time-off";

export interface ApprovalRequest {
  id: string;
  kind: ApprovalKind;
  title: string;
  requester: { name: string; avatar?: string };
  /** Amount in major units (e.g. dollars). Omit for non-monetary requests. */
  amount?: number;
  /** ISO 4217 code. Default: the component's `currency`. */
  currency?: string;
  /** One-line context, e.g. "prod · v2.14.0" or "Admin on billing". */
  details?: string;
  /** Date, epoch ms or ISO string — drives the age column. */
  createdAt: Date | number | string;
  priority: ApprovalPriority;
  status: ApprovalStatus;
  /** Set when rejected. */
  reason?: string;
}

export interface ApprovalQueueProps {
  /** Controlled list. Decisions call `onRequestsChange` with updated statuses. */
  requests?: ApprovalRequest[];
  /** Uncontrolled initial list. */
  defaultRequests?: ApprovalRequest[];
  onRequestsChange?: (requests: ApprovalRequest[]) => void;
  onApprove?: (ids: string[]) => void;
  onReject?: (ids: string[], reason: string) => void;
  /** Fired when a decision is undone from the toast or reopened. */
  onUndo?: (ids: string[]) => void;
  /** Default currency for amounts. Default "USD". */
  currency?: string;
  /** Locale for numbers. Default "en-US". */
  locale?: string;
  /** Height of the scrolling list. Default "16rem". */
  listHeight?: string;
  /** Show the j/k/a/r keyboard legend. Default true. */
  showShortcuts?: boolean;
  className?: string;
}

const KIND_ICON: Record<ApprovalKind, typeof CreditCard> = {
  expense: CreditCard,
  access: KeyRound,
  deploy: Rocket,
  purchase: ShoppingCart,
  "time-off": Plane,
};

const PRIORITY_CLASS: Record<ApprovalPriority, string> = {
  low: "bg-foreground/5 text-muted-foreground",
  normal:
    "bg-[color-mix(in_oklab,var(--chart-1)_12%,transparent)] text-[color-mix(in_oklab,var(--chart-1)_70%,var(--foreground))]",
  high: "bg-[color-mix(in_oklab,var(--warning)_18%,transparent)] text-[color-mix(in_oklab,var(--warning)_50%,var(--foreground))]",
  urgent:
    "bg-[color-mix(in_oklab,var(--destructive)_14%,transparent)] text-[color-mix(in_oklab,var(--destructive)_75%,var(--foreground))]",
};

const REASONS = ["Over budget", "Needs more detail", "Duplicate request", "Not now"];

function toMs(t: ApprovalRequest["createdAt"]) {
  return t instanceof Date ? t.getTime() : typeof t === "number" ? t : Date.parse(t);
}

function age(ms: number) {
  const m = Math.max(0, Math.round(ms / 60_000));
  if (m < 60) return `${m}m`;
  const h = Math.round(m / 60);
  if (h < 24) return `${h}h`;
  return `${Math.round(h / 24)}d`;
}

function useControllable<T>(value: T | undefined, defaultValue: T, onChange?: (next: T) => void) {
  const [internal, setInternal] = useState(defaultValue);
  const controlled = value !== undefined;
  const current = controlled ? value : internal;
  const set = useCallback(
    (next: T) => {
      if (!controlled) setInternal(next);
      onChange?.(next);
    },
    [controlled, onChange],
  );
  return [current, set] as const;
}

/**
 * Review queue for pending requests (expenses, access grants, deploys…).
 * Approve or reject one row or a selection: rows swipe out optimistically —
 * right for approve, left for reject — and an undo toast puts them back.
 * Rejecting asks for a reason in a Dialog. Pending/Approved/Rejected tabs
 * roll their counts. Keyboard: j/k move, x selects, a approves, r rejects.
 */
export function ApprovalQueue({
  requests,
  defaultRequests = [],
  onRequestsChange,
  onApprove,
  onReject,
  onUndo,
  currency = "USD",
  locale = "en-US",
  listHeight = "16rem",
  showShortcuts = true,
  className,
}: ApprovalQueueProps) {
  const reduce = useReducedMotion() ?? false;
  const baseId = useId();
  const [list, setList] = useControllable(requests, defaultRequests, onRequestsChange);
  const [tab, setTab] = useState<ApprovalStatus>("pending");
  const [selected, setSelected] = useState<Set<string>>(() => new Set());
  const [activeId, setActiveId] = useState<string | null>(null);
  // Direction the next exiting rows swipe: 1 = approve (right), -1 = reject.
  const [exitDir, setExitDir] = useState<1 | -1>(1);
  const [rejecting, setRejecting] = useState<string[] | null>(null);
  const [reason, setReason] = useState("");
  const { toasts, showToast, dismissToast } = useAnimatedToastStack({ defaultDuration: 5000, limit: 3 });

  const rootRef = useRef<HTMLDivElement>(null);
  const rowRefs = useRef(new Map<string, HTMLButtonElement>());
  // Latest list for toast callbacks fired after later decisions.
  const listRef = useRef(list);
  listRef.current = list;

  const [now, setNow] = useState<number | null>(null);
  useEffect(() => {
    setNow(Date.now());
    const t = window.setInterval(() => setNow(Date.now()), 60_000);
    return () => window.clearInterval(t);
  }, []);

  const counts = useMemo(() => {
    const c = { pending: 0, approved: 0, rejected: 0 };
    for (const r of list) c[r.status]++;
    return c;
  }, [list]);

  const visible = useMemo(
    () =>
      list
        .filter((r) => r.status === tab)
        .sort((a, b) => toMs(a.createdAt) - toMs(b.createdAt)),
    [list, tab],
  );
  const pendingTab = tab === "pending";
  const selectedVisible = visible.filter((r) => selected.has(r.id)).map((r) => r.id);

  const money = useMemo(() => {
    const cache = new Map<string, Intl.NumberFormat>();
    return (amount: number, code: string) => {
      let f = cache.get(code);
      if (!f) {
        f = new Intl.NumberFormat(locale, { style: "currency", currency: code, maximumFractionDigits: 0 });
        cache.set(code, f);
      }
      return f.format(amount);
    };
  }, [locale]);

  const focusRow = (id: string | null) => {
    setActiveId(id);
    if (id) requestAnimationFrame(() => rowRefs.current.get(id)?.focus({ preventScroll: false }));
  };

  /** After rows leave, keep the cursor on the next remaining row. */
  const nextActive = (leaving: string[]) => {
    if (!activeId || !leaving.includes(activeId)) return activeId;
    const idx = visible.findIndex((r) => r.id === activeId);
    const rest = visible.filter((r) => !leaving.includes(r.id));
    return rest[Math.min(idx, rest.length - 1)]?.id ?? null;
  };

  const decide = (ids: string[], status: "approved" | "rejected", why?: string) => {
    if (!ids.length) return;
    const before = new Map(list.filter((r) => ids.includes(r.id)).map((r) => [r.id, r]));
    setExitDir(status === "approved" ? 1 : -1);
    const next = nextActive(ids);
    // Moving focus before the rows leave keeps it from landing on <body>.
    const leavingHasFocus = ids.some((id) => rowRefs.current.get(id)?.contains(document.activeElement));
    setList(list.map((r) => (ids.includes(r.id) ? { ...r, status, reason: why } : r)));
    setSelected((prev) => {
      const s = new Set(prev);
      for (const id of ids) s.delete(id);
      return s;
    });
    if (leavingHasFocus) {
      if (next) focusRow(next);
      else rootRef.current?.focus();
    } else setActiveId(next);
    if (status === "approved") onApprove?.(ids);
    else onReject?.(ids, why ?? "");

    const first = before.values().next().value;
    const label = ids.length === 1 && first ? `“${first.title}”` : `${ids.length} requests`;
    const toastId = showToast({
      title: `${status === "approved" ? "Approved" : "Rejected"} ${label}`,
      description: why ? `Reason: ${why}` : undefined,
      status: status === "approved" ? "success" : "error",
      action: {
        label: "Undo",
        onClick: () => {
          setExitDir(status === "approved" ? -1 : 1);
          setList(listRef.current.map((r) => before.get(r.id) ?? r));
          onUndo?.(ids);
          dismissToast(toastId);
        },
      },
    });
  };

  const reopen = (id: string) => {
    setExitDir(tab === "approved" ? -1 : 1);
    setList(list.map((r) => (r.id === id ? { ...r, status: "pending", reason: undefined } : r)));
    onUndo?.([id]);
  };

  const askReject = (ids: string[]) => {
    if (!ids.length) return;
    setReason("");
    setRejecting(ids);
  };
  const confirmReject = () => {
    if (!rejecting) return;
    decide(rejecting, "rejected", reason.trim() || undefined);
    setRejecting(null);
  };

  const toggleSelect = (id: string) =>
    setSelected((prev) => {
      const s = new Set(prev);
      if (s.has(id)) s.delete(id);
      else s.add(id);
      return s;
    });
  const allSelected = visible.length > 0 && selectedVisible.length === visible.length;
  const toggleAll = () =>
    setSelected((prev) => {
      const s = new Set(prev);
      if (allSelected) for (const r of visible) s.delete(r.id);
      else for (const r of visible) s.add(r.id);
      return s;
    });

  // j/k/x/a/r while focus is anywhere inside the queue (not in a text field).
  // Attached natively so the wrapper stays a plain, non-interactive element.
  const keyState = useRef({ visible, activeId, selectedVisible, pendingTab, decide, askReject, toggleSelect, focusRow });
  keyState.current = { visible, activeId, selectedVisible, pendingTab, decide, askReject, toggleSelect, focusRow };
  useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.metaKey || e.ctrlKey || e.altKey) return;
      const t = e.target as HTMLElement;
      if (t.closest("input, textarea, select, [contenteditable='true']")) return;
      const s = keyState.current;
      const idx = s.visible.findIndex((r) => r.id === s.activeId);
      const key = e.key.toLowerCase();
      if (key === "j" || key === "k") {
        e.preventDefault();
        if (!s.visible.length) return;
        const next =
          idx === -1 ? 0 : Math.min(s.visible.length - 1, Math.max(0, idx + (key === "j" ? 1 : -1)));
        s.focusRow(s.visible[next].id);
        return;
      }
      if (!s.pendingTab) return;
      const targets = s.selectedVisible.length ? s.selectedVisible : s.activeId && idx !== -1 ? [s.activeId] : [];
      if (key === "x" && s.activeId && idx !== -1) {
        e.preventDefault();
        s.toggleSelect(s.activeId);
      } else if (key === "a" && targets.length) {
        e.preventDefault();
        s.decide(targets, "approved");
      } else if (key === "r" && targets.length) {
        e.preventDefault();
        s.askReject(targets);
      }
    };
    root.addEventListener("keydown", onKey);
    return () => root.removeEventListener("keydown", onKey);
  }, []);

  const rowVariants: Variants = {
    initial: { opacity: 0, y: reduce ? 0 : 6 },
    animate: { opacity: 1, x: 0, y: 0 },
    exit: (dir: number) => ({
      opacity: 0,
      x: reduce ? 0 : dir * 96,
      transition: { duration: 0.2, ease: EASE_OUT },
    }),
  };

  return (
    <div
      ref={rootRef}
      tabIndex={-1}
      className={cn(
        "relative flex w-full flex-col gap-3 overflow-hidden rounded-2xl border border-border bg-card p-4 text-card-foreground outline-none",
        className,
      )}
    >
      <div className="flex items-center justify-between gap-3">
        <Tabs value={tab} onValueChange={(v) => setTab(v as ApprovalStatus)} variant="underline">
          <TabsList>
            {(["pending", "approved", "rejected"] as const).map((s) => (
              <TabsTrigger key={s} value={s} className="min-h-9 gap-1.5 px-2 text-xs capitalize sm:text-sm">
                {s}
                <span className="inline-flex min-w-5 items-center justify-center rounded-full bg-foreground/5 px-1.5 text-[11px] tabular-nums text-muted-foreground">
                  <NumberTicker value={counts[s]} startOnView={false} duration={0.45} stagger={0.02} />
                </span>
              </TabsTrigger>
            ))}
          </TabsList>
        </Tabs>
        {pendingTab && visible.length > 0 ? (
          <Checkbox
            checked={allSelected}
            indeterminate={!allSelected && selectedVisible.length > 0}
            onCheckedChange={toggleAll}
            aria-label="Select all pending requests"
            label="All"
            className="gap-2 text-xs"
          />
        ) : null}
      </div>

      {/* Bulk bar slides down when rows are selected. */}
      <AnimatePresence initial={false}>
        {pendingTab && selectedVisible.length > 0 ? (
          <motion.div
            key="bulk"
            initial={{ opacity: 0, y: reduce ? 0 : -6 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, transition: { duration: 0.12 } }}
            transition={{ duration: 0.2, ease: EASE_OUT }}
            className="flex items-center justify-between gap-2 rounded-xl bg-foreground/[0.04] py-1.5 pr-1.5 pl-3"
          >
            <span className="text-xs font-medium tabular-nums" aria-live="polite">
              {selectedVisible.length} selected
            </span>
            <span className="flex gap-1.5">
              <Button size="sm" variant="outline" onClick={() => askReject(selectedVisible)}>
                <X className="size-3.5" aria-hidden />
                Reject
              </Button>
              <Button size="sm" onClick={() => decide(selectedVisible, "approved")}>
                <Check className="size-3.5" aria-hidden />
                Approve
              </Button>
            </span>
          </motion.div>
        ) : null}
      </AnimatePresence>

      <div
        className="-mx-1 overflow-x-hidden overflow-y-auto px-1 [scrollbar-color:var(--border-strong)_transparent] [scrollbar-width:thin]"
        style={{ height: listHeight }}
      >
        {visible.length === 0 ? (
          <EmptyState
            size="sm"
            icon={<Inbox className="size-5" />}
            title={pendingTab ? "Queue is clear" : `Nothing ${tab} yet`}
            description={pendingTab ? "New requests will show up here." : undefined}
          />
        ) : (
          <ul className="flex flex-col gap-1" aria-label={`${tab} requests`}>
            <AnimatePresence initial={false} mode="popLayout" custom={exitDir}>
              {visible.map((r) => (
                <ApprovalRow
                  key={r.id}
                  request={r}
                  variants={rowVariants}
                  exitDir={exitDir}
                  active={r.id === activeId}
                  selected={selected.has(r.id)}
                  pendingTab={pendingTab}
                  reduce={reduce}
                  layoutGroup={baseId}
                  ageLabel={now === null ? "" : age(now - toMs(r.createdAt))}
                  amountLabel={r.amount === undefined ? null : money(r.amount, r.currency ?? currency)}
                  registerRow={(el) => {
                    if (el) rowRefs.current.set(r.id, el);
                    else rowRefs.current.delete(r.id);
                  }}
                  onFocusRow={() => setActiveId(r.id)}
                  onToggle={() => toggleSelect(r.id)}
                  onApprove={() => decide([r.id], "approved")}
                  onReject={() => askReject([r.id])}
                  onReopen={() => reopen(r.id)}
                />
              ))}
            </AnimatePresence>
          </ul>
        )}
      </div>

      {showShortcuts ? (
        <p className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-muted-foreground">
          <span className="inline-flex items-center gap-1">
            <Kbd size="sm">j</Kbd>
            <Kbd size="sm">k</Kbd> move
          </span>
          <span className="inline-flex items-center gap-1">
            <Kbd size="sm">x</Kbd> select
          </span>
          <span className="inline-flex items-center gap-1">
            <Kbd size="sm">a</Kbd> approve
          </span>
          <span className="inline-flex items-center gap-1">
            <Kbd size="sm">r</Kbd> reject
          </span>
        </p>
      ) : null}

      <AnimatedToastStack
        toasts={toasts}
        onDismiss={dismissToast}
        placement="absolute"
        position="bottom-center"
        maxVisible={2}
        className="w-[calc(100%-2rem)]"
      />

      <Dialog open={rejecting !== null} onOpenChange={(o) => !o && setRejecting(null)}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>
              Reject {rejecting && rejecting.length > 1 ? `${rejecting.length} requests` : "request"}
            </DialogTitle>
            <DialogDescription>
              The requester sees this reason. You can undo right after.
            </DialogDescription>
          </DialogHeader>
          <div className="mt-4 flex flex-col gap-2">
            <div className="flex flex-wrap gap-1.5">
              {REASONS.map((r) => (
                <button
                  key={r}
                  type="button"
                  aria-pressed={reason === r}
                  onClick={() => setReason(r)}
                  className={cn(
                    "h-7 rounded-full border border-border px-2.5 text-xs outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
                    reason === r
                      ? "border-foreground/30 bg-foreground/10 text-foreground"
                      : "border-border text-muted-foreground hover:text-foreground",
                  )}
                >
                  {r}
                </button>
              ))}
            </div>
            <label className="flex flex-col gap-1.5 text-sm font-medium">
              Reason
              <textarea
                data-dialog-autofocus
                rows={3}
                value={reason}
                onChange={(e) => setReason(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) confirmReject();
                }}
                placeholder="Add context for the requester…"
                className="resize-none rounded-xl border border-border bg-background px-3 py-2 text-sm font-normal outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-foreground/40 focus-visible:ring-2 focus-visible:ring-ring/40"
              />
            </label>
          </div>
          <DialogFooter className="mt-5">
            <Button variant="outline" size="sm" onClick={() => setRejecting(null)}>
              Cancel
            </Button>
            <Button size="sm" onClick={confirmReject} disabled={!reason.trim()}>
              Reject
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

function ApprovalRow({
  ref,
  request: r,
  variants,
  exitDir,
  active,
  selected,
  pendingTab,
  reduce,
  layoutGroup,
  ageLabel,
  amountLabel,
  registerRow,
  onFocusRow,
  onToggle,
  onApprove,
  onReject,
  onReopen,
}: {
  /** Forwarded so AnimatePresence's popLayout can measure the exiting row. */
  ref?: Ref<HTMLLIElement>;
  request: ApprovalRequest;
  variants: Variants;
  exitDir: number;
  active: boolean;
  selected: boolean;
  pendingTab: boolean;
  reduce: boolean;
  layoutGroup: string;
  ageLabel: string;
  amountLabel: string | null;
  registerRow: (el: HTMLButtonElement | null) => void;
  onFocusRow: () => void;
  onToggle: () => void;
  onApprove: () => void;
  onReject: () => void;
  onReopen: () => void;
}) {
  const Icon = KIND_ICON[r.kind];
  const description: ReactNode = (
    <>
      {r.requester.name}
      {r.details ? <> · {r.details}</> : null}
    </>
  );

  return (
    <motion.li
      ref={ref}
      layout={reduce ? false : "position"}
      custom={exitDir}
      variants={variants}
      initial="initial"
      animate="animate"
      exit="exit"
      transition={{ default: { duration: 0.22, ease: EASE_OUT }, layout: SPRING_LAYOUT }}
      className="group relative flex items-center gap-3 rounded-xl px-2 py-2"
    >
      {active ? (
        <motion.span
          aria-hidden
          layoutId={`${layoutGroup}-active`}
          transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
          className="absolute inset-0 -z-0 rounded-xl bg-foreground/[0.05] ring-1 ring-border-strong"
        />
      ) : null}
      {pendingTab ? (
        <Checkbox
          checked={selected}
          onCheckedChange={onToggle}
          aria-label={`Select ${r.title}`}
          className="relative"
        />
      ) : null}
      <span
        aria-hidden
        className="relative grid size-8 shrink-0 place-items-center rounded-lg bg-foreground/5 text-muted-foreground"
      >
        <Icon className="size-4" />
      </span>
      <button
        ref={registerRow}
        type="button"
        onFocus={onFocusRow}
        onClick={pendingTab ? onToggle : onFocusRow}
        aria-pressed={pendingTab ? selected : undefined}
        className="relative min-w-0 flex-1 rounded-md text-left outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        <span className="flex items-center gap-2">
          <span className="truncate text-sm font-medium">{r.title}</span>
          <span
            className={cn(
              "inline-flex h-4.5 shrink-0 items-center rounded-full px-1.5 text-[10px] font-semibold capitalize",
              PRIORITY_CLASS[r.priority],
            )}
          >
            {r.priority}
          </span>
        </span>
        <span className="block truncate text-xs text-muted-foreground">
          {description}
          {r.status === "rejected" && r.reason ? <> · “{r.reason}”</> : null}
        </span>
      </button>
      <span className="relative flex shrink-0 flex-col items-end">
        {amountLabel ? <span className="text-sm font-semibold tabular-nums">{amountLabel}</span> : null}
        <span className="text-[11px] tabular-nums text-muted-foreground">
          <span className="sr-only">Waiting </span>
          {ageLabel}
        </span>
      </span>
      <span className="relative flex shrink-0 gap-1">
        {pendingTab ? (
          <>
            <IconAction label={`Reject ${r.title}`} onClick={onReject} tone="reject">
              <X className="size-4" />
            </IconAction>
            <IconAction label={`Approve ${r.title}`} onClick={onApprove} tone="approve">
              <Check className="size-4" />
            </IconAction>
          </>
        ) : (
          <IconAction label={`Move ${r.title} back to pending`} onClick={onReopen}>
            <RotateCcw className="size-3.5" />
          </IconAction>
        )}
      </span>
    </motion.li>
  );
}

function IconAction({
  label,
  onClick,
  tone,
  children,
}: {
  label: string;
  onClick: () => void;
  tone?: "approve" | "reject";
  children: ReactNode;
}) {
  return (
    <button
      type="button"
      aria-label={label}
      title={label}
      onClick={onClick}
      className={cn(
        "grid size-8 place-items-center rounded-lg border border-border text-muted-foreground outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
        tone === "approve" &&
          "hover:border-[color-mix(in_oklab,var(--success)_40%,transparent)] hover:bg-[color-mix(in_oklab,var(--success)_14%,transparent)] hover:text-[color-mix(in_oklab,var(--success)_55%,var(--foreground))]",
        tone === "reject" &&
          "hover:border-[color-mix(in_oklab,var(--destructive)_40%,transparent)] hover:bg-[color-mix(in_oklab,var(--destructive)_12%,transparent)] hover:text-[color-mix(in_oklab,var(--destructive)_75%,var(--foreground))]",
        !tone && "hover:bg-foreground/5 hover:text-foreground",
      )}
    >
      <span aria-hidden className="inline-flex">
        {children}
      </span>
    </button>
  );
}

"use client";

import {
  AlertCircle,
  Bell,
  Check,
  Info,
  LoaderCircle,
  X,
  type LucideIcon,
} from "lucide-react";
import {
  AnimatePresence,
  motion,
  useReducedMotion,
  type Transition,
} from "motion/react";
import {
  isValidElement,
  memo,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
  type ReactNode,
} from "react";
import { createPortal } from "react-dom";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export type ToastStatus = "neutral" | "info" | "loading" | "success" | "error";
export type ToastPosition =
  | "top-left"
  | "top-center"
  | "top-right"
  | "bottom-left"
  | "bottom-center"
  | "bottom-right";

export type AnimatedToastAction = {
  label: ReactNode;
  onClick: (toast: AnimatedToast) => void;
};

export type AnimatedToast = {
  id: string;
  title: ReactNode;
  description?: ReactNode;
  status?: ToastStatus;
  icon?: ReactNode;
  action?: AnimatedToastAction;
  duration?: number;
  dismissible?: boolean;
  createdAt?: number;
};

export type ToastInput = Omit<AnimatedToast, "id" | "createdAt"> & {
  id?: string;
};

/** Copy for one phase of a promise toast: a plain title, or a partial toast. */
export type ToastPromiseContent =
  | ReactNode
  | (Omit<ToastInput, "id" | "status"> & { title: ReactNode });

export type ToastPromiseMessages<T> = {
  loading: ToastPromiseContent;
  success: ToastPromiseContent | ((data: T) => ToastPromiseContent);
  error: ToastPromiseContent | ((error: unknown) => ToastPromiseContent);
  /** Auto-dismiss delay once the promise settles. Defaults to the hook's defaultDuration. */
  duration?: number;
  /** Reuse an existing toast id instead of opening a new one. */
  id?: string;
};

export type ToastPromiseResult<T> = {
  id: string;
  /** The original promise, so callers can still `await` the work. */
  result: Promise<T>;
};

export type ToastClassNames = {
  root?: string;
  item?: string;
  surface?: string;
  iconWrap?: string;
  content?: string;
  title?: string;
  description?: string;
  action?: string;
  close?: string;
  progress?: string;
};

export interface AnimatedToastStackProps {
  toasts: AnimatedToast[];
  onDismiss?: (id: string) => void;
  position?: ToastPosition;
  placement?: "static" | "fixed" | "absolute";
  fixed?: boolean;
  portal?: boolean;
  portalRoot?: Element | null;
  maxVisible?: number;
  className?: string;
  classNames?: ToastClassNames;
  icons?: Partial<Record<ToastStatus, ReactNode>>;
  renderToast?: (toast: AnimatedToast) => ReactNode;
}

export interface UseAnimatedToastStackOptions {
  initialToasts?: ToastInput[];
  defaultDuration?: number;
  limit?: number;
}

const STACK_SPRING: Transition = {
  type: "spring",
  stiffness: 420,
  damping: 34,
  mass: 0.75,
};

const CONTENT_TRANSITION = {
  duration: 0.28,
  ease: EASE_OUT,
} as const;

const STATUS_ICON: Record<ToastStatus, LucideIcon> = {
  neutral: Bell,
  info: Info,
  loading: LoaderCircle,
  success: Check,
  error: AlertCircle,
};

const STATUS_CLASS: Record<ToastStatus, string> = {
  neutral: "text-muted-foreground bg-primary/[0.05]",
  info: "text-primary bg-primary/10",
  loading: "text-primary bg-primary/10",
  success: "text-emerald-600 bg-emerald-500/10 dark:text-emerald-400",
  error: "text-destructive bg-destructive/10",
};

const POSITION_CLASS: Record<ToastPosition, string> = {
  "top-left": "left-4 top-4",
  "top-center": "left-1/2 top-4 -translate-x-1/2",
  "top-right": "right-4 top-4",
  "bottom-left": "bottom-6 left-4",
  "bottom-center": "bottom-6 left-1/2 -translate-x-1/2",
  "bottom-right": "bottom-6 right-4",
};

let idSeed = 0;

function createToast(input: ToastInput, defaultDuration: number): AnimatedToast {
  return {
    duration: defaultDuration,
    dismissible: true,
    ...input,
    id: input.id ?? `toast-${Date.now()}-${idSeed++}`,
    createdAt: Date.now(),
  };
}

type ToastPromiseObject = Omit<ToastInput, "id" | "status"> & { title: ReactNode };

function isToastContentObject(content: ToastPromiseContent): content is ToastPromiseObject {
  return (
    typeof content === "object" &&
    content !== null &&
    !isValidElement(content) &&
    !Array.isArray(content) &&
    "title" in content
  );
}

function resolvePromiseContent(content: ToastPromiseContent): ToastPromiseObject {
  return isToastContentObject(content) ? content : { title: content as ReactNode };
}

export function useAnimatedToastStack({
  initialToasts = [],
  defaultDuration = 4200,
  limit,
}: UseAnimatedToastStackOptions = {}) {
  const toastTimers = useRef<Map<string, { timer: number; signature: string }>>(new Map());
  const [toasts, setToasts] = useState<AnimatedToast[]>(() =>
    initialToasts.map((toast) => createToast(toast, defaultDuration)),
  );

  const dismissToast = useCallback((id: string) => {
    setToasts((current) => current.filter((toast) => toast.id !== id));
  }, []);

  const clearToasts = useCallback(() => {
    setToasts([]);
  }, []);

  const showToast = useCallback(
    (input: ToastInput) => {
      const toast = createToast(input, defaultDuration);
      setToasts((current) => {
        const next = [...current, toast];
        return typeof limit === "number" ? next.slice(-limit) : next;
      });
      return toast.id;
    },
    [defaultDuration, limit],
  );

  const updateToast = useCallback((id: string, patch: Partial<ToastInput>) => {
    setToasts((current) =>
      current.map((toast) =>
        toast.id === id
          ? {
              ...toast,
              ...patch,
              id,
              createdAt: patch.duration === undefined ? toast.createdAt : Date.now(),
            }
          : toast,
      ),
    );
  }, []);

  /**
   * One toast that tracks a promise: a spinner while pending (no auto-dismiss),
   * then morphs in place into success or error. Settling restarts the dismiss
   * timer because `updateToast` re-stamps `createdAt` whenever a duration is set.
   * Returns the toast id plus the original promise so callers can still await it.
   */
  const promiseToast = useCallback(
    <T,>(
      promise: Promise<T> | (() => Promise<T>),
      messages: ToastPromiseMessages<T>,
    ): ToastPromiseResult<T> => {
      const settledDuration = messages.duration ?? defaultDuration;
      const loading: ToastInput = {
        ...resolvePromiseContent(messages.loading),
        status: "loading",
        duration: 0,
      };

      let id: string;
      const reuseId = messages.id;
      if (reuseId) {
        id = reuseId;
        setToasts((current) => {
          if (current.some((toast) => toast.id === reuseId)) {
            return current.map((toast) =>
              toast.id === reuseId
                ? {
                    ...toast,
                    description: undefined,
                    action: undefined,
                    icon: undefined,
                    ...loading,
                    id: reuseId,
                  }
                : toast,
            );
          }
          const next = [...current, createToast({ ...loading, id: reuseId }, defaultDuration)];
          return typeof limit === "number" ? next.slice(-limit) : next;
        });
      } else {
        id = showToast(loading);
      }

      const settle = (status: "success" | "error", content: ToastPromiseContent) => {
        const resolved = resolvePromiseContent(content);
        updateToast(id, {
          // Drop loading-phase extras the settled copy does not restate.
          description: undefined,
          action: undefined,
          icon: undefined,
          ...resolved,
          status,
          duration: resolved.duration ?? settledDuration,
        });
      };

      let result: Promise<T>;
      try {
        result = typeof promise === "function" ? promise() : promise;
      } catch (error) {
        result = Promise.reject(error);
      }

      // Attaching both handlers here also keeps a rejection from surfacing as
      // unhandled when the caller ignores `result`.
      result.then(
        (data) => {
          const { success } = messages;
          settle("success", typeof success === "function" ? success(data) : success);
        },
        (error: unknown) => {
          const { error: onError } = messages;
          settle("error", typeof onError === "function" ? onError(error) : onError);
        },
      );

      return { id, result };
    },
    [defaultDuration, limit, showToast, updateToast],
  );

  useEffect(() => {
    const activeIds = new Set(toasts.map((toast) => toast.id));

    toastTimers.current.forEach((entry, id) => {
      if (!activeIds.has(id)) {
        window.clearTimeout(entry.timer);
        toastTimers.current.delete(id);
      }
    });

    toasts.forEach((toast) => {
      const duration = toast.duration ?? defaultDuration;
      const existing = toastTimers.current.get(toast.id);

      if (duration <= 0) {
        if (existing) {
          window.clearTimeout(existing.timer);
          toastTimers.current.delete(toast.id);
        }
        return;
      }

      const createdAt = toast.createdAt ?? Date.now();
      const signature = `${createdAt}:${duration}`;

      if (existing?.signature === signature) {
        return;
      }

      if (existing) {
        window.clearTimeout(existing.timer);
      }

      const elapsed = Date.now() - createdAt;
      const remaining = Math.max(duration - elapsed, 0);
      const timer = window.setTimeout(() => {
        toastTimers.current.delete(toast.id);
        dismissToast(toast.id);
      }, remaining);

      toastTimers.current.set(toast.id, { timer, signature });
    });
  }, [defaultDuration, dismissToast, toasts]);

  useEffect(() => {
    const timers = toastTimers.current;

    return () => {
      timers.forEach((entry) => {
        window.clearTimeout(entry.timer);
      });
      timers.clear();
    };
  }, []);

  return useMemo(
    () => ({
      toasts,
      showToast,
      updateToast,
      promiseToast,
      dismissToast,
      clearToasts,
      setToasts,
    }),
    [clearToasts, dismissToast, promiseToast, showToast, toasts, updateToast],
  );
}

export function AnimatedToastStack({
  toasts,
  onDismiss,
  position = "bottom-right",
  placement,
  fixed = false,
  portal,
  portalRoot,
  maxVisible = 4,
  className,
  classNames,
  icons,
  renderToast,
}: AnimatedToastStackProps) {
  const [portalTarget, setPortalTarget] = useState<Element | null>(null);
  const visibleToasts = toasts.slice(-maxVisible);
  const isBottom = position.startsWith("bottom");
  const resolvedPlacement = placement ?? (fixed ? "fixed" : "static");
  const shouldPortal = portal ?? resolvedPlacement === "fixed";

  useEffect(() => {
    setPortalTarget(shouldPortal ? (portalRoot ?? document.body) : null);
  }, [portalRoot, shouldPortal]);

  const stack = (
    <ol
      aria-live="polite"
      aria-atomic="false"
      className={cn(
        "pointer-events-none flex w-[calc(100vw-2rem)] max-w-sm gap-2",
        isBottom ? "flex-col-reverse" : "flex-col",
        resolvedPlacement === "fixed" && "fixed z-[90]",
        resolvedPlacement === "absolute" && "absolute z-20",
        resolvedPlacement !== "static" && POSITION_CLASS[position],
        classNames?.root,
        className,
      )}
    >
      <AnimatePresence initial={false} mode="popLayout">
        {visibleToasts.map((toast, index) => (
          <ToastItem
            key={toast.id}
            toast={toast}
            index={index}
            onDismiss={onDismiss}
            classNames={classNames}
            icons={icons}
            renderToast={renderToast}
          />
        ))}
      </AnimatePresence>
    </ol>
  );

  if (shouldPortal && !portalTarget) {
    return null;
  }

  if (shouldPortal && portalTarget) {
    return createPortal(stack, portalTarget);
  }

  return stack;
}

const ToastItem = memo(function ToastItem({
  toast,
  index,
  onDismiss,
  classNames,
  icons,
  renderToast,
}: {
  toast: AnimatedToast;
  index: number;
  onDismiss?: (id: string) => void;
  classNames?: ToastClassNames;
  icons?: Partial<Record<ToastStatus, ReactNode>>;
  renderToast?: (toast: AnimatedToast) => ReactNode;
}) {
  const reduce = useReducedMotion();
  const status = toast.status ?? "neutral";
  const Icon = STATUS_ICON[status];
  const iconNode = icons?.[status] ?? toast.icon ?? <Icon className="h-3.5 w-3.5" />;
  const canDismiss = toast.dismissible !== false && Boolean(onDismiss);

  return (
    <motion.li
      layout
      initial={
        reduce
          ? { opacity: 0 }
          : { opacity: 0, y: 22, scale: 0.96, filter: "blur(10px)" }
      }
      animate={
        reduce
          ? { opacity: 1 }
          : { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }
      }
      exit={
        reduce
          ? { opacity: 0 }
          : {
              opacity: 0,
              x: 32,
              scale: 0.96,
              filter: "blur(8px)",
              transition: { duration: 0.18, ease: EASE_OUT },
            }
      }
      transition={STACK_SPRING}
      drag={canDismiss && !reduce ? "x" : false}
      dragConstraints={{ left: 0, right: 0 }}
      dragElastic={0.18}
      onDragEnd={(_, info) => {
        if (!canDismiss || !onDismiss) return;
        if (Math.abs(info.offset.x) > 72 || Math.abs(info.velocity.x) > 520) {
          onDismiss(toast.id);
        }
      }}
      className={cn("pointer-events-auto relative will-change-transform", classNames?.item)}
      style={{ zIndex: 20 - index }}
    >
      <div
        className={cn(
          "relative overflow-hidden rounded-2xl border border-border bg-card/95 p-3 shadow-2xl backdrop-blur-xl",
          classNames?.surface,
        )}
      >
        {renderToast ? (
          renderToast(toast)
        ) : (
          <div className="flex items-start gap-3">
            <motion.span
              layout
              className={cn(
                "mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full",
                STATUS_CLASS[status],
                classNames?.iconWrap,
              )}
            >
              <AnimatePresence mode="popLayout" initial={false}>
                <motion.span
                  key={status}
                  initial={
                    reduce
                      ? { opacity: 0 }
                      : { opacity: 0, y: 8, scale: 0.8, filter: "blur(6px)" }
                  }
                  animate={
                    reduce
                      ? { opacity: 1 }
                      : { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }
                  }
                  exit={
                    reduce
                      ? { opacity: 0 }
                      : { opacity: 0, y: -8, scale: 0.9, filter: "blur(6px)" }
                  }
                  transition={CONTENT_TRANSITION}
                  className="inline-flex"
                >
                  {status === "loading" ? (
                    <span className="inline-flex animate-spin">{iconNode}</span>
                  ) : (
                    iconNode
                  )}
                </motion.span>
              </AnimatePresence>
            </motion.span>

            {/* layout="position" keeps the copy from stretching while the item's
                height morphs between phases (e.g. a promise toast settling). */}
            <motion.div layout="position" className={cn("min-w-0 flex-1", classNames?.content)}>
              <AnimatePresence mode="popLayout" initial={false}>
                <motion.div
                  key={`${toast.id}-${status}-${String(toast.title)}`}
                  initial={
                    reduce
                      ? { opacity: 0 }
                      : { opacity: 0, y: 8, filter: "blur(6px)" }
                  }
                  animate={
                    reduce
                      ? { opacity: 1 }
                      : { opacity: 1, y: 0, filter: "blur(0px)" }
                  }
                  exit={
                    reduce
                      ? { opacity: 0 }
                      : { opacity: 0, y: -8, filter: "blur(6px)" }
                  }
                  transition={CONTENT_TRANSITION}
                >
                  <p
                    className={cn(
                      "truncate text-sm font-medium leading-5 text-foreground",
                      classNames?.title,
                    )}
                  >
                    {toast.title}
                  </p>
                  {toast.description ? (
                    <p
                      className={cn(
                        "mt-0.5 line-clamp-2 text-xs leading-4 text-muted-foreground",
                        classNames?.description,
                      )}
                    >
                      {toast.description}
                    </p>
                  ) : null}
                </motion.div>
              </AnimatePresence>

              {toast.action ? (
                <button
                  type="button"
                  onClick={() => toast.action?.onClick(toast)}
                  className={cn(
                    "mt-2 inline-flex h-7 items-center rounded-full bg-primary/[0.06] px-3 text-xs font-medium text-foreground transition-colors hover:bg-primary/[0.1]",
                    classNames?.action,
                  )}
                >
                  {toast.action.label}
                </button>
              ) : null}
            </motion.div>

            {canDismiss ? (
              <button
                type="button"
                onClick={() => onDismiss?.(toast.id)}
                aria-label="Dismiss toast"
                className={cn(
                  "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-primary/[0.06] hover:text-foreground",
                  classNames?.close,
                )}
              >
                <X className="h-3.5 w-3.5" />
              </button>
            ) : null}
          </div>
        )}

      </div>
    </motion.li>
  );
});

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 { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useId } from "react";
import { EASE_OUT, SPRING_PRESS } from "@/lib/ease";
import { TOUCH_TARGET_CLASS } from "@/lib/touch";
import { cn } from "@/lib/utils";

const CHECK_PATH = "M5 13l4 4L19 7";
const INDETERMINATE_PATH = "M6 12h12";

export interface CheckboxProps {
  checked: boolean;
  onCheckedChange: (checked: boolean) => void;
  disabled?: boolean;
  indeterminate?: boolean;
  label?: string;
  className?: string;
  id?: string;
  "aria-label"?: string;
  /** Associates an external message (e.g. a form error) with the control. */
  "aria-describedby"?: string;
}

export function Checkbox({
  checked,
  onCheckedChange,
  disabled,
  indeterminate,
  label,
  className,
  id: idProp,
  "aria-label": ariaLabel,
  "aria-describedby": ariaDescribedBy,
}: CheckboxProps) {
  const autoId = useId();
  const id = idProp ?? autoId;
  const reduce = useReducedMotion();
  const showMark = checked || indeterminate;
  const path = indeterminate ? INDETERMINATE_PATH : CHECK_PATH;

  return (
    <label
      htmlFor={id}
      className={cn(
        "inline-flex items-center gap-3",
        disabled ? "cursor-not-allowed" : "cursor-pointer",
        className,
      )}
    >
      <motion.button
        id={id}
        type="button"
        role="checkbox"
        aria-checked={indeterminate ? "mixed" : checked}
        aria-label={ariaLabel}
        aria-describedby={ariaDescribedBy}
        disabled={disabled}
        onClick={() => !disabled && onCheckedChange(!checked)}
        whileTap={reduce || disabled ? undefined : { scale: 0.92 }}
        transition={SPRING_PRESS}
        data-state={
          checked ? "checked" : indeterminate ? "indeterminate" : "unchecked"
        }
        className={cn(
          "relative inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-2 outline-none transition-colors duration-200",
          TOUCH_TARGET_CLASS,
          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
          "disabled:cursor-not-allowed disabled:opacity-60",
          showMark
            ? "border-primary bg-primary text-primary-foreground"
            : "border-muted-foreground/50 bg-background hover:border-muted-foreground",
        )}
      >
        <AnimatePresence initial={false}>
          {showMark ? (
            <motion.svg
              key={indeterminate ? "indeterminate" : "checked"}
              width="12"
              height="12"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={3}
              strokeLinecap="round"
              strokeLinejoin="round"
              initial={reduce ? { opacity: 1 } : { opacity: 0, scale: 0.5 }}
              animate={reduce ? { opacity: 1 } : { opacity: 1, scale: 1 }}
              exit={
                reduce
                  ? { opacity: 0 }
                  : { opacity: 0, scale: 0.5, filter: "blur(4px)" }
              }
              transition={
                reduce ? { duration: 0 } : { duration: 0.16, ease: EASE_OUT }
              }
              aria-hidden
            >
              <title>{indeterminate ? "Partially selected" : "Selected"}</title>
              <motion.path
                d={path}
                initial={reduce ? { pathLength: 1 } : { pathLength: 0 }}
                animate={{ pathLength: 1 }}
                transition={
                  reduce
                    ? { duration: 0 }
                    : {
                        duration: indeterminate ? 0.2 : 0.3,
                        ease: EASE_OUT,
                        delay: 0.04,
                      }
                }
              />
            </motion.svg>
          ) : null}
        </AnimatePresence>
      </motion.button>
      {label ? (
        <span className={cn("select-none text-sm text-foreground", disabled && "opacity-60")}>
          {label}
        </span>
      ) : null}
    </label>
  );
}