ITWorx-Pulse-Public/apps/web/src/SourceStatusDetails.tsx

import { copy } from './copy';
import { formatDateTime, hasReceivedTimestamp } from './locale';
import { presentReason, presentStatus } from './presentation';

export type SourceStatus = {
  id?: string;
  state?: string;
  freshness?: string;
  observedAt?: string;
  reason?: string;
};

function dataLabel(source: SourceStatus): string {
  if (!hasReceivedTimestamp(source.observedAt)) return copy.sourceStatus.neverReceived;
  if (source.freshness === 'fresh' && source.state !== 'unknown' && source.state !== 'unavailable') return copy.sourceStatus.fresh;
  if (source.freshness === 'stale') return copy.sourceStatus.stale;
  return copy.sourceStatus.unavailable;
}

export function SourceStatusDetails({ source, fallbackReason, className = '' }: { source: SourceStatus; fallbackReason?: string; className?: string }) {
  const reasonCode = source.reason?.trim();
  const observed = formatDateTime(source.observedAt);
  return <div className={`source-status-details ${className}`.trim()}>
    <p className="source-status-line"><span><strong>{copy.sourceStatus.status}:</strong> {presentStatus(source.state)}</span><span><strong>{copy.sourceStatus.data}:</strong> {dataLabel(source)}</span></p>
    <p className="source-status-reason">{reasonCode ? presentReason(reasonCode) : fallbackReason || copy.presentation.reason.noDetail}</p>
    <p className="source-status-observed"><strong>{copy.sourceStatus.observed}:</strong> {hasReceivedTimestamp(source.observedAt) ? <time dateTime={source.observedAt}>{observed}</time> : observed}</p>
    {reasonCode && <details className="source-status-technical"><summary>{copy.sourceStatus.technical}</summary><dl><dt>{copy.sourceStatus.sourceId}</dt><dd>{source.id || '—'}</dd><dt>{copy.sourceStatus.reasonCode}</dt><dd><code>{reasonCode}</code></dd></dl></details>}
  </div>;
}