import { Clock } from 'lucide-react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { formatDate, freshnessLevel, relativeFreshness } from '@/lib/format';
import type { ObservationStatus } from '@/lib/types';

/** Small retrieval-freshness chip: "Updated 3 d ago" with a colour + icon (never colour alone). */
export function FreshnessBadge({ retrievedAt, now, className }: { retrievedAt: string | null | undefined; now?: number; className?: string }) {
  const level = freshnessLevel(retrievedAt, now);
  if (!level) return null;
  return (
    <span
      className={cn(
        'inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-2xs font-medium',
        level === 'fresh' && 'bg-accent-soft text-accent',
        level === 'recent' && 'bg-surface-2 text-ink-2',
        level === 'stale' && 'bg-surface-2 text-warn',
        className,
      )}
      title={formatDate(retrievedAt)}
    >
      <Clock size={11} aria-hidden />
      {t('common.freshness.updated', { when: relativeFreshness(retrievedAt, now) })}
    </span>
  );
}

export function StatusBadge({ status }: { status: ObservationStatus }) {
  const label = t(`common.status.${status}` as const);
  return (
    <span
      className={cn(
        'inline-flex items-center rounded-sm border px-1.5 py-0.5 text-2xs font-medium',
        status === 'verified' && 'border-rule text-ink-2',
        status === 'imported' && 'border-rule text-ink-3',
        (status === 'warning' || status === 'stale') && 'border-warn/40 text-warn',
        status === 'quarantined' && 'border-down/40 text-down',
      )}
    >
      {label}
    </span>
  );
}