import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { grouped, isNum, ordinal } from '@/lib/format';
import type { MetricValue } from '@/lib/types';

type RankFields = Pick<MetricValue, 'rank_world' | 'n_world' | 'rank_region' | 'n_region' | 'rank_year' | 'rank_is_stale'>;

/**
 * "12th of 190 · 3rd in North America". World rank always when known; region rank when `regionName` is given.
 * A `*` marks a rank computed for an older year than the indicator's latest (`rank_is_stale`).
 */
export function RankBadge({ rank, regionName, className, compact }: { rank: Partial<RankFields> | null | undefined; regionName?: string | null; className?: string; compact?: boolean }) {
  if (!rank || !isNum(rank.rank_world) || !isNum(rank.n_world)) return null;
  const world = t('metric.rankWorld', { rank: ordinal(rank.rank_world), n: grouped(rank.n_world) });
  const region = regionName && isNum(rank.rank_region) ? t('metric.rankRegion', { rank: ordinal(rank.rank_region), region: regionName }) : null;
  return (
    <span className={cn('tnum text-xs text-ink-2', className)} title={rank.rank_is_stale && rank.rank_year ? t('metric.rankYearNote', { year: rank.rank_year }) : undefined}>
      <span className="font-medium text-ink">{world}</span>
      {region && !compact ? <span className="text-ink-3"> · {region}</span> : null}
      {rank.rank_is_stale ? <sup className="text-ink-3">*</sup> : null}
    </span>
  );
}