import { useState, type ButtonHTMLAttributes, type ReactNode, type ReactElement } from "react";

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "secondary" | "ghost" | "danger" | "success";
  size?: "sm" | "md" | "lg";
  children: ReactNode;
}

interface VariantStyle {
  base: React.CSSProperties;
  hover: React.CSSProperties;
}

type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success";

const variantStyles: Record<ButtonVariant, VariantStyle> = {
  primary: {
    base: {
      background: "var(--ms-blue-500)",
      color: "#fff",
      border: "none",
    },
    hover: {
      background: "var(--ms-blue-400)",
      boxShadow: "0 4px 16px rgba(47,128,255,0.3)",
    },
  },
  secondary: {
    base: {
      background: "transparent",
      border: "1px solid var(--border)",
      color: "var(--text-2)",
    },
    hover: {
      background: "var(--surface)",
      color: "var(--text)",
    },
  },
  ghost: {
    base: {
      background: "transparent",
      border: "1px solid var(--border)",
      color: "var(--text-2)",
    },
    hover: {
      background: "var(--surface)",
      color: "var(--text)",
    },
  },
  danger: {
    base: {
      background: "rgba(229,72,77,0.12)",
      border: "1px solid rgba(229,72,77,0.3)",
      color: "var(--danger)",
    },
    hover: {
      background: "rgba(229,72,77,0.2)",
    },
  },
  success: {
    base: {
      background: "rgba(20,184,166,0.12)",
      border: "1px solid rgba(20,184,166,0.3)",
      color: "var(--success)",
    },
    hover: {
      background: "rgba(20,184,166,0.2)",
    },
  },
};

type ButtonSize = "sm" | "md" | "lg";

const sizeStyles: Record<ButtonSize, string> = {
  sm: "px-3 py-1.5 text-sm",
  md: "px-4 py-2 text-base",
  lg: "px-6 py-3 text-lg",
};

export function Button({
  variant = "primary",
  size = "md",
  children,
  className = "",
  style,
  onMouseEnter,
  onMouseLeave,
  disabled,
  ...props
}: ButtonProps): ReactElement {
  const [isHovered, setIsHovered] = useState(false);

  const vStyles = variantStyles[variant];
  const baseClass = `inline-flex items-center justify-center font-medium rounded-md transition-colors ${sizeStyles[size]} ${className}`;

  const computedStyle: React.CSSProperties = {
    ...vStyles.base,
    ...(isHovered && !disabled ? vStyles.hover : {}),
    ...(disabled ? { opacity: 0.5, cursor: "not-allowed" } : { cursor: "pointer" }),
    ...style,
  };

  return (
    <button
      className={baseClass}
      style={computedStyle}
      disabled={disabled}
      onMouseEnter={(e) => {
        setIsHovered(true);
        onMouseEnter?.(e);
      }}
      onMouseLeave={(e) => {
        setIsHovered(false);
        onMouseLeave?.(e);
      }}
      {...props}
    >
      {children}
    </button>
  );
}