/**
 * Avatar 头像组件
 * 支持图片URL、本地图片、首字母显示、在线状态徽章
 * 使用 expo-image 实现内存+磁盘双级缓存，头像秒加载
 */

import React, { useMemo } from 'react';
import {
  View,
  TouchableOpacity,
  StyleSheet,
  ViewStyle,
} from 'react-native';
import { Image as ExpoImage } from 'expo-image';
import { borderRadius, useAppColors, type AppColors } from '../../theme';
import Text from './Text';

type AvatarSource = string | { uri: string } | number | null;

interface AvatarProps {
  source?: AvatarSource;
  size?: number; // 默认40
  name?: string; // 用于显示首字母
  onPress?: () => void;
  showBadge?: boolean;
  badgeColor?: string;
  style?: ViewStyle;
}

function createAvatarStyles(colors: AppColors) {
  return StyleSheet.create({
    container: {
      position: 'relative',
    },
    image: {
      backgroundColor: colors.background.disabled,
    },
    placeholder: {
      backgroundColor: colors.primary.main,
      justifyContent: 'center',
      alignItems: 'center',
    },
    badge: {
      position: 'absolute',
      borderWidth: 2,
      borderColor: colors.background.paper,
    },
  });
}

const Avatar: React.FC<AvatarProps> = ({
  source,
  size = 40,
  name,
  onPress,
  showBadge = false,
  badgeColor,
  style,
}) => {
  const colors = useAppColors();
  const styles = useMemo(() => createAvatarStyles(colors), [colors]);
  const resolvedBadgeColor = badgeColor ?? colors.success.main;

  const getInitial = (): string => {
    if (!name) return '?';
    const firstChar = name.charAt(0).toUpperCase();
    if (/[\u4e00-\u9fa5]/.test(firstChar)) {
      return firstChar;
    }
    return firstChar;
  };

  const renderAvatarContent = () => {
    if (source) {
      const imageSource =
        typeof source === 'string' ? { uri: source } : source;

      return (
        <ExpoImage
          source={imageSource}
          style={[
            styles.image,
            {
              width: size,
              height: size,
              borderRadius: size / 2,
            },
          ]}
          contentFit="cover"
          cachePolicy="memory"
          transition={150}
        />
      );
    }

    const fontSize = size / 2;
    return (
      <View
        style={[
          styles.placeholder,
          {
            width: size,
            height: size,
            borderRadius: size / 2,
          },
        ]}
      >
        <Text color={colors.text.inverse} style={{ fontSize, lineHeight: fontSize * 1.2 }}>
          {getInitial()}
        </Text>
      </View>
    );
  };

  const avatarContainer = (
    <View style={[styles.container, style]}>
      {renderAvatarContent()}
      {showBadge && (
        <View
          style={[
            styles.badge,
            {
              backgroundColor: resolvedBadgeColor,
              width: size * 0.3,
              height: size * 0.3,
              borderRadius: (size * 0.3) / 2,
              right: 0,
              bottom: 0,
            },
          ]}
        />
      )}
    </View>
  );

  if (onPress) {
    return (
      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
        {avatarContainer}
      </TouchableOpacity>
    );
  }

  return avatarContainer;
};

export default Avatar;
