cameleer-server/ui/src/pages/Alerts/HistoryPage.tsx

import { Link } from 'react-router';
import { History } from 'lucide-react';
import {
  DataTable, EmptyState, useGlobalFilters,
} from '@cameleer/design-system';
import type { Column } from '@cameleer/design-system';
import { PageLoader } from '../../components/PageLoader';
import { SeverityBadge } from '../../components/SeverityBadge';
import {
  useAlerts, type AlertDto,
} from '../../api/queries/alerts';
import { severityToAccent } from './severity-utils';
import { formatRelativeTime } from './time-utils';
import { renderAlertExpanded } from './alert-expanded';
import css from './alerts-page.module.css';
import tableStyles from '../../styles/table-section.module.css';

/** Duration in s/m/h/d. Pure, best-effort. */
function formatDuration(from?: string | null, to?: string | null): string {
  if (!from || !to) return '—';
  const ms = new Date(to).getTime() - new Date(from).getTime();
  if (ms < 0 || Number.isNaN(ms)) return '—';
  const sec = Math.floor(ms / 1000);
  if (sec < 60) return `${sec}s`;
  if (sec < 3600) return `${Math.floor(sec / 60)}m`;
  if (sec < 86_400) return `${Math.floor(sec / 3600)}h`;
  return `${Math.floor(sec / 86_400)}d`;
}

export default function HistoryPage() {
  const { timeRange } = useGlobalFilters();

  // useAlerts doesn't accept a time range today; filter client-side
  // against the global TimeRangeDropdown in the top bar.
  const { data, isLoading, error } = useAlerts({ state: 'RESOLVED', limit: 200 });

  const filtered = (data ?? []).filter((a) => {
    if (!a.firedAt) return false;
    const t = new Date(a.firedAt).getTime();
    return t >= timeRange.start.getTime() && t <= timeRange.end.getTime();
  });

  const columns: Column<AlertDto>[] = [
    {
      key: 'severity', header: 'Severity', width: '110px',
      render: (_, row) => row.severity ? <SeverityBadge severity={row.severity} /> : null,
    },
    {
      key: 'title', header: 'Title',
      render: (_, row) => (
        <div className={css.titleCell}>
          <Link to={`/alerts/inbox/${row.id}`}>{row.title ?? '(untitled)'}</Link>
          {row.message && <span className={css.titlePreview}>{row.message}</span>}
        </div>
      ),
    },
    {
      key: 'firedAt', header: 'Fired at', width: '140px', sortable: true,
      render: (_, row) =>
        row.firedAt ? (
          <span title={row.firedAt} style={{ fontVariantNumeric: 'tabular-nums' }}>
            {formatRelativeTime(row.firedAt)}
          </span>
        ) : '—',
    },
    {
      key: 'resolvedAt', header: 'Resolved at', width: '140px', sortable: true,
      render: (_, row) =>
        row.resolvedAt ? (
          <span title={row.resolvedAt} style={{ fontVariantNumeric: 'tabular-nums' }}>
            {formatRelativeTime(row.resolvedAt)}
          </span>
        ) : '—',
    },
    {
      key: 'duration', header: 'Duration', width: '90px',
      render: (_, row) => formatDuration(row.firedAt, row.resolvedAt),
    },
  ];

  if (isLoading) return <PageLoader />;
  if (error) return <div className={css.page}>Failed to load history: {String(error)}</div>;

  return (
    <div className={css.page}>
      <header className={css.pageHeader}>
        <div className={css.pageTitleGroup}>
          <h2 className={css.pageTitle}>Alert history</h2>
          <span className={css.pageSubtitle}>
            {filtered.length === 0
              ? 'No resolved alerts in range'
              : `${filtered.length} resolved alert${filtered.length === 1 ? '' : 's'} in range`}
          </span>
        </div>
      </header>

      {filtered.length === 0 ? (
        <EmptyState
          icon={<History size={32} />}
          title="No resolved alerts"
          description="Nothing in the selected date range. Try widening it."
        />
      ) : (
        <div className={`${tableStyles.tableSection} ${css.tableWrap}`}>
          <DataTable<AlertDto & { id: string }>
            columns={columns as Column<AlertDto & { id: string }>[]}
            data={filtered as Array<AlertDto & { id: string }>}
            sortable
            flush
            fillHeight
            pageSize={200}
            rowAccent={(row) => row.severity ? severityToAccent(row.severity) : undefined}
            expandedContent={renderAlertExpanded}
          />
        </div>
      )}
    </div>
  );
}