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

import { useState, useMemo } from 'react';
import { useParams, useNavigate } from 'react-router';
import {
  StatCard, StatusDot, Badge, MonoText,
  DataTable, DetailPanel, ProcessorTimeline, RouteFlow,
  Alert, Collapsible, CodeBlock, ShortcutsBar,
} from '@cameleer/design-system';
import type { Column } from '@cameleer/design-system';
import { useSearchExecutions, useExecutionStats, useStatsTimeseries, useExecutionDetail, useProcessorSnapshot } from '../../api/queries/executions';
import { useDiagramByRoute } from '../../api/queries/diagrams';
import { useGlobalFilters } from '@cameleer/design-system';
import type { ExecutionSummary } from '../../api/types';
import { mapDiagramToRouteNodes } from '../../utils/diagram-mapping';
import styles from './Dashboard.module.css';

interface Row extends ExecutionSummary { id: string }

function formatDuration(ms: number): string {
  if (ms < 1000) return `${ms}ms`;
  return `${(ms / 1000).toFixed(1)}s`;
}

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

  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [detailTab, setDetailTab] = useState('overview');
  const [processorIdx, setProcessorIdx] = useState<number | null>(null);

  const timeWindowSeconds = (timeRange.end.getTime() - timeRange.start.getTime()) / 1000;

  const { data: stats } = useExecutionStats(timeFrom, timeTo, routeId, appId);
  const { data: timeseries } = useStatsTimeseries(timeFrom, timeTo, routeId, appId);
  const { data: searchResult } = useSearchExecutions({
    timeFrom, timeTo,
    routeId: routeId || undefined,
    group: appId || undefined,
    offset: 0, limit: 50,
  }, true);
  const { data: detail } = useExecutionDetail(selectedId);
  const { data: snapshot } = useProcessorSnapshot(selectedId, processorIdx);
  const { data: diagram } = useDiagramByRoute(detail?.groupName, detail?.routeId);

  const rows: Row[] = useMemo(() =>
    (searchResult?.data || []).map((e: ExecutionSummary) => ({ ...e, id: e.executionId })),
    [searchResult],
  );

  const totalCount = stats?.totalCount ?? 0;
  const failedCount = stats?.failedCount ?? 0;
  const successRate = totalCount > 0 ? ((totalCount - failedCount) / totalCount * 100) : 100;
  const throughput = timeWindowSeconds > 0 ? totalCount / timeWindowSeconds : 0;

  const sparkExchanges = useMemo(() =>
    (timeseries?.buckets || []).map((b: any) => b.totalCount as number), [timeseries]);
  const sparkErrors = useMemo(() =>
    (timeseries?.buckets || []).map((b: any) => b.failedCount as number), [timeseries]);
  const sparkLatency = useMemo(() =>
    (timeseries?.buckets || []).map((b: any) => b.p99DurationMs as number), [timeseries]);
  const sparkThroughput = useMemo(() =>
    (timeseries?.buckets || []).map((b: any) => {
      const bucketSeconds = timeWindowSeconds / Math.max((timeseries?.buckets || []).length, 1);
      return bucketSeconds > 0 ? (b.totalCount as number) / bucketSeconds : 0;
    }), [timeseries, timeWindowSeconds]);

  const prevTotal = stats?.prevTotalCount ?? 0;
  const prevFailed = stats?.prevFailedCount ?? 0;
  const exchangeTrend = prevTotal > 0 ? ((totalCount - prevTotal) / prevTotal * 100) : 0;
  const prevSuccessRate = prevTotal > 0 ? ((prevTotal - prevFailed) / prevTotal * 100) : 100;
  const successRateDelta = successRate - prevSuccessRate;
  const errorDelta = failedCount - prevFailed;

  const columns: Column<Row>[] = [
    {
      key: 'status', header: 'Status', width: '80px',
      render: (v, row) => (
        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <StatusDot variant={v === 'COMPLETED' ? 'success' : v === 'FAILED' ? 'error' : 'running'} />
          <MonoText size="xs">{v === 'COMPLETED' ? 'OK' : v === 'FAILED' ? 'ERR' : 'RUN'}</MonoText>
        </span>
      ),
    },
    {
      key: '_inspect' as any, header: '', width: '36px',
      render: (_v, row) => (
        <a
          href={`/exchanges/${row.executionId}`}
          onClick={(e) => { e.stopPropagation(); e.preventDefault(); navigate(`/exchanges/${row.executionId}`); }}
          className={styles.inspectLink}
          title="Open full details"
        >&#x2197;</a>
      ),
    },
    { key: 'routeId', header: 'Route', sortable: true, render: (v) => <span>{String(v)}</span> },
    { key: 'groupName', header: 'Application', sortable: true, render: (v) => <span>{String(v ?? '')}</span> },
    { key: 'executionId', header: 'Exchange ID', sortable: true, render: (v) => <MonoText size="xs">{String(v)}</MonoText> },
    { key: 'startTime', header: 'Started', sortable: true, render: (v) => <MonoText size="xs">{new Date(v as string).toISOString().replace('T', ' ').slice(0, 19)}</MonoText> },
    {
      key: 'durationMs', header: 'Duration', sortable: true,
      render: (v) => <MonoText size="sm">{formatDuration(v as number)}</MonoText>,
    },
    {
      key: 'agentId', header: 'Agent',
      render: (v) => v ? <Badge label={String(v)} color="auto" /> : null,
    },
  ];

  const detailTabs = detail ? [
    {
      label: 'Overview', value: 'overview',
      content: (
        <>
          <div className={styles.panelSection}>
            <button
              className={styles.openDetailLink}
              onClick={() => navigate(`/exchanges/${detail.executionId}`)}
            >
              Open full details &#x2192;
            </button>
          </div>
          <div className={styles.panelSection}>
            <div className={styles.panelSectionTitle}>Overview</div>
            <div className={styles.overviewGrid}>
              <div className={styles.overviewRow}>
                <span className={styles.overviewLabel}>Status</span>
                <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <StatusDot variant={detail.status === 'COMPLETED' ? 'success' : 'error'} />
                  <span>{detail.status}</span>
                </span>
              </div>
              <div className={styles.overviewRow}>
                <span className={styles.overviewLabel}>Duration</span>
                <MonoText size="sm">{formatDuration(detail.durationMs)}</MonoText>
              </div>
              <div className={styles.overviewRow}>
                <span className={styles.overviewLabel}>Route</span>
                <span>{detail.routeId}</span>
              </div>
              <div className={styles.overviewRow}>
                <span className={styles.overviewLabel}>Agent</span>
                <MonoText size="sm">{detail.agentId ?? '—'}</MonoText>
              </div>
              <div className={styles.overviewRow}>
                <span className={styles.overviewLabel}>Correlation</span>
                <MonoText size="xs">{detail.correlationId ?? '—'}</MonoText>
              </div>
              <div className={styles.overviewRow}>
                <span className={styles.overviewLabel}>Timestamp</span>
                <MonoText size="xs">{detail.startTime ? new Date(detail.startTime).toISOString().replace('T', ' ').slice(0, 19) : '—'}</MonoText>
              </div>
            </div>
          </div>
          {detail.errorMessage && (
            <div className={styles.panelSection}>
              <div className={styles.panelSectionTitle}>Errors</div>
              <Alert variant="error">
                <strong>{detail.errorMessage.split(':')[0]}</strong>
                <div>{detail.errorMessage.includes(':') ? detail.errorMessage.substring(detail.errorMessage.indexOf(':') + 1).trim() : ''}</div>
              </Alert>
              {detail.errorStackTrace && (
                <Collapsible title="Stack Trace">
                  <CodeBlock content={detail.errorStackTrace} />
                </Collapsible>
              )}
            </div>
          )}
        </>
      ),
    },
    {
      label: 'Processors', value: 'processors',
      content: (() => {
        const procList = detail.processors?.length ? detail.processors : (detail.children ?? []);
        return procList.length ? (
          <ProcessorTimeline
            processors={flattenProcessors(procList)}
            totalMs={detail.durationMs}
            onProcessorClick={(_p, i) => setProcessorIdx(i)}
            selectedIndex={processorIdx ?? undefined}
          />
        ) : <div style={{ padding: '1rem' }}>No processor data</div>;
      })(),
    },
    {
      label: 'Route Flow', value: 'flow',
      content: diagram ? (
        <RouteFlow
          nodes={mapDiagramToRouteNodes(
            diagram.nodes || [],
            detail.processors?.length ? detail.processors : (detail.children ?? [])
          )}
          onNodeClick={(_node, _i) => { /* optionally select processor */ }}
        />
      ) : <div style={{ padding: '1rem' }}>No diagram available</div>,
    },
  ] : [];

  return (
    <div>
      <div className={styles.healthStrip}>
        <StatCard
          label="Exchanges"
          value={totalCount.toLocaleString('en-US')}
          detail={`${successRate.toFixed(1)}% success rate`}
          trend={exchangeTrend > 0 ? 'up' : exchangeTrend < 0 ? 'down' : 'neutral'}
          trendValue={exchangeTrend > 0 ? `+${exchangeTrend.toFixed(0)}%` : `${exchangeTrend.toFixed(0)}%`}
          sparkline={sparkExchanges}
          accent="amber"
        />
        <StatCard
          label="Success Rate"
          value={`${successRate.toFixed(1)}%`}
          detail={`${(totalCount - failedCount).toLocaleString('en-US')} ok / ${failedCount} error`}
          trend={successRateDelta >= 0 ? 'up' : 'down'}
          trendValue={`${successRateDelta >= 0 ? '+' : ''}${successRateDelta.toFixed(1)}%`}
          accent="success"
        />
        <StatCard
          label="Errors"
          value={failedCount}
          detail={`${failedCount} errors in selected period`}
          trend={errorDelta > 0 ? 'up' : errorDelta < 0 ? 'down' : 'neutral'}
          trendValue={errorDelta > 0 ? `+${errorDelta}` : `${errorDelta}`}
          sparkline={sparkErrors}
          accent="error"
        />
        <StatCard
          label="Throughput"
          value={throughput.toFixed(1)}
          detail={`${throughput.toFixed(1)} msg/s`}
          sparkline={sparkThroughput}
          accent="running"
        />
        <StatCard
          label="Latency p99"
          value={(stats?.p99LatencyMs ?? 0).toLocaleString('en-US')}
          detail={`${(stats?.p99LatencyMs ?? 0).toLocaleString('en-US')}ms`}
          sparkline={sparkLatency}
          accent="warning"
        />
      </div>

      <div className={styles.tableSection}>
        <div className={styles.tableHeader}>
          <span className={styles.tableTitle}>Recent Exchanges</span>
          <div className={styles.tableRight}>
            <span className={styles.tableMeta}>{rows.length} of {searchResult?.total ?? 0} exchanges</span>
            <Badge label="LIVE" color="success" />
          </div>
        </div>
        <DataTable
          columns={columns}
          data={rows}
          onRowClick={(row) => { setSelectedId(row.id); setProcessorIdx(null); }}
          selectedId={selectedId ?? undefined}
          sortable
          pageSize={25}
        />
      </div>

      <DetailPanel
        open={!!selectedId}
        onClose={() => setSelectedId(null)}
        title={selectedId ? `Exchange ${selectedId.slice(0, 12)}...` : ''}
        tabs={detailTabs}
      />
    </div>
  );
}

function flattenProcessors(nodes: any[]): any[] {
  const result: any[] = [];
  let offset = 0;
  function walk(node: any) {
    result.push({
      name: node.processorId || node.processorType,
      type: node.processorType,
      durationMs: node.durationMs ?? 0,
      status: node.status === 'COMPLETED' ? 'ok' : node.status === 'FAILED' ? 'fail' : 'ok',
      startMs: offset,
    });
    offset += node.durationMs ?? 0;
    if (node.children) node.children.forEach(walk);
  }
  nodes.forEach(walk);
  return result;
}