import { View, Text, ScrollView, Image, Switch, Pressable, Dimensions } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router } from 'expo-router';
import { useAuth } from '../../context/AuthProvider';

import { useColorScheme } from 'nativewind';
import { useState, useEffect } from 'react';
import {
    AccountSettingIconSvg,
    ActivitySvg,
    MyCarSvg,
    DarkModeSvg,
    QuestionMarkIconSvg,
    SettingIconSvg,
    VipCodeIcoonSvg,
    WalletSvg
} from '../global/SVG';

const AccountMainPageComponent = () => {
    const { user, logout } = useAuth();

    const { colorScheme, toggleColorScheme } = useColorScheme();
    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 dark:bg-[#05181C]" edges={['top', 'left', 'right']}>
            <ScrollView className="flex-1 mx-[5%]" showsVerticalScrollIndicator={false}>
                <View style={{ marginTop: 25 }}>
                    <Text style={{ fontSize: 48 }} className="text-black dark:text-white">
                        {user?.nickname}
                    </Text>
                </View>

                <View className="flex-row space-x-4 mt-4 ">
                    <Pressable
                        className="h-[114px] w-[30%] bg-[#e7f2f8] dark:bg-[#253336] items-center justify-center rounded-xl"
                        onPress={() => router.push('/(account)/(wallet)/walletPage')}
                    >
                        <WalletSvg isDark={colorScheme == 'dark'} />
                        <Text className="text-black dark:text-[#36DFFF]">錢包</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] dark:bg-[#253336] items-center justify-center rounded-xl"
                        onPress={() => router.replace('vipQrPage')}
                    >
                        <VipCodeIcoonSvg isDark={colorScheme == 'dark'} />
                        <Text className="text-black dark:text-[#36DFFF]">VIP Code</Text>
                    </Pressable>

                    <Pressable
                        className="h-[114px] w-[30%] bg-[#e7f2f8] dark:bg-[#253336] items-center justify-center rounded-xl"
                        onPress={() => router.push('/activityRecordPage')}
                    >
                        <ActivitySvg isDark={colorScheme == 'dark'} />
                        <Text className="text-black dark:text-[#36DFFF]">充電記錄</Text>
                    </Pressable>
                </View>
                <View className="my-4  ">
                    <Pressable onPress={() => router.push('uberVerificationPage')}>
                        <Image
                            resizeMode="contain"
                            source={require('../../assets/uber20008.png')}
                            style={{ width: imageWidth, height: imageWidth * aspectRatio, alignSelf: 'center' }}
                        />
                    </Pressable>
                </View>
                <View className="w-full h-1 bg-[#DBE4E8] dark:bg-[#253336]" />
                <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 isDark={colorScheme == 'dark'} />
                            <Text className="text-lg pl-2 text-black dark:text-white">帳戶管理</Text>
                        </Pressable>
                    </View>

                    <View className="h-0.5  bg-[#f4f4f4] dark:bg-[#5E6C70]" />
                    <View className=" py-4 ">
                        <Pressable
                            onPress={() => router.push('/assistancePage')}
                            className="flex-row items-center"
                            hitSlop={{
                                top: 10,
                                bottom: 10,
                                left: 10,
                                right: 10
                            }}
                        >
                            <QuestionMarkIconSvg isDark={colorScheme == 'dark'} />
                            <Text className="text-lg pl-2 text-black dark:text-white">排除解難</Text>
                        </Pressable>
                    </View>
                    {/* <View className="h-0.5  bg-[#f4f4f4] dark:bg-[#5E6C70]" />
                    <View className=" py-4 ">
                        <Pressable
                            // onPress={() => router.push('/assistancePage')}
                            className="flex-row items-center"
                            hitSlop={{
                                top: 10,
                                bottom: 10,
                                left: 10,
                                right: 10
                            }}
                        >
                            <View className="flex flex-row justify-between w-full">
                                <View className="flex flex-row items-center">
                                    <DarkModeSvg isDark={colorScheme == 'dark'} />
                                    <Text className="text-lg pl-2 text-black dark:text-white">深色模式</Text>
                                </View>
                                <Switch value={colorScheme == 'dark'} onChange={toggleColorScheme} />
                            </View>
                        </Pressable>
                    </View> */}
                    <View className="h-0.5  bg-[#f4f4f4] dark:bg-[#5E6C70]" />
                    <View className="py-4">
                        <Pressable
                            onPress={logout}
                            className="flex-row items-center"
                            hitSlop={{
                                top: 10,
                                bottom: 10,
                                left: 10,
                                right: 10
                            }}
                        >
                            <SettingIconSvg isDark={colorScheme == 'dark'} />
                            <Text className="text-lg pl-2 text-black dark:text-white">登出</Text>
                        </Pressable>
                    </View>
                    <View className="h-0.5  bg-[#f4f4f4] dark:bg-[#5E6C70]" />
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default AccountMainPageComponent;