/**
 * [INPUT]: (ButtonProps)
 * [OUTPUT]: (JSX.Element) - 基础按钮
 * [POS]: qoder/button - 注册表模板，复制到用户项目后可自由修改
 *
 * [PROTOCOL]:
 * - 用户可自由修改此文件
 * - 更新时使用 npx @design-llm/qoder-cli diff button 查看差异
 */
import { forwardRef } from 'react'
import type { ButtonHTMLAttributes, ReactNode } from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const buttonVariants = cva(
  'inline-flex items-center justify-center gap-1.5 font-medium transition-colors duration-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer',
  {
    variants: {
      variant: {
        primary: 'bg-primary text-text-on-primary hover:bg-primary-hover',
        secondary: 'bg-bg-highlight text-text-on-primary hover:bg-bg-highlight-hover',
        tertiary: 'bg-fill-secondary text-text hover:bg-fill',
        ghost: 'bg-transparent text-text-secondary hover:bg-fill-secondary hover:text-text',
        text: 'bg-transparent text-text-secondary hover:text-text',
      },
      size: {
        sm: 'h-7 px-2 text-xs',
        md: 'h-9 px-3 text-sm',
        lg: 'h-11 px-4 text-base',
      },
      rounded: {
        square: 'rounded',
        pill: 'rounded-full',
      },
      textOnly: {
        true: 'h-auto px-0 py-0.5',
        false: '',
      },
    },
    compoundVariants: [
      { textOnly: true, size: 'sm', className: 'text-xs' },
      { textOnly: true, size: 'md', className: 'text-sm' },
      { textOnly: true, size: 'lg', className: 'text-base' },
    ],
    defaultVariants: {
      variant: 'ghost',
      size: 'md',
      rounded: 'square',
      textOnly: false,
    },
  }
)

export interface ButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  children: ReactNode
  textButton?: boolean
  prefixIcon?: ReactNode
  suffixIcon?: ReactNode
}

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      variant = 'ghost',
      children,
      size = 'md',
      textButton = false,
      prefixIcon,
      suffixIcon,
      rounded = 'square',
      disabled = false,
      className,
      ...props
    },
    ref
  ) => {
    return (
      <button
        ref={ref}
        className={buttonVariants({
          variant: textButton ? 'text' : variant,
          size,
          rounded,
          textOnly: textButton,
          className,
        })}
        disabled={disabled}
        {...props}
      >
        {prefixIcon && (
          <span className="inline-flex shrink-0 items-center justify-center [&>*]:block [&>*]:leading-none">
            {prefixIcon}
          </span>
        )}
        {children}
        {suffixIcon && (
          <span className="inline-flex shrink-0 items-center justify-center [&>*]:block [&>*]:leading-none">
            {suffixIcon}
          </span>
        )}
      </button>
    )
  }
)
Button.displayName = 'Button'

export { Button, buttonVariants }