cameleer-server/ui/src/pages/Admin/AppConfigPage.tsx

import { useMemo } from 'react';
import { useNavigate } from 'react-router';
import { DataTable, Badge, MonoText } from '@cameleer/design-system';
import type { Column } from '@cameleer/design-system';
import { useAllApplicationConfigs } from '../../api/queries/commands';
import type { ApplicationConfig } from '../../api/queries/commands';
import styles from './AppConfigPage.module.css';

type ConfigRow = ApplicationConfig & { id: string };

type BadgeColor = 'primary' | 'success' | 'warning' | 'error' | 'running' | 'auto';

function timeAgo(iso?: string): string {
  if (!iso) return '\u2014';
  const diff = Date.now() - new Date(iso).getTime();
  const secs = Math.floor(diff / 1000);
  if (secs < 60) return `${secs}s ago`;
  const mins = Math.floor(secs / 60);
  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 logLevelColor(level?: string): BadgeColor {
  switch (level?.toUpperCase()) {
    case 'ERROR': return 'error';
    case 'WARN': return 'warning';
    case 'DEBUG': return 'running';
    default: return 'success';
  }
}

function engineLevelColor(level?: string): BadgeColor {
  switch (level?.toUpperCase()) {
    case 'NONE': return 'error';
    case 'MINIMAL': return 'warning';
    case 'COMPLETE': return 'running';
    default: return 'success';
  }
}

function payloadColor(mode?: string): BadgeColor {
  switch (mode?.toUpperCase()) {
    case 'INPUT': case 'OUTPUT': return 'warning';
    case 'BOTH': return 'running';
    default: return 'auto';
  }
}

export default function AppConfigPage() {
  const navigate = useNavigate();
  const { data: configs } = useAllApplicationConfigs();

  const columns: Column<ConfigRow>[] = useMemo(() => [
    {
      key: 'application',
      header: 'Application',
      sortable: true,
      render: (_val, row) => <MonoText size="sm">{row.application}</MonoText>,
    },
    {
      key: 'logForwardingLevel',
      header: 'Log Level',
      render: (_val, row) => {
        const val = row.logForwardingLevel ?? 'INFO';
        return <Badge label={val} color={logLevelColor(val)} variant="filled" />;
      },
    },
    {
      key: 'engineLevel',
      header: 'Engine Level',
      render: (_val, row) => {
        const val = row.engineLevel ?? 'REGULAR';
        return <Badge label={val} color={engineLevelColor(val)} variant="filled" />;
      },
    },
    {
      key: 'payloadCaptureMode',
      header: 'Payload Capture',
      render: (_val, row) => {
        const val = row.payloadCaptureMode ?? 'NONE';
        return <Badge label={val} color={payloadColor(val)} variant="filled" />;
      },
    },
    {
      key: 'metricsEnabled',
      header: 'Metrics',
      width: '80px',
      render: (_val, row) => (
        <Badge label={row.metricsEnabled ? 'On' : 'Off'} color={row.metricsEnabled ? 'success' : 'error'} variant="filled" />
      ),
    },
    {
      key: 'tracedProcessors',
      header: 'Traced',
      width: '70px',
      render: (_val, row) => {
        const count = row.tracedProcessors ? Object.keys(row.tracedProcessors).length : 0;
        return count > 0
          ? <Badge label={`${count}`} color="running" variant="filled" />
          : <MonoText size="xs">0</MonoText>;
      },
    },
    {
      key: 'taps',
      header: 'Taps',
      width: '70px',
      render: (_val, row) => {
        const total = row.taps?.length ?? 0;
        const enabled = row.taps?.filter(t => t.enabled).length ?? 0;
        if (total === 0) return <MonoText size="xs">0</MonoText>;
        return <Badge label={`${enabled}/${total}`} color="running" variant="filled" />;
      },
    },
    {
      key: 'version',
      header: 'v',
      width: '40px',
      render: (_val, row) => <MonoText size="xs">{row.version}</MonoText>,
    },
    {
      key: 'updatedAt',
      header: 'Updated',
      render: (_val, row) => <MonoText size="xs">{timeAgo(row.updatedAt)}</MonoText>,
    },
  ], []);

  function handleRowClick(row: ConfigRow) {
    navigate(`/admin/appconfig/${row.application}`);
  }

  return (
    <div>
      <DataTable<ConfigRow>
        columns={columns}
        data={(configs ?? []).map(c => ({ ...c, id: c.application }))}
        onRowClick={handleRowClick}
        pageSize={50}
      />
    </div>
  );
}