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

import { useMemo, useState } from 'react';
import { Link } from 'react-router';
import { Inbox } from 'lucide-react';
import {
  Button, DataTable, EmptyState, useToast,
} from '@cameleer/design-system';
import type { Column } from '@cameleer/design-system';
import { PageLoader } from '../../components/PageLoader';
import { SeverityBadge } from '../../components/SeverityBadge';
import { AlertStateChip } from '../../components/AlertStateChip';
import {
  useAlerts, useAckAlert, useBulkReadAlerts, useMarkAlertRead,
  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';

export default function InboxPage() {
  const { data, isLoading, error } = useAlerts({ state: ['FIRING', 'ACKNOWLEDGED'], limit: 200 });
  const bulkRead = useBulkReadAlerts();
  const markRead = useMarkAlertRead();
  const ack = useAckAlert();
  const { toast } = useToast();

  const [selected, setSelected] = useState<Set<string>>(new Set());
  const rows = data ?? [];

  const unreadIds = useMemo(
    () => rows.filter((a) => a.state === 'FIRING').map((a) => a.id),
    [rows],
  );

  const toggleSelected = (id: string) => {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  };

  const onAck = async (id: string, title?: string) => {
    try {
      await ack.mutateAsync(id);
      toast({ title: 'Acknowledged', description: title, variant: 'success' });
    } catch (e) {
      toast({ title: 'Ack failed', description: String(e), variant: 'error' });
    }
  };

  const onBulkRead = async (ids: string[]) => {
    if (ids.length === 0) return;
    try {
      await bulkRead.mutateAsync(ids);
      setSelected(new Set());
      toast({ title: `Marked ${ids.length} as read`, variant: 'success' });
    } catch (e) {
      toast({ title: 'Bulk read failed', description: String(e), variant: 'error' });
    }
  };

  const columns: Column<AlertDto>[] = [
    {
      key: 'select', header: '', width: '40px',
      render: (_, row) => (
        <input
          type="checkbox"
          checked={selected.has(row.id)}
          onChange={() => toggleSelected(row.id)}
          aria-label={`Select ${row.title ?? row.id}`}
          onClick={(e) => e.stopPropagation()}
        />
      ),
    },
    {
      key: 'severity', header: 'Severity', width: '110px',
      render: (_, row) =>
        row.severity ? <SeverityBadge severity={row.severity} /> : null,
    },
    {
      key: 'state', header: 'State', width: '140px',
      render: (_, row) =>
        row.state ? <AlertStateChip state={row.state} silenced={row.silenced} /> : null,
    },
    {
      key: 'title', header: 'Title',
      render: (_, row) => {
        const unread = row.state === 'FIRING';
        return (
          <div className={`${css.titleCell} ${unread ? css.titleCellUnread : ''}`}>
            <Link to={`/alerts/inbox/${row.id}`} onClick={() => markRead.mutate(row.id)}>
              {row.title ?? '(untitled)'}
            </Link>
            {row.message && <span className={css.titlePreview}>{row.message}</span>}
          </div>
        );
      },
    },
    {
      key: 'age', header: 'Age', width: '100px', sortable: true,
      render: (_, row) =>
        row.firedAt ? (
          <span title={row.firedAt} style={{ fontVariantNumeric: 'tabular-nums' }}>
            {formatRelativeTime(row.firedAt)}
          </span>
        ) : '—',
    },
    {
      key: 'ack', header: '', width: '70px',
      render: (_, row) =>
        row.state === 'FIRING' ? (
          <Button size="sm" variant="secondary" onClick={() => onAck(row.id, row.title ?? undefined)}>
            Ack
          </Button>
        ) : null,
    },
  ];

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

  const selectedIds = Array.from(selected);

  const subtitle =
    selectedIds.length > 0
      ? `${selectedIds.length} selected`
      : `${unreadIds.length} firing · ${rows.length} total`;

  return (
    <div className={css.page}>
      <header className={css.pageHeader}>
        <div className={css.pageTitleGroup}>
          <h2 className={css.pageTitle}>Inbox</h2>
          <span className={css.pageSubtitle}>{subtitle}</span>
        </div>
        <div className={css.pageActions}>
          <Button
            variant="secondary"
            size="sm"
            onClick={() => onBulkRead(selectedIds)}
            disabled={selectedIds.length === 0 || bulkRead.isPending}
          >
            Mark selected read
          </Button>
          <Button
            variant="secondary"
            size="sm"
            onClick={() => onBulkRead(unreadIds)}
            disabled={unreadIds.length === 0 || bulkRead.isPending}
          >
            Mark all read
          </Button>
        </div>
      </header>

      {rows.length === 0 ? (
        <EmptyState
          icon={<Inbox size={32} />}
          title="All clear"
          description="No open alerts for you in this environment."
        />
      ) : (
        <div className={`${tableStyles.tableSection} ${css.tableWrap}`}>
          <DataTable<AlertDto & { id: string }>
            columns={columns as Column<AlertDto & { id: string }>[]}
            data={rows as Array<AlertDto & { id: string }>}
            sortable
            flush
            fillHeight
            pageSize={200}
            rowAccent={(row) => row.severity ? severityToAccent(row.severity) : undefined}
            expandedContent={renderAlertExpanded}
          />
        </div>
      )}
    </div>
  );
}