import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';

import { cn } from '@/utils/classNames';

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

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

const variantClasses: Record<ButtonVariant, string> = {
  primary:
    'border-accent/70 bg-accent text-white shadow-glow hover:bg-accent/90 active:bg-accent/80',
  secondary:
    'border-border/80 bg-elevated text-foreground hover:border-accent/45 hover:bg-elevated/80 active:bg-surface',
  outline:
    'border-border/80 bg-transparent text-foreground hover:border-accent/55 hover:bg-accent/10 active:bg-accent/15',
  ghost:
    'border-transparent bg-transparent text-muted hover:bg-elevated/70 hover:text-foreground active:bg-elevated',
  danger:
    'border-danger/60 bg-danger/12 text-danger hover:bg-danger/18 active:bg-danger/25'
};

const sizeClasses: Record<ButtonSize, string> = {
  sm: 'min-h-9 gap-2 rounded-xl px-3 text-xs',
  md: 'min-h-10 gap-2 rounded-xl px-4 text-sm',
  lg: 'min-h-12 gap-2.5 rounded-2xl px-5 text-base'
};

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
  {
    children,
    className,
    disabled,
    isLoading = false,
    leftIcon,
    rightIcon,
    size = 'md',
    type = 'button',
    variant = 'secondary',
    ...props
  },
  ref,
) {
  const isDisabled = disabled || isLoading;

  return (
    <button
      ref={ref}
      type={type}
      disabled={isDisabled}
      aria-busy={isLoading || undefined}
      className={cn(
        'interactive-ring inline-flex items-center justify-center border font-semibold tracking-[-0.01em] transition duration-200 ease-out disabled:cursor-not-allowed disabled:opacity-55',
        variantClasses[variant],
        sizeClasses[size],
        className,
      )}
      {...props}
    >
      {isLoading ? (
        <span
          className="size-4 animate-spin rounded-full border-2 border-current border-r-transparent"
          aria-hidden="true"
        />
      ) : (
        leftIcon
      )}
      {children}
      {rightIcon}
    </button>
  );
});