import Taro from "@tarojs/taro";
import { View, Image } from "@tarojs/components";
import { useState, useEffect, useRef } from "react";
import { queryTemperatureByOrderId, setTemperature } from '../../../../api/begin-route';

type Props = {
    tripStatus: number;
    orderId?: string;
};

export default function TemperatureControl({ tripStatus, orderId }: Props) {
    const [tempStatus, setTempStatus] = useState<number | null>(); // 当前显示温度
    const tempTimerRef = useRef<any>(null); // 温度设置防抖定时器
    const lastConfirmedTempRef = useRef<number>(); // 最近一次设置成功温度

    const TEMP_MIN = 22;
    const TEMP_MAX = 28;

    // 状态 4 时拉取车辆当前温度
    useEffect(() => {
        if (tripStatus === 4) {
            const targetOrderId = orderId || Taro.getStorageSync('orderId');
            if (targetOrderId) {
                queryTemperatureByOrderId({ orderId: targetOrderId }).then((res: any) => {
                    const currentTemperature = Number(res);
                    if (!Number.isNaN(currentTemperature)) {
                        setTempStatus(currentTemperature);
                        lastConfirmedTempRef.current = currentTemperature;
                    }
                }).catch(() => { });
            }
        }
    }, [tripStatus, orderId]);

    // 初始化确认温度并在卸载时清理定时器
    useEffect(() => {
        lastConfirmedTempRef.current = tempStatus as number;
        return () => {
            if (tempTimerRef.current) {
                clearTimeout(tempTimerRef.current);
            }
        };
    }, []);

    // 防抖提交目标温度到后端
    const scheduleTemperatureUpdate = (targetTemperature: number) => {
        if (tempTimerRef.current) {
            clearTimeout(tempTimerRef.current);
        }
        tempTimerRef.current = setTimeout(() => {
            const targetOrderId = orderId || Taro.getStorageSync('orderId');
            if (!targetOrderId) {
                return;
            }
            setTemperature({
                orderId: targetOrderId,
                targetTemperature
            }).then((res: any) => {
                if (res) {
                    lastConfirmedTempRef.current = targetTemperature;
                    Taro.showToast({
                        title: '设置成功',
                        icon: 'none'
                    });
                } else {
                    setTempStatus(lastConfirmedTempRef.current);
                    Taro.showToast({
                        title: res?.msg || '网络连接不稳定，设置失败，请重试',
                        icon: 'none'
                    });
                }
            }).catch(() => {
                setTempStatus(lastConfirmedTempRef.current);
                Taro.showToast({
                    title: '网络连接不稳定，设置失败，请重试',
                    icon: 'none'
                });
            });
        }, 5000);
    };

    // 处理温度增减并做边界校验
    const handleTempChange = (delta: number) => {
        setTempStatus((prev) => {
            if (typeof prev !== 'number') {
                return prev;
            }
            const next = prev + delta;
            if (delta < 0 && next < TEMP_MIN) {
                Taro.showToast({ title: `温度最低${TEMP_MIN}℃`, icon: 'none' });
                return prev;
            }
            if (delta > 0 && next > TEMP_MAX) {
                Taro.showToast({ title: `温度最高${TEMP_MAX}℃`, icon: 'none' });
                return prev;
            }
            scheduleTemperatureUpdate(next);
            return next;
        });
    };

    if (tripStatus !== 4 || typeof tempStatus !== 'number') {
        return null;
    }

    return (
        <View>
            <View className="car-card-line"></View>
            <View className="car-card-temp">
                <View className="car-card-temp-title">当前温度</View>
                <View className="car-card-temp-content">
                    <Image
                        className="car-card-temp-content-img"
                        src={require('../../../../assets/T-down.png')}
                        onClick={() => handleTempChange(-0.5)}
                    />
                    <View className="car-card-temp-content-text">{tempStatus.toFixed(1)}℃</View>
                    <Image
                        className="car-card-temp-content-img"
                        src={require('../../../../assets/T-up.png')}
                        onClick={() => handleTempChange(0.5)}
                    />
                </View>
            </View>
        </View>
    );
}