/**
 * @ai-summary Toolbar component for bulk selection actions
 * @ai-context Displays selection count with select all, clear, and custom action buttons
 */

import React from 'react';
import { Box, Toolbar, Typography, Button } from '@mui/material';

/**
 * Props for SelectionToolbar component
 */
export interface SelectionToolbarProps {
  selectedCount: number;
  onSelectAll?: () => void;
  onClear: () => void;
  children?: React.ReactNode;
}

/**
 * Toolbar component for displaying selection state and bulk actions
 *
 * @example
 * ```tsx
 * <SelectionToolbar
 *   selectedCount={3}
 *   onSelectAll={selectAll}
 *   onClear={reset}
 * >
 *   <Button onClick={handleDelete}>Delete</Button>
 *   <Button onClick={handleExport}>Export</Button>
 * </SelectionToolbar>
 * ```
 */
export const SelectionToolbar: React.FC<SelectionToolbarProps> = ({
  selectedCount,
  onSelectAll,
  onClear,
  children,
}) => {
  // Only show toolbar if items are selected
  if (selectedCount === 0) {
    return null;
  }

  return (
    <Toolbar
      sx={{
        pl: { sm: 2 },
        pr: { xs: 1, sm: 1 },
        bgcolor: 'action.selected',
        borderRadius: 1,
        mb: 2,
        minHeight: { xs: 56, sm: 64 },
      }}
    >
      <Typography
        variant="subtitle1"
        component="div"
        sx={{
          flex: '1 1 100%',
          fontWeight: 600,
        }}
      >
        Selected: {selectedCount}
      </Typography>

      <Box
        sx={{
          display: 'flex',
          gap: 1,
          alignItems: 'center',
          flexWrap: 'wrap',
        }}
      >
        {onSelectAll && (
          <Button
            size="small"
            onClick={onSelectAll}
            sx={{
              minWidth: 44,
              minHeight: 44,
              textTransform: 'none',
            }}
          >
            Select All
          </Button>
        )}

        <Button
          size="small"
          onClick={onClear}
          sx={{
            minWidth: 44,
            minHeight: 44,
            textTransform: 'none',
          }}
        >
          Clear
        </Button>

        {children}
      </Box>
    </Toolbar>
  );
};
