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

export interface EvidenceTimelineProps extends React.HTMLAttributes<HTMLDivElement> {
  items: EvidenceTimelineItem[];
}

/**
 * Vertical numbered timeline with a connecting line and colored step dots.
 *
 * @description
 * Renders a "how our methodology works" style list: each item gets a
 * colored dot (icon or step number) on a shared vertical line, with a
 * title and description to its right.
 *
 * @ai-rules
 * 1. Provide `icon` for a lucide-react icon in the dot, 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. This block has no outer card chrome; wrap it in a `<Card>` or section if chrome is needed.
 */
export function EvidenceTimeline({ items, className, ...props }: EvidenceTimelineProps) {
  return (
    <div className={cn('relative pl-12', className)} {...props}>
      <div aria-hidden="true" className="absolute left-4 top-4 bottom-4 w-px bg-border" />

      <ol className="relative">
        {items.map((item, index) => {
          const { bg, icon: iconColor } = colorTokens[item.color ?? 'primary'];

          return (
            <li key={index} className="relative flex items-start gap-4 pb-10 last:pb-0">
              <div
                className={cn(
                  'absolute -left-12 top-0 flex size-8 shrink-0 items-center justify-center rounded-[var(--radius)] z-10 border border-current/20',
                  bg
                )}
              >
                <span
                  className={cn(
                    'flex items-center justify-center text-sm font-semibold [&>svg]:size-4',
                    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>
    </div>
  );
}