'use client';

import * as React from 'react';
import * as AvatarPrimitive from '@radix-ui/react-avatar';
import { cn } from '@/shared/lib/utils';

/**
 * EN: Avatar size variants
 * VI: Các biến thể kích thước Avatar
 */
const avatarSizes = {
  xs: 'h-6 w-6 text-xs',      // 24px
  sm: 'h-8 w-8 text-sm',      // 32px
  md: 'h-10 w-10 text-base',  // 40px (default)
  lg: 'h-12 w-12 text-lg',    // 48px
  xl: 'h-16 w-16 text-xl',    // 64px
};

/**
 * EN: Status indicator size variants (relative to avatar size)
 * VI: Các biến thể kích thước status indicator (tương đối với kích thước avatar)
 */
const statusSizes = {
  xs: 'h-1.5 w-1.5 border-[1.5px]',
  sm: 'h-2 w-2 border-2',
  md: 'h-2.5 w-2.5 border-2',
  lg: 'h-3 w-3 border-[2.5px]',
  xl: 'h-3.5 w-3.5 border-[3px]',
};

/**
 * EN: Status indicator positions (relative to avatar size)
 * VI: Vị trí status indicator (tương đối với kích thước avatar)
 */
const statusPositions = {
  xs: 'bottom-0 right-0',
  sm: 'bottom-0 right-0',
  md: 'bottom-0 right-0',
  lg: 'bottom-0.5 right-0.5',
  xl: 'bottom-1 right-1',
};

/**
 * EN: Avatar status color variants
 * VI: Các biến thể màu status của Avatar
 */
const statusColors = {
  online: 'bg-accent-success border-bg-primary',
  offline: 'bg-text-tertiary border-bg-primary',
  away: 'bg-accent-warning border-bg-primary',
  busy: 'bg-accent-error border-bg-primary',
};

/**
 * EN: Avatar component - User avatar with image, fallback, and status indicator
 * VI: Component Avatar - Avatar người dùng với hình ảnh, fallback và status indicator
 *
 * @param size - Avatar size variant / Biến thể kích thước avatar
 * @param status - Status indicator (online/offline/away/busy) / Status indicator
 * @param className - Additional CSS classes / Các class CSS bổ sung
 */
type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';

const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
    size?: AvatarSize;
    status?: AvatarStatus;
  }
>(({ className, size = 'md', status, ...props }, ref) => (
  <div className="relative inline-block">
    <AvatarPrimitive.Root
      ref={ref}
      className={cn(
        'relative flex shrink-0 overflow-hidden rounded-full bg-bg-tertiary',
        avatarSizes[size],
        className
      )}
      {...props}
    />
    {status && (
      <span
        className={cn(
          'absolute rounded-full border-2',
          statusSizes[size],
          statusPositions[size],
          statusColors[status]
        )}
        aria-label={`Status: ${status} / Trạng thái: ${status}`}
      />
    )}
  </div>
));
Avatar.displayName = AvatarPrimitive.Root.displayName;

/**
 * EN: AvatarImage component - Image displayed in avatar
 * VI: Component AvatarImage - Hình ảnh hiển thị trong avatar
 */
const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> & {
    alt?: string;
  }
>(({ className, alt, ...props }, ref) => (
  <AvatarPrimitive.Image
    ref={ref}
    className={cn('aspect-square h-full w-full object-cover', className)}
    alt={alt || 'User avatar / Avatar người dùng'}
    {...props}
  />
));
AvatarImage.displayName = AvatarPrimitive.Image.displayName;

/**
 * EN: AvatarFallback component - Fallback content when image fails to load
 * VI: Component AvatarFallback - Nội dung fallback khi hình ảnh không tải được
 */
const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn(
      'flex h-full w-full items-center justify-center rounded-full bg-chat-ai-bubble text-text-primary font-medium',
      className
    )}
    {...props}
  />
));
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;

export { Avatar, AvatarImage, AvatarFallback };