import { View, Text, Image, Pressable, Dimensions, ScrollView } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router } from 'expo-router';
import { CrossLogoSvg } from '../global/SVG';
import React from 'react';
import NormalButton from '../global/normal_button';

const UberVerificationPageComponent = () => {
    const screenWidth = Dimensions.get('window').width;
    const imageWidth = screenWidth;
    const aspectRatio = 210 / 375;
    const couponData = [
        {
            number: '1',
            title: 'Uber 獨家充電優惠',
            description: '我們提供Uber司機獨家充電優惠，驗證後即享折扣，讓您更省錢充電。'
        },
        {
            number: '2',
            title: '快速驗證',
            description: '只需通過簡單步驟，輕鬆開啟專屬帳戶訪問。'
        },
        {
            number: '3',
            title: '輕鬆合作拍檔',
            description: '成為Crazy Charge合作拍檔！為Uber司機提供便利充電服務，獲得豐厚節省和獎勵。'
        }
    ];

    const CouponComponent = () => {
        return (
            <View style={{ borderWidth: 1 }} className="border-[#EEEEEE] rounded-2xl my-[5%] mx-[5%]">
                <View className="mx-[5%] my-[3%]">
                    {couponData.map((item, index) => (
                        <React.Fragment key={index}>
                            <View className="flex-row items-center">
                                <Text className="text-5xl text-[#02677d] text-center w-10 mr-4">{item.number}</Text>
                                <View className="flex-1">
                                    <Text className="text-lg text-[#222222]">{item.title}</Text>
                                    <Text className="text-base text-[#666666] mt-1">{item.description}</Text>
                                </View>
                            </View>
                            {index < couponData.length - 1 && <View className="h-0.5 w-full my-4 bg-[#EEEEEE]" />}
                        </React.Fragment>
                    ))}
                </View>
            </View>
        );
    };
    const screenHeight = Dimensions.get('window').height;
    return (
        <SafeAreaView className="flex-1 bg-white" edges={['top', 'right', 'left']}>
            <ScrollView className="flex-1">
                <View
                    style={{
                        marginTop: 25,
                        marginLeft: '5%',
                        marginBottom: '5%'
                    }}
                >
                    <Pressable
                        onPress={() => {
                            if (router.canGoBack()) {
                                router.back();
                            } else {
                                router.replace('/accountMainPage');
                            }
                        }}
                    >
                        <CrossLogoSvg />
                    </Pressable>
                </View>
                <View>
                    <Image
                        source={require('../../assets/clearUberFinishCard.png')}
                        resizeMode="contain"
                        style={{ width: imageWidth, height: imageWidth * aspectRatio, alignSelf: 'center' }}
                    />
                </View>
                <CouponComponent />
                <View className="mx-[5%]">
                    <NormalButton
                        title={<Text className="text-white text-xl">下一步</Text>}
                        onPress={() => router.push('uberUploadPage')}
                    />
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default UberVerificationPageComponent;