// component/chargingPage/futureReservationPageComponent.tsx
import { View, Text, ScrollView, StyleSheet, ActivityIndicator } from 'react-native';
import { useEffect, useState } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import NormalButton from '../global/normal_button';
import { router } from 'expo-router';
import { convertToHKTime } from '../../util/lib';
import { useTranslation } from '../../util/hooks/useTranslation';

const FutureReservationPageComponent = ({ data }) => {
    const { t } = useTranslation();
    const [loading, setLoading] = useState(false);
    const [stationInfo, setStationInfo] = useState(null);
    const plan = data.book_time === data.end_time ? t('future_reservation.full_charge') : t('future_reservation.per_kwh');
    const kwh = data.total_power === null ? '' : `${data.total_power} kWh`; 
    ///如果充電停機 應該show 充電停機 not 80 kWh

    useEffect(() => {
        if (data && data.connector && data.connector.EquipmentID && data.connector.EquipmentID.StationID) {
            try {
                const parsedSnapshot = JSON.parse(data.connector.EquipmentID.StationID.snapshot);
                setStationInfo(parsedSnapshot);
            } catch (error) {
                console.error('Error parsing station snapshot:', error);
            }
        }
    }, [data]);

    return (
        <SafeAreaView edges={['top', 'left', 'right']} className="flex-1 bg-white">
            <ScrollView className="flex-1 mt-8 " nestedScrollEnabled={true} showsVerticalScrollIndicator={false}>
                <View className="mx-[5%]">
                    <View className="">
                        <Text className="text-5xl pt-1 pb-6">{t('future_reservation.no_charging_vehicle')}</Text>

                        {loading ? (
                            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                                <ActivityIndicator color="#34657b" />
                            </View>
                        ) : (
                            <>
                                <Text className="text-2xl pb-2 ">{t('future_reservation.next_reservation')}</Text>
                                <View className="border-gray-200 border rounded-md">
                                    <View className="flex-1 mt-4 mx-[5%] ">
                                        <View className="flex-1 flex-row items-center pb-3">
                                            <View className="flex-1 flex-column">
                                                <Text style={styles.grayColor} className="text-base">
                                                    {t('future_reservation.date')}
                                                </Text>
                                                <Text style={styles.greenColor} className="text-4xl text-center  pt-2">
                                                    {convertToHKTime(data.book_time)
                                                        .hkDate.split('/')
                                                        .reverse()
                                                        .slice(1)
                                                        .join(t('future_reservation.month'))}
                                                </Text>
                                            </View>

                                            <View className="flex-1 flex-column">
                                                <Text style={styles.grayColor} className="text-base pl-7">
                                                    {t('future_reservation.time')}
                                                </Text>
                                                <Text style={styles.greenColor} className="text-4xl text-center pt-2">
                                                    {convertToHKTime(data.book_time).hkTime.slice(0, 5)}
                                                </Text>
                                            </View>
                                        </View>
                                        <View className="flex-1 flex-column justify-center space-y-1 pb-3">
                                            <Text style={styles.grayColor} className="text-base">
                                                {t('future_reservation.charging_location')}
                                            </Text>
                                            <Text style={styles.greenColor} className="text-2xl ">
                                                {stationInfo?.StationName || 'N/A'}
                                            </Text>
                                            <Text style={styles.grayColor} className="text-sm">
                                                {stationInfo?.Address || 'N/A'}
                                            </Text>
                                        </View>
                                        <View className="flex-1 flex-row  pb-3  ">
                                            <View className="flex-column flex-1">
                                                <Text style={styles.grayColor} className="text-base">
                                                    {t('future_reservation.plan')}
                                                </Text>

                                                <Text style={styles.greenColor} className="text-lg">
                                                    {plan}
                                                </Text>
                                                <Text style={styles.grayColor} className="text-sm">
                                                    {kwh}
                                                </Text>
                                            </View>
                                            {/* <View className="flex-column flex-1">
                                                <Text style={styles.grayColor} className="text-base">
                                                    車輛
                                                </Text>
                                                <Text style={styles.greenColor} className="text-lg">
                                                    {data.car.car_brand.name}
                                                </Text>
                                                <Text style={styles.greenColor} className="text-lg">
                                                    {data.car.car_type.name}
                                                </Text>
                                            </View> */}
                                        </View>
                                    </View>
                                </View>
                                <View className="pt-6">
                                    <NormalButton
                                        title={<Text className="text-white text-lg">{t('future_reservation.return_home')}</Text>}
                                        onPress={() => router.push('mainPage')}
                                    />
                                </View>
                            </>
                        )}
                
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};
const styles = StyleSheet.create({
    grayColor: {
        color: '#888888'
    },
    greenColor: {
        color: '#02677D'
    }
});

export default FutureReservationPageComponent;