import { ButtonHTMLAttributes, forwardRef } from 'react';
import { cn } from '@/lib/utils';

interface ToggleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'accent' | 'secondary' | 'warning' | 'cyan';
  size?: 'sm' | 'md';
  isActive?: boolean;
  icon?: React.ReactNode;
  count?: number;
}

const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
  ({ className, variant = 'primary', size = 'md', isActive = false, icon, count, children, ...props }, ref) => {
    const variants = {
      primary: isActive 
        ? 'bg-[color-mix(in_srgb,var(--primary)_15%,transparent)] text-[var(--foreground)] border border-[var(--primary)]' 
        : 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--primary)]/50',
      accent: isActive 
        ? 'bg-[var(--accent)]/20 text-[var(--accent)] border border-[var(--accent)]/30' 
        : 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--accent)]/50',
      secondary: isActive 
        ? 'bg-[color-mix(in_srgb,var(--primary)_15%,transparent)] text-[var(--foreground)] border border-[var(--primary)]' 
        : 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--primary)]/50',
      warning: isActive 
        ? 'bg-[color-mix(in_srgb,var(--primary)_15%,transparent)] text-[var(--foreground)] border border-[var(--primary)]' 
        : 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--primary)]/50',
      cyan: isActive 
        ? 'bg-[var(--cyan)]/20 text-[var(--cyan)] border border-[var(--cyan)]/30' 
        : 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--cyan)]/50'
    };

    // Déterminer si c'est un bouton avec seulement des icônes
    const isIconOnly = icon && !children && count === undefined;
    
    const sizes = {
      sm: isIconOnly ? 'px-2 py-[5px] text-sm h-[34px]' : 'px-3 py-[5px] text-sm h-[34px]',
      md: isIconOnly ? 'px-2 py-[5px] text-sm h-[34px]' : 'px-3 py-[5px] text-sm h-[34px]'
    };

    return (
      <button
        ref={ref}
        className={cn(
          'flex items-center gap-2 rounded-md font-mono transition-all',
          variants[variant],
          sizes[size],
          className
        )}
        {...props}
      >
        {icon && (
          <div className="flex-shrink-0">
            {icon}
          </div>
        )}
        {children && (
          <span className="flex-1 text-left">
            {children}
            {count !== undefined && count > 0 && (
              <span className="ml-1 text-xs opacity-75">
                ({count})
              </span>
            )}
          </span>
        )}
        {count !== undefined && count > 0 && !children && (
          <span className="text-xs opacity-75">
            ({count})
          </span>
        )}
      </button>
    );
  }
);

ToggleButton.displayName = 'ToggleButton';

export { ToggleButton };