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 };
