/**
 * JTZL_WebIRC_Chat - Avatar Component
 *
 * @package   JTZL_WebIRC_Chat
 * @copyright Copyright (c) 2025, JT. G.
 * @license   GPL-3.0+
 * @since     3.0.0
 */

import * as React from 'react';
import { cn } from '../../lib/utils';

export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
	size?: 'sm' | 'md' | 'lg';
	imageUrl?: string;
	fallbackText?: string;
}

/**
 * Avatar component for displaying user profile images or initials.
 *
 * @since 3.0.0
 *
 * @param props - Avatar component props
 * @return JSX.Element - Rendered avatar component
 */
const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
	({ className, imageUrl, fallbackText, children, ...props }, ref) => {
		const [imageError, setImageError] = React.useState(false);
		const [imageLoading, setImageLoading] = React.useState(!!imageUrl);

		// Reset error state when imageUrl changes.
		React.useEffect(() => {
			if (imageUrl) {
				setImageError(false);
				setImageLoading(true);
			}
		}, [imageUrl]);

		return (
			<div
				ref={ref}
				className={cn(
					'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
					className
				)}
				{...props}
			>
				{imageUrl && !imageError ? (
					<>
						<AvatarImage
							src={imageUrl}
							alt={fallbackText || 'User avatar'}
							onLoad={() => setImageLoading(false)}
							onError={() => {
								setImageError(true);
								setImageLoading(false);
							}}
						/>
						{imageLoading && (
							<AvatarFallback>
								{fallbackText || 'U'}
							</AvatarFallback>
						)}
					</>
				) : (
					children || (
						<AvatarFallback>{fallbackText || 'U'}</AvatarFallback>
					)
				)}
			</div>
		);
	}
);
Avatar.displayName = 'Avatar';

export interface AvatarImageProps
	extends React.ImgHTMLAttributes<HTMLImageElement> {
	fallback?: string;
}

/**
 * AvatarImage component for displaying the actual avatar image.
 *
 * @since 3.0.0
 *
 * @param props - AvatarImage component props
 * @return JSX.Element - Rendered avatar image component
 */
const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(
	({ className, alt, ...props }, ref) => (
		<img
			ref={ref}
			className={cn('aspect-square h-full w-full', className)}
			alt={alt || ''}
			{...props}
		/>
	)
);
AvatarImage.displayName = 'AvatarImage';

export interface AvatarFallbackProps
	extends React.HTMLAttributes<HTMLDivElement> {
	delayMs?: number;
}

/**
 * AvatarFallback component for displaying fallback content when image is not available.
 *
 * @since 3.0.0
 *
 * @param props - AvatarFallback component props
 * @return JSX.Element - Rendered avatar fallback component
 */
const AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(
	({ className, ...props }, ref) => (
		<div
			ref={ref}
			className={cn(
				'flex h-full w-full items-center justify-center rounded-full bg-primary text-sm font-medium text-primary-foreground',
				className
			)}
			{...props}
		/>
	)
);
AvatarFallback.displayName = 'AvatarFallback';

export { Avatar, AvatarImage, AvatarFallback };