import React, { ButtonHTMLAttributes } from 'react';
import { Loader2 } from 'lucide-react';

export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'success' | 'ghost';
export type ButtonSize = 'sm' | 'md' | 'lg';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
  size?: ButtonSize;
  isLoading?: boolean;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
  fullWidth?: boolean;
}

const variantClasses: Record<ButtonVariant, string> = {
  primary: `
    bg-kaspersky-primary text-white
    hover:bg-kaspersky-primary-dark hover:shadow-kaspersky-lg
    active:bg-kaspersky-primary-dark active:scale-[0.98]
    disabled:bg-kaspersky-text-lighter disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:shadow-none
    focus:outline-none focus:ring-4 focus:ring-kaspersky-primary/30
  `,
  secondary: `
    bg-kaspersky-secondary text-white
    hover:bg-opacity-90 hover:shadow-kaspersky
    active:bg-opacity-80 active:scale-[0.98]
    disabled:bg-kaspersky-text-lighter disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:shadow-none
    focus:outline-none focus:ring-4 focus:ring-kaspersky-secondary/30
  `,
  danger: `
    bg-kaspersky-danger text-white
    hover:bg-red-700 hover:shadow-kaspersky-lg
    active:bg-red-800 active:scale-[0.98]
    disabled:bg-kaspersky-text-lighter disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:shadow-none
    focus:outline-none focus:ring-4 focus:ring-kaspersky-danger/30
  `,
  success: `
    bg-kaspersky-success text-white
    hover:bg-green-600 hover:shadow-kaspersky-lg
    active:bg-green-700 active:scale-[0.98]
    disabled:bg-kaspersky-text-lighter disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:shadow-none
    focus:outline-none focus:ring-4 focus:ring-kaspersky-success/30
  `,
  ghost: `
    bg-transparent text-kaspersky-text-dark border-2 border-kaspersky-border
    hover:bg-kaspersky-bg hover:border-kaspersky-border-dark
    active:bg-kaspersky-bg-card active:scale-[0.98]
    disabled:text-kaspersky-text-lighter disabled:border-kaspersky-border-light disabled:cursor-not-allowed disabled:opacity-60
    focus:outline-none focus:ring-4 focus:ring-kaspersky-primary/20
  `,
};

const sizeClasses: Record<ButtonSize, string> = {
  sm: 'px-3 py-1.5 text-sm',
  md: 'px-4 py-2 text-base',
  lg: 'px-6 py-3 text-lg',
};

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  isLoading = false,
  leftIcon,
  rightIcon,
  fullWidth = false,
  className = '',
  children,
  disabled,
  ...props
}) => {
  return (
    <button
      className={`
        ${variantClasses[variant]}
        ${sizeClasses[size]}
        ${fullWidth ? 'w-full' : ''}
        font-semibold rounded-lg
        transition-all duration-300 transform
        flex items-center justify-center gap-2
        disabled:transform-none
        ${className}
      `.trim().replace(/\s+/g, ' ')}
      disabled={disabled || isLoading}
      {...props}
    >
      {isLoading && <Loader2 size={16} className="animate-spin" />}
      {!isLoading && leftIcon && <span className="flex-shrink-0">{leftIcon}</span>}
      <span>{children}</span>
      {!isLoading && rightIcon && <span className="flex-shrink-0">{rightIcon}</span>}
    </button>
  );
};

export default Button;

