import React from 'react';

interface ConfirmationModalProps {
  show: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  message: string;
  confirmText?: string;
  cancelText?: string;
  confirmButtonClass?: string;
  loading?: boolean;
  showReasonInput?: boolean;
  reason?: string;
  onReasonChange?: (reason: string) => void;
  reasonPlaceholder?: string;
  reasonRequired?: boolean;
}

const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
  show,
  onClose,
  onConfirm,
  title,
  message,
  confirmText = 'Confirm',
  cancelText = 'Cancel',
  confirmButtonClass = 'btn-danger',
  loading = false,
  showReasonInput = false,
  reason = '',
  onReasonChange,
  reasonPlaceholder = 'Enter reason...',
  reasonRequired = false
}) => {
  if (!show) return null;

  const isConfirmDisabled = loading || (reasonRequired && showReasonInput && !reason.trim());

  return (
    <div className="modal d-block" tabIndex={-1} style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
      <div className="modal-dialog modal-dialog-centered">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title">{title}</h5>
            <button
              type="button"
              className="btn-close"
              onClick={onClose}
              disabled={loading}
            ></button>
          </div>
          <div className="modal-body">
            <p>{message}</p>
            {showReasonInput && (
              <div className="mt-3">
                <label className="form-label">
                  Reason {reasonRequired && <span className="text-danger">*</span>}
                </label>
                <textarea
                  className="form-control"
                  rows={3}
                  value={reason}
                  onChange={(e) => onReasonChange?.(e.target.value)}
                  placeholder={reasonPlaceholder}
                  disabled={loading}
                />
              </div>
            )}
          </div>
          <div className="modal-footer">
            <button
              type="button"
              className="btn btn-secondary"
              onClick={onClose}
              disabled={loading}
            >
              {cancelText}
            </button>
            <button
              type="button"
              className={`btn ${confirmButtonClass}`}
              onClick={onConfirm}
              disabled={isConfirmDisabled}
            >
              {loading ? (
                <>
                  <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                  Processing...
                </>
              ) : (
                confirmText
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ConfirmationModal;