/**
 * BulkActionsToolbar Component
 * 
 * Floating action bar that appears when machines are selected in bulk mode.
 * Provides quick access to bulk operations:
 * - Health Check
 * - Run Command (future)
 * - Multi-Connect (future)
 * - Update Tags (future)
 */

import { Activity, X, Terminal, Grid, Tag } from 'lucide-react';
import { Button } from './shared/Button';

interface BulkActionsToolbarProps {
  selectedCount: number;
  onHealthCheck: () => void;
  onSSHCommand: () => void;
  onClearSelection: () => void;
  userRole?: string;
}

export function BulkActionsToolbar({
  selectedCount,
  onHealthCheck,
  onSSHCommand,
  onClearSelection,
  userRole
}: BulkActionsToolbarProps) {
  
  if (selectedCount === 0) {
    return null; // Don't render if no machines selected
  }

  const isGuestRole = userRole === 'GUEST';

  return (
    <div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-50">
      <div className="bg-kaspersky-bg-card rounded-lg shadow-2xl border-2 border-kaspersky-primary px-6 py-4 flex items-center gap-4">
        {/* Selection Counter */}
        <div className="flex items-center gap-2 pr-4 border-r border-kaspersky-border">
          <div className="w-8 h-8 rounded-full bg-kaspersky-primary bg-opacity-10 flex items-center justify-center">
            <span className="text-sm font-bold text-kaspersky-primary">{selectedCount}</span>
          </div>
          <span className="text-sm font-medium text-kaspersky-text-dark">
            {selectedCount === 1 ? 'machine selected' : 'machines selected'}
          </span>
        </div>

        {/* Action Buttons */}
        <div className="flex items-center gap-2">
          
          {/* Health Check */}
          <Button
            onClick={onHealthCheck}
            variant="primary"
            size="md"
            leftIcon={<Activity size={18} />}
            title="Check availability of selected machines"
          >
            Health Check
          </Button>

          {/* Run Command */}
          <Button
            onClick={onSSHCommand}
            variant="secondary"
            size="md"
            leftIcon={<Terminal size={18} />}
            disabled={isGuestRole}
            title={isGuestRole ? "GUEST role cannot execute SSH commands" : "Run SSH command on selected machines"}
          >
            Run Command
          </Button>

          {/* Multi-Connect (Future - Disabled for now) */}
          <Button
            onClick={() => {}}
            variant="secondary"
            size="md"
            leftIcon={<Grid size={18} />}
            disabled
            title="Coming soon: Connect to multiple machines"
          >
            Multi-Connect
          </Button>

          {/* Update Tags (Future - Disabled for now) */}
          <Button
            onClick={() => {}}
            variant="secondary"
            size="md"
            leftIcon={<Tag size={18} />}
            disabled
            title="Coming soon: Update tags for selected machines"
          >
            Update Tags
          </Button>
        </div>

        {/* Clear Selection */}
        <button
          onClick={onClearSelection}
          className="ml-4 pl-4 border-l border-kaspersky-border text-kaspersky-text-light hover:text-kaspersky-danger transition-colors"
          title="Clear selection"
        >
          <X size={20} />
        </button>
      </div>

      {/* Guest Warning */}
      {isGuestRole && (
        <div className="absolute -top-12 left-1/2 transform -translate-x-1/2 bg-kaspersky-warning text-white px-4 py-2 rounded-lg text-sm font-medium shadow-lg whitespace-nowrap">
          ⚠️ GUEST role: Limited access to bulk operations
        </div>
      )}
    </div>
  );
}

