import Taro from "@tarojs/taro";
import { View, Image } from "@tarojs/components";
import { useState, useEffect } from "react";
import { formatMoney, getTypeLabel, formatTripDistance, formatNumber, formatTripDurationFromSeconds } from '../../../../../utils/Robotaxi-public-method';

type Props = {
    tripStatus: number;
    fareBreakdown: any;
    orderId?: string;
    resetDetailVersion?: number;
    onToggleDetailFade?: (expanded: boolean, hasFare: boolean) => void;
    handlePay?: () => void;
};

export default function FareDetailCard({
    tripStatus,
    fareBreakdown,
    orderId,
    resetDetailVersion,
    onToggleDetailFade,
    handlePay
}: Props) {
    const [showDetail, setShowDetail] = useState(false); // 费用明细展开状态

    // 外部重置版本变化时收起明细
    useEffect(() => {
        if (typeof resetDetailVersion === 'number') {
            setShowDetail(false);
        }
    }, [resetDetailVersion]);

    // 跳转费用说明页
    const toMoneyDetail = () => {
        Taro.navigateTo({
            url: `/robotaxi/pages/expense-description/index?orderId=${orderId}`
        });
    };

    // 切换明细面板并同步地图淡化状态
    const handleToggleDetail = () => {
        const next = !showDetail;
        setShowDetail(next);
        const hasFare = !!fareBreakdown && (
            Number(fareBreakdown?.orderMoney) > 0 ||
            (Array.isArray(fareBreakdown?.start) && fareBreakdown.start.length > 0) ||
            (Array.isArray(fareBreakdown?.mileage) && fareBreakdown.mileage.length > 0) ||
            (Array.isArray(fareBreakdown?.duration) && fareBreakdown.duration.length > 0) ||
            (Array.isArray(fareBreakdown?.longDistance) && fareBreakdown.longDistance.length > 0) ||
            Number(fareBreakdown?.couponMoney) > 0 ||
            Number(fareBreakdown?.redPacketMoney) > 0
        );
        if (typeof onToggleDetailFade === 'function') {
            onToggleDetailFade(next, hasFare);
        }
    };

    if (![8, 9].includes(tripStatus)) {
        return null;
    }

    return (
        <View className="car-card-end">
            <View className="car-card-line" style="margin:24px 0;"></View>
            <View className="car-card-end-particulars">
                <View className="car-card-end-particulars-money">
                    <View>{formatMoney(
                        (fareBreakdown?.orderMoney - fareBreakdown?.redPacketMoney - fareBreakdown?.couponMoney) <= 0
                            ? 0 : (fareBreakdown?.orderMoney - fareBreakdown?.redPacketMoney - fareBreakdown?.couponMoney))}</View>
                    <View>元</View>
                    {
                        fareBreakdown?.redPacketMoney + fareBreakdown?.couponMoney > 0 &&
                        <View>{formatMoney(fareBreakdown?.orderMoney)}元</View>
                    }
                    {
                        fareBreakdown?.redPacketMoney + fareBreakdown?.couponMoney > 0 &&
                        <View>已优惠{formatMoney(fareBreakdown?.redPacketMoney + fareBreakdown?.couponMoney)}元</View>
                    }
                </View>
                <View className="car-card-end-particulars-view" onClick={handleToggleDetail}>
                    <View>{showDetail ? '收起明细' : '查看明细'}</View>
                    <Image style={{ transform: showDetail ? 'rotate(90deg)' : 'rotate(0deg)', transition: 'transform 0.3s' }} src={require('../../../../assets/ccc-icon-right.png')} />
                </View>
            </View>
            <View className={`particulars-detail ${showDetail ? 'expand' : ''}`}>
                {
                    Number(fareBreakdown?.orderMoney) > 0 &&
                    <View className="particulars-detail-item">
                        <View className="particulars-detail-item-title">
                            <View>订单总额</View>
                            <View>{formatMoney(fareBreakdown?.orderMoney)}元</View>
                        </View>
                    </View>
                }
                {Array.isArray(fareBreakdown?.start) && fareBreakdown.start.length > 0 &&
                    <View className="particulars-detail-item">
                        <View className="particulars-detail-item-title">
                            <View>起步价</View>
                            <View>{formatMoney(fareBreakdown.start.reduce((sum: number, item: any) => sum + (Number(item?.money) || 0), 0))}元</View>
                        </View>
                        {fareBreakdown.start.filter((item: any) => item?.money || item?.time).map((item: any, index: number) => (
                            <View key={`start-${index}`} className="particulars-detail-item-content">
                                <View>{item?.time || '--'}</View>
                                <View>{formatMoney(item?.money)}元</View>
                            </View>
                        ))}
                    </View>
                }
                {Array.isArray(fareBreakdown?.mileage) && fareBreakdown.mileage.length > 0 &&
                    <View className="particulars-detail-item">
                        <View className="particulars-detail-item-title">
                            <View>里程费</View>
                            <View>{formatMoney(fareBreakdown.mileage.reduce((sum: number, item: any) => sum + (Number(item?.money) || 0), 0))}元</View>
                        </View>
                        {fareBreakdown.mileage.filter((item: any) => item?.money || item?.mileage).map((item: any, index: number) => (
                            <View key={`mileage-${index}`} className="particulars-detail-item-content">
                                <View>{getTypeLabel(item?.type)}（{formatTripDistance(item?.mileage)}）</View>
                                <View>{formatMoney(item?.money)}元</View>
                            </View>
                        ))}
                    </View>
                }
                {Array.isArray(fareBreakdown?.duration) && fareBreakdown.duration.length > 0 &&
                    <View className="particulars-detail-item">
                        <View className="particulars-detail-item-title">
                            <View>时长费</View>
                            <View>{formatMoney(fareBreakdown.duration.reduce((sum: number, item: any) => sum + (Number(item?.money) || 0), 0))}元</View>
                        </View>
                        {fareBreakdown.duration.filter((item: any) => item?.money || item?.duration).map((item: any, index: number) => (
                            <View key={`duration-${index}`} className="particulars-detail-item-content">
                                <View>{getTypeLabel(item?.type)}（{formatNumber(item?.duration, 0)}分钟）</View>
                                <View>{formatMoney(item?.money)}元</View>
                            </View>
                        ))}
                    </View>
                }
                {Array.isArray(fareBreakdown?.longDistance) && fareBreakdown.longDistance.length > 0 &&
                    <View className="particulars-detail-item">
                        <View className="particulars-detail-item-title">
                            <View>远途费</View>
                            <View>{formatMoney(fareBreakdown.longDistance.reduce((sum: number, item: any) => sum + (Number(item?.money) || 0), 0))}元</View>
                        </View>
                    </View>
                }
                {Number(fareBreakdown?.redPacketMoney) > 0 &&
                    <View className="particulars-detail-item">
                        <View className="particulars-detail-item-title">
                            <View>红包</View>
                            <View className="color1">-{formatMoney(fareBreakdown?.redPacketMoney)}元</View>
                        </View>
                    </View>
                }
                {Number(fareBreakdown?.couponMoney) > 0 &&
                    <View className="particulars-detail-item">
                        <View className="particulars-detail-item-title">
                            <View>优惠券</View>
                            <View className="color1">-{formatMoney(fareBreakdown?.couponMoney)}元</View>
                        </View>
                    </View>
                }
            </View>
            <View className="car-card-end-cost">
                <View className="car-card-end-cost-money">
                    全程{formatTripDistance(fareBreakdown?.kilometer)}｜{formatTripDurationFromSeconds(fareBreakdown?.time)}
                </View>
                <View onClick={toMoneyDetail} className="car-card-end-cost-view">
                    <View>费用说明</View>
                    <Image src={require('../../../../assets/ccc-icon-right.png')} />
                </View>
            </View>
            {
                tripStatus === 8 &&
                <View onClick={handlePay} className="car-card-end-pay">立即支付</View>
            }
        </View>
    );
}