/**
 * EN: Button Component (React Aria + Glassmorphism)
 * VI: Component Button (React Aria + Glassmorphism)
 *
 * A fully accessible button component built with React Aria and styled with subtle glassmorphism.
 * Component button có đầy đủ accessibility được build với React Aria và styled với glassmorphism tinh tế.
 *
 * @example
 * ```tsx
 * <Button variant="primary" size="md">Click me</Button>
 * <Button variant="glass" size="lg" isLoading>Loading...</Button>
 * <Button variant="solid" onPress={() => console.log('Pressed')}>Action</Button>
 * ```
 */

'use client';

import React from 'react';
import { Button as AriaButton, type ButtonProps as AriaButtonProps } from 'react-aria-components';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/shared/utils';

/**
 * Button variants with glassmorphism styling (x.ai inspired)
 */
const buttonVariants = cva(
  // Base styles - common to all variants
  [
    'inline-flex items-center justify-center',
    'rounded-xl font-medium',
    'transition-all duration-quick ease-glide',
    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
    'focus-visible:ring-glass-focus focus-visible:ring-offset-bg-primary',
    'disabled:pointer-events-none disabled:opacity-50',
    'active:scale-[0.98]',
  ],
  {
    variants: {
      variant: {
        // Primary glass button (subtle x.ai style)
        primary: [
          'bg-glass-medium text-text-primary',
          'border border-glass-medium hover:border-glass-hover',
          'backdrop-blur-glass',
          'shadow-glass hover:shadow-glass-lg',
          'hover:bg-glass-hover',
        ],
        // Secondary glass (more subtle)
        secondary: [
          'bg-glass-subtle text-text-secondary',
          'border border-glass-subtle hover:border-glass',
          'backdrop-blur-glass-sm',
          'hover:bg-glass hover:text-text-primary',
        ],
        // Ghost (no background until hover)
        ghost: [
          'text-text-secondary',
          'hover:bg-glass hover:text-text-primary',
          'hover:backdrop-blur-glass-sm',
        ],
        // Solid (for high-emphasis actions)
        solid: [
          'bg-text-primary text-bg-primary',
          'hover:bg-text-secondary',
          'shadow-md hover:shadow-lg',
        ],
        // Danger
        danger: [
          'bg-accent-error/10 text-accent-error',
          'border border-accent-error/20 hover:border-accent-error/40',
          'backdrop-blur-glass-sm',
          'hover:bg-accent-error/20',
        ],
        // Glass (explicit glass variant)
        glass: [
          'bg-glass-medium text-text-primary',
          'border border-glass hover:border-glass-hover',
          'backdrop-blur-glass-md',
          'shadow-glass-md hover:shadow-glass-lg',
          'hover:bg-glass-hover',
        ],
        // Brand (Subtle dark glass - X.ai minimal)
        brand: [
          'bg-[#1f2f3d]/95 text-white',
          'backdrop-blur-glass border border-white/10',
          'shadow-[0_2px_8px_rgba(0,0,0,0.4),inset_0_1px_1px_rgba(255,255,255,0.1)]',
          'hover:bg-[#243442] hover:border-white/15',
          'hover:shadow-[0_4px_12px_rgba(0,0,0,0.5),inset_0_1px_1px_rgba(255,255,255,0.15)]',
          'transition-all duration-quick',
          'focus-visible:ring-2 focus-visible:ring-white/20',
          'focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary',
        ],
      },
      size: {
        sm: 'h-8 px-3 text-sm min-h-[32px]',
        md: 'h-10 px-4 text-base min-h-[40px]',
        lg: 'h-12 px-6 text-lg min-h-[44px]',
        xl: 'h-14 px-8 text-xl min-h-[48px]',
      },
      fullWidth: {
        true: 'w-full',
        false: 'w-auto',
      },
    },
    defaultVariants: {
      variant: 'primary',
      size: 'md',
      fullWidth: false,
    },
  }
);

export interface ButtonProps
  extends Omit<AriaButtonProps, 'className' | 'children'>,
  VariantProps<typeof buttonVariants> {
  /**
   * Custom className to merge with variant styles
   */
  className?: string;

  /**
   * Button content
   */
  children?: React.ReactNode;

  /**
   * Whether button is in loading state
   */
  isLoading?: boolean;

  /**
   * Icon to show before children
   */
  leftIcon?: React.ReactNode;

  /**
   * Icon to show after children
   */
  rightIcon?: React.ReactNode;
}

/**
 * Loading spinner component
 */
const Spinner = ({ className }: { className?: string }) => (
  <svg
    className={cn('animate-spin h-4 w-4', className)}
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
  >
    <circle
      className="opacity-25"
      cx="12"
      cy="12"
      r="10"
      stroke="currentColor"
      strokeWidth="4"
    />
    <path
      className="opacity-75"
      fill="currentColor"
      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
    />
  </svg>
);

/**
 * Button component built with React Aria
 *
 * Features:
 * - Fully accessible with keyboard navigation and ARIA attributes
 * - Glassmorphism styling (subtle x.ai style)
 * - Multiple variants: primary, secondary, ghost, solid, danger, glass, brand
 * - Loading state with spinner
 * - Left/right icon support
 * - Responsive sizing with min-height for touch targets
 *
 * @example
 * ```tsx
 * // Basic button
 * <Button onPress={() => alert('Clicked')}>Click me</Button>
 *
 * // Glass variant with loading
 * <Button variant="glass" isLoading>Loading...</Button>
 *
 * // With icons
 * <Button leftIcon={<Icon />} rightIcon={<Arrow />}>Next</Button>
 *
 * // Full width solid button
 * <Button variant="solid" size="lg" fullWidth>Submit</Button>
 * ```
 */
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      className,
      variant,
      size,
      fullWidth,
      isLoading,
      leftIcon,
      rightIcon,
      children,
      isDisabled,
      ...props
    },
    ref
  ) => {
    return (
      <AriaButton
        ref={ref}
        className={cn(buttonVariants({ variant, size, fullWidth }), className)}
        isDisabled={isDisabled || isLoading}
        {...props}
      >
        {isLoading && <Spinner className="mr-2" />}
        {!isLoading && leftIcon && <span className="mr-2">{leftIcon}</span>}
        {children}
        {rightIcon && <span className="ml-2">{rightIcon}</span>}
      </AriaButton>
    );
  }
);

Button.displayName = 'Button';

export { buttonVariants };
