Button

'use client';

import { forwardRef } from 'react';
import { motion } from 'framer-motion';

const FILLED_SHADOW =
  'shadow-[0_1px_3px_rgba(0,0,0,0.12),inset_0_1px_0_rgba(255,255,255,0.12)]';

const variantStyles = {
  primary:
    `bg-linear-to-b from-brand-400 to-brand-600 text-white hover:from-brand-300 hover:to-brand-500 ${FILLED_SHADOW}`,
  secondary:
    'bg-(--surface-sunken) text-(--text) hover:bg-(--border) border border-(--border) shadow-(--shadow-card)',
  outline:
    'bg-transparent text-(--text) border border-(--border) hover:bg-(--surface-sunken) hover:border-brand-500/30 hover:shadow-(--shadow-card)',
  ghost:
    'bg-transparent text-(--text) hover:bg-(--surface-sunken)',
  destructive:
    `bg-linear-to-b from-danger-400 to-danger-600 text-white hover:from-danger-300 hover:to-danger-500 ${FILLED_SHADOW}`,
  success:
    `bg-linear-to-b from-success-400 to-success-600 text-white hover:from-success-300 hover:to-success-500 ${FILLED_SHADOW}`,
  warning:
    `bg-linear-to-b from-warn-400 to-warn-600 text-white hover:from-warn-300 hover:to-warn-500 ${FILLED_SHADOW}`,
  link:
    'bg-transparent text-brand-500 hover:underline underline-offset-4 p-0 h-auto shadow-none',
} as const;

const sizeStyles = {
  xs: 'text-xs px-2.5 py-1 rounded-md gap-1',
  sm: 'text-xs px-3 py-1.5 rounded-lg gap-1.5',
  md: 'text-sm px-4 py-2 rounded-lg gap-2',
  lg: 'text-sm px-5 py-2.5 rounded-lg gap-2',
  xl: 'text-base px-6 py-3 rounded-xl gap-2.5',
} as const;

const iconOnlySizeStyles = {
  xs: 'w-7 h-7 rounded-md',
  sm: 'w-8 h-8 rounded-lg',
  md: 'w-9 h-9 rounded-lg',
  lg: 'w-10 h-10 rounded-lg',
  xl: 'w-12 h-12 rounded-xl',
} as const;

const shapeOverrides = {
  default: '',
  pill: 'rounded-full',
  square: 'rounded-none',
} as const;

export type ButtonVariant = keyof typeof variantStyles;
export type ButtonSize = keyof typeof sizeStyles;
export type ButtonShape = keyof typeof shapeOverrides;

type NativeButtonProps = Omit<
  React.ButtonHTMLAttributes<HTMLButtonElement>,
  'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration'
>;

export interface ButtonProps extends NativeButtonProps {
  variant?: ButtonVariant;
  size?: ButtonSize;
  shape?: ButtonShape;
  loading?: boolean;
  iconLeft?: React.ReactNode;
  iconRight?: React.ReactNode;
  iconOnly?: boolean;
  fullWidth?: boolean;
}

export const AidashButton = forwardRef<HTMLButtonElement, ButtonProps>(
  function AidashButton(
    {
      variant = 'primary',
      size = 'md',
      shape = 'default',
      loading = false,
      disabled = false,
      iconLeft,
      iconRight,
      iconOnly = false,
      fullWidth = false,
      children,
      className = '',
      ...props
    },
    ref
  ) {
    const isDisabled = disabled || loading;
    const isLink = variant === 'link';

    const baseClasses =
      'inline-flex items-center justify-center font-medium transition-all focus-visible:outline-2 focus-visible:outline-(--ring) focus-visible:outline-offset-2';

    const stateClasses = isDisabled
      ? 'opacity-50 cursor-not-allowed pointer-events-none'
      : 'cursor-pointer';

    const widthClass = fullWidth ? 'w-full' : '';

    const sizeClass = iconOnly
      ? iconOnlySizeStyles[size]
      : sizeStyles[size];

    const shapeClass = isLink ? '' : shapeOverrides[shape];

    const combinedClasses = [
      baseClasses,
      variantStyles[variant],
      sizeClass,
      shapeClass,
      stateClasses,
      widthClass,
      className,
    ]
      .filter(Boolean)
      .join(' ');

    return (
      <motion.button
        ref={ref}
        className={combinedClasses}
        disabled={isDisabled}
        aria-busy={loading || undefined}
        whileHover={!isDisabled && !isLink ? { scale: 1.02 } : undefined}
        whileTap={!isDisabled && !isLink ? { scale: 0.97 } : undefined}
        transition={{ type: 'spring', stiffness: 400, damping: 25 }}
        {...props}
      >
        {loading && (
          <svg
            className="animate-spin shrink-0"
            width={size === 'xs' || size === 'sm' ? 14 : 16}
            height={size === 'xs' || size === 'sm' ? 14 : 16}
            viewBox="0 0 24 24"
            fill="none"
            aria-hidden="true"
          >
            <circle
              className="opacity-25"
              cx="12"
              cy="12"
              r="10"
              stroke="currentColor"
              strokeWidth="3"
            />
            <path
              className="opacity-75"
              fill="currentColor"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
            />
          </svg>
        )}
        {!loading && iconLeft && (
          <span className="shrink-0 flex items-center" aria-hidden="true">{iconLeft}</span>
        )}
        {!iconOnly && children && (
          <span className={loading ? 'opacity-0' : ''}>{children}</span>
        )}
        {iconOnly && !loading && children}
        {!loading && iconRight && (
          <span className="shrink-0 flex items-center" aria-hidden="true">{iconRight}</span>
        )}
      </motion.button>
    );
  }
);