import type { ReactNode } from 'react';
import { cn } from '@/lib/utils';

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

export interface Stat {
  /** Short. One or two words; it sits beside the number as a mono key. */
  label: string;
  value: ReactNode;
  tone?: StatTone;
  /** The unit, as a sentence. A tooltip, because the strip is one line high. */
  title?: string;
}

const TONE: Record<StatTone, string> = {
  default: 'text-fg',
  positive: 'text-positive',
  warning: 'text-warning',
  // `danger` on surface-2 is 4.70 in dark — the last ground it is allowed on.
  danger: 'text-danger',
  info: 'text-info',
  brand: 'text-accent-fg',
};

/**
 * The run's headline numbers, one line high.
 *
 * One surface-2 chip, keys mono 11 and values mono 13/600. It scrolls itself
 * rather than wrapping: every row this header spends is a row of the board
 * pushed below the fold on a 390px phone, and the strip is one of the five
 * horizontal scrollers §11 permits.
 */
export function StatStrip({ stats, className }: { stats: Stat[]; className?: string }) {
  if (stats.length === 0) return null;
  return (
    <dl
      className={cn(
        'flex max-w-full shrink-0 items-baseline gap-x-4 overflow-x-auto whitespace-nowrap rounded-md border border-border bg-surface-2 px-3 py-2 [scrollbar-width:thin]',
        className,
      )}
    >
      {stats.map((stat) => (
        <div
          key={stat.label}
          className="flex shrink-0 items-baseline gap-1.5"
          {...(stat.title ? { title: stat.title } : {})}
        >
          <dt className="font-mono text-label uppercase tracking-label text-muted">{stat.label}</dt>
          <dd className={cn('font-mono text-stat', TONE[stat.tone ?? 'default'])}>{stat.value}</dd>
        </div>
      ))}
    </dl>
  );
}

// Kept as a re-export so nothing that imported the chip from here breaks; the
// chip itself lives with the other chips in chrome.tsx.
export { EditedChip } from './chrome';
