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, Alert,
  DetailPanel, ProgressBar, LineChart,
} from '@cameleer/design-system';
import styles from './AgentHealth.module.css';
import { useAgents, useAgentEvents } from '../../api/queries/agents';
import { useRouteCatalog } from '../../api/queries/catalog';
import { useAgentMetrics } from '../../api/queries/agent-metrics';

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

function AgentOverviewContent({ agent }: { agent: any }) {
  const { data: memMetrics } = useAgentMetrics(
    agent.id,
    ['jvm.memory.heap.used', 'jvm.memory.heap.max'],
    1,
  );
  const { data: cpuMetrics } = useAgentMetrics(agent.id, ['jvm.cpu.process'], 1);

  const cpuValue = cpuMetrics?.metrics?.['jvm.cpu.process']?.[0]?.value;
  const heapUsed = memMetrics?.metrics?.['jvm.memory.heap.used']?.[0]?.value;
  const heapMax = memMetrics?.metrics?.['jvm.memory.heap.max']?.[0]?.value;

  const heapPercent = heapUsed != null && heapMax != null && heapMax > 0
    ? Math.round((heapUsed / heapMax) * 100)
    : undefined;
  const cpuPercent = cpuValue != null ? Math.round(cpuValue * 100) : undefined;

  const statusVariant: 'live' | 'stale' | 'dead' =
    agent.status === 'LIVE' ? 'live' : agent.status === 'STALE' ? 'stale' : 'dead';
  const statusColor: 'success' | 'warning' | 'error' =
    agent.status === 'LIVE' ? 'success' : agent.status === 'STALE' ? 'warning' : 'error';

  return (
    <div className={styles.overviewContent}>
      <div className={styles.overviewRow}>
        <StatusDot variant={statusVariant} />
        <Badge label={agent.status} color={statusColor} />
      </div>

      <dl className={styles.detailList}>
        <div className={styles.detailRow}>
          <dt>Application</dt>
          <dd><MonoText>{agent.application ?? '—'}</MonoText></dd>
        </div>
        <div className={styles.detailRow}>
          <dt>Version</dt>
          <dd><MonoText>{agent.version ?? '—'}</MonoText></dd>
        </div>
        <div className={styles.detailRow}>
          <dt>Uptime</dt>
          <dd>{formatUptime(agent.uptimeSeconds)}</dd>
        </div>
        <div className={styles.detailRow}>
          <dt>Last Heartbeat</dt>
          <dd>{formatRelativeTime(agent.lastHeartbeat)}</dd>
        </div>
        <div className={styles.detailRow}>
          <dt>TPS</dt>
          <dd>{agent.tps != null ? (agent.tps as number).toFixed(2) : '—'}</dd>
        </div>
        <div className={styles.detailRow}>
          <dt>Error Rate</dt>
          <dd>{agent.errorRate != null ? `${((agent.errorRate as number) * 100).toFixed(1)}%` : '—'}</dd>
        </div>
        <div className={styles.detailRow}>
          <dt>Routes</dt>
          <dd>{agent.activeRoutes ?? '—'} active / {agent.totalRoutes ?? '—'} total</dd>
        </div>
      </dl>

      <div className={styles.metricsSection}>
        <div className={styles.metricLabel}>
          Heap Memory{heapUsed != null && heapMax != null
            ? ` — ${Math.round(heapUsed / 1024 / 1024)}MB / ${Math.round(heapMax / 1024 / 1024)}MB`
            : ''}
        </div>
        <ProgressBar
          value={heapPercent}
          variant={heapPercent == null ? 'primary' : heapPercent > 85 ? 'error' : heapPercent > 70 ? 'warning' : 'success'}
          indeterminate={heapPercent == null}
          size="sm"
        />
      </div>

      <div className={styles.metricsSection}>
        <div className={styles.metricLabel}>
          CPU Usage{cpuPercent != null ? ` — ${cpuPercent}%` : ''}
        </div>
        <ProgressBar
          value={cpuPercent}
          variant={cpuPercent == null ? 'primary' : cpuPercent > 80 ? 'error' : cpuPercent > 60 ? 'warning' : 'success'}
          indeterminate={cpuPercent == null}
          size="sm"
        />
      </div>
    </div>
  );
}

function AgentPerformanceContent({ agent }: { agent: any }) {
  const { data: tpsMetrics } = useAgentMetrics(agent.id, ['cameleer.tps'], 60);
  const { data: errMetrics } = useAgentMetrics(agent.id, ['cameleer.error.rate'], 60);

  const tpsSeries = useMemo(() => {
    const raw = tpsMetrics?.metrics?.['cameleer.tps'] ?? [];
    return [{
      label: 'TPS',
      data: raw.map((p) => ({ x: new Date(p.time), y: p.value })),
    }];
  }, [tpsMetrics]);

  const errSeries = useMemo(() => {
    const raw = errMetrics?.metrics?.['cameleer.error.rate'] ?? [];
    return [{
      label: 'Error Rate',
      data: raw.map((p) => ({ x: new Date(p.time), y: p.value * 100 })),
    }];
  }, [errMetrics]);

  return (
    <div className={styles.performanceContent}>
      <div className={styles.chartSection}>
        <div className={styles.chartLabel}>Throughput (TPS)</div>
        {tpsSeries[0].data.length > 0 ? (
          <LineChart series={tpsSeries} yLabel="req/s" height={160} />
        ) : (
          <div className={styles.emptyChart}>No data available</div>
        )}
      </div>

      <div className={styles.chartSection}>
        <div className={styles.chartLabel}>Error Rate (%)</div>
        {errSeries[0].data.length > 0 ? (
          <LineChart series={errSeries} yLabel="%" height={160} />
        ) : (
          <div className={styles.emptyChart}>No data available</div>
        )}
      </div>
    </div>
  );
}

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.application;
      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.application)).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 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={
            <span className={styles.statusBreakdown}>
              <span className={styles.statusLive}>{liveCount} live</span>
              <span className={styles.statusStale}>{staleCount} stale</span>
              <span className={styles.statusDead}>{deadCount} dead</span>
            </span>
          }
        />
        <StatCard label="Applications" value={uniqueApps} />
        <StatCard label="Active Routes" value={activeRoutes} />
        <StatCard label="Total TPS" value={totalTps.toFixed(1)} detail="msg/s" />
        <StatCard label="Dead" value={deadCount} accent={deadCount > 0 ? 'error' : undefined} detail={deadCount > 0 ? 'requires attention' : undefined} />
      </div>

      <div className={styles.scopeTrail}>
        <span className={styles.scopeLabel}>{liveCount}/{(agents || []).length} live</span>
      </div>

      <div className={styles.groupGrid}>
        {Object.entries(apps).map(([group, groupAgents]) => {
          const deadInGroup = (groupAgents || []).filter((a: any) => a.status === 'DEAD');
          const groupTps = (groupAgents || []).reduce((s: number, a: any) => s + (a.tps || 0), 0);
          const groupActiveRoutes = (groupAgents || []).reduce((s: number, a: any) => s + (a.activeRoutes || 0), 0);
          const groupTotalRoutes = (groupAgents || []).reduce((s: number, a: any) => s + (a.totalRoutes || 0), 0);
          const liveInGroup = (groupAgents || []).filter((a: any) => a.status === 'LIVE').length;
          return (
            <GroupCard
              key={group}
              title={group}
              headerRight={
                <Badge
                  label={`${liveInGroup}/${groupAgents?.length ?? 0} LIVE`}
                  color={
                    groupAgents?.some((a: any) => a.status === 'DEAD') ? 'error'
                      : groupAgents?.some((a: any) => a.status === 'STALE') ? 'warning'
                      : 'success'
                  }
                  variant="filled"
                />
              }
              meta={
                <div className={styles.groupMeta}>
                  <span><strong>{groupTps.toFixed(1)}</strong> msg/s</span>
                  <span><strong>{groupActiveRoutes}</strong>/{groupTotalRoutes} routes</span>
                </div>
              }
              accent={
                groupAgents?.some((a: any) => a.status === 'DEAD') ? 'error'
                  : groupAgents?.some((a: any) => a.status === 'STALE') ? 'warning'
                  : 'success'
              }
            >
              {deadInGroup.length > 0 && (
                <Alert variant="error">{deadInGroup.length} instance(s) unreachable</Alert>
              )}
              <table className={styles.instanceTable}>
                <thead>
                  <tr>
                    <th className={styles.thStatus} />
                    <th>Instance</th>
                    <th>State</th>
                    <th>Uptime</th>
                    <th>TPS</th>
                    <th>Errors</th>
                    <th>Heartbeat</th>
                  </tr>
                </thead>
                <tbody>
                  {(groupAgents || []).map((agent: any) => (
                    <tr
                      key={agent.id}
                      className={[
                        styles.instanceRow,
                        selectedAgent?.id === agent.id ? styles.instanceRowActive : '',
                      ].filter(Boolean).join(' ')}
                      onClick={() => {
                        setSelectedAgent(agent);
                        navigate(`/agents/${group}/${agent.id}`);
                      }}
                    >
                      <td className={styles.tdStatus}>
                        <StatusDot variant={agent.status === 'LIVE' ? 'live' : agent.status === 'STALE' ? 'stale' : 'dead'} />
                      </td>
                      <td>
                        <MonoText size="sm" className={styles.instanceName}>{agent.name ?? agent.id}</MonoText>
                      </td>
                      <td>
                        <Badge
                          label={agent.status}
                          color={agent.status === 'LIVE' ? 'success' : agent.status === 'STALE' ? 'warning' : 'error'}
                          variant="filled"
                        />
                      </td>
                      <td>
                        <span className={styles.instanceMeta}>{formatUptime(agent.uptimeSeconds)}</span>
                      </td>
                      <td>
                        <span className={styles.instanceMeta}>{agent.tps != null ? `${(agent.tps as number).toFixed(1)}/s` : '—'}</span>
                      </td>
                      <td>
                        <span className={agent.errorRate != null ? styles.instanceError : styles.instanceMeta}>
                          {agent.errorRate != null ? `${((agent.errorRate as number) * 100).toFixed(1)}%` : '—'}
                        </span>
                      </td>
                      <td>
                        <span className={
                          agent.status === 'DEAD' ? styles.instanceHeartbeatDead
                            : agent.status === 'STALE' ? styles.instanceHeartbeatStale
                            : styles.instanceMeta
                        }>
                          {formatRelativeTime(agent.lastHeartbeat)}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </GroupCard>
          );
        })}
      </div>

      {feedEvents.length > 0 && (
        <div className={styles.eventCard}>
          <div className={styles.eventCardHeader}>
            <span>Timeline</span>
            <Badge label={`${feedEvents.length} events`} variant="outlined" />
          </div>
          <EventFeed events={feedEvents} maxItems={100} />
        </div>
      )}

      {selectedAgent && (
        <DetailPanel
          key={selectedAgent.id}
          open={true}
          title={selectedAgent.name ?? selectedAgent.id}
          onClose={() => setSelectedAgent(null)}
          className={styles.detailPanelOverride}
        >
          <AgentOverviewContent agent={selectedAgent} />
          <div className={styles.panelDivider} />
          <AgentPerformanceContent agent={selectedAgent} />
        </DetailPanel>
      )}
    </div>
  );
}