supervisor-ui/components/process/ProcessCard.tsx

'use client';

import { Play, Square, RotateCw, Activity } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { ProcessInfo, ProcessStateCode, getProcessStateClass, formatUptime, canStartProcess, canStopProcess } from '@/lib/supervisor/types';
import { useStartProcess, useStopProcess, useRestartProcess } from '@/lib/hooks/useSupervisor';
import { cn } from '@/lib/utils/cn';

interface ProcessCardProps {
  process: ProcessInfo;
  isSelected?: boolean;
  onSelectionChange?: (processId: string, selected: boolean) => void;
}

export function ProcessCard({ process, isSelected = false, onSelectionChange }: ProcessCardProps) {
  const startMutation = useStartProcess();
  const stopMutation = useStopProcess();
  const restartMutation = useRestartProcess();

  const fullName = `${process.group}:${process.name}`;
  const isLoading = startMutation.isPending || stopMutation.isPending || restartMutation.isPending;
  const uptime = process.state === 20 ? formatUptime(process.start, process.now) : 'Not running';

  const handleStart = () => startMutation.mutate({ name: fullName });
  const handleStop = () => stopMutation.mutate({ name: fullName });
  const handleRestart = () => restartMutation.mutate(fullName);

  const handleCardClick = () => {
    if (onSelectionChange) {
      onSelectionChange(fullName, !isSelected);
    }
  };

  return (
    <Card
      className={cn(
        'transition-all hover:shadow-lg animate-fade-in',
        onSelectionChange && 'cursor-pointer',
        isSelected && 'ring-2 ring-primary ring-offset-2'
      )}
      onClick={onSelectionChange ? handleCardClick : undefined}
    >
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-3 flex-1">
            {onSelectionChange && (
              <div className="flex-shrink-0">
                <input
                  type="checkbox"
                  checked={isSelected}
                  onChange={(e) => {
                    e.stopPropagation();
                    onSelectionChange(fullName, e.target.checked);
                  }}
                  className="h-4 w-4 rounded border-input text-primary focus:ring-2 focus:ring-primary focus:ring-offset-2"
                />
              </div>
            )}
            <div className="flex-1">
              <CardTitle className="text-lg">{process.name}</CardTitle>
              <p className="text-sm text-muted-foreground mt-1">{process.group}</p>
            </div>
          </div>
          <Badge
            className={cn(
              'ml-2',
              getProcessStateClass(process.state as ProcessStateCode),
              'border px-3 py-1 font-mono text-xs'
            )}
          >
            {process.statename}
          </Badge>
        </div>
      </CardHeader>

      <CardContent className="space-y-4">
        {/* Metrics */}
        <div className="grid grid-cols-2 gap-3 text-sm">
          <div>
            <span className="text-muted-foreground">PID:</span>
            <span className="ml-2 font-mono">{process.pid || 'N/A'}</span>
          </div>
          <div>
            <span className="text-muted-foreground">Uptime:</span>
            <span className="ml-2 font-mono">{uptime}</span>
          </div>
          {process.exitstatus !== 0 && (
            <div className="col-span-2">
              <span className="text-muted-foreground">Exit Status:</span>
              <span className="ml-2 font-mono text-destructive">{process.exitstatus}</span>
            </div>
          )}
        </div>

        {/* Error Description */}
        {process.spawnerr && (
          <div className="rounded-md bg-destructive/10 p-2 text-xs text-destructive border border-destructive/20">
            {process.spawnerr}
          </div>
        )}

        {/* Actions */}
        <div className="flex gap-2" onClick={(e) => e.stopPropagation()}>
          <Button
            size="sm"
            variant="success"
            onClick={handleStart}
            disabled={!canStartProcess(process.state as ProcessStateCode) || isLoading}
            className="flex-1"
          >
            <Play className="h-4 w-4" />
            Start
          </Button>
          <Button
            size="sm"
            variant="warning"
            onClick={handleStop}
            disabled={!canStopProcess(process.state as ProcessStateCode) || isLoading}
            className="flex-1"
          >
            <Square className="h-4 w-4" />
            Stop
          </Button>
          <Button
            size="sm"
            variant="outline"
            onClick={handleRestart}
            disabled={process.state === 0 || isLoading}
          >
            <RotateCw className={cn('h-4 w-4', isLoading && 'animate-spin-slow')} />
          </Button>
        </div>

        {/* Description */}
        {process.description && process.description !== 'pid ' + process.pid && (
          <p className="text-xs text-muted-foreground italic">
            {process.description}
          </p>
        )}
      </CardContent>
    </Card>
  );
}