import { type ReactNode, useEffect, useState } from "react";

import { Button, type ButtonProps } from "./button";

export interface ConfirmButtonProps extends Omit<ButtonProps, "onClick" | "children"> {
  onConfirm: () => void | Promise<void>;
  children: ReactNode;
  confirmLabel?: ReactNode;
  confirmTimeoutSec?: number;
}

export const ConfirmButton = ({
  onConfirm,
  children,
  confirmLabel = "Click again to confirm",
  confirmTimeoutSec = 4,
  ...rest
}: ConfirmButtonProps) => {
  const [armed, setArmed] = useState(false);

  useEffect(() => {
    if (!armed) return;
    const t = window.setTimeout(() => setArmed(false), confirmTimeoutSec * 1000);
    return () => window.clearTimeout(t);
  }, [armed, confirmTimeoutSec]);

  // When armed, the visible label changes ("Click again to confirm"). Mirror
  // that into aria-label so screen readers announce the armed state instead
  // of the original action label inherited from the caller.
  const armedAriaLabel = typeof confirmLabel === "string" ? confirmLabel : undefined;
  const ariaLabel = armed ? (armedAriaLabel ?? rest["aria-label"]) : rest["aria-label"];

  return (
    <Button
      {...rest}
      aria-label={ariaLabel}
      onClick={() => {
        if (armed) {
          setArmed(false);
          void onConfirm();
        } else {
          setArmed(true);
        }
      }}
      onBlur={() => {
        if (armed) setArmed(false);
      }}
      onKeyDown={(e) => {
        if (e.key === "Escape" && armed) {
          e.preventDefault();
          setArmed(false);
        }
      }}
    >
      {armed ? confirmLabel : children}
    </Button>
  );
};