import { View, Avatar } from "tamagui";
import { useMemo, memo } from "react";
import { StyleSheet } from "react-native";
import { Image as ExpoImage } from 'expo-image';
import { LinearGradient } from 'tamagui/linear-gradient';
import { getLastAvatarUrl, setLastAvatarUrl } from '@/utils/business/avatarCache'
import { useAppStore } from '@/stores';

// UI组件
import CustomText from '@/components/common/CustomText';

// 引入屏幕适配
import { wp } from '@/utils/ui/screenUtils';

/**
 * 聊天模块——群聊默认头像
 * 1:普通群，2:部门群，3:项目群，4:公司群
 */
const AVATAR_SOURCES = {
  1: require("@/assets/images/chat/avatar/groupNormal.png"),
  2: require("@/assets/images/chat/avatar/groupDepartment.png"),
  3: require("@/assets/images/chat/avatar/groupProject.png"),
  4: require("@/assets/images/chat/avatar/groupCompany.png"),
};

// 默认用户头像（网络失败时回退）
const USER_DEFAULT_AVATAR = require("@/assets/images/chat/avatar/user.jpg");

// 移除 TS 接口定义，改为文档注释，仅用于说明 props 结构
/**
 * 自定义头像组件-自定义参数：
 * - mode?: 1 | 2  // 头像模式：1=人；2=群
 * - avatar?: string  // 头像图片地址
 * - groupType?: number  // 群聊类型：1=普通群，2=部门群，3=项目群，4=公司群
 * - userName?: string  // 用户名
 * - customFontSize?: number  // 自定义文字头像字体大小
 * - customTextBgColor?: string  // 自定义文字头像背景颜色
 * - customTextStyle?: 自定义文字头像样式
 * - style?: 透传自定义头像容器样式
 */
const CustomAvatar = memo(function CustomAvatar(props) {
  //获取主色
  const primaryColor = useAppStore(s => s.primary)

  // 为了避免 expo-image 样式类型报错，确保图片宽高为 number
  const sizePx = useMemo(() => {
    return typeof props.size === 'number' ? props.size : wp(48);
  }, [props.size]);

  // 图片头像
  const avatarSource = useMemo(() => {
    const avatarMode = props.mode ?? 1;
    const avatarImg = props.avatar ?? "";
    //网络头像
    if (avatarImg) {
      return { uri: avatarImg };
    }
    //本地头像
    if (!avatarImg && avatarMode === 2) {
      const validGroupType =
        props.groupType &&
          Object.keys(AVATAR_SOURCES).includes(String(props.groupType))
          ? props.groupType
          : 1;
      return AVATAR_SOURCES[validGroupType];
    }
    //不显示图片头像
    return null;
  }, [props.avatar, props.mode, props.groupType]);

  // 判断是否是网络图片
  const isRemoteImage = useMemo(() => {
    return avatarSource && typeof avatarSource === 'object' && avatarSource.uri;
  }, [avatarSource]);

  // 文字头像
  const avatarText = useMemo(() => {
    const userName = props?.userName ?? "";
    return userName?.length > 2 ? userName.slice(-2) : userName;
  }, [props.userName]);

  // 当前远程地址（仅远程图片时有效）
  const currentUri = useMemo(() => {
    return isRemoteImage ? (avatarSource?.uri || null) : null
  }, [isRemoteImage, avatarSource])

  // 读取上次成功加载的 URL（按作用域 + avatarKey），仅远程图且传入 avatarKey 时启用
  const lastUrl = useMemo(() => {
    if (!isRemoteImage || !props?.avatarKey) return null
    return getLastAvatarUrl(props.avatarKey)
  }, [isRemoteImage, props?.avatarKey])

  return (
    <View
      style={[
        defaultStyle.container,
        { width: sizePx, height: sizePx },
        props.style,
      ]}
    >
      {avatarSource && (
        <Avatar
          circular={props.circular ?? true}
          size={sizePx}
          style={{ overflow: 'hidden', borderRadius: props.circular === false ? 0 : sizePx / 2 }}
          {...props}
        >
          {isRemoteImage ? (
            // 网络图片：根据缓存动态占位与过渡（命中则直接显示，无过渡）
            <ExpoImage
              source={{ uri: avatarSource.uri }}
              placeholder={(lastUrl && currentUri && lastUrl === currentUri) ? null : (lastUrl ? { uri: lastUrl } : USER_DEFAULT_AVATAR)}
              placeholderContentFit="cover"
              contentFit="cover"
              transition={(lastUrl && currentUri && lastUrl === currentUri) ? 0 : 300}
              cachePolicy="disk"
              priority="normal"
              recyclingKey={avatarSource.uri}
              style={StyleSheet.absoluteFillObject}
              onLoad={() => {
                try {
                  if (currentUri && props?.avatarKey) {
                    setLastAvatarUrl(props.avatarKey, currentUri)
                  }
                } catch {}
              }}
              onError={(error) => {
                // 开发环境下输出错误信息，便于调试
                if (__DEV__) {
                  console.log('头像加载失败:', avatarSource.uri, error);
                }
              }}
            />
          ) : (
            // 本地图片（群聊默认头像）：直接显示
            <Avatar.Image source={avatarSource} />
          )}
        </Avatar>
      )}
      {!avatarSource && avatarText && (
        // 文字头像：保持原有逻辑
        <LinearGradient
          colors={["#E390B8", props.customTextBgColor ?? primaryColor]}
          start={[0, 0]}
          end={[1, 1]}
          style={[
            defaultStyle.avatarTextBox,
            {
              width: sizePx,
              height: sizePx,
              borderRadius: props.circular === false ? 0 : sizePx / 2,
            },
          ]}
        >
          <CustomText
            style={[
              props?.customTextStyle ?? defaultStyle.avatarText,
              {
                fontSize: props.customFontSize ?? wp(16),
              },
            ]}
          >
            {avatarText}
          </CustomText>
        </LinearGradient>
      )}
    </View>
  );
});

export default CustomAvatar;

const defaultStyle = StyleSheet.create({
  container: {},
  avatarTextBox: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
  avatarText: {
    fontFamily: 'Bold',
    color: "#fff",
  },
});
