'use client';

// Unified Button component for the app. Variants:
//   - primary:  blue gradient — main CTAs (ส่งออก, บันทึก)
//   - secondary: surface with border — neutral actions
//   - ghost:    transparent — toolbar buttons
//   - danger:    red — destructive actions
//   - success:   green — confirmations
// Sizes: sm | md (default) | lg
// Shapes: rounded-md | icon (square)

import { forwardRef } from 'react';
import type { ButtonHTMLAttributes, ReactNode } from 'react';

type Variant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'warning';
type Size = 'sm' | 'md' | 'lg';

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
  size?: Size;
  iconOnly?: boolean;
  active?: boolean;
  loading?: boolean;
  leftIcon?: ReactNode;
  rightIcon?: ReactNode;
}

const variants: Record<Variant, string> = {
  primary:
    'bg-gradient-to-b from-capcut-blue to-capcut-blueDark hover:from-capcut-blueLight hover:to-capcut-blue text-white shadow-soft border border-capcut-blue/40',
  secondary:
    'bg-capcut-surface hover:bg-capcut-surfaceHover text-capcut-text border border-capcut-border hover:border-capcut-borderLight',
  ghost:
    'bg-transparent hover:bg-capcut-surface text-capcut-muted hover:text-capcut-text border border-transparent',
  danger:
    'bg-gradient-to-b from-capcut-red to-capcut-red/80 hover:from-capcut-red/90 hover:to-capcut-red text-white shadow-soft border border-capcut-red/40',
  success:
    'bg-gradient-to-b from-capcut-green to-capcut-green/80 hover:from-capcut-green/90 hover:to-capcut-green text-capcut-black shadow-soft border border-capcut-green/40',
  warning:
    'bg-capcut-orange/15 hover:bg-capcut-orange/25 text-capcut-orange border border-capcut-orange/40',
};

const sizes: Record<Size, string> = {
  sm: 'h-7 px-2.5 text-xs gap-1.5 rounded-md',
  md: 'h-9 px-3.5 text-sm gap-2 rounded-md',
  lg: 'h-11 px-5 text-base gap-2 rounded-lg',
};

const iconSizes: Record<Size, string> = {
  sm: 'w-7 h-7 rounded-md',
  md: 'w-9 h-9 rounded-md',
  lg: 'w-11 h-11 rounded-lg',
};

export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
  {
    variant = 'secondary',
    size = 'md',
    iconOnly = false,
    active = false,
    loading = false,
    leftIcon,
    rightIcon,
    children,
    className = '',
    disabled,
    ...rest
  },
  ref,
) {
  const variantClass = variants[variant];
  const sizeClass = iconOnly ? iconSizes[size] : sizes[size];
  const activeClass = active
    ? variant === 'ghost'
      ? 'bg-capcut-surface text-capcut-text'
      : 'ring-2 ring-capcut-blue/30'
    : '';
  return (
    <button
      ref={ref}
      disabled={disabled || loading}
      className={`relative inline-flex items-center justify-center font-medium whitespace-nowrap select-none transition-base ${variantClass} ${sizeClass} ${activeClass} ${className}`}
      {...rest}
    >
      {loading ? (
        <span className="absolute inset-0 flex items-center justify-center">
          <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
        </span>
      ) : (
        <>
          {leftIcon && <span className="flex items-center">{leftIcon}</span>}
          {children}
          {rightIcon && <span className="flex items-center">{rightIcon}</span>}
        </>
      )}
    </button>
  );
});