'use client';

import * as React from 'react';
import { cn } from '@/shared/lib/utils';
import { useTranslations } from 'next-intl';

/**
 * EN: TypingIndicator component props interface
 * VI: Interface cho props của component TypingIndicator
 */
export interface TypingIndicatorProps {
  /**
   * EN: Number of dots to display (default: 3) / VI: Số lượng chấm hiển thị (mặc định: 3)
   */
  dotCount?: number;
  /**
   * EN: Animation duration in milliseconds (default: 1400) / VI: Thời lượng animation tính bằng milliseconds (mặc định: 1400)
   */
  duration?: number;
  /**
   * EN: Size of each dot in pixels (default: 8) / VI: Kích thước mỗi chấm tính bằng pixels (mặc định: 8)
   */
  dotSize?: number;
  /**
   * EN: Color of the dots (default: uses theme tertiary text color) / VI: Màu của các chấm (mặc định: sử dụng màu text tertiary của theme)
   */
  color?: string;
  /**
   * EN: Additional CSS classes / VI: Các class CSS bổ sung
   */
  className?: string;
  /**
   * EN: Label for accessibility (default: "AI is typing...") / VI: Nhãn cho accessibility (mặc định: "AI đang nhập...")
   */
  'aria-label'?: string;
}

/**
 * EN: TypingIndicator component - Animated pulsing dots to indicate typing status
 * VI: Component TypingIndicator - Các chấm nhấp nháy để hiển thị trạng thái đang nhập
 *
 * Features:
 * - Pulsing dots animation with staggered delays
 * - Configurable dot count, size, and color
 * - Smooth animation using CSS keyframes
 * - Accessibility support with aria-label
 * - Follows design system theme colors
 *
 * Tính năng:
 * - Animation các chấm nhấp nháy với độ trễ lệch nhau
 * - Có thể cấu hình số lượng chấm, kích thước và màu sắc
 * - Animation mượt mà sử dụng CSS keyframes
 * - Hỗ trợ accessibility với aria-label
 * - Tuân theo màu sắc của design system
 *
 * @example
 * ```tsx
 * <TypingIndicator />
 * <TypingIndicator dotCount={4} dotSize={10} />
 * <TypingIndicator color="#3B82F6" aria-label="User is typing..." />
 * ```
 */
export function TypingIndicator({
  dotCount = 3,
  duration = 1400,
  dotSize = 8,
  color,
  className,
  'aria-label': ariaLabel,
}: TypingIndicatorProps) {
  // EN: Translation hook / VI: Hook translation
  const t = useTranslations();
  const defaultAriaLabel = ariaLabel || t('chat.typing', { defaultValue: 'AI is typing...' });
  // EN: Generate array of dot indices for rendering / VI: Tạo mảng các chỉ số chấm để render
  const dots = React.useMemo(() => {
    return Array.from({ length: dotCount }, (_, i) => i);
  }, [dotCount]);

  // EN: Calculate animation delay for each dot (staggered) / VI: Tính toán độ trễ animation cho mỗi chấm (lệch nhau)
  const getDelay = (index: number) => {
    // EN: Stagger delay by 200ms per dot / VI: Lệch độ trễ 200ms cho mỗi chấm
    return (index * 200) / duration;
  };

  // EN: Generate inline styles for animation / VI: Tạo inline styles cho animation
  const getDotStyle = (index: number): React.CSSProperties => {
    return {
      width: `${dotSize}px`,
      height: `${dotSize}px`,
      animationDelay: `${getDelay(index)}s`,
      animationDuration: `${duration}ms`,
      backgroundColor: color || 'var(--text-tertiary)', // EN: Default to theme tertiary text color / VI: Mặc định là màu text tertiary của theme
      animationTimingFunction: 'ease-in-out',
      animationIterationCount: 'infinite',
      animationName: 'typing-pulse',
    };
  };

  return (
    <div
      className={cn(
        'flex items-center gap-2',
        'px-4 py-3',
        className
      )}
      role="status"
      aria-label={defaultAriaLabel}
      aria-live="polite"
    >
      {dots.map((index) => (
        <span
          key={index}
          className="typing-dot rounded-full"
          style={getDotStyle(index)}
          aria-hidden="true"
        />
      ))}
    </div>
  );
}
