import { cn } from '@/lib/cn';
import { MISSION_LABELS, OBJECT_TYPE_LABELS, ORBIT_CLASS_COLORS, STATUS_COLORS } from '@/lib/site';

export function StatusBadge({ status, className, size = 'sm' }: { status: string | null | undefined; className?: string; size?: 'sm' | 'md' }) {
  const s = status ?? 'UNKNOWN';
  const color = STATUS_COLORS[s] ?? 'var(--inactive)';
  return (
    <span className={cn('inline-flex items-center gap-1.5 rounded-full border font-medium', size === 'sm' ? 'px-2 py-0.5 text-[11px]' : 'px-2.5 py-1 text-xs', className)} style={{ color, borderColor: `color-mix(in oklab, ${color} 35%, transparent)`, background: `color-mix(in oklab, ${color} 10%, transparent)` }}>
      <span className={cn('dot', s === 'ACTIVE' && 'pulse')} aria-hidden />
      {s.charAt(0) + s.slice(1).toLowerCase()}
    </span>
  );
}

export function OrbitBadge({ orbitClass, className }: { orbitClass: string | null | undefined; className?: string }) {
  const c = orbitClass ?? 'UNKNOWN';
  const color = ORBIT_CLASS_COLORS[c] ?? 'var(--other)';
  return (
    <span className={cn('mono inline-flex items-center rounded px-1.5 py-0.5 text-[11px] font-medium', className)} style={{ color, background: `color-mix(in oklab, ${color} 12%, transparent)` }}>
      {c === 'UNKNOWN' ? '—' : c}
    </span>
  );
}

export function TypeBadge({ type, className }: { type: string | null | undefined; className?: string }) {
  return <span className={cn('inline-flex items-center rounded border border-rule px-1.5 py-0.5 text-[11px] text-ink-2', className)}>{OBJECT_TYPE_LABELS[type ?? ''] ?? type ?? '—'}</span>;
}

export function MissionLabel({ mission }: { mission: string | null | undefined }) {
  return <>{MISSION_LABELS[mission ?? 'unknown'] ?? mission ?? 'Unknown'}</>;
}

export function FreshnessBadge({ status, label }: { status: 'fresh' | 'aging' | 'stale' | 'unavailable' | 'not_enabled' | string; label?: string }) {
  const color = status === 'fresh' ? 'var(--active)' : status === 'aging' ? 'var(--warn)' : status === 'stale' ? 'var(--danger)' : 'var(--inactive)';
  return (
    <span className="inline-flex items-center gap-1.5 text-xs" style={{ color }}>
      <span className="dot" aria-hidden /> {label ?? status.replace('_', ' ')}
    </span>
  );
}