Status Roll Badge

"use client";

import {
  AnimatePresence,
  motion,
  useReducedMotion,
  type HTMLMotionProps,
  type Variants,
} from "motion/react";
import {
  Check,
  Circle,
  CircleNotch,
  Info,
  Warning,
  X,
  type Icon,
} from "@phosphor-icons/react";
import { useEffect, useState, type ReactNode } from "react";
import { cn } from "@/lib/cn";

const EASE_OUT: [number, number, number, number] = [0.16, 1, 0.3, 1];

export type StatusBadgeStatus =
  | "neutral"
  | "info"
  | "success"
  | "warning"
  | "danger"
  | "loading";

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

export interface StatusBadgeProps
  extends Omit<HTMLMotionProps<"span">, "children"> {
  /** Semantic tone — picks color set and default icon. [Optional, default: "neutral"] */
  status?: StatusBadgeStatus;
  /** Badge scale. [Optional, default: "md"] */
  size?: StatusBadgeSize;
  /** Label content — string/number children also key the roll transition. [Optional] */
  children?: ReactNode;
  /** Custom icon node; replaces the status icon and the loading spinner. [Optional] */
  icon?: ReactNode;
  /** Render the leading icon slot. [Optional, default: true] */
  showIcon?: boolean;
  /** Faint breathing halo behind the pill. [Optional, default: true while loading] */
  pulse?: boolean;
  /** Explicit key for the label roll when children are not string/number. [Optional] */
  contentKey?: string | number;
}

/* Deep, low-chroma tones: an 8% wash with a 25% hairline reads as ink on
   paper rather than a filled alert chip. */
const STATUS_CLASS: Record<StatusBadgeStatus, string> = {
  neutral: "border-border bg-card text-muted-foreground",
  info: "border-sky-600/25 bg-sky-500/[0.08] text-sky-700 dark:text-sky-400",
  success:
    "border-emerald-600/25 bg-emerald-500/[0.08] text-emerald-700 dark:text-emerald-400",
  warning:
    "border-amber-600/30 bg-amber-500/[0.09] text-amber-700 dark:text-amber-400",
  danger: "border-red-600/25 bg-red-500/[0.08] text-red-700 dark:text-red-400",
  loading: "border-primary/[0.14] bg-primary/[0.03] text-foreground",
};

const SIZE_CLASS: Record<StatusBadgeSize, string> = {
  sm: "h-6 gap-1.5 px-2 text-[11px]",
  md: "h-8 gap-2 px-3 text-xs",
  lg: "h-9 gap-2 px-3.5 text-[13px]",
};

const ICON_CLASS: Record<StatusBadgeSize, string> = {
  sm: "h-3 w-3",
  md: "h-3.5 w-3.5",
  lg: "h-4 w-4",
};

const ICONS: Record<StatusBadgeStatus, Icon> = {
  neutral: Circle,
  info: Info,
  success: Check,
  warning: Warning,
  danger: X,
  loading: CircleNotch,
};

/* Departure-board roll: the outgoing glyph exits upward while the incoming
   one rises from below, both smeared with a blur that clears as the spring
   lands. Exits run faster than entrances so a rapid state churn never
   queues a backlog of ghosts. */
const ICON_ROLL_VARIANTS: Variants = {
  initial: {
    opacity: 0.72,
    y: "80%",
    scale: 0.92,
    rotate: -8,
    filter: "blur(5px)",
  },
  animate: {
    opacity: 1,
    y: "0%",
    scale: 1,
    rotate: 0,
    filter: "blur(0px)",
    transition: {
      y: { type: "spring", stiffness: 260, damping: 26, mass: 0.8 },
      scale: { type: "spring", stiffness: 280, damping: 26, mass: 0.7 },
      rotate: { duration: 0.24, ease: EASE_OUT },
      opacity: { duration: 0.24, ease: EASE_OUT },
      filter: { duration: 0.32, ease: EASE_OUT },
    },
  },
  exit: {
    opacity: 0.4,
    y: "-80%",
    scale: 0.96,
    rotate: 8,
    filter: "blur(5px)",
    transition: { duration: 0.18, ease: EASE_OUT },
  },
};

const LABEL_ROLL_VARIANTS: Variants = {
  initial: { opacity: 0.72, y: "85%", filter: "blur(5px)" },
  animate: {
    opacity: 1,
    y: "0%",
    filter: "blur(0px)",
    transition: {
      y: { type: "spring", stiffness: 260, damping: 27, mass: 0.85 },
      opacity: { duration: 0.26, ease: EASE_OUT },
      filter: { duration: 0.32, ease: EASE_OUT },
    },
  },
  exit: {
    opacity: 0.4,
    y: "-85%",
    filter: "blur(5px)",
    transition: { duration: 0.16, ease: EASE_OUT },
  },
};

/* Reduced-motion swaps the roll for these statics. Their animate values must
   resolve to the same inline styles as the roll's animate (opacity 1,
   identity transform, blur 0) — branching the RENDERED values on the async
   useReducedMotion() would desync SSR and client and trip hydration. */
const ICON_STATIC_VARIANTS: Variants = {
  initial: { opacity: 1, y: "0%", scale: 1, rotate: 0, filter: "blur(0px)" },
  animate: {
    opacity: 1,
    y: "0%",
    scale: 1,
    rotate: 0,
    filter: "blur(0px)",
    transition: { duration: 0 },
  },
  exit: { opacity: 0, transition: { duration: 0 } },
};

const LABEL_STATIC_VARIANTS: Variants = {
  initial: { opacity: 1, y: "0%", filter: "blur(0px)" },
  animate: {
    opacity: 1,
    y: "0%",
    filter: "blur(0px)",
    transition: { duration: 0 },
  },
  exit: { opacity: 0, transition: { duration: 0 } },
};

/**
 * StatusBadge — a live status pill whose icon and label roll vertically with a
 * blur trail on every state change while a spring animates the pill's width.
 * Announces changes politely via role="status" and marks loading with aria-busy.
 *
 * @param {StatusBadgeStatus} status - Semantic tone [Optional, default: "neutral"]
 * @param {StatusBadgeSize} size - Badge scale [Optional, default: "md"]
 * @param {ReactNode} icon - Custom icon node [Optional]
 * @param {boolean} showIcon - Render the leading icon slot [Optional, default: true]
 * @param {boolean} pulse - Halo pulse behind the pill [Optional, default: true while loading]
 * @param {string | number} contentKey - Roll key for non-text children [Optional]
 *
 * @example
 * <StatusBadge status="loading">Building</StatusBadge>
 */
export function StatusBadge({
  status = "neutral",
  size = "md",
  children,
  icon,
  showIcon = true,
  pulse = status === "loading",
  contentKey,
  className,
  ...rest
}: StatusBadgeProps) {
  const reduce = useReducedMotion();
  // The halo only mounts after hydration: its presence depends on the
  // client-only reduced-motion value, so rendering it during SSR would
  // mismatch. An ambient infinite pulse loses nothing by starting a tick late.
  const [isMounted, setIsMounted] = useState(false);
  useEffect(() => setIsMounted(true), []);
  const StatusIcon = ICONS[status];
  const resolvedContentKey =
    contentKey ??
    (typeof children === "string" || typeof children === "number"
      ? children
      : status);

  return (
    <motion.span
      layout
      role="status"
      aria-busy={status === "loading" || undefined}
      transition={{ type: "spring", stiffness: 420, damping: 32, mass: 0.7 }}
      className={cn(
        "relative inline-flex shrink-0 items-center overflow-hidden whitespace-nowrap rounded-full border font-medium tracking-[-0.01em] tabular-nums",
        "transition-colors duration-300",
        STATUS_CLASS[status],
        SIZE_CLASS[size],
        className,
      )}
      {...rest}
    >
      {isMounted && pulse && !reduce ? (
        /* Barely-there breath — at 4-9% the pill glows instead of graying. */
        <motion.span
          aria-hidden
          className="absolute inset-0 rounded-full bg-current"
          animate={{ scale: [0.97, 1.05, 0.97], opacity: [0.03, 0.065, 0.03] }}
          transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
        />
      ) : null}
      {showIcon ? (
        <span
          aria-hidden
          className="relative z-10 inline-flex items-center justify-center overflow-hidden"
        >
          <AnimatePresence mode="popLayout" initial={false}>
            <motion.span
              key={status}
              variants={reduce ? ICON_STATIC_VARIANTS : ICON_ROLL_VARIANTS}
              initial="initial"
              animate="animate"
              exit="exit"
              className="inline-flex"
            >
              {status === "loading" && !icon ? (
                /* A quicker spin reads as faster progress at identical load
                   time; CSS keeps it off the main thread. */
                <span className="inline-flex animate-spin [animation-duration:800ms] motion-reduce:animate-none">
                  <StatusIcon weight="bold" className={ICON_CLASS[size]} />
                </span>
              ) : (
                (icon ?? <StatusIcon weight="bold" className={ICON_CLASS[size]} />)
              )}
            </motion.span>
          </AnimatePresence>
        </span>
      ) : null}
      {children != null ? (
        <span className="relative z-10 inline-flex overflow-hidden">
          <AnimatePresence mode="popLayout" initial={false}>
            <motion.span
              key={resolvedContentKey}
              variants={reduce ? LABEL_STATIC_VARIANTS : LABEL_ROLL_VARIANTS}
              initial="initial"
              animate="animate"
              exit="exit"
              className="inline-block"
            >
              {children}
            </motion.span>
          </AnimatePresence>
        </span>
      ) : null}
    </motion.span>
  );
}

/* ─── Demo ─────────────────────────────────────────────────────────────────── */

const PIPELINE: {
  status: StatusBadgeStatus;
  label: string;
  chip: string;
}[] = [
  { status: "neutral", label: "Queued", chip: "Queued" },
  { status: "loading", label: "Building", chip: "Building" },
  { status: "info", label: "Canary 10%", chip: "Canary" },
  { status: "success", label: "Deployed", chip: "Deployed" },
  { status: "warning", label: "High latency", chip: "Latency" },
  { status: "danger", label: "Rolled back", chip: "Rolled back" },
];

const STEP_MS = 2000;

const CHIP_SPRING = { type: "spring", duration: 0.45, bounce: 0.14 } as const;

function PipelineCheck({
  label,
  state,
}: {
  label: string;
  state: "done" | "running" | "idle";
}) {
  return (
    <span className="inline-flex items-center gap-1.5 text-[11.5px] font-medium text-[#8B857A]">
      {state === "done" ? (
        <Check weight="bold" className="h-3 w-3 text-emerald-600" />
      ) : state === "running" ? (
        <CircleNotch
          weight="bold"
          className="h-3 w-3 animate-spin text-[#211E19] [animation-duration:800ms] motion-reduce:animate-none"
        />
      ) : (
        <Circle weight="bold" className="h-3 w-3 text-[#C9C4BB]" />
      )}
      {label}
    </span>
  );
}

/**
 * StatusRollBadgeDemo — a deployment card whose hero badge auto-advances
 * through the pipeline; the segmented state control below jumps to any state
 * (which pauses the auto-cycle), its active pill sliding along with the badge.
 */
export default function StatusRollBadgeDemo() {
  const [step, setStep] = useState(3);
  const [isPaused, setIsPaused] = useState(false);

  useEffect(() => {
    if (isPaused) return;
    const id = setInterval(
      () => setStep((current) => (current + 1) % PIPELINE.length),
      STEP_MS,
    );
    return () => clearInterval(id);
  }, [isPaused]);

  const current = PIPELINE[step];
  const canaryState =
    step >= 3 ? "done" : step === 2 ? "running" : ("idle" as const);

  return (
    <div className="flex h-dvh w-full items-center justify-center bg-[#F5F4F1] p-6">
      <div className="w-full max-w-[400px]">
        <div className="rounded-2xl border border-black/[0.07] bg-white p-5 shadow-[0_1px_2px_rgba(28,25,18,0.04),0_16px_40px_-16px_rgba(28,25,18,0.14)]">
          <div className="flex items-center justify-between">
            <span className="text-[11px] font-medium uppercase tracking-[0.09em] text-[#8B857A]">
              Deployments
            </span>
            <kbd className="rounded-md border border-black/[0.07] bg-black/[0.02] px-1.5 py-0.5 font-sans text-[10px] font-medium text-[#8B857A]">
              ⌘D
            </kbd>
          </div>
          <div className="mt-4 flex items-center justify-between gap-3">
            <div className="min-w-0">
              <p className="truncate text-[14px] font-semibold tracking-[-0.01em] text-[#211E19]">
                payments-api
              </p>
              <p className="mt-0.5 truncate text-xs text-[#8B857A]">
                main · d4e9f2 · us-east-1
              </p>
            </div>
            <StatusBadge status={current.status} size="lg">
              {current.label}
            </StatusBadge>
          </div>
          <div className="mt-4 flex items-center gap-4 border-t border-black/[0.06] pt-3.5">
            <PipelineCheck label="Build" state="done" />
            <PipelineCheck label="Tests" state="done" />
            <PipelineCheck label="Canary" state={canaryState} />
          </div>
        </div>

        <div
          role="group"
          aria-label="Set deployment status"
          className="mt-4 grid grid-cols-3 gap-1 rounded-2xl border border-black/[0.07] bg-white/70 p-1"
        >
          {PIPELINE.map((state, index) => {
            const isActive = index === step;
            return (
              <button
                key={state.chip}
                type="button"
                onClick={() => {
                  setStep(index);
                  setIsPaused(true);
                }}
                className="relative h-8 rounded-[10px] outline-none transition-transform duration-150 ease-out focus-visible:ring-1 focus-visible:ring-black/20 active:scale-[0.97]"
              >
                {isActive ? (
                  <motion.span
                    layoutId="status-chip-pill"
                    transition={CHIP_SPRING}
                    style={{ borderRadius: 10 }}
                    className="absolute inset-0 bg-[#211E19]"
                  />
                ) : null}
                <span
                  className={cn(
                    "relative z-10 text-[11.5px] font-medium transition-colors duration-200",
                    isActive ? "text-white" : "text-[#8B857A] hover:text-[#211E19]",
                  )}
                >
                  {state.chip}
                </span>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}