import { ArrowDownRight, ArrowUpRight, Minus } from 'lucide-react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { formatChange, formatPeriod } from '@/lib/format';
import type { ChangeValue, FormatSpec } from '@/lib/types';

/**
 * Signed change with ↑/↓ glyph and direction colour. Colour = direction × whether up is good
 * (`higher_is_better`): good → up colour, bad → down colour, unknown → neutral ink. Never colour alone.
 * Uses the API's `formatted` string when present, else lib/format.ts.
 */
export function ChangeChip({ change, spec, prevPeriod, className, showVs = true }: { change: ChangeValue | null | undefined; spec: FormatSpec; prevPeriod?: string | null; className?: string; showVs?: boolean }) {
  if (!change) return null;
  const c = formatChange(change.abs, change.pct, spec);
  if (!c) return null;
  const text = change.formatted ?? c.text;
  const hib = spec.higher_is_better;
  const tone = c.direction === 'flat' || hib == null ? 'neutral' : (c.direction === 'up') === hib ? 'good' : 'bad';
  const Icon = c.direction === 'up' ? ArrowUpRight : c.direction === 'down' ? ArrowDownRight : Minus;
  const label = c.direction === 'up' ? t('common.up') : c.direction === 'down' ? t('common.down') : t('common.flat');
  return (
    <span className={cn('tnum inline-flex items-center gap-0.5 text-xs', tone === 'good' && 'text-up', tone === 'bad' && 'text-down', tone === 'neutral' && 'text-ink-2', className)}>
      <Icon size={13} aria-hidden strokeWidth={2.25} />
      <span className="sr-only">{label} </span>
      <span className="font-medium">{text}</span>
      {showVs && prevPeriod ? <span className="ml-1 font-normal text-ink-3">{t('common.vs', { period: formatPeriod(prevPeriod, spec.frequency ?? 'A') })}</span> : null}
    </span>
  );
}