supervisor-ui/components/process/BatchActions.tsx

'use client';

import { ProcessInfo } from '@/lib/supervisor/types';
import { useStartProcess, useStopProcess, useRestartProcess } from '@/lib/hooks/useSupervisor';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Play, Square, RotateCw, X } from 'lucide-react';
import { cn } from '@/lib/utils/cn';

interface BatchActionsProps {
  selectedProcesses: Set<string>;
  processes: ProcessInfo[];
  onClearSelection: () => void;
}

export function BatchActions({ selectedProcesses, processes, onClearSelection }: BatchActionsProps) {
  const startMutation = useStartProcess();
  const stopMutation = useStopProcess();
  const restartMutation = useRestartProcess();

  const isLoading = startMutation.isPending || stopMutation.isPending || restartMutation.isPending;

  const selectedCount = selectedProcesses.size;

  if (selectedCount === 0) return null;

  const handleStartSelected = async () => {
    for (const processId of selectedProcesses) {
      startMutation.mutate({ name: processId });
    }
    onClearSelection();
  };

  const handleStopSelected = async () => {
    for (const processId of selectedProcesses) {
      stopMutation.mutate({ name: processId });
    }
    onClearSelection();
  };

  const handleRestartSelected = async () => {
    for (const processId of selectedProcesses) {
      restartMutation.mutate(processId);
    }
    onClearSelection();
  };

  return (
    <div className="fixed bottom-4 left-4 right-4 md:left-1/2 md:right-auto md:-translate-x-1/2 z-50 animate-slide-up">
      <Card className="shadow-2xl border-2">
        <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 sm:gap-4 p-4">
          {/* Selection count */}
          <div className="flex items-center justify-between sm:justify-start gap-2">
            <div className="flex items-center gap-2">
              <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
                <span className="text-sm font-bold text-primary">{selectedCount}</span>
              </div>
              <span className="text-sm font-medium">
                {selectedCount} {selectedCount === 1 ? 'process' : 'processes'} selected
              </span>
            </div>
            {/* Close button on mobile - inline with count */}
            <Button
              variant="ghost"
              size="icon"
              onClick={onClearSelection}
              className="h-8 w-8 sm:hidden"
            >
              <X className="h-4 w-4" />
            </Button>
          </div>

          <div className="hidden sm:block h-6 w-px bg-border" />

          {/* Action buttons - full width on mobile */}
          <div className="flex gap-2 flex-1">
            <Button
              variant="success"
              size="sm"
              onClick={handleStartSelected}
              disabled={isLoading}
              className="gap-2 flex-1 sm:flex-initial"
            >
              <Play className="h-4 w-4" />
              <span>Start</span>
            </Button>
            <Button
              variant="destructive"
              size="sm"
              onClick={handleStopSelected}
              disabled={isLoading}
              className="gap-2 flex-1 sm:flex-initial"
            >
              <Square className="h-4 w-4" />
              <span>Stop</span>
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={handleRestartSelected}
              disabled={isLoading}
              className="gap-2 flex-1 sm:flex-initial"
            >
              <RotateCw className={cn('h-4 w-4', isLoading && 'animate-spin')} />
              <span>Restart</span>
            </Button>
          </div>

          <div className="hidden sm:block h-6 w-px bg-border" />

          {/* Close button on desktop */}
          <Button
            variant="ghost"
            size="icon"
            onClick={onClearSelection}
            className="hidden sm:flex h-8 w-8"
          >
            <X className="h-4 w-4" />
          </Button>
        </div>
      </Card>
    </div>
  );
}