import type { ReactNode } from 'react';
import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';

export type StatTone = 'default' | 'positive' | 'warning' | 'danger' | 'info' | 'brand';

export interface Stat {
  /** Short. Two or three words; it sits beside the number. */
  label: string;
  value: ReactNode;
  tone?: StatTone;
  /** One clarifying line. A tooltip here, because the strip is one line high. */
  title?: string;
}

const TONE: Record<StatTone, string> = {
  default: 'text-fg',
  positive: 'text-positive',
  warning: 'text-warning',
  danger: 'text-danger',
  info: 'text-info',
  brand: 'text-accent-fg',
};

/**
 * The run's headline numbers, one line high.
 *
 * This used to be a row of cards, which is the right thing in the middle of a
 * page and the wrong thing in a header: four stat cards push the interactive
 * board below the fold on a 390px phone, and the board arriving above the fold
 * is what the whole page is now organised around. So the cards are gone and
 * this is the only stat strip — a second, compact variant living beside the
 * card version is how the two drift into disagreeing about what a stat looks
 * like.
 *
 * It scrolls itself rather than wrapping: every row this header spends is a row
 * of the board pushed down.
 */
export function StatStrip({ stats, className }: { stats: Stat[]; className?: string }) {
  if (stats.length === 0) return null;
  return (
    <dl
      className={cn(
        'flex shrink-0 items-baseline gap-x-4 rounded-lg border border-border bg-surface-2 px-3 py-2',
        className,
      )}
    >
      {stats.map((stat) => (
        <div
          key={stat.label}
          className="flex shrink-0 items-baseline gap-1.5"
          {...(stat.title ? { title: stat.title } : {})}
        >
          <dt className="text-xs font-medium uppercase tracking-wide text-muted">{stat.label}</dt>
          <dd className={cn('nums text-sm font-semibold', TONE[stat.tone ?? 'default'])}>
            {stat.value}
          </dd>
        </div>
      ))}
    </dl>
  );
}

/**
 * Marks a number the visitor caused rather than one we recorded. It appears on
 * every derived value in the reward editor; without it, an edited ranking
 * screenshots identically to a measured one.
 */
export function EditedChip({ className }: { className?: string }) {
  return (
    <Badge className={cn('px-1.5 py-0 text-[10px] uppercase tracking-wide', className)}>
      edited
    </Badge>
  );
}
