import React, { forwardRef } from 'react';
import { cn } from '@/utils/utils';
import { NEUMORPHISM } from '@/styles/Neumorphism';

// Couleurs de texte pour chaque variante
const variantStyles = {
  primary: "text-[#090909] dark:text-white font-bold",
  secondary: "text-slate-500 dark:text-slate-400 font-bold",
  danger: "text-rose-600 dark:text-rose-400 font-bold",
  success: "text-emerald-600 dark:text-emerald-400 font-bold",
  outline: "text-slate-700 dark:text-slate-200 border-slate-300 dark:border-slate-700",
  ghost: "text-slate-600 dark:text-slate-400 border-transparent shadow-none dark:shadow-none",
};

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: keyof typeof variantStyles;
  size?: keyof typeof NEUMORPHISM.sizeStyles;
  isLoading?: boolean;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  (
    { 
      className, 
      variant = 'primary', 
      size = 'md', 
      isLoading = false, 
      leftIcon, 
      rightIcon, 
      children, 
      disabled, 
      type = "button",
      ...props 
    }, 
    ref
  ) => {
    return (
      <button
        ref={ref}
        type={type}
        disabled={disabled || isLoading}
        className={cn(
          // Style de base & Neumorphism
          "inline-flex items-center justify-center cursor-pointer outline-none transition-all duration-300 ease-in-out",
          "bg-[#e8e8e8] dark:bg-[#1e293b]",
          "border border-[#e8e8e8] dark:border-[#1e293b]",
          "hover:border-white dark:hover:border-[#2a3850]",
          NEUMORPHISM.lightShadow,
          NEUMORPHISM.lightActive,
          NEUMORPHISM.darkShadow,
          NEUMORPHISM.darkActive,
          "disabled:opacity-50 disabled:pointer-events-none",
          
          // Variantes & Tailles
          variantStyles[variant],
          NEUMORPHISM.sizeStyles[size],
          className
        )}
        {...props}
      >
        {/* Spinner SVG si en chargement */}
        {isLoading && (
          <svg 
            className="animate-spin -ml-1 mr-2 h-5 w-5 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>
        )}
        
        {/* Icône de gauche (masquée si chargement) */}
        {!isLoading && leftIcon && <span className="mr-2 shrink-0">{leftIcon}</span>}
        
        {/* Texte du bouton */}
        <span className="truncate">{children}</span>

        {/* Icône de droite */}
        {rightIcon && <span className="ml-2 shrink-0">{rightIcon}</span>}
      </button>
    );
  }
);

Button.displayName = "Button";