Loading Button

"use client";

import { useState, type ButtonHTMLAttributes, type ReactNode } from "react";
import { Check, Loader2, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface LoadingButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "children"> {
  children?: ReactNode;
  /** Async action. Resolve = success state, reject = error state. */
  onClick?: () => Promise<unknown> | void;
  variant?: "primary" | "secondary" | "danger";
  size?: "sm" | "md";
  successLabel?: string;
  errorLabel?: string;
  /** ms before returning to idle after success/error. */
  resetAfter?: number;
}

const VARIANTS = {
  primary: "bg-da-primary text-da-primary-fg hover:bg-da-primary/90",
  secondary: "da-stroke bg-da-surface text-da-surface-fg hover:bg-da-muted",
  danger: "bg-da-danger text-da-danger-fg hover:bg-da-danger/90",
} as const;

/** Button that runs an async action and morphs through pending → success / error states, keeping its width stable. */
export function LoadingButton({
  children = "Deploy to production",
  onClick,
  variant = "primary",
  size = "md",
  successLabel = "Done",
  errorLabel = "Failed — retry",
  resetAfter = 1800,
  className,
  disabled,
  ...rest
}: LoadingButtonProps) {
  const [state, setState] = useState<"idle" | "pending" | "success" | "error">("idle");

  const run = async () => {
    if (state === "pending") return;
    setState("pending");
    try {
      await onClick?.();
      setState("success");
    } catch {
      setState("error");
    }
    window.setTimeout(() => setState("idle"), resetAfter);
  };

  return (
    <button
      type="button"
      {...rest}
      disabled={disabled}
      aria-busy={state === "pending"}
      onClick={run}
      className={cn(
        "da-focus da-transition relative inline-grid items-center justify-items-center rounded-da-md font-medium shadow-da-sm disabled:pointer-events-none disabled:opacity-50",
        size === "sm" ? "h-8 px-3 text-[13px]" : "h-9 px-4 text-sm",
        state === "success" ? "bg-da-success text-da-success-fg" : state === "error" ? VARIANTS.danger : VARIANTS[variant],
        className,
      )}
    >
      {/* Every label is stacked in the same grid cell so the width never jumps. */}
      <span className={cn("col-start-1 row-start-1 da-transition", state !== "idle" && "invisible")}>{children}</span>
      <span aria-hidden className={cn("col-start-1 row-start-1 inline-flex items-center gap-1.5", state !== "pending" && "invisible")}>
        <Loader2 className="size-4 animate-spin motion-reduce:animate-none" /> Working…
      </span>
      <span className={cn("col-start-1 row-start-1 inline-flex items-center gap-1.5", state !== "success" && "invisible")}>
        <Check aria-hidden className="size-4" /> {successLabel}
      </span>
      <span className={cn("col-start-1 row-start-1 inline-flex items-center gap-1.5", state !== "error" && "invisible")}>
        <X aria-hidden className="size-4" /> {errorLabel}
      </span>
      <span role="status" className="sr-only">
        {state === "pending" ? "Working" : state === "success" ? successLabel : state === "error" ? errorLabel : ""}
      </span>
    </button>
  );
}

export default LoadingButton;