cameleer-server/ui/src/pages/AgentHealth/AgentHealth.tsx

import { useMemo, useState } from 'react';
import { useParams, useNavigate } from 'react-router';
import {
  StatCard, StatusDot, Badge, MonoText,
  GroupCard, EventFeed, Breadcrumb, Alert,
} from '@cameleer/design-system';
import styles from './AgentHealth.module.css';
import { useAgents, useAgentEvents } from '../../api/queries/agents';
import { useRouteCatalog } from '../../api/queries/catalog';

function formatUptime(seconds?: number): string {
  if (!seconds) return '—';
  const days = Math.floor(seconds / 86400);
  const hours = Math.floor((seconds % 86400) / 3600);
  const mins = Math.floor((seconds % 3600) / 60);
  if (days > 0) return `${days}d ${hours}h`;
  if (hours > 0) return `${hours}h ${mins}m`;
  return `${mins}m`;
}

function formatRelativeTime(iso?: string): string {
  if (!iso) return '—';
  const diff = Date.now() - new Date(iso).getTime();
  const mins = Math.floor(diff / 60000);
  if (mins < 1) return 'just now';
  if (mins < 60) return `${mins}m ago`;
  const hours = Math.floor(mins / 60);
  if (hours < 24) return `${hours}h ago`;
  return `${Math.floor(hours / 24)}d ago`;
}

export default function AgentHealth() {
  const { appId } = useParams();
  const navigate = useNavigate();
  const { data: agents } = useAgents(undefined, appId);
  const { data: catalog } = useRouteCatalog();
  const { data: events } = useAgentEvents(appId);

  const [selectedAgent, setSelectedAgent] = useState<any>(null);

  const agentsByApp = useMemo(() => {
    const map: Record<string, any[]> = {};
    (agents || []).forEach((a: any) => {
      const g = a.group;
      if (!map[g]) map[g] = [];
      map[g].push(a);
    });
    return map;
  }, [agents]);

  const liveCount = (agents || []).filter((a: any) => a.status === 'LIVE').length;
  const staleCount = (agents || []).filter((a: any) => a.status === 'STALE').length;
  const deadCount = (agents || []).filter((a: any) => a.status === 'DEAD').length;
  const uniqueApps = new Set((agents || []).map((a: any) => a.group)).size;
  const activeRoutes = (agents || []).filter((a: any) => a.status === 'LIVE').reduce((sum: number, a: any) => sum + (a.activeRoutes || 0), 0);
  const totalTps = (agents || []).filter((a: any) => a.status === 'LIVE').reduce((sum: number, a: any) => sum + (a.tps || 0), 0);

  const groupHealth: 'live' | 'stale' | 'dead' = useMemo(() => {
    if (!appId) return 'live';
    const groupAgents = agentsByApp[appId] || [];
    if (groupAgents.some((a: any) => a.status === 'DEAD')) return 'dead';
    if (groupAgents.some((a: any) => a.status === 'STALE')) return 'stale';
    return 'live';
  }, [appId, agentsByApp]);

  const scopeItems = useMemo(() => {
    const items: { label: string; href?: string }[] = [
      { label: 'Agent Health', href: '/agents' },
    ];
    if (appId) {
      items.push({ label: appId });
    }
    return items;
  }, [appId]);

  const feedEvents = useMemo(() =>
    (events || []).map((e: any) => ({
      id: String(e.id),
      severity: e.eventType === 'WENT_DEAD' ? 'error' as const
        : e.eventType === 'WENT_STALE' ? 'warning' as const
        : e.eventType === 'RECOVERED' ? 'success' as const
        : 'running' as const,
      message: `${e.agentId}: ${e.eventType}${e.detail ? ' — ' + e.detail : ''}`,
      timestamp: new Date(e.timestamp),
    })),
    [events],
  );

  const apps = appId ? { [appId]: agentsByApp[appId] || [] } : agentsByApp;

  return (
    <div>
      <div className={styles.statStrip}>
        <StatCard label="Total Agents" value={(agents || []).length} detail={`${liveCount} live / ${staleCount} stale / ${deadCount} dead`} />
        <StatCard label="Applications" value={uniqueApps} />
        <StatCard label="Active Routes" value={activeRoutes} />
        <StatCard label="Total TPS" value={totalTps.toFixed(1)} />
        <StatCard label="Dead" value={deadCount} accent={deadCount > 0 ? 'error' : undefined} />
      </div>

      <div className={styles.scopeTrail}>
        <Breadcrumb items={scopeItems} />
        {!appId && <Badge label={`${liveCount} live`} variant="outlined" />}
        {appId && (
          <Badge
            label={groupHealth}
            color={groupHealth === 'live' ? 'success' : groupHealth === 'stale' ? 'warning' : 'error'}
          />
        )}
      </div>

      <div className={styles.groupGrid}>
        {Object.entries(apps).map(([group, groupAgents]) => {
          const deadInGroup = (groupAgents || []).filter((a: any) => a.status === 'DEAD');
          return (
            <GroupCard
              key={group}
              title={group}
              headerRight={<Badge label={`${groupAgents?.length ?? 0} instances`} />}
              accent={
                groupAgents?.some((a: any) => a.status === 'DEAD') ? 'error'
                  : groupAgents?.some((a: any) => a.status === 'STALE') ? 'warning'
                  : 'success'
              }
              onClick={() => navigate(`/agents/${group}`)}
            >
              {deadInGroup.length > 0 && (
                <Alert variant="error">{deadInGroup.length} instance(s) unreachable</Alert>
              )}
              {(groupAgents || []).map((agent: any) => (
                <div
                  key={agent.id}
                  className={styles.instanceRow}
                  onClick={(e) => {
                    e.stopPropagation();
                    setSelectedAgent(agent);
                    navigate(`/agents/${group}/${agent.id}`);
                  }}
                >
                  <StatusDot variant={agent.status === 'LIVE' ? 'live' : agent.status === 'STALE' ? 'stale' : 'dead'} />
                  <span className={styles.instanceName}>{agent.name}</span>
                  <Badge label={agent.status} color={agent.status === 'LIVE' ? 'success' : agent.status === 'STALE' ? 'warning' : 'error'} />
                  <span className={styles.instanceMeta}>{formatUptime(agent.uptimeSeconds)}</span>
                  {agent.tps != null && <span className={styles.instanceMeta}>{(agent.tps || 0).toFixed(1)} tps</span>}
                  {agent.errorRate != null && (
                    <span className={styles.instanceMeta}>{(agent.errorRate * 100).toFixed(1)}% err</span>
                  )}
                  <span className={styles.instanceMeta}>{formatRelativeTime(agent.lastHeartbeat)}</span>
                  <span className={styles.instanceLink} aria-label="View instance">›</span>
                </div>
              ))}
            </GroupCard>
          );
        })}
      </div>

      {feedEvents.length > 0 && (
        <div className={styles.eventCard}>
          <div className={styles.eventCardHeader}>Event Log</div>
          <EventFeed events={feedEvents} maxItems={100} />
        </div>
      )}
    </div>
  );
}