import { View, Text, ScrollView, Image, Pressable } 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();

    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={() => console.log('activity records pressed')}
                    >
                        <ActivitySvg />
                        <Text>活動記錄</Text>
                    </Pressable>
                </View>
                <View className="my-4">
                    <Pressable
                        onPress={() => router.push('uberVerificationPage')}
                    >
                        <Image
                            source={require('../../assets/uberDiscountCard.png')}
                            resizeMode="contain"
                            style={{ width: '100%' }}
                        />
                    </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="flex-row items-center py-4 ">
                        <SettingIconSvg />
                        <Text className="text-lg pl-2">設定</Text>
                    </View>
                    <View className="h-0.5  bg-[#f4f4f4]" />

                    <View className="flex-row items-center py-4 ">
                        <QuestionMarkIconSvg />
                        <Text className="text-lg pl-2">排除解難</Text>
                    </View>
                    <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;