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, 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;
}

export function ProcessCard({ process }: 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);

  return (
    <Card className="transition-all hover:shadow-lg animate-fade-in">
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between">
          <div className="flex-1">
            <CardTitle className="text-lg">{process.name}</CardTitle>
            <p className="text-sm text-muted-foreground mt-1">{process.group}</p>
          </div>
          <Badge
            className={cn(
              'ml-2',
              getProcessStateClass(process.state),
              '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">
          <Button
            size="sm"
            variant="success"
            onClick={handleStart}
            disabled={!canStartProcess(process.state) || isLoading}
            className="flex-1"
          >
            <Play className="h-4 w-4" />
            Start
          </Button>
          <Button
            size="sm"
            variant="warning"
            onClick={handleStop}
            disabled={!canStopProcess(process.state) || 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>
  );
}