router-lists-ui/frontend/src/components/ConfirmDialog.jsx

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

/**
 * ConfirmDialog - упрощённая версия для быстрых подтверждений
 * Простой подход со встроенным backdrop (как в HistoryModal)
 */
export default function ConfirmDialog({ 
  open, 
  title = 'Подтверждение', 
  message, 
  confirmText = 'Подтвердить', 
  cancelText = 'Отмена', 
  onConfirm, 
  onCancel, 
  destructive = false, 
  size = 'sm',
  loading = false
}) {
  if (!open) return null;

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

  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') onCancel?.(); }}
      >
        <div className={`modal-dialog ${size === 'sm' ? 'modal-sm' : size === 'lg' ? 'modal-lg' : ''} 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={onCancel} aria-label="Закрыть" />
            </div>
            
            <div className="modal-body">
              <div className="d-flex align-items-start">
                {destructive && (
                  <div className="flex-shrink-0 me-3">
                    <IconAlertTriangle className="text-danger" size={32} />
                  </div>
                )}
                <div className="flex-grow-1">
                  <p className="mb-0">{message}</p>
                </div>
              </div>
            </div>
            
            <div className="modal-footer">
              <button 
                type="button" 
                className="btn btn-secondary" 
                onClick={onCancel}
                disabled={loading}
              >
                {cancelText}
              </button>
              <button 
                type="button" 
                className={`btn ${destructive ? 'btn-danger' : 'btn-primary'}`}
                onClick={onConfirm}
                disabled={loading}
              >
                {loading && (
                  <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" />
                )}
                {confirmText}
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}