import { IconAlertTriangle } from '@tabler/icons-react';

/**
 * ConfirmModal - модальное окно подтверждения действия
 * Простой подход со встроенным backdrop (как в HistoryModal)
 */
function ConfirmModal({
  show,
  onClose,
  onConfirm,
  title = 'Подтверждение',
  message,
  confirmLabel = 'Подтвердить',
  cancelLabel = 'Отмена',
  variant = 'danger',
  icon: Icon = IconAlertTriangle,
  loading = false,
  showIcon = true
}) {
  if (!show) return null;

  const handleConfirm = () => {
    onConfirm?.();
  };

  const handleBackdropClick = (e) => {
    if (e.target === e.currentTarget) {
      onClose?.();
    }
  };

  return (
    <>
      {/* Modal Backdrop */}
      <div className="modal-backdrop show" onClick={handleBackdropClick} />
      
      {/* Modal */}
      <div 
        className="modal show d-block" 
        role="dialog" 
        aria-modal="true"
        tabIndex={-1}
        onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
      >
        <div className="modal-dialog modal-sm modal-dialog-centered" role="document">
          <div 
            className="modal-content"
            tabIndex={-1}
            onKeyDown={(e) => {
              if (e.key === 'Tab') {
                const c = e.currentTarget;
                const focusable = c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
                if (!focusable || focusable.length === 0) return;
                const first = focusable[0];
                const last = focusable[focusable.length - 1];
                if (e.shiftKey && document.activeElement === first) {
                  e.preventDefault();
                  last.focus();
                } else if (!e.shiftKey && document.activeElement === last) {
                  e.preventDefault();
                  first.focus();
                }
              }
            }}
          >
            <div className="modal-header">
              <h5 className="modal-title">{title}</h5>
              <button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
            </div>
            
            <div className="modal-body">
              <div className="d-flex align-items-start">
                {showIcon && Icon && (
                  <div className="flex-shrink-0 me-3">
                    <Icon className={`text-${variant}`} size={32} />
                  </div>
                )}
                <div className="flex-grow-1">
                  {typeof message === 'string' ? <p className="mb-0">{message}</p> : message}
                </div>
              </div>
            </div>
            
            <div className="modal-footer">
              <button 
                className="btn btn-secondary" 
                onClick={onClose}
                disabled={loading}
              >
                {cancelLabel}
              </button>
              <button 
                className={`btn btn-${variant}`}
                onClick={handleConfirm}
                disabled={loading}
              >
                {loading && (
                  <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" />
                )}
                {confirmLabel}
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default ConfirmModal;