// component/chargingPage/chargingHurryUpPageComponent.tsx
import { View, Text, ScrollView, StyleSheet, ActivityIndicator, Alert, Modal } from 'react-native';
import React, { useEffect, useState } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import NormalButton from '../global/normal_button';
import { router } from 'expo-router';
import { chargeStationService } from '../../service/chargeStationService';
import { format, addHours } from 'date-fns';
import { toZonedTime } from 'date-fns-tz';
import { convertToHKTime } from '../../util/lib';
import { useTranslation } from '../../util/hooks/useTranslation';

const ChargingHurryUpPageComponent = ({ data = {} }) => {
    const { t } = useTranslation();
    const reservationData = Array.isArray(data) ? data[0] : data;

    const [stationInfo, setStationInfo] = useState(null);
    const [loading, setLoading] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const plan = reservationData.book_time === reservationData.end_time ? t('charging_hurry_up.full_charge') : t('charging_hurry_up.per_kwh');
    const kwh = reservationData.total_power === null ? '' : `${reservationData.total_power} kWh`;

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

    const startPayload = {
        StartChargeSeq: reservationData.format_order_id,
        ConnectorID: reservationData.connector.ConnectorID,
        StopBy: 2,
        StopValue: 120,
        StartBalance: 400.99
    };

    const handleStartCharge = async () => {
        setIsLoading(true);
        try {
            const response = await chargeStationService.startCharging(startPayload);
            if (response) {
                setIsLoading(false);
                Alert.alert(t('charging_hurry_up.start_success_title'), t('charging_hurry_up.start_success_message'), [{ text: t('common.ok'), onPress: () => {} }]);
                setTimeout(() => {
                    router.push('chargingPage');
                }, 15000);
            } else {
                setIsLoading(false);
                Alert.alert(t('charging_hurry_up.start_failed'));
            }
        } catch (error) {
            setIsLoading(false);
            Alert.alert(t('common.error'), t('charging_hurry_up.try_again_later'));
        }
    };

    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('charging_hurry_up.reservation_started')}</Text>
                        <Text className="text-base">{t('charging_hurry_up.arrive_and_start')}</Text>
                        {loading ? (
                            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                                <ActivityIndicator color="#34657b" />
                            </View>
                        ) : (
                            <>
                                <Text className="text-2xl py-4 ">{t('charging_hurry_up.your_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('charging_hurry_up.date')}
                                                </Text>
                                                <Text style={styles.greenColor} className="text-4xl text-center  pt-2">
                                                    {convertToHKTime(reservationData.book_time)
                                                        .hkDate.split('/')
                                                        .reverse()
                                                        .slice(1)
                                                        .join(t('charging_hurry_up.month'))}
                                                </Text>
                                            </View>
                                            <View className="flex-1 flex-column">
                                                <Text style={styles.grayColor} className="text-base pl-7">
                                                    {t('charging_hurry_up.time')}
                                                </Text>
                                                <Text style={styles.greenColor} className="text-4xl text-center pt-2">
                                                    {convertToHKTime(reservationData.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('charging_hurry_up.charging_location')}
                                            </Text>
                                            {loading ? (
                                                <ActivityIndicator size="small" />
                                            ) : (
                                                <>
                                                    <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('charging_hurry_up.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">
                                                    {t('charging_hurry_up.vehicle')}
                                                </Text>
                                                <Text style={styles.greenColor} className="text-lg">
                                                    {reservationData.car.car_brand.name}
                                                </Text>
                                                <Text style={styles.greenColor} className="text-lg">
                                                    {reservationData.car.car_type.name}
                                                </Text>
                                            </View>
                                        </View>
                                    </View>
                                </View>
                                <View className="pt-6">
                                    <NormalButton
                                        title={<Text className="text-white text-lg">{t('charging_hurry_up.start_charging')}</Text>}
                                        onPress={() => handleStartCharge()}
                                    />
                                </View>
                                <View className="pt-6">
                                    <NormalButton
                                        title={<Text className="text-white text-lg">{t('charging_hurry_up.return_home')}</Text>}
                                        onPress={() => router.push('mainPage')}
                                    />
                                </View>
                            </>
                        )}
                    </View>
                </View>
            </ScrollView>
            <Modal transparent={true} animationType="fade" visible={isLoading} onRequestClose={() => {}}>
                <View
                    style={{
                        flex: 1,
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: 'rgba(0,0,0,0.5)'
                    }}
                >
                    <View style={{ backgroundColor: 'white', padding: 20, borderRadius: 10, alignItems: 'center' }}>
                        <ActivityIndicator />
                        <Text style={{ marginTop: 10 }}>{t('charging_hurry_up.starting_charging')}</Text>
                    </View>
                </View>
            </Modal>
        </SafeAreaView>
    );
};
const styles = StyleSheet.create({
    grayColor: {
        color: '#888888'
    },
    greenColor: {
        color: '#02677D'
    }
});

export default ChargingHurryUpPageComponent;