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';

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) => <span style={{ color: (v as number) > 0.05 ? 'var(--error)' : undefined }}>{((v as number) * 100).toFixed(1)}%</span>,
    },
    {
      key: 'sparkline', header: 'Trend', width: '80px',
      render: (v) => <Sparkline data={v as number[]} />,
    },
  ];

  return (
    <div>
      <div style={{ display: 'flex', gap: '1rem', marginBottom: '1.5rem', flexWrap: 'wrap' }}>
        <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?.p99DurationMs ?? 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>

      <DataTable
        columns={columns}
        data={rows}
        sortable
        pageSize={20}
      />

      {chartData.length > 0 && (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', marginTop: '1.5rem' }}>
          <AreaChart series={[{ label: 'Throughput', data: chartData.map((d: any, i: number) => ({ x: i, y: d.throughput })) }]} height={200} />
          <LineChart series={[{ label: 'Latency', data: chartData.map((d: any, i: number) => ({ x: i, y: d.latency })) }]} height={200} />
          <BarChart series={[{ label: 'Errors', data: chartData.map((d: any) => ({ x: d.time as string, y: d.errors })) }]} height={200} />
          <AreaChart series={[{ label: 'Success Rate', data: chartData.map((d: any, i: number) => ({ x: i, y: d.successRate })) }]} height={200} />
        </div>
      )}
    </div>
  );
}