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 HowItWorksStepItem {
  number?: string | number;
  icon?: React.ReactNode;
  title: string;
  description: string;
  color?: BlockColor;
}

export interface HowItWorksStepsProps {
  items: HowItWorksStepItem[];
  className?: string;
}

/**
 * Horizontal numbered process row — the horizontal counterpart to `EvidenceTimeline`.
 *
 * @description
 * Renders a "how it works" style row of steps: each item gets a colored
 * badge (icon or step number) above a title and description, laid out
 * side by side in a responsive grid instead of `EvidenceTimeline`'s
 * vertical connecting line.
 *
 * @ai-rules
 * 1. Provide `icon` for a lucide-react icon in the badge, or `number` for a step label; if neither is set the 1-based index is used.
 * 2. Each item's `color` maps to `colorTokens` — never hardcode colors.
 * 3. There is no connecting line between steps (unlike `EvidenceTimeline`) — this avoids awkward line fragments when steps wrap to a new row on narrow screens.
 * 4. This block has no outer card chrome; wrap it in a `<Card>` or section if chrome is needed.
 */
export function HowItWorksSteps({ items, className }: HowItWorksStepsProps) {
  return (
    <ol className={cn('grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4', className)}>
      {items.map((item, index) => {
        const { bg, icon: iconColor } = colorTokens[item.color ?? 'primary'];

        return (
          <li key={index} className="flex flex-col gap-4">
            <div
              className={cn(
                'flex size-10 shrink-0 items-center justify-center rounded-[var(--radius)] border border-current/20 md:size-12',
                bg
              )}
            >
              <span
                className={cn(
                  'flex items-center justify-center text-sm font-semibold [&>svg]:size-5',
                  iconColor
                )}
              >
                {item.icon ?? (item.number ?? index + 1)}
              </span>
            </div>

            <div className="min-w-0">
              <p className="font-semibold">{item.title}</p>
              <p className="mt-2 text-sm opacity-70">{item.description}</p>
            </div>
          </li>
        );
      })}
    </ol>
  );
}