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

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
  size?: 'none' | 'sm' | 'md' | 'lg' | 'full';
  styleVariant?: 'solid' | 'faded' | 'bordered' | 'light' | 'flat' | 'ghost' | 'shadow';
  isLoading?: boolean;
}

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = 'default', size = 'md', styleVariant = 'solid', isLoading = false, disabled, children, ...props }, ref) => {
    // สีพื้นฐานตามแต่ละประเภท
    const variantClasses = {
      default: {
        solid: 'bg-gray-600 text-white hover:bg-gray-700',
        faded: 'bg-gray-600/20 text-gray-600 hover:bg-gray-600/30',
        bordered: 'border border-gray-600 text-gray-600 hover:bg-gray-600/10',
        light: 'bg-gray-100 text-gray-600 hover:bg-gray-200',
        flat: 'bg-gray-800 text-gray-200 hover:bg-gray-900',
        ghost: 'text-gray-600 hover:bg-gray-600/10',
        shadow: 'bg-gray-600 text-white shadow-lg shadow-gray-600/30 hover:bg-gray-700',
      },
      primary: {
        solid: 'bg-blue-600 text-white hover:bg-blue-700',
        faded: 'bg-blue-600/20 text-blue-600 hover:bg-blue-600/30',
        bordered: 'border border-blue-600 text-blue-600 hover:bg-blue-600/10',
        light: 'bg-blue-100 text-blue-600 hover:bg-blue-200',
        flat: 'bg-blue-800 text-blue-200 hover:bg-blue-900',
        ghost: 'text-blue-600 hover:bg-blue-600/10',
        shadow: 'bg-blue-600 text-white shadow-lg shadow-blue-600/30 hover:bg-blue-700',
      },
      secondary: {
        solid: 'bg-purple-600 text-white hover:bg-purple-700',
        faded: 'bg-purple-600/20 text-purple-600 hover:bg-purple-600/30',
        bordered: 'border border-purple-600 text-purple-600 hover:bg-purple-600/10',
        light: 'bg-purple-100 text-purple-600 hover:bg-purple-200',
        flat: 'bg-purple-800 text-purple-200 hover:bg-purple-900',
        ghost: 'text-purple-600 hover:bg-purple-600/10',
        shadow: 'bg-purple-600 text-white shadow-lg shadow-purple-600/30 hover:bg-purple-700',
      },
      success: {
        solid: 'bg-green-600 text-white hover:bg-green-700',
        faded: 'bg-green-600/20 text-green-600 hover:bg-green-600/30',
        bordered: 'border border-green-600 text-green-600 hover:bg-green-600/10',
        light: 'bg-green-100 text-green-600 hover:bg-green-200',
        flat: 'bg-green-800 text-green-200 hover:bg-green-900',
        ghost: 'text-green-600 hover:bg-green-600/10',
        shadow: 'bg-green-600 text-white shadow-lg shadow-green-600/30 hover:bg-green-700',
      },
      warning: {
        solid: 'bg-amber-600 text-white hover:bg-amber-700',
        faded: 'bg-amber-600/20 text-amber-600 hover:bg-amber-600/30',
        bordered: 'border border-amber-600 text-amber-600 hover:bg-amber-600/10',
        light: 'bg-amber-100 text-amber-600 hover:bg-amber-200',
        flat: 'bg-amber-800 text-amber-200 hover:bg-amber-900',
        ghost: 'text-amber-600 hover:bg-amber-600/10',
        shadow: 'bg-amber-600 text-white shadow-lg shadow-amber-600/30 hover:bg-amber-700',
      },
      danger: {
        solid: 'bg-rose-600 text-white hover:bg-rose-700',
        faded: 'bg-rose-600/20 text-rose-600 hover:bg-rose-600/30',
        bordered: 'border border-rose-600 text-rose-600 hover:bg-rose-600/10',
        light: 'bg-rose-100 text-rose-600 hover:bg-rose-200',
        flat: 'bg-rose-800 text-rose-200 hover:bg-rose-900',
        ghost: 'text-rose-600 hover:bg-rose-600/10',
        shadow: 'bg-rose-600 text-white shadow-lg shadow-rose-600/30 hover:bg-rose-700',
      },
    };

    // ขนาดต่างๆ
    const sizeClasses = {
      none: 'p-0',
      sm: 'text-xs px-3 py-1.5 rounded-sm',
      md: 'text-sm px-4 py-2 rounded',
      lg: 'text-base px-5 py-2.5 rounded-md',
      full: 'text-base w-full py-2.5 rounded-md',
    };

    return (
      <button
        ref={ref}
        disabled={disabled || isLoading}
        className={cn(
          'font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none inline-flex items-center justify-center',
          sizeClasses[size],
          variantClasses[variant][styleVariant],
          {
            'cursor-not-allowed': isLoading,
          },
          className
        )}
        {...props}
      >
        {isLoading && (
          <svg className="animate-spin -ml-1 mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
            <path
              className="opacity-75"
              fill="currentColor"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            ></path>
          </svg>
        )}
        {children}
      </button>
    );
  }
);

Button.displayName = 'Button';

export { Button };