import UserSvg from '@/assets/icons/svg/ataver.svg';
import SettingSvg from '@/assets/icons/svg/setting.svg';
import StarSvg from '@/assets/icons/svg/star.svg';
import { ThemedText } from '@/components/ThemedText';
import { UserInfoDetails } from '@/types/user';
import { useRouter } from 'expo-router';
import { useState } from 'react';
import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
import CopyButton from '../copy';

export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
    // 添加状态来跟踪图片加载状态
    const [imageError, setImageError] = useState(false);
    const router = useRouter();

    return (
        <View style={styles.container}>
            {/* 头像 */}
            <View className='w-auto'>
                {userInfo?.user_info?.avatar_file_url && !imageError ? (
                    <Image
                        source={{ uri: userInfo.user_info.avatar_file_url }}
                        style={{ width: 70, height: 70, borderRadius: 40 }}
                        onError={() => {
                            setImageError(true);
                        }}
                    />
                ) : (
                    <UserSvg width={70} height={70} />
                )}
            </View>
            {/* 用户名 */}
            <View className='flex flex-col w-[60%]'>
                <View className='flex flex-row items-center justify-between w-full'>
                    <View className='flex flex-row items-center gap-2 w-full justify-between'>
                        <View style={{ width: "100%", flexDirection: "row", alignItems: "center", gap: 2 }}>
                            <ThemedText
                                style={{ maxWidth: "90%", lineHeight: 30 }}
                                weight='bold'
                                color='textSecondary'
                                size='3xl'
                                numberOfLines={1}
                                ellipsizeMode="tail"

                            >
                                {userInfo?.user_info?.nickname}
                            </ThemedText>
                            {
                                userInfo?.membership_level && (
                                    <Image
                                        source={require('@/assets/images/png/owner/proIcon.png')}
                                        style={{ width: 24, height: 24 }}
                                    />
                                )
                            }
                        </View>
                    </View>
                </View>
                <View className='flex flex-row items-center justify-between w-full'>
                    <View style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 2, maxWidth: '100%' }}>
                        <ThemedText
                            style={{
                                color: '#AC7E35',
                                fontSize: 12,
                                fontWeight: '600',
                                flexShrink: 1,
                                flexGrow: 0,
                            }}
                            type="inter"
                            numberOfLines={1}
                            ellipsizeMode="tail"
                        >
                            User ID：{userInfo?.user_info?.user_id}
                        </ThemedText>
                        <CopyButton textToCopy={userInfo?.user_info?.user_id || ""} />
                    </View>
                </View>
            </View>
            <View style={{ flexDirection: "column", alignItems: "flex-end", gap: 4 }}>
                <View style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    gap: 8,
                    borderWidth: 1,
                    borderColor: '#FFB645',
                    paddingHorizontal: 8,
                    paddingVertical: 4,
                    borderRadius: 16,
                }}>
                    <StarSvg />
                    <ThemedText
                        style={{
                            color: '#4C320C',
                            fontSize: 14,
                            fontWeight: '700',
                            maxWidth: 40,
                            lineHeight: 20
                        }}
                        type="inter"
                        numberOfLines={1}
                        ellipsizeMode="tail"
                    >
                        {userInfo?.remain_points}
                    </ThemedText>
                </View>
                <TouchableOpacity
                    onPress={() => {
                        router.push('/setting');
                    }}
                    activeOpacity={0.7}
                    hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
                    style={styles.text}
                >
                    <SettingSvg />
                </TouchableOpacity>
            </View>
        </View >
    );
}

const styles = StyleSheet.create({
    container: {
        flexDirection: "row",
        alignItems: "flex-end",
        justifyContent: "space-between",
        width: "100%",
    },
    text: {
        fontSize: 12,
        fontWeight: '700',
        color: '#AC7E35',
        borderColor: '#FFD18A',
        borderWidth: 1,
        borderRadius: 20,
        padding: 4,
        textAlign: "center",
        alignItems: "center",
        paddingVertical: 6,
        paddingHorizontal: 12
    }
});