import { forwardRef, type ReactNode } from 'react';
import { motion, type HTMLMotionProps } from 'framer-motion';
import { Loader2 } from 'lucide-react';
import { cn } from '@/lib/cn';

type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'icon';
type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

interface ButtonProps extends Omit<HTMLMotionProps<'button'>, 'children'> {
  variant?: ButtonVariant;
  size?: ButtonSize;
  loading?: boolean;
  glow?: boolean;
  children: ReactNode;
}

const variantStyles: Record<ButtonVariant, string> = {
  primary: [
    'bg-gradient-to-r from-[#ff6b2c] to-[#e85d1c] text-white font-bold',
    'hover:from-[#ff8a50] hover:to-[#ff6b2c]',
    'shadow-[0_4px_20px_rgba(255,107,44,0.3),0_1px_3px_rgba(0,0,0,0.3)]',
    'hover:shadow-[0_6px_30px_rgba(255,107,44,0.45),0_2px_6px_rgba(0,0,0,0.3)]',
    'active:shadow-[0_2px_10px_rgba(255,107,44,0.2)]',
    'border border-[#ff8a50]/20',
  ].join(' '),
  secondary: [
    'bg-gradient-to-r from-[#6366f1] to-[#4f46e5] text-white font-bold',
    'hover:from-[#818cf8] hover:to-[#6366f1]',
    'shadow-[0_4px_20px_rgba(99,102,241,0.25),0_1px_3px_rgba(0,0,0,0.3)]',
    'hover:shadow-[0_6px_30px_rgba(99,102,241,0.4)]',
    'border border-[#818cf8]/20',
  ].join(' '),
  ghost: [
    'bg-[#1a1a28]/50 border border-[#2a2a40] text-[#a0a0b8] font-semibold',
    'hover:bg-[#1a1a28] hover:border-[#3a3a50] hover:text-[#f0f0f5]',
    'shadow-[0_2px_8px_rgba(0,0,0,0.15)]',
  ].join(' '),
  danger: [
    'bg-gradient-to-r from-[#ef4444] to-[#dc2626] text-white font-bold',
    'hover:from-[#f87171] hover:to-[#ef4444]',
    'shadow-[0_4px_20px_rgba(239,68,68,0.25)]',
    'hover:shadow-[0_6px_30px_rgba(239,68,68,0.4)]',
    'border border-[#f87171]/20',
  ].join(' '),
  success: [
    'bg-gradient-to-r from-[#10b981] to-[#059669] text-white font-bold',
    'hover:from-[#34d399] hover:to-[#10b981]',
    'shadow-[0_4px_20px_rgba(16,185,129,0.25)]',
    'border border-[#34d399]/20',
  ].join(' '),
  icon: [
    'text-[#5a5a72] hover:text-[#f0f0f5] hover:bg-[#1a1a28]',
    'p-2 rounded-xl transition-all',
  ].join(' '),
};

const sizeStyles: Record<ButtonSize, string> = {
  xs: 'px-3 py-1.5 text-xs rounded-lg gap-1.5',
  sm: 'px-4 py-2 text-sm rounded-lg gap-1.5',
  md: 'px-5 py-2.5 text-sm rounded-xl gap-2',
  lg: 'px-7 py-3.5 text-base rounded-xl gap-2.5',
  xl: 'px-10 py-4.5 text-lg rounded-2xl gap-3',
};

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ variant = 'primary', size = 'md', loading = false, glow = false, className, children, disabled, ...props }, ref) => {
    const isDisabled = disabled || loading;

    return (
      <motion.button
        ref={ref}
        whileHover={isDisabled ? undefined : { scale: 1.02, y: -1 }}
        whileTap={isDisabled ? undefined : { scale: 0.97 }}
        transition={{ type: 'spring', stiffness: 400, damping: 20 }}
        className={cn(
          'relative inline-flex items-center justify-center font-medium cursor-pointer select-none',
          'transition-all duration-200 ease-out',
          variantStyles[variant],
          variant !== 'icon' && sizeStyles[size],
          glow && variant === 'primary' && 'animate-pulse-glow',
          isDisabled && 'opacity-40 cursor-not-allowed pointer-events-none',
          'btn-shine',
          className
        )}
        disabled={isDisabled}
        {...props}
      >
        <span className={cn('relative z-10 inline-flex items-center gap-2 transition-opacity', loading && 'opacity-0')}>
          {children}
        </span>
        {loading && (
          <span className="absolute inset-0 flex items-center justify-center z-10">
            <Loader2 className="w-5 h-5 animate-spin" />
          </span>
        )}
      </motion.button>
    );
  }
);

Button.displayName = 'Button';
