resolutionflow/frontend/src/components/common/ConfirmButton.tsx

import { useCallback, useEffect, useRef, useState } from 'react'
import { cn } from '@/lib/utils'

interface ConfirmButtonProps {
  onConfirm: () => void
  children: React.ReactNode
  confirmLabel?: string
  className?: string
  confirmClassName?: string
  timeoutMs?: number
  'aria-label'?: string
}

/**
 * Two-click inline confirm button.
 * First click arms the button (shows confirm state).
 * Second click executes the action.
 * Auto-resets after timeoutMs (default 3000ms).
 */
export function ConfirmButton({
  onConfirm,
  children,
  confirmLabel = 'Confirm?',
  className,
  confirmClassName,
  timeoutMs = 3000,
  'aria-label': ariaLabel,
}: ConfirmButtonProps) {
  const [armed, setArmed] = useState(false)
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)

  const reset = useCallback(() => {
    setArmed(false)
    if (timerRef.current) {
      clearTimeout(timerRef.current)
      timerRef.current = null
    }
  }, [])

  useEffect(() => {
    return () => {
      if (timerRef.current) clearTimeout(timerRef.current)
    }
  }, [])

  const handleClick = () => {
    if (armed) {
      reset()
      onConfirm()
    } else {
      setArmed(true)
      timerRef.current = setTimeout(reset, timeoutMs)
    }
  }

  return (
    <button
      type="button"
      onClick={handleClick}
      onBlur={reset}
      aria-label={ariaLabel}
      className={cn(armed ? confirmClassName : className)}
    >
      {armed ? confirmLabel : children}
    </button>
  )
}

export default ConfirmButton