/**
 * 统一的 Button 组件
 * 支持多种变体、尺寸和状态
 */
import React from "react";
import type { LucideIcon } from "lucide-react";

export type ButtonVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "ghost";
export type ButtonSize = "sm" | "md" | "lg";

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
  size?: ButtonSize;
  icon?: LucideIcon;
  iconPosition?: "left" | "right";
  loading?: boolean;
  spinIcon?: boolean; // When true and loading, spin the icon instead of showing a loader
  fullWidth?: boolean;
  children?: React.ReactNode;
}

const variantStyles: Record<ButtonVariant, string> = {
  primary: "bg-blue-600 hover:bg-blue-700 text-white border-blue-600 shadow-sm",
  secondary: "bg-white hover:bg-slate-50 text-slate-700 border-slate-300 shadow-sm",
  success: "bg-emerald-600 hover:bg-emerald-700 text-white border-emerald-600 shadow-sm",
  danger: "bg-red-600 hover:bg-red-700 text-white border-red-600 shadow-sm",
  warning: "bg-amber-500 hover:bg-amber-600 text-white border-amber-500 shadow-sm",
  ghost: "bg-transparent hover:bg-slate-100 text-slate-600 border-transparent",
};

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

export const Button: React.FC<ButtonProps> = ({
  variant = "secondary",
  size = "md",
  icon: Icon,
  iconPosition = "left",
  loading = false,
  spinIcon = false,
  fullWidth = false,
  disabled = false,
  className = "",
  children,
  ...props
}) => {
  const isDisabled = disabled || loading;

  const baseStyles = "inline-flex items-center justify-center gap-2 font-medium rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white";
  const disabledStyles = "disabled:opacity-50 disabled:cursor-not-allowed";
  const widthStyles = fullWidth ? "w-full" : "";

  const combinedClassName = `
    ${baseStyles}
    ${variantStyles[variant]}
    ${sizeStyles[size].button}
    ${disabledStyles}
    ${widthStyles}
    ${className}
  `.trim();

  const iconClassName = sizeStyles[size].icon;

  const renderIcon = () => {
    if (loading && !spinIcon) {
      // Show generic spinner when loading and spinIcon is false
      return (
        <div className={`animate-spin rounded-full border-2 border-current border-t-transparent ${iconClassName}`} />
      );
    }
    if (Icon) {
      // Spin the icon if loading and spinIcon is true
      const spinClass = loading && spinIcon ? "animate-spin" : "";
      return <Icon className={`${iconClassName} ${spinClass}`} />;
    }
    return null;
  };

  return (
    <button className={combinedClassName} disabled={isDisabled} {...props}>
      {iconPosition === "left" && renderIcon()}
      {children}
      {iconPosition === "right" && !loading && renderIcon()}
    </button>
  );
};
