supervisor-ui/components/charts/ProcessStateChart.tsx

'use client';

import { ProcessInfo, ProcessState } from '@/lib/supervisor/types';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';

interface ProcessStateChartProps {
  processes: ProcessInfo[];
}

export function ProcessStateChart({ processes }: ProcessStateChartProps) {
  const stateCounts = 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++;
      else if (proc.state === ProcessState.STARTING) acc.starting++;
      else if (proc.state === ProcessState.STOPPING) acc.stopping++;
      else acc.other++;
      return acc;
    },
    { running: 0, stopped: 0, fatal: 0, starting: 0, stopping: 0, other: 0 }
  );

  const data = [
    { name: 'Running', value: stateCounts.running, color: 'hsl(var(--success))' },
    { name: 'Stopped', value: stateCounts.stopped, color: 'hsl(var(--muted-foreground))' },
    { name: 'Fatal', value: stateCounts.fatal, color: 'hsl(var(--destructive))' },
    { name: 'Starting', value: stateCounts.starting, color: 'hsl(var(--warning))' },
    { name: 'Stopping', value: stateCounts.stopping, color: 'hsl(var(--accent))' },
    { name: 'Other', value: stateCounts.other, color: 'hsl(var(--muted))' },
  ].filter((item) => item.value > 0);

  return (
    <Card>
      <CardHeader>
        <CardTitle>Process State Distribution</CardTitle>
      </CardHeader>
      <CardContent>
        <ResponsiveContainer width="100%" height={300}>
          <PieChart>
            <Pie
              data={data}
              cx="50%"
              cy="50%"
              labelLine={false}
              label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
              outerRadius={80}
              fill="#8884d8"
              dataKey="value"
            >
              {data.map((entry, index) => (
                <Cell key={`cell-${index}`} fill={entry.color} />
              ))}
            </Pie>
            <Tooltip />
            <Legend />
          </PieChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  );
}