import { HTMLMotionProps, motion } from 'framer-motion';
import { forwardRef, ReactNode } from 'react';
import { cn } from '@web/src/utils/classname';
import { LoadingOutlined } from '@ant-design/icons';

export interface ButtonProps extends Omit<HTMLMotionProps<"button">, keyof React.ButtonHTMLAttributes<HTMLButtonElement>> {
    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
    size?: 'sm' | 'md' | 'lg';
    isLoading?: boolean;
    leftIcon?: React.ReactNode;
    rightIcon?: React.ReactNode;
    fullWidth?: boolean;
    className?: string;
    disabled?: boolean;
    children?: ReactNode;
    // 添加常用的按钮事件处理器
    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
    onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
    onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement>) => void;
    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
}
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
    (
        {
            className,
            variant = 'primary',
            size = 'md',
            isLoading = false,
            disabled,
            leftIcon,
            rightIcon,
            children,
            fullWidth,
            ...props
        },
        ref
    ) => {
        const variants = {
            primary: 'bg-blue-600 text-white hover:bg-blue-700 shadow-sm disabled:bg-gray-400',
            secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 disabled:bg-gray-200 disabled:text-gray-500',
            outline: 'border-2 border-gray-300 hover:bg-gray-50 disabled:border-gray-200 disabled:text-gray-400',
            ghost: 'hover:bg-gray-100 disabled:bg-transparent disabled:text-gray-400',
            danger: 'bg-red-600 text-white hover:bg-red-700 disabled:bg-gray-400',
        };

        const ringColors = {
            primary: 'focus:ring-blue-500',
            secondary: 'focus:ring-gray-500',
            outline: 'focus:ring-gray-400',
            ghost: 'focus:ring-gray-400',
            danger: 'focus:ring-red-500',
        };


        const sizes = {
            sm: 'px-3 py-1.5 text-sm',
            md: 'px-4 py-2 text-base',
            lg: 'px-6 py-3 text-lg',
        };

        return (
            <motion.button
                ref={ref}
                disabled={disabled || isLoading}
                className={cn(
                    // Base styles
                    'inline-flex items-center justify-center rounded-md font-medium',
                    'transition-all duration-200 ease-in-out',
                    'focus:outline-none focus:ring-2 focus:ring-offset-2',
                    'disabled:opacity-75 disabled:cursor-not-allowed disabled:hover:scale-100',
                    // Variant styles
                    variants[variant],
                    // Ring color based on variant
                    ringColors[variant],
                    // Size styles
                    sizes[size],
                    // Full width
                    fullWidth && 'w-full',
                    className
                )}
                whileTap={{ scale: 0.98 }}
                whileHover={{ scale: 1.01 }}
                {...props}
            >
                {isLoading && (
                    <LoadingOutlined className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
                )}
                {!isLoading && leftIcon && (
                    <span className="mr-2 inline-flex">{leftIcon}</span>
                )}
                {children}
                {!isLoading && rightIcon && (
                    <span className="ml-2 inline-flex">{rightIcon}</span>
                )}
            </motion.button>
        );
    }
);

Button.displayName = 'Button';