HoldToConfirm

"use client";

import * as React from "react";
import { useReducedMotion } from "@/hooks/ledger/use-media-query";
import { cn } from "@/lib/ledger/cn";
import { Button } from "@/components/ledger/button";

export interface HoldToConfirmProps {
  className?: string;
  disabled?: boolean;
  durationMs?: number;
  label: string;
  onConfirm: () => void;
  /** The exact string a keyboard/typed fallback must match. */
  typedConfirmation?: string;
}

/**
 * Slow where the user is deciding, fast where the system is responding:
 * a 1500ms linear fill, a 200ms ease-out release.
 *
 * Gating a financial action behind a motor-skill requirement is an
 * accessibility failure, so hold-to-confirm is never the only path.
 * Space holds with aria-live progress at 0/50/100%, Escape aborts, and a
 * typed confirmation is always available.
 */
export function HoldToConfirm({
  label,
  onConfirm,
  durationMs = 1500,
  typedConfirmation,
  className,
  disabled = false,
}: HoldToConfirmProps) {
  const [progress, setProgress] = React.useState(0);
  const [announced, setAnnounced] = React.useState<string>("");
  const [typed, setTyped] = React.useState("");
  const [showTyped, setShowTyped] = React.useState(false);
  const raf = React.useRef<number | null>(null);
  const start = React.useRef<number>(0);
  const reduced = useReducedMotion();

  const stop = React.useCallback(() => {
    if (raf.current !== null) cancelAnimationFrame(raf.current);
    raf.current = null;
    setProgress(0);
    setAnnounced("");
  }, []);

  const begin = React.useCallback(() => {
    if (disabled || raf.current !== null) return;
    if (reduced) {
      // No motor-timed gesture under reduced motion; confirm on activation.
      onConfirm();
      return;
    }
    start.current = performance.now();
    setAnnounced("Holding, 0 percent");
    const step = (now: number) => {
      const p = Math.min(1, (now - start.current) / durationMs);
      setProgress(p);
      if (p >= 0.5 && p < 0.55) setAnnounced("Holding, 50 percent");
      if (p >= 1) {
        setAnnounced("Confirmed");
        raf.current = null;
        setProgress(0);
        onConfirm();
        return;
      }
      raf.current = requestAnimationFrame(step);
    };
    raf.current = requestAnimationFrame(step);
  }, [disabled, durationMs, onConfirm, reduced]);

  React.useEffect(() => () => stop(), [stop]);

  return (
    <div className={cn("flex flex-col items-stretch gap-2", className)}>
      <button
        aria-describedby="hold-help"
        className={cn(
          "relative h-12 select-none overflow-hidden rounded-sm bg-accent px-6",
          "text-label font-medium text-accent-fg",
          "transition-transform duration-1 ease-out",
          progress > 0 && "scale-[0.97]",
          disabled && "pointer-events-none opacity-50",
        )}
        // It scales while held, from its own progress; the global press would add a second.
        data-press="none"
        disabled={disabled}
        onKeyDown={(e) => {
          if (e.key === " " && !e.repeat) {
            e.preventDefault();
            begin();
          }
          if (e.key === "Escape") stop();
        }}
        onKeyUp={(e) => {
          if (e.key === " ") stop();
        }}
        onPointerCancel={stop}
        onPointerDown={(e) => {
          e.currentTarget.setPointerCapture(e.pointerId);
          begin();
        }}
        onPointerLeave={stop}
        onPointerUp={stop}
        type="button"
      >
        <span
          aria-hidden="true"
          className="absolute inset-0 bg-accent-active"
          style={{
            clipPath: `inset(0 ${100 - progress * 100}% 0 0)`,
            transition: progress === 0 ? "clip-path 200ms var(--ease-out)" : "none",
          }}
        />
        <span className="relative">{label}</span>
      </button>

      <span aria-live="polite" className="sr-only">
        {announced}
      </span>
      <span className="text-caption text-text-tertiary" id="hold-help">
        Press and hold, or hold Space. Escape cancels.
      </span>

      {typedConfirmation ? (
        showTyped ? (
          <div className="flex items-center gap-2">
            <input
              aria-label={`Type ${typedConfirmation} to confirm`}
              className="h-10 flex-1 rounded-sm border border-border bg-surface px-3 text-body outline-none focus-visible:border-accent"
              onChange={(e) => setTyped(e.target.value)}
              placeholder={typedConfirmation}
              value={typed}
            />
            <Button disabled={typed !== typedConfirmation} onClick={onConfirm} variant="primary">
              Confirm
            </Button>
          </div>
        ) : (
          <button
            className="self-start text-caption text-accent hover:underline"
            onClick={() => setShowTyped(true)}
            type="button"
          >
            Confirm by typing instead
          </button>
        )
      ) : null}
    </div>
  );
}