import * as React from 'react';
import { cn } from '../../shared/utils';

export type BlockColor =
  | 'primary'
  | 'chart-1'
  | 'chart-2'
  | 'chart-3'
  | 'chart-4'
  | 'chart-5'
  | 'success'
  | 'info'
  | 'warning'
  | 'destructive';

const colorTokens: Record<BlockColor, { bg: string; icon: string }> = {
  primary: { bg: 'bg-primary/10', icon: 'text-primary' },
  'chart-1': { bg: 'bg-[var(--chart-1)]/15', icon: 'text-[var(--chart-1)]' },
  'chart-2': { bg: 'bg-[var(--chart-2)]/15', icon: 'text-[var(--chart-2)]' },
  'chart-3': { bg: 'bg-[var(--chart-3)]/15', icon: 'text-[var(--chart-3)]' },
  'chart-4': { bg: 'bg-[var(--chart-4)]/15', icon: 'text-[var(--chart-4)]' },
  'chart-5': { bg: 'bg-[var(--chart-5)]/15', icon: 'text-[var(--chart-5)]' },
  success: { bg: 'bg-success/10', icon: 'text-success' },
  info: { bg: 'bg-info/10', icon: 'text-info' },
  warning: { bg: 'bg-warning/10', icon: 'text-warning' },
  destructive: { bg: 'bg-destructive/10', icon: 'text-destructive' },
};

export interface StatBandStat {
  value: string;
  label: string;
  color?: BlockColor;
}

export interface StatBandProps extends React.HTMLAttributes<HTMLDivElement> {
  stats: StatBandStat[];
  columns?: 2 | 3 | 4;
}

const columnClasses: Record<2 | 3 | 4, string> = {
  2: 'md:grid-cols-2',
  3: 'md:grid-cols-3',
  4: 'md:grid-cols-4',
};

/**
 * Row of large highlighted stats with labels, no card chrome.
 *
 * @description
 * Displays a set of headline numbers (e.g. "$5.5T", "3x", "9M+") side by side,
 * each paired with a small muted label. Useful for social-proof or impact
 * sections on marketing pages.
 *
 * @ai-rules
 * 1. Pass 2-4 `stats`; `columns` defaults to `stats.length` capped at 4.
 * 2. Each stat's `color` maps to a token from `colorTokens` — never hardcode colors.
 * 3. This block has no background/border of its own; wrap it in a `<Card>` or section if chrome is needed.
 */
export function StatBand({ stats, columns, className, ...props }: StatBandProps) {
  const resolvedColumns = (columns ?? Math.min(stats.length, 4)) as 2 | 3 | 4;

  return (
    <div
      className={cn(
        'grid grid-cols-2 gap-x-8 gap-y-10 md:gap-x-0',
        columnClasses[resolvedColumns] ?? columnClasses[4],
        className
      )}
      {...props}
    >
      {stats.map((stat, index) => {
        const { icon: valueColor } = colorTokens[stat.color ?? 'primary'];
        const isNewRow = index % resolvedColumns === 0;

        return (
          <div
            key={index}
            className={cn(
              'flex flex-col items-center text-center sm:items-start sm:text-left',
              isNewRow ? 'md:pl-0' : 'md:border-l md:border-border md:pl-10'
            )}
          >
            <span
              className={cn(
                'text-3xl md:text-5xl font-bold tracking-tight tabular-nums',
                valueColor
              )}
            >
              {stat.value}
            </span>
            <span className="mt-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
              {stat.label}
            </span>
          </div>
        );
      })}
    </div>
  );
}