supervisor-ui/components/charts/ProcessUptimeChart.tsx

'use client';

import { ProcessInfo, ProcessState } from '@/lib/supervisor/types';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
import { chartColors } from '@/lib/utils/chartColors';

interface ProcessUptimeChartProps {
  processes: ProcessInfo[];
}

export function ProcessUptimeChart({ processes }: ProcessUptimeChartProps) {
  // Filter only running processes and calculate uptime in hours
  const data = processes
    .filter((p) => p.state === ProcessState.RUNNING && p.start > 0)
    .map((p) => {
      const uptimeSeconds = p.now - p.start;
      const uptimeHours = uptimeSeconds / 3600;
      return {
        name: `${p.group}:${p.name}`,
        uptime: parseFloat(uptimeHours.toFixed(2)),
        displayName: p.name.length > 15 ? p.name.substring(0, 15) + '...' : p.name,
      };
    })
    .sort((a, b) => b.uptime - a.uptime)
    .slice(0, 10); // Top 10 processes by uptime

  if (data.length === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Process Uptime (Top 10)</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="h-[300px] flex items-center justify-center text-muted-foreground">
            No running processes
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Process Uptime (Top 10)</CardTitle>
      </CardHeader>
      <CardContent>
        <ResponsiveContainer width="100%" height={300}>
          <BarChart data={data} layout="vertical">
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis type="number" label={{ value: 'Hours', position: 'insideBottom', offset: -5 }} />
            <YAxis dataKey="displayName" type="category" width={120} />
            <Tooltip
              formatter={(value: number) => {
                const hours = Math.floor(value);
                const minutes = Math.floor((value - hours) * 60);
                return `${hours}h ${minutes}m`;
              }}
              contentStyle={{
                backgroundColor: 'rgba(0, 0, 0, 0.9)',
                border: 'none',
                borderRadius: '8px',
                color: '#ffffff',
              }}
              itemStyle={{ color: '#ffffff' }}
            />
            <Legend />
            <Bar dataKey="uptime" fill={chartColors.success} name="Uptime (hours)" />
          </BarChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  );
}