'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-6 left-1/2 -translate-x-1/2 z-50 animate-slide-up">
      <Card className="shadow-2xl border-2">
        <div className="flex items-center gap-4 px-6 py-4">
          <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>

          <div className="h-6 w-px bg-border" />

          <div className="flex gap-2">
            <Button
              variant="success"
              size="sm"
              onClick={handleStartSelected}
              disabled={isLoading}
              className="gap-2"
            >
              <Play className="h-4 w-4" />
              Start Selected
            </Button>
            <Button
              variant="destructive"
              size="sm"
              onClick={handleStopSelected}
              disabled={isLoading}
              className="gap-2"
            >
              <Square className="h-4 w-4" />
              Stop Selected
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={handleRestartSelected}
              disabled={isLoading}
              className="gap-2"
            >
              <RotateCw className={cn('h-4 w-4', isLoading && 'animate-spin')} />
              Restart Selected
            </Button>
          </div>

          <div className="h-6 w-px bg-border" />

          <Button
            variant="ghost"
            size="icon"
            onClick={onClearSelection}
            className="h-8 w-8"
          >
            <X className="h-4 w-4" />
          </Button>
        </div>
      </Card>
    </div>
  );
}