supervisor-ui/components/groups/GroupCard.tsx

'use client';

import { useState } from 'react';
import { ProcessInfo, ProcessState, ProcessStateCode } from '@/lib/supervisor/types';
import { useStartProcessGroup, useStopProcessGroup, useRestartProcessGroup } from '@/lib/hooks/useSupervisor';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { ProcessCard } from '@/components/process/ProcessCard';
import { ChevronDown, ChevronUp, Play, Square, RotateCw } from 'lucide-react';
import { cn } from '@/lib/utils/cn';

interface GroupCardProps {
  groupName: string;
  processes: ProcessInfo[];
}

export function GroupCard({ groupName, processes }: GroupCardProps) {
  const [isExpanded, setIsExpanded] = useState(true);

  const startGroupMutation = useStartProcessGroup();
  const stopGroupMutation = useStopProcessGroup();
  const restartGroupMutation = useRestartProcessGroup();

  const isLoading = startGroupMutation.isPending || stopGroupMutation.isPending || restartGroupMutation.isPending;

  // Calculate statistics
  const stats = processes.reduce(
    (acc, proc) => {
      if (proc.state === ProcessState.RUNNING) acc.running++;
      else if (proc.state === ProcessState.STOPPED || proc.state === ProcessState.EXITED) acc.stopped++;
      else if (proc.state === ProcessState.FATAL) acc.fatal++;
      return acc;
    },
    { running: 0, stopped: 0, fatal: 0, total: processes.length }
  );

  const handleStart = () => {
    startGroupMutation.mutate({ name: groupName });
  };

  const handleStop = () => {
    stopGroupMutation.mutate({ name: groupName });
  };

  const handleRestart = () => {
    restartGroupMutation.mutate({ name: groupName });
  };

  return (
    <Card className="overflow-hidden">
      <CardHeader className="pb-3">
        <div className="flex flex-col md:flex-row items-start md:items-center gap-3 md:justify-between">
          <div className="flex items-center gap-3 flex-1">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setIsExpanded(!isExpanded)}
              className="h-8 w-8 p-0"
            >
              {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
            </Button>
            <div>
              <CardTitle className="text-xl">{groupName}</CardTitle>
              <div className="flex gap-3 mt-1 text-sm">
                <span className="text-muted-foreground">
                  Total: <span className="font-medium text-foreground">{stats.total}</span>
                </span>
                <span className="text-success">
                  Running: <span className="font-medium">{stats.running}</span>
                </span>
                <span className="text-muted-foreground">
                  Stopped: <span className="font-medium">{stats.stopped}</span>
                </span>
                {stats.fatal > 0 && (
                  <span className="text-destructive">
                    Fatal: <span className="font-medium">{stats.fatal}</span>
                  </span>
                )}
              </div>
            </div>
          </div>

          <div className="flex flex-wrap gap-2 w-full md:w-auto">
            <Button
              variant="success"
              size="sm"
              onClick={handleStart}
              disabled={isLoading || stats.stopped === 0}
              className="gap-2 flex-1 sm:flex-initial"
            >
              <Play className="h-4 w-4" />
              Start All
            </Button>
            <Button
              variant="destructive"
              size="sm"
              onClick={handleStop}
              disabled={isLoading || stats.running === 0}
              className="gap-2 flex-1 sm:flex-initial"
            >
              <Square className="h-4 w-4" />
              Stop All
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={handleRestart}
              disabled={isLoading}
              className="gap-2 flex-1 sm:flex-initial"
            >
              <RotateCw className={cn('h-4 w-4', isLoading && 'animate-spin')} />
              Restart All
            </Button>
          </div>
        </div>
      </CardHeader>

      {isExpanded && (
        <CardContent className="pt-0">
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {processes.map((process) => (
              <ProcessCard
                key={`${process.group}:${process.name}`}
                process={process}
              />
            ))}
          </div>
        </CardContent>
      )}
    </Card>
  );
}