crazycharge-app/component/resultDetailPage/resultDetailPageComponent.tsx

import {
    View,
    Text,
    ScrollView,
    Image,
    useWindowDimensions,
    StyleSheet,
    Pressable,
    Platform,
    Linking,
    ActivityIndicator,
    Alert
} from 'react-native';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { SceneMap, TabBar, TabView } from 'react-native-tab-view';
import NormalButton from '../global/normal_button';
import { router, useFocusEffect, useLocalSearchParams } from 'expo-router';
import { CheckMarkLogoSvg, DirectionLogoSvg, PreviousPageSvg } from '../global/SVG';
import { SafeAreaView } from 'react-native-safe-area-context';
import { chargeStationService } from '../../service/chargeStationService';
import * as Location from 'expo-location';
import { ChargingDetails, Remark, PriceWeek, Special } from '../../service/type/chargeStationType';
import { useTranslation } from '../../util/hooks/useTranslation';

interface ChargingStationTabViewProps {
    titles: string[];
    pricemodel_id: string;
}
interface ChargingPeriod{
    event_name: string;
    price: number;
    from: string;
    to: string;
}
const ChargingStationTabView: React.FC<ChargingStationTabViewProps> = ({ titles, pricemodel_id }) => {
    const layout = useWindowDimensions();
    const [list, setList] = useState<ChargingPeriod []>([])
    const [strWeek, setStrWeek] = useState<string>('')
    const { t } = useTranslation();

    // 添加AM/PM标识但保持24小时制
    const addPeriodToTime = (timeString: string): string => {
        // 假设输入格式为 HH.mm 或 HH:mm
        const [hours] = timeString.split(/[.:]/).map(Number);
        
        if (isNaN(hours)) return timeString;
        
        const period = hours >= 12 ? 'PM' : 'AM';
        
        return `${timeString}${period}`;
    };
    const fetchElectricityPrice = () => {
        chargeStationService.fetchElectricityPrice(pricemodel_id || 'a').then(res => {
            const date = new Date();
            const str = (date.toLocaleString('en-US', { weekday: 'short' })).toLowerCase();
            setStrWeek(date.toLocaleString('zh', { weekday: 'long' }))
            const newList = [] as ChargingPeriod[]
            res?.forEach((item) => {
                const obj = item[str as keyof PriceWeek]
                newList.push({event_name: item.event_name, price: obj.price, from: addPeriodToTime(obj.from),to: addPeriodToTime(obj.to)})
                setList(newList)
            })
        })
    };
    useEffect(() => { 
        // 初始加载
        fetchElectricityPrice();
        
        // 计算到下一个整点的时间
        const now = new Date();
        const nextHour = new Date(now);
        nextHour.setHours(nextHour.getHours() + 1, 0, 0, 0); // 设置为下一个整点
        const timeToNextHour = nextHour.getTime() - now.getTime();
        
        // 设置第一次定时器，在下一个整点触发
        const firstTimer = setTimeout(() => {
            fetchElectricityPrice();
            
            // 之后每小时执行一次
            const hourlyInterval = setInterval(fetchElectricityPrice, 60 * 60 * 1000);
            
            // 保存interval ID以便清理
            intervalRef.current = hourlyInterval;
        }, timeToNextHour);
        
        // 保存timeout ID以便清理
        timeoutRef.current = firstTimer;
        
        // 清理函数
        return () => {
            clearTimeout(firstTimer);
            if (intervalRef.current) {
                clearInterval(intervalRef.current);
            }
        };
    }, [pricemodel_id]);

    // 使用useRef保存定时器ID
    const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
    const intervalRef = React.useRef<NodeJS.Timeout | null>(null);

    //tab 1
    const FirstRoute = () => (
        <ScrollView style={{ flex: 1, marginHorizontal: '5%' }}>
            <View>
                <View className='w-full flex-row justify-between mt-4'>
                    <Text style={styles.leftLable}>{t('charging.result_detail_page.time_period')}</Text>
                    <Text style={styles.rightLable}>{t('charging.result_detail_page.price_per_kwh')}</Text>
                </View>
                {
                    list.map((item, index) => (
                        <View key={index} className='w-full flex-row justify-between mt-3'>
                            <Text style={styles.leftLable}>{item.from} - {item.to}</Text>
                            <Text style={styles.rightLable}>${item.price}</Text>
                        </View>
                    ))
                }
            </View>
        </ScrollView>
    );

    //tab 2
    const SecondRoute = () => (
        <ScrollView style={{ flex: 1, marginHorizontal: '5%' }}>
            <Text className="text-lg " style={styles.text}></Text>
        </ScrollView>
    );

    const renderScene = SceneMap({
        firstRoute: FirstRoute,
        secondRoute: SecondRoute
    });
    
    const [routes] = React.useState([
        { key: 'firstRoute', title: titles[0] },
        { key: 'secondRoute', title: titles[1] }
    ]);
    
    const [index, setIndex] = React.useState(0);

    const renderTabBar = (props: any) => (
        <TabBar
            {...props}
            indicatorStyle={{
                backgroundColor: '#000000',
                height: 1
            }}
            style={{
                backgroundColor: 'white',
                elevation: 0,
                marginHorizontal: 15,
                borderBottomWidth: 0.5
            }}
        />
    );
    
    return (
        <TabView
            navigationState={{ index, routes }}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={{ width: layout.width }}
            renderTabBar={renderTabBar}
            commonOptions={{
                label: ({ route, focused }) => (
                    <Text
                        style={{
                            color: focused ? '#000000' : '#CCCCCC',
                            fontWeight: focused ? '300' : 'thin',
                            fontSize: 17
                        }}
                    >
                        {route.title}
                    </Text>
                )
            }}
        />
    );
};

const ResultDetailPageComponent = () => {
    const params = useLocalSearchParams();
    const chargeStationID = params.chargeStationID as string;
    const chargeStationName = params.chargeStationName as string;
    const chargeStationAddress = params.chargeStationAddress as string;
    const pricemodel_id = params.pricemodel_id as string;
    const imageSourceProps = params.imageSource;
    const stationLng = params.stationLng as string;
    const stationLat = params.stationLat as string;
    const [isLoading, setIsLoading] = useState(true);
    const [imageSource, setImageSource] = useState();
    const [currentLocation, setCurrentLocation] = useState<Location.LocationObject | null>(null);
    const [price, setPrice] = useState('');
    const [newAvailableConnectors, setNewAvailableConnectors] = useState<any>([]);
    const { t , getCurrentLanguageConfig} = useTranslation();
    const isEn = getCurrentLanguageConfig()?.code === 'en';
    useEffect(() => {
        const imgObj = imageSourceProps? {uri: imageSourceProps} : require('../../assets/dummyStationPicture.png')
        setImageSource(imgObj);
    }, [imageSourceProps])

    useEffect(() => {
        const fetchPrice = async () => {
            try {
                const price = await chargeStationService.fetchChargeStationPrice(chargeStationID);
                setPrice(price);
            } catch (error) {
                console.error('Error fetching price:', error);
            }
        };
        const getCurrentLocation = async () => {
            let { status } = await Location.requestForegroundPermissionsAsync();
            if (status !== 'granted') {
                console.error('Permission to access location was denied');
                return;
            }
            let location = await Location.getLastKnownPositionAsync({});
            setCurrentLocation(location);
        };

        getCurrentLocation();
        fetchPrice();
    }, []);

    useFocusEffect(
        useCallback(() => {
            setIsLoading(true);
            let isMounted = true; // Simple cleanup flag
            const fetchAllConnectors = async () => {
                try {
                    const newAvailableConnectors = await chargeStationService.NewfetchAvailableConnectors(isEn);
                    // Only update state if component is still mounted
                    if (isMounted) {
                        setNewAvailableConnectors(newAvailableConnectors);
                    }
                } catch (error) {
                    console.error('Fetch error:', error);
                }
            };
            fetchAllConnectors();
            setIsLoading(false);
            // Simple cleanup - prevents state updates if component unmounts
            return () => {
                isMounted = false;
            };
        }, [])
    );

    const handleNavigationPress = (StationLat: string, StationLng: string) => {
        console.log('starting navigation press in resultDetail', StationLat, StationLng);
        if (StationLat && StationLng) {
            const label = encodeURIComponent(chargeStationName);
            const googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${StationLat},${StationLng}`;
            // Fallback URL for web browser
            const webUrl = `https://www.google.com/maps/dir/?api=1&destination=${StationLat},${StationLng}`;

            Linking.canOpenURL(googleMapsUrl)
                .then((supported) => {
                    if (supported) {
                        Linking.openURL(googleMapsUrl);
                    } else {
                        Linking.openURL(webUrl).catch((err) => {
                            console.error('An error occurred', err);
                            Alert.alert(
                                t('common.error'),
                                t('charging.result_detail_page.unable_open_maps'),
                                [{ text: t('common.ok') }],
                                { cancelable: false }
                            );
                        });
                    }
                })
                .catch((err) => console.error('An error occurred', err));
        }
    };

    return (
        <SafeAreaView edges={['top', 'left', 'right']} className="flex-1 bg-white">
            <ScrollView className="flex-1 ">
                <View className="relative">
                    <Image
                        source={ imageSource }
                        resizeMode="cover"
                        style={{ flex: 1, width: '100%', height: 300 }}
                    />

                    <View className="absolute top-8 left-7 ">
                        <Pressable
                            onPress={() => {
                                if (router.canGoBack()) {
                                    router.back();
                                } else {
                                    router.replace('./');
                                }
                            }}
                        >
                            <PreviousPageSvg />
                        </Pressable>
                    </View>
                </View>

                <View className="flex-column mx-[5%] mt-[5%]">
                    <View>
                        <Text className="text-3xl ">{chargeStationName}</Text>
                    </View>
                    <View className="flex-row justify-between items-center">
                        <Text className="text-base w-[82%]" style={{ color: '#888888' }}>
                            {chargeStationAddress}
                        </Text>
                        <NormalButton
                            title={
                                <View className="flex-row items-center justify-center text-center space-x-1">
                                    <DirectionLogoSvg />
                                    <Text className="text-base">{t('charging.result_detail_page.route')}</Text>
                                </View>
                            }
                            onPress={() => handleNavigationPress(stationLat, stationLng)}
                            extendedStyle={{
                                backgroundColor: '#E3F2F8',
                                borderRadius: 61,
                                paddingHorizontal: 14,
                                paddingVertical: 6
                            }}
                        />
                    </View>
                    <View className="flex-row space-x-2 items-center pb-4 ">
                        <CheckMarkLogoSvg />
                        <Text>Walk-In</Text>
                        {/* <Text>{distance} </Text> */}
                    </View>

                    <View
                        className="flex-1 flex-row min-h-[20px] border-slate-300 my-6 rounded-2xl"
                        style={{ borderWidth: 1 }}
                    >
                        <View className="flex-1 m-4">
                            <View className="flex-1 flex-row ">
                                <View className=" flex-1 flex-column  ustify-between">
                                    <Text className="text-xl " style={styles.text}>
                                        {t('charging.result_detail_page.charging_fee')}
                                    </Text>

                                    <View className="flex-row items-center space-x-2">
                                        <Text className="text-3xl text-[#02677D]">${price}</Text>
                                        <Text style={styles.text}>{t('charging.result_detail_page.per_kwh')}</Text>
                                    </View>
                                </View>
                                <View className="items-center justify-center">
                                    <View className="w-[1px] h-[60%] bg-[#CCCCCC]" />
                                </View>
                                <View className=" flex-1 pl-4 flex-column  justify-between">
                                    <Text className="text-xl " style={styles.text}>
                                        {t('charging.result_detail_page.available_connectors')}
                                    </Text>

                                    <View className="flex-row items-center space-x-2">
                                        {isLoading ? (
                                            <Text>{t('charging.result_detail_page.loading')}</Text>
                                        ) : (
                                            // <ActivityIndicator />
                                            <Text className="text-3xl text-[#02677D]">
                                                {
                                                    newAvailableConnectors.find(
                                                        (station: any) => station.stationID === chargeStationID
                                                    )?.availableConnectors
                                                }
                                            </Text>
                                        )}
                                    </View>
                                </View>
                            </View>
                        </View>
                    </View>
                </View>

                <View className="min-h-[300px]">
                    <Text className="text-xl pb-2 mx-[5%]" style={styles.text}>
                        {t('charging.result_detail_page.station_info')}
                    </Text>
                    <ChargingStationTabView titles={[t('charging.result_detail_page.pricing_details'), t('charging.result_detail_page.others')]} pricemodel_id={pricemodel_id} />
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default ResultDetailPageComponent;

const styles = StyleSheet.create({
    text: {
        fontWeight: 300,
        color: '#000000'
    },
    leftLable: {
        width: '65%',
        fontSize: 17,
        color:'#000000',
        textAlign: 'center'
    },
    rightLable: {
        fontSize: 17,
        width: '30%',
        textAlign: 'center',
        borderLeftWidth: 1,
        paddingLeft: 0,
    },
});