/**
 * StatusPill — connection + stale-data indicator.
 *
 * Shows:
 *  - WS connection state (open / connecting / closed / fallback)
 *  - "Data may be stale" warning if lastUpdate > STALE_THRESHOLD_S
 *  - Number of messages received
 */
import { Pill } from '@kerbal-rt/ui';
import type { ConnectionState } from '../hooks/useLiveState.js';

export interface StatusPillProps {
  status: ConnectionState;
  lastUpdate: string | null;
  messageCount: number;
  vesselCount: number;
  bodyCount: number;
}

const STALE_THRESHOLD_S = 60;

export function StatusPill({
  status,
  lastUpdate,
  messageCount,
  vesselCount,
  bodyCount,
}: StatusPillProps) {
  const isStale = lastUpdate
    ? (Date.now() - new Date(lastUpdate).getTime()) / 1000 > STALE_THRESHOLD_S
    : true;
  const tone =
    status === 'open' && !isStale
      ? 'success'
      : status === 'connecting' || status === 'fallback'
        ? 'warn'
        : 'danger';
  const label =
    status === 'open'
      ? isStale
        ? 'STALE'
        : 'LIVE'
      : status === 'connecting'
        ? 'CONNECTING'
        : status === 'fallback'
          ? 'POLLING'
          : 'OFFLINE';

  return (
    <div
      style={{
        position: 'absolute',
        top: 12,
        left: '50%',
        transform: 'translateX(-50%)',
        display: 'flex',
        gap: 6,
        padding: '0.4rem 0.6rem',
        background: 'rgba(0,0,0,0.6)',
        borderRadius: 6,
        backdropFilter: 'blur(4px)',
        border: '1px solid rgba(255,255,255,0.1)',
        fontFamily: 'monospace',
        fontSize: 11,
      }}
    >
      <Pill tone={tone}>{label}</Pill>
      <Pill tone="neutral">{bodyCount} bodies</Pill>
      <Pill tone="neutral">{vesselCount} vessels</Pill>
      <Pill tone="neutral">{messageCount} msgs</Pill>
    </div>
  );
}