import React from 'react';
import { motion, type HTMLMotionProps } from 'motion/react';

export interface ButtonProps extends Omit<HTMLMotionProps<"button">, "size"> {
  variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline';
  size?: 'sm' | 'md' | 'lg' | 'icon';
  fullWidth?: boolean;
  loading?: boolean;
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps & { asChild?: boolean }>(({ 
  children, 
  variant = 'primary', 
  size = 'md', 
  className = '',
  fullWidth = false,
  asChild,
  loading = false,
  ...props 
}, ref) => {
  
  const baseClasses = "relative flex items-center justify-center font-bold tracking-wide transition-all duration-300 overflow-hidden outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-background disabled:opacity-50 disabled:cursor-not-allowed";
  
  const sizeClasses = {
    sm: "px-4 py-2 text-xs rounded-lg",
    md: "px-6 py-2.5 text-sm rounded-xl",
    lg: "px-8 py-3.5 text-base rounded-2xl",
    icon: "p-2 rounded-lg",
  };

  const variantClasses = {
    primary: "bg-primary text-white shadow-[0_0_20px_color-mix(in_oklab,var(--colors-primary)_40%,transparent)] hover:shadow-[0_0_30px_color-mix(in_oklab,var(--colors-primary)_60%,transparent)] border border-primary/50",
    secondary: "bg-surface-hover text-text border border-border shadow-lg hover:border-primary/50 hover:bg-surface",
    danger: "bg-error text-white shadow-[0_0_20px_color-mix(in_oklab,var(--colors-error)_40%,transparent)] border border-error/50",
    ghost: "bg-transparent text-text hover:bg-surface-hover",
    outline: "bg-transparent text-text border border-border hover:border-primary hover:text-primary",
  };

  return (
    <motion.button 
      ref={ref}
      whileHover={loading ? {} : { scale: 1.02, y: -1 }}
      whileTap={loading ? {} : { scale: 0.98 }}
      className={`${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${fullWidth ? 'w-full' : 'w-fit'} ${className}`}
      disabled={loading || props.disabled}
      {...props}
    >
      <div className="absolute inset-0 bg-white/20 translate-y-full hover:translate-y-0 transition-transform duration-300 pointer-events-none" />
      <span className="relative z-10 flex items-center gap-2">
        {loading && (
          <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-current" 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 as any}
      </span>
    </motion.button>
  );
});

Button.displayName = 'Button';