import { View, Text, ScrollView, Image, Pressable, Dimensions } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router } from 'expo-router';
import { useAuth } from '../../context/AuthProvider';
import {
    AccountSettingIconSvg,
    ActivitySvg,
    MyCarSvg,
    QuestionMarkIconSvg,
    SettingIconSvg,
    WalletSvg
} from '../global/SVG';

const AccountMainPageComponent = () => {
    const { user, logout } = useAuth();
    const screenWidth = Dimensions.get('window').width;
    const imageWidth = screenWidth * 0.9; // 90% of screen width
    const aspectRatio = 210 / 375;
    return (
        <SafeAreaView className="flex-1 bg-white" edges={['top', 'left', 'right']}>
            <ScrollView className="flex-1 mx-[5%]" showsVerticalScrollIndicator={false}>
                <View style={{ marginTop: 25 }}>
                    <Text style={{ fontSize: 48 }}>{user?.nickname}</Text>
                </View>

                <View className="flex-row space-x-4 mt-4">
                    <Pressable
                        className="h-[114px] w-[30%] bg-[#e7f2f8] items-center justify-center rounded-xl"
                        onPress={() => router.push('/(account)/(wallet)/walletPage')}
                    >
                        <WalletSvg />
                        <Text>錢包</Text>
                    </Pressable>

                    <Pressable
                        className="h-[114px] w-[30%] bg-[#e7f2f8] items-center justify-center rounded-xl"
                        onPress={() => router.replace('myVehiclePage')}
                    >
                        <MyCarSvg />
                        <Text>我的車輛</Text>
                    </Pressable>
                    <Pressable
                        className="h-[114px] w-[30%] bg-[#e7f2f8] items-center justify-center rounded-xl"
                        onPress={() => router.push('/activityRecordPage')}
                    >
                        <ActivitySvg />
                        <Text>活動記錄</Text>
                    </Pressable>
                </View>
                <View className="my-4  ">
                    <Pressable onPress={() => router.push('uberVerificationPage')}>
                        <Image
                            resizeMode="contain"
                            source={require('../../assets/uber208.png')}
                            style={{ width: imageWidth, height: imageWidth * aspectRatio, alignSelf: 'center' }}
                        />
                    </Pressable>
                </View>
                <View className="w-full h-1 bg-[#DBE4E8]" />
                <View>
                    <View className="py-4">
                        <Pressable
                            onPress={() => router.push('/accountSettingPage')}
                            className="flex-row items-center"
                            hitSlop={{
                                top: 10,
                                bottom: 10,
                                left: 10,
                                right: 10
                            }}
                        >
                            <AccountSettingIconSvg />
                            <Text className="text-lg pl-2">帳戶管理</Text>
                        </Pressable>
                    </View>

                    <View className="h-0.5  bg-[#f4f4f4]" />

                    <View className=" py-4 ">
                        <Pressable
                            onPress={() => router.push('/assistancePage')}
                            className="flex-row items-center"
                            hitSlop={{
                                top: 10,
                                bottom: 10,
                                left: 10,
                                right: 10
                            }}
                        >
                            <QuestionMarkIconSvg />
                            <Text className="text-lg pl-2">排除解難</Text>
                        </Pressable>
                    </View>

                    <View className="h-0.5  bg-[#f4f4f4]" />
                    <View className="py-4">
                        <Pressable
                            onPress={logout}
                            className="flex-row items-center"
                            hitSlop={{
                                top: 10,
                                bottom: 10,
                                left: 10,
                                right: 10
                            }}
                        >
                            <SettingIconSvg />
                            <Text className="text-lg pl-2">登出</Text>
                        </Pressable>
                    </View>

                    <View className="h-0.5 bg-[#f4f4f4]" />
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default AccountMainPageComponent;