supervisor-ui/components/process/SystemStatus.tsx

'use client';

import { Activity, Server, Hash, CheckCircle2, XCircle } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { useSystemInfo } from '@/lib/hooks/useSupervisor';
import { SupervisorState } from '@/lib/supervisor/types';

export function SystemStatus() {
  const { data: systemInfo, isLoading, isError } = useSystemInfo();

  if (isLoading) {
    return (
      <Card>
        <CardContent className="p-6">
          <div className="animate-pulse space-y-3">
            <div className="h-4 bg-muted rounded w-3/4"></div>
            <div className="h-4 bg-muted rounded w-1/2"></div>
          </div>
        </CardContent>
      </Card>
    );
  }

  if (isError || !systemInfo) {
    return (
      <Card className="border-destructive/50">
        <CardContent className="p-6">
          <div className="flex items-center gap-2 text-destructive">
            <XCircle className="h-5 w-5" />
            <span>Failed to connect to Supervisor</span>
          </div>
        </CardContent>
      </Card>
    );
  }

  const isRunning = systemInfo.state.statecode === SupervisorState.RUNNING;

  return (
    <Card>
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <CardTitle className="flex items-center gap-2">
            <Server className="h-5 w-5 text-primary" />
            System Status
          </CardTitle>
          <Badge variant={isRunning ? 'success' : 'destructive'} className="gap-1">
            {isRunning ? (
              <CheckCircle2 className="h-3 w-3" />
            ) : (
              <XCircle className="h-3 w-3" />
            )}
            {systemInfo.state.statename}
          </Badge>
        </div>
      </CardHeader>
      <CardContent className="space-y-3 text-sm">
        <div className="flex items-center justify-between">
          <span className="text-muted-foreground flex items-center gap-2">
            <Activity className="h-4 w-4" />
            Version
          </span>
          <span className="font-mono">{systemInfo.supervisorVersion}</span>
        </div>
        <div className="flex items-center justify-between">
          <span className="text-muted-foreground flex items-center gap-2">
            <Hash className="h-4 w-4" />
            PID
          </span>
          <span className="font-mono">{systemInfo.pid}</span>
        </div>
        <div className="flex items-center justify-between">
          <span className="text-muted-foreground">API Version</span>
          <span className="font-mono">{systemInfo.apiVersion}</span>
        </div>
        {systemInfo.identification && (
          <div className="pt-2 border-t">
            <span className="text-muted-foreground text-xs">ID:</span>
            <p className="font-mono text-xs mt-1 text-foreground/80">
              {systemInfo.identification}
            </p>
          </div>
        )}
      </CardContent>
    </Card>
  );
}