import { cn } from '@/shared/lib/utils';

type ActionCost = number | 'reaction' | 'free' | 'varies' | null;

interface ActionIconProps {
  actions: ActionCost;
  className?: string;
  size?: 'sm' | 'md' | 'lg';
}

const sizeClasses = {
  sm: 'h-4',
  md: 'h-5',
  lg: 'h-6',
};

export function ActionIcon({ actions, className, size = 'md' }: ActionIconProps) {
  const sizeClass = sizeClasses[size];
  const iconClass = cn('inline-block brightness-0 invert', sizeClass, className);

  if (actions === null || actions === 'varies') {
    return (
      <span className="text-xs px-2 py-0.5 rounded bg-text-muted/20 text-text-muted">
        {actions === 'varies' ? 'Variabel' : '—'}
      </span>
    );
  }

  if (actions === 'reaction') {
    return <img src="/icons/action_reaction_black.png" alt="Reaktion" className={iconClass} />;
  }

  if (actions === 'free') {
    return <img src="/icons/action_free_black.png" alt="Freie Aktion" className={iconClass} />;
  }

  if (actions === 1) {
    return <img src="/icons/action_single_black.png" alt="1 Aktion" className={iconClass} />;
  }

  if (actions === 2) {
    return <img src="/icons/action_double_black.png" alt="2 Aktionen" className={iconClass} />;
  }

  if (actions === 3) {
    return <img src="/icons/action_triple_black.png" alt="3 Aktionen" className={iconClass} />;
  }

  // Fallback for any other number
  return (
    <span className="text-xs px-2 py-0.5 rounded bg-primary-500/20 text-primary-400">
      {actions} Akt.
    </span>
  );
}

export function ActionTypeBadge({ type }: { type: string }) {
  const typeConfig: Record<string, { label: string; className: string }> = {
    action: { label: 'Aktion', className: 'bg-primary-500/20 text-primary-400' },
    reaction: { label: 'Reaktion', className: 'bg-yellow-500/20 text-yellow-400' },
    free: { label: 'Frei', className: 'bg-green-500/20 text-green-400' },
    exploration: { label: 'Erkundung', className: 'bg-blue-500/20 text-blue-400' },
    downtime: { label: 'Auszeit', className: 'bg-purple-500/20 text-purple-400' },
    varies: { label: 'Variabel', className: 'bg-text-muted/20 text-text-muted' },
  };

  const config = typeConfig[type] || { label: type, className: 'bg-text-muted/20 text-text-muted' };

  return (
    <span className={cn('text-xs px-2 py-0.5 rounded', config.className)}>
      {config.label}
    </span>
  );
}
