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,
  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.group ?? '—'}</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.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>
      )}

      {selectedAgent && (
        <DetailPanel
          open={!!selectedAgent}
          title={selectedAgent.name ?? selectedAgent.id}
          onClose={() => setSelectedAgent(null)}
          tabs={[
            {
              label: 'Overview',
              value: 'overview',
              content: <AgentOverviewContent agent={selectedAgent} />,
            },
            {
              label: 'Performance',
              value: 'performance',
              content: <AgentPerformanceContent agent={selectedAgent} />,
            },
          ]}
        />
      )}
    </div>
  );
}