supervisor-ui/components/config/ProcessGroupForm.tsx

'use client';

import { useState } from 'react';
import { useAddProcessGroup, useRemoveProcessGroup } from '@/lib/hooks/useSupervisor';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Plus, Trash2 } from 'lucide-react';

export function ProcessGroupForm() {
  const [groupName, setGroupName] = useState('');
  const [removeGroupName, setRemoveGroupName] = useState('');

  const addMutation = useAddProcessGroup();
  const removeMutation = useRemoveProcessGroup();

  const handleAdd = (e: React.FormEvent) => {
    e.preventDefault();
    if (groupName.trim()) {
      addMutation.mutate(groupName.trim());
      setGroupName('');
    }
  };

  const handleRemove = (e: React.FormEvent) => {
    e.preventDefault();
    if (removeGroupName.trim()) {
      if (confirm(`Are you sure you want to remove the process group "${removeGroupName}"?`)) {
        removeMutation.mutate(removeGroupName.trim());
        setRemoveGroupName('');
      }
    }
  };

  return (
    <div className="grid gap-6 md:grid-cols-2">
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Add Process Group</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleAdd} className="flex gap-2">
            <Input
              type="text"
              placeholder="Group name"
              value={groupName}
              onChange={(e) => setGroupName(e.target.value)}
              disabled={addMutation.isPending}
              className="flex-1"
            />
            <Button
              type="submit"
              disabled={!groupName.trim() || addMutation.isPending}
              className="gap-2"
            >
              <Plus className="h-4 w-4" />
              Add
            </Button>
          </form>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Remove Process Group</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleRemove} className="flex gap-2">
            <Input
              type="text"
              placeholder="Group name"
              value={removeGroupName}
              onChange={(e) => setRemoveGroupName(e.target.value)}
              disabled={removeMutation.isPending}
              className="flex-1"
            />
            <Button
              type="submit"
              variant="destructive"
              disabled={!removeGroupName.trim() || removeMutation.isPending}
              className="gap-2"
            >
              <Trash2 className="h-4 w-4" />
              Remove
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}