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

import { IconTrash, IconEdit, IconDownload, IconX, IconChecks } from '@tabler/icons-react'

/**
 * Панель массовых действий для таблиц
 * Показывается когда выбраны элементы
 */
function BulkActionsBar({ 
  selectedCount = 0,
  totalCount = 0,
  onSelectAll = () => {},
  onDeselectAll = () => {},
  onDelete = null,
  onEdit = null,
  onExport = null,
  customActions = [], // [{icon: Icon, label, onClick, variant}]
  className = ''
}) {
  if (selectedCount === 0) return null

  const allSelected = selectedCount === totalCount

  return (
    <div className={`card mb-3 ${className}`} style={{ 
      position: 'sticky', 
      top: '10px', 
      zIndex: 10,
      boxShadow: '0 0.5rem 1rem rgba(0,0,0,.15)'
    }}>
      <div className="card-body py-2 px-3">
        <div className="d-flex align-items-center justify-content-between">
          {/* Левая часть: информация о выборе */}
          <div className="d-flex align-items-center gap-3">
            <div className="d-flex align-items-center">
              <IconChecks size={20} className="text-blue me-2" />
              <span className="fw-bold">
                Выбрано: <span className="text-blue">{selectedCount}</span>
              </span>
            </div>

            {/* Кнопка выбрать все / снять выбор */}
            {!allSelected && totalCount > selectedCount && (
              <button
                className="btn btn-sm btn-outline-primary"
                onClick={onSelectAll}
              >
                Выбрать все ({totalCount})
              </button>
            )}

            <button
              className="btn btn-sm btn-ghost-secondary"
              onClick={onDeselectAll}
            >
              <IconX size={16} className="me-1" />
              Снять выбор
            </button>
          </div>

          {/* Правая часть: действия */}
          <div className="d-flex align-items-center gap-2">
            {/* Экспорт */}
            {onExport && (
              <button
                className="btn btn-sm btn-outline-primary"
                onClick={onExport}
                title="Экспортировать выбранное"
              >
                <IconDownload size={16} className="me-1" />
                Экспорт
              </button>
            )}

            {/* Редактирование */}
            {onEdit && (
              <button
                className="btn btn-sm btn-outline-primary"
                onClick={onEdit}
                title="Редактировать выбранное"
              >
                <IconEdit size={16} className="me-1" />
                Изменить
              </button>
            )}

            {/* Пользовательские действия */}
            {customActions.map((action, idx) => {
              const Icon = action.icon
              return (
                <button
                  key={idx}
                  className={`btn btn-sm ${action.variant || 'btn-outline-primary'}`}
                  onClick={action.onClick}
                  title={action.title}
                >
                  {Icon && <Icon size={16} className="me-1" />}
                  {action.label}
                </button>
              )
            })}

            {/* Удаление */}
            {onDelete && (
              <button
                className="btn btn-sm btn-outline-danger"
                onClick={onDelete}
                title="Удалить выбранное"
              >
                <IconTrash size={16} className="me-1" />
                Удалить ({selectedCount})
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}

export default BulkActionsBar