/**
 * Button Component - ProRank SEO
 *
 * Shared button primitive backed by the shipped ProRank design-system CSS.
 */

import React from 'react';
import clsx from 'clsx';

const variantClasses = {
  primary: 'prorank-button--primary',
  secondary: 'prorank-button--secondary',
  success: 'prorank-button--success',
  danger: 'prorank-button--danger',
  warning: 'prorank-button--accent',
  ghost: 'prorank-button--ghost',
  link: 'prorank-button--link',
};

const sizeClasses = {
  xs: 'prorank-button--small',
  sm: 'prorank-button--small',
  md: '',
  lg: 'prorank-button--large',
  xl: 'prorank-button--large',
};

const iconSizes = {
  xs: 14,
  sm: 14,
  md: 16,
  lg: 18,
  xl: 18,
};

const SpinnerIcon = ({ size }) => (
  <svg
    aria-hidden="true"
    viewBox="0 0 24 24"
    style={{ width: size, height: size }}
  >
    <circle
      cx="12"
      cy="12"
      r="10"
      fill="none"
      stroke="currentColor"
      strokeOpacity="0.25"
      strokeWidth="4"
    />
    <path
      fill="currentColor"
      fillOpacity="0.75"
      d="M12 2a10 10 0 0 1 10 10h-4a6 6 0 0 0-6-6V2Z"
    >
      <animateTransform
        attributeName="transform"
        attributeType="XML"
        dur="0.75s"
        from="0 12 12"
        repeatCount="indefinite"
        to="360 12 12"
        type="rotate"
      />
    </path>
  </svg>
);

const Button = React.forwardRef(({
  children,
  variant = 'primary',
  size = 'md',
  loading = false,
  disabled = false,
  fullWidth = false,
  type = 'button',
  className = '',
  icon: Icon,
  iconPosition = 'left',
  ...props
}, ref) => {
  const {
    href,
    target,
    rel,
    onClick,
    isBusy,
    ...restProps
  } = props;

  const isLoading = loading || isBusy;
  const isUnavailable = disabled || isLoading;
  const isLink = typeof href === 'string' && href.length > 0;
  const iconSize = iconSizes[size] || iconSizes.md;

  const buttonClasses = clsx(
    'prorank-button',
    variantClasses[variant] || variantClasses.primary,
    sizeClasses[size],
    {
      'prorank-button--full': fullWidth,
      'prorank-button--loading': isLoading,
    },
    className
  );

  const iconStyle = { width: iconSize, height: iconSize, flexShrink: 0 };

  const renderIcon = (position) => {
    if (isLoading && position === 'left') {
      return <SpinnerIcon size={iconSize} />;
    }

    if (!Icon || iconPosition !== position || isLoading) {
      return null;
    }

    return <Icon className="prorank-button__icon" style={iconStyle} />;
  };

  const content = (
    <>
      {renderIcon('left')}
      {children}
      {renderIcon('right')}
    </>
  );

  if (isLink) {
    return (
      <a
        ref={ref}
        href={isUnavailable ? undefined : href}
        target={target}
        rel={rel || (target === '_blank' ? 'noopener noreferrer' : undefined)}
        aria-disabled={isUnavailable}
        onClick={isUnavailable ? (event) => event.preventDefault() : onClick}
        className={buttonClasses}
        {...restProps}
      >
        {content}
      </a>
    );
  }

  return (
    <button
      ref={ref}
      type={type}
      disabled={isUnavailable}
      onClick={onClick}
      className={buttonClasses}
      {...restProps}
    >
      {content}
    </button>
  );
});

Button.displayName = 'Button';

export default Button;