import { useState } from 'react';

/**
 * Button Component
 * 
 * Componente de botón reutilizable que sigue el design system de Anima DS.
 * Soporta múltiples tipos (Primary, Secondary, Ghost), colores (Teal, Grape, Honey) y tamaños (Small, Default, Large).
 * Los estados deshabilitados se manejan con el prop disabled.
 * 
 * @param {string} texto - Texto a mostrar en el botón (alias de children)
 * @param {React.ReactNode} children - Contenido del botón
 * @param {string} tipo - Tipo del botón: 'Primary', 'Secondary', 'Ghost' (alias de variant)
 * @param {string} variant - Alias de tipo para mayor compatibilidad
 * @param {string} color - Color del botón: 'Teal', 'Grape', 'Honey'
 * @param {string} tamaño - Tamaño del botón: 'Small', 'Default', 'Large'
 * @param {function} onClick - Función a ejecutar cuando se hace click
 * @param {string} type - Tipo de botón HTML (button, submit, reset)
 * @param {boolean} disabled - Estado deshabilitado
 * @param {string} className - Clases CSS adicionales
 * @param {object} props - Props adicionales del botón HTML
 */
export const Button = ({
  texto,
  children,
  tipo,
  variant,
  color = 'Teal',
  tamaño = 'Default',
  onClick,
  type = 'button',
  disabled = false,
  className = '',
  ...props
}) => {
  // Normalizar props para compatibilidad:
  // - permitir usar variant además de tipo
  // - permitir usar children además de texto
  const resolvedTipo = tipo || variant || 'Primary';
  const resolvedContent = children != null ? children : texto;
  // Colores del design system
  const COLOR_PALETTE = {
    Teal: '#2D5C63',
    Grape: '#6D3856', // morado/plum profundo
    Honey: '#E8B061', // naranja/ámbar claro
  };
  
  // Color de texto para Primary según el color del botón
  const PRIMARY_TEXT_COLOR = {
    Teal: '#ffffff',
    Grape: '#ffffff',
    Honey: '#374151', // gray-700 (gris oscuro/carbón)
  };
  
  // Color para Secondary según el color del botón (puede diferir del Primary)
  const SECONDARY_COLOR = {
    Teal: COLOR_PALETTE.Teal,
    Grape: COLOR_PALETTE.Grape,
    Honey: '#80501F', // marrón medio-oscuro para Secondary
  };
  
  // Color para Ghost según el color del botón
  const GHOST_COLOR = {
    Teal: COLOR_PALETTE.Teal,
    Grape: COLOR_PALETTE.Grape,
    Honey: '#80501F', // marrón medio-oscuro para Ghost (igual que Secondary)
  };
  
  // Color de texto para Ghost según el color del botón
  const GHOST_TEXT_COLOR = {
    Teal: COLOR_PALETTE.Teal,
    Grape: COLOR_PALETTE.Grape,
    Honey: '#6E4D11', // marrón oscuro para Ghost
  };
  
  // Colores para estados deshabilitados (grises)
  const DISABLED_COLORS = {
    border: '#D1D5DB', // gray-300
    text: '#9CA3AF',   // gray-400
    background: '#F3F4F6', // gray-100
  };
  
  const BUTTON_COLOR = COLOR_PALETTE[color] || COLOR_PALETTE.Teal;
  
  // Estado para manejar hover
  const [isHovered, setIsHovered] = useState(false);
  
  // Determinar si el botón está deshabilitado
  const isDisabled = disabled;
  
  // Clases base: inline-flex + centro vertical para icono + texto (mismo criterio en todo el DS)
  const baseClasses =
    'inline-flex items-center justify-center gap-2 font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2';
  
  // Clases de tamaño con padding y texto
  const sizeClasses = {
    Small: 'px-3 py-1.5 text-sm rounded-md',
    Default: 'px-4 py-2 text-base rounded-lg',
    Large: 'px-6 py-3 text-lg rounded-lg',
  };
  
  // Función helper para convertir hex a rgba
  const hexToRgba = (hex, alpha = 1) => {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
  };
  
  // Estilos inline con colores según el tipo y color
  const getInlineStyles = () => {
    const styles = {};
    
    // Si está deshabilitado, usar colores grises
    if (isDisabled) {
      switch (resolvedTipo) {
        case 'Primary':
          styles.backgroundColor = DISABLED_COLORS.background;
          styles.color = DISABLED_COLORS.text;
          break;
        
        case 'Secondary':
          styles.borderColor = DISABLED_COLORS.border;
          styles.color = DISABLED_COLORS.text;
          styles.borderWidth = '1px';
          styles.borderStyle = 'solid';
          styles.backgroundColor = 'transparent';
          break;
        
        case 'Ghost':
          styles.color = DISABLED_COLORS.text;
          styles.backgroundColor = 'transparent';
          break;
      }
      return styles;
    }
    
    // Estilos para estados habilitados
    switch (resolvedTipo) {
      case 'Primary':
        styles.backgroundColor = BUTTON_COLOR;
        styles.color = PRIMARY_TEXT_COLOR[color] || '#ffffff';
        if (isHovered) {
          styles.opacity = '0.9';
        }
        break;
      
      case 'Secondary':
        const secondaryColor = SECONDARY_COLOR[color] || BUTTON_COLOR;
        styles.borderColor = secondaryColor;
        styles.color = secondaryColor;
        styles.borderWidth = '1px';
        styles.borderStyle = 'solid';
        if (isHovered) {
          styles.backgroundColor = hexToRgba(secondaryColor, 0.1);
        } else {
          // Fondo blanco para Honey y Grape Secondary, transparente para los demás
          styles.backgroundColor = (color === 'Honey' || color === 'Grape') ? '#ffffff' : 'transparent';
        }
        break;
      
      case 'Ghost':
        const ghostColor = GHOST_COLOR[color] || BUTTON_COLOR;
        const ghostTextColor = GHOST_TEXT_COLOR[color] || BUTTON_COLOR;
        
        // Para Honey, Ghost tiene fondo blanco y texto oscuro, sin borde
        if (color === 'Honey') {
          styles.color = ghostTextColor;
          styles.backgroundColor = '#ffffff';
          if (isHovered) {
            styles.backgroundColor = hexToRgba(ghostColor, 0.1);
          }
        } else {
          // Para otros colores, Ghost es sin borde
          styles.color = ghostTextColor;
          styles.backgroundColor = isHovered 
            ? hexToRgba(ghostColor, 0.1) 
            : 'transparent';
        }
        break;
    }
    
    return styles;
  };
  
  // Clases según el tipo/variante
  const getVariantClasses = () => {
    if (isDisabled) {
      switch (resolvedTipo) {
        case 'Primary':
          return {
            base: 'active:opacity-80',
            disabled: 'cursor-not-allowed',
          };
        
        case 'Secondary':
          return {
            base: 'border active:opacity-80',
            disabled: 'cursor-not-allowed',
          };
        
        case 'Ghost':
          return {
            base: 'active:opacity-80',
            disabled: 'cursor-not-allowed',
          };
        
        default:
          return {
            base: 'active:opacity-80',
            disabled: 'cursor-not-allowed',
          };
      }
    }
    
    switch (resolvedTipo) {
      case 'Primary':
        // Para Honey, el texto no debe ser blanco
        const primaryTextClass = color === 'Honey' ? '' : 'text-white';
        return {
          base: `${primaryTextClass} active:opacity-80`.trim(),
          disabled: 'opacity-50 cursor-not-allowed',
        };
      
      case 'Secondary':
        return {
          base: 'border active:opacity-80',
          disabled: 'opacity-50 cursor-not-allowed',
        };
      
      case 'Ghost':
        return {
          base: 'active:opacity-80',
          disabled: 'opacity-50 cursor-not-allowed',
        };
      
      default:
        return {
          base: 'text-white active:opacity-80',
          disabled: 'opacity-50 cursor-not-allowed',
        };
    }
  };
  
  const variantClasses = getVariantClasses();
  const sizeClass = sizeClasses[tamaño] || sizeClasses.Default;
  const inlineStyles = getInlineStyles();
  
  // Construir clases finales
  const classes = `
    ${baseClasses}
    ${sizeClass}
    ${variantClasses.base}
    ${isDisabled ? variantClasses.disabled : 'cursor-pointer'}
    ${className}
  `.trim().replace(/\s+/g, ' ');
  
  // Manejar el click - no ejecutar si está deshabilitado
  const handleClick = (e) => {
    if (!isDisabled && onClick) {
      onClick(e);
    }
  };
  
  return (
    <button
      type={type}
      className={classes}
      style={inlineStyles}
      disabled={isDisabled}
      onClick={handleClick}
      onMouseEnter={() => !isDisabled && setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      {...props}
    >
      {resolvedContent}
    </button>
  );
};


export default Button;

