cameleer-server/ui/src/pages/Routes/RoutesMetrics.tsx

import { useMemo } from 'react';
import { useParams } from 'react-router';
import {
  StatCard, Sparkline, MonoText, Badge,
  DataTable, AreaChart, LineChart, BarChart,
} from '@cameleer/design-system';
import type { Column } from '@cameleer/design-system';
import { useRouteMetrics } from '../../api/queries/catalog';
import { useExecutionStats, useStatsTimeseries } from '../../api/queries/executions';
import { useGlobalFilters } from '@cameleer/design-system';
import styles from './RoutesMetrics.module.css';

interface RouteRow {
  id: string;
  routeId: string;
  appId: string;
  exchangeCount: number;
  successRate: number;
  avgDurationMs: number;
  p99DurationMs: number;
  errorRate: number;
  throughputPerSec: number;
  sparkline: number[];
}

export default function RoutesMetrics() {
  const { appId, routeId } = useParams();
  const { timeRange } = useGlobalFilters();
  const timeFrom = timeRange.start.toISOString();
  const timeTo = timeRange.end.toISOString();

  const { data: metrics } = useRouteMetrics(timeFrom, timeTo, appId);
  const { data: stats } = useExecutionStats(timeFrom, timeTo, routeId, appId);
  const { data: timeseries } = useStatsTimeseries(timeFrom, timeTo, routeId, appId);

  const rows: RouteRow[] = useMemo(() =>
    (metrics || []).map((m: any) => ({
      id: `${m.appId}/${m.routeId}`,
      ...m,
    })),
    [metrics],
  );

  const sparklineData = useMemo(() =>
    (timeseries?.buckets || []).map((b: any) => b.totalCount as number),
    [timeseries],
  );

  const chartData = useMemo(() =>
    (timeseries?.buckets || []).map((b: any) => ({
      time: new Date(b.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
      throughput: b.totalCount,
      latency: b.avgDurationMs,
      errors: b.failedCount,
      successRate: b.totalCount > 0 ? ((b.totalCount - b.failedCount) / b.totalCount) * 100 : 100,
    })),
    [timeseries],
  );

  const columns: Column<RouteRow>[] = [
    { key: 'routeId', header: 'Route', render: (v) => <MonoText size="sm">{String(v)}</MonoText> },
    { key: 'appId', header: 'App', render: (v) => <Badge label={String(v)} color="auto" /> },
    { key: 'exchangeCount', header: 'Exchanges', sortable: true },
    {
      key: 'successRate', header: 'Success', sortable: true,
      render: (v) => `${((v as number) * 100).toFixed(1)}%`,
    },
    { key: 'avgDurationMs', header: 'Avg Duration', sortable: true, render: (v) => `${(v as number).toFixed(0)}ms` },
    { key: 'p99DurationMs', header: 'P99', sortable: true, render: (v) => `${(v as number).toFixed(0)}ms` },
    {
      key: 'errorRate', header: 'Error Rate', sortable: true,
      render: (v) => {
        const rate = v as number;
        const cls = rate > 0.05 ? styles.rateBad : rate > 0.01 ? styles.rateWarn : styles.rateGood;
        return <span className={cls}>{(rate * 100).toFixed(1)}%</span>;
      },
    },
    {
      key: 'sparkline', header: 'Trend', width: '80px',
      render: (v) => <Sparkline data={v as number[]} />,
    },
  ];

  return (
    <div>
      <div className={styles.statStrip}>
        <StatCard label="Total Throughput" value={stats?.totalCount ?? 0} sparkline={sparklineData} />
        <StatCard label="Error Rate" value={stats?.totalCount ? `${(((stats.failedCount ?? 0) / stats.totalCount) * 100).toFixed(1)}%` : '0%'} accent="error" />
        <StatCard label="P99 Latency" value={`${stats?.p99LatencyMs ?? 0}ms`} accent="warning" />
        <StatCard label="Success Rate" value={stats?.totalCount ? `${(((stats.totalCount - (stats.failedCount ?? 0)) / stats.totalCount) * 100).toFixed(1)}%` : '100%'} accent="success" />
      </div>

      <div className={styles.tableSection}>
        <div className={styles.tableHeader}>
          <span className={styles.tableTitle}>Route Metrics</span>
          <span className={styles.tableMeta}>{rows.length} routes</span>
        </div>
        <DataTable
          columns={columns}
          data={rows}
          sortable
          pageSize={20}
        />
      </div>

      {chartData.length > 0 && (
        <div className={styles.chartGrid}>
          <div className={styles.chartCard}>
            <div className={styles.chartTitle}>Throughput</div>
            <AreaChart series={[{ label: 'Throughput', data: chartData.map((d: any, i: number) => ({ x: i, y: d.throughput })) }]} height={200} />
          </div>
          <div className={styles.chartCard}>
            <div className={styles.chartTitle}>Latency</div>
            <LineChart series={[{ label: 'Latency', data: chartData.map((d: any, i: number) => ({ x: i, y: d.latency })) }]} height={200} />
          </div>
          <div className={styles.chartCard}>
            <div className={styles.chartTitle}>Errors</div>
            <BarChart series={[{ label: 'Errors', data: chartData.map((d: any) => ({ x: d.time as string, y: d.errors })) }]} height={200} />
          </div>
          <div className={styles.chartCard}>
            <div className={styles.chartTitle}>Success Rate</div>
            <AreaChart series={[{ label: 'Success Rate', data: chartData.map((d: any, i: number) => ({ x: i, y: d.successRate })) }]} height={200} />
          </div>
        </div>
      )}
    </div>
  );
}