import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:Intaleq/constant/box_name.dart';
import 'package:Intaleq/constant/colors.dart';
import 'package:Intaleq/constant/style.dart';
import 'package:Intaleq/main.dart';
import 'package:Intaleq/views/home/profile/passenger_profile_page.dart';
import 'package:Intaleq/views/widgets/elevated_btn.dart';
import 'package:Intaleq/views/widgets/my_textField.dart';
import 'package:intl/intl.dart';
import 'dart:ui';

import '../../../constant/info.dart';
import '../../../controller/functions/tts.dart';
import '../../../controller/home/map_passenger_controller.dart';
import '../../../print.dart';
import '../../widgets/mydialoug.dart';

// --- CarType class (Unchanged) ---
class CarType {
  final String carType;
  final String carDetail;
  final String image;
  bool isSelected = false;

  CarType(
      {required this.carType, required this.carDetail, required this.image});
}

// --- List of Car Types (Unchanged) ---
List<CarType> carTypes = [
  CarType(
      carType: 'Fixed Price',
      carDetail: 'Closest & Cheapest'.tr,
      image: 'assets/images/carspeed.png'),
  CarType(
      carType: 'Comfort',
      carDetail: 'Comfort choice'.tr,
      image: 'assets/images/blob.png'),
  CarType(
      carType: 'Electric',
      carDetail: 'Quiet & Eco-Friendly'.tr,
      image: 'assets/images/electric.png'),
  CarType(
      carType: 'Lady',
      carDetail: 'Lady Captain for girls'.tr,
      image: 'assets/images/lady.png'),
  CarType(
      carType: 'Van',
      carDetail: 'Van for familly'.tr,
      image: 'assets/images/bus.png'),
  CarType(
      carType: 'Rayeh Gai',
      carDetail: "Best choice for cities".tr,
      image: 'assets/images/roundtrip.png'),
];

// --- Main Widget ---
class CarDetailsTypeToChoose extends StatelessWidget {
  CarDetailsTypeToChoose({super.key});
  final textToSpeechController = Get.put(TextToSpeechController());

  void _prepareCarTypes(MapPassengerController controller) {
    if (controller.distance > 23) {
      if (!carTypes.any((car) => car.carType == 'Rayeh Gai')) {
        carTypes.add(CarType(
            carType: 'Rayeh Gai',
            carDetail: "Best choice for cities".tr,
            image: 'assets/images/roundtrip.png'));
      }
    } else {
      carTypes.removeWhere((car) => car.carType == 'Rayeh Gai');
    }
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MapPassengerController>(builder: (controller) {
      _prepareCarTypes(controller);

      if (!(controller.isBottomSheetShown) && controller.rideConfirm == false) {
        return const SizedBox.shrink();
      }

      // Main Bottom Sheet Design
      return Positioned(
        bottom: 0,
        left: 0,
        right: 0,
        child: Container(
          decoration: BoxDecoration(
            color: AppColor
                .secondaryColor, // Solid background for better performance
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(30),
              topRight: Radius.circular(30),
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.15),
                blurRadius: 20,
                spreadRadius: 5,
                offset: const Offset(0, -5),
              ),
            ],
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // Drag Handle
              Center(
                child: Container(
                  width: 50,
                  height: 5,
                  margin: const EdgeInsets.symmetric(vertical: 12),
                  decoration: BoxDecoration(
                    color: Colors.grey.withOpacity(0.3),
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
              ),

              // Header (Title + Trip Info)
              _buildModernHeader(controller),

              // Warning Message (if any)
              _buildNegativeBalanceWarning(controller),

              // Car List
              SizedBox(
                height: 165, // Fixed height for consistency
                child: ListView.separated(
                  physics: const BouncingScrollPhysics(),
                  scrollDirection: Axis.horizontal,
                  padding:
                      const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                  itemCount: carTypes.length,
                  separatorBuilder: (context, index) =>
                      const SizedBox(width: 12),
                  itemBuilder: (context, index) {
                    final carType = carTypes[index];
                    final isSelected = controller.selectedIndex == index;
                    return _buildVerticalCarCard(
                        context, controller, carType, isSelected, index);
                  },
                ),
              ),

              // Promo Code Button
              _buildPromoButton(context, controller),

              // Safe Area spacing
              SizedBox(height: MediaQuery.of(context).padding.bottom + 10),
            ],
          ),
        ),
      );
    });
  }

  // --- UI Components ---

  Widget _buildModernHeader(MapPassengerController controller) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 5),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
            child: Text(
              'Choose your ride'.tr,
              style: AppStyle.headTitle.copyWith(
                  fontSize: 20,
                  fontWeight: FontWeight.w800,
                  letterSpacing: 0.5),
            ),
          ),

          // Trip Info Pill
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
            decoration: BoxDecoration(
              color: AppColor.primaryColor.withOpacity(0.08),
              borderRadius: BorderRadius.circular(20),
              border: Border.all(color: AppColor.primaryColor.withOpacity(0.2)),
            ),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.directions_car_filled_outlined,
                    size: 16, color: AppColor.primaryColor),
                const SizedBox(width: 6),
                Text(
                  '${controller.distance.toStringAsFixed(1)} ${'KM'.tr}',
                  style: AppStyle.subtitle.copyWith(
                      fontSize: 13,
                      fontWeight: FontWeight.bold,
                      color: AppColor.primaryColor),
                ),
                Container(
                    margin: const EdgeInsets.symmetric(horizontal: 8),
                    height: 12,
                    width: 1,
                    color: Colors.grey.shade400),
                Icon(Icons.access_time_filled_rounded,
                    size: 16, color: AppColor.primaryColor),
                const SizedBox(width: 6),
                Text(
                  controller.hours > 0
                      ? '${controller.hours}h ${controller.minutes}m'
                      : '${controller.minutes} min',
                  style: AppStyle.subtitle.copyWith(
                      fontSize: 13,
                      fontWeight: FontWeight.bold,
                      color: AppColor.primaryColor),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget _buildVerticalCarCard(
      BuildContext context,
      MapPassengerController controller,
      CarType carType,
      bool isSelected,
      int index) {
    return GestureDetector(
      onTap: () {
        controller.selectCarFromList(index);
        _showCarDetailsDialog(
            context, controller, carType, textToSpeechController);
      },
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 250),
        curve: Curves.easeInOut,
        width: 110,
        decoration: BoxDecoration(
          color: isSelected
              ? AppColor.primaryColor.withOpacity(0.05)
              : Colors.white,
          borderRadius: BorderRadius.circular(18),
          border: Border.all(
            color: isSelected
                ? AppColor.primaryColor
                : Colors.grey.withOpacity(0.2),
            width: isSelected ? 2.0 : 1.0,
          ),
          boxShadow: isSelected
              ? [
                  BoxShadow(
                    color: AppColor.primaryColor.withOpacity(0.2),
                    blurRadius: 8,
                    offset: const Offset(0, 4),
                  )
                ]
              : [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.1),
                    blurRadius: 4,
                    offset: const Offset(0, 2),
                  )
                ],
        ),
        child: Stack(
          alignment: Alignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // Image with subtle scaling if selected
                  AnimatedScale(
                    scale: isSelected ? 1.1 : 1.0,
                    duration: const Duration(milliseconds: 250),
                    child: Image.asset(
                      carType.image,
                      height: 50,
                      fit: BoxFit.contain,
                    ),
                  ),
                  const SizedBox(height: 12),

                  // Car Type Text
                  FittedBox(
                    fit: BoxFit.scaleDown,
                    child: Text(
                      carType.carType.tr,
                      style: AppStyle.subtitle.copyWith(
                        fontWeight:
                            isSelected ? FontWeight.w800 : FontWeight.w600,
                        fontSize: 14,
                        color:
                            isSelected ? AppColor.primaryColor : Colors.black87,
                      ),
                      maxLines: 1,
                    ),
                  ),

                  const SizedBox(height: 6),

                  // Price Tag
                  Container(
                    padding:
                        const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                    decoration: BoxDecoration(
                      color: isSelected
                          ? AppColor.primaryColor
                          : Colors.grey.shade100,
                      borderRadius: BorderRadius.circular(12),
                    ),
                    child: FittedBox(
                      child: Text(
                        '${_getPassengerPriceText(carType, controller)} ${'SYP'.tr}',
                        style: TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                          color: isSelected ? Colors.white : Colors.black87,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),

            // Checkmark Badge for Selected Item
            if (isSelected)
              Positioned(
                top: 8,
                right: 8,
                child: Container(
                  padding: const EdgeInsets.all(2),
                  decoration: const BoxDecoration(
                    color: AppColor.primaryColor,
                    shape: BoxShape.circle,
                  ),
                  child: const Icon(Icons.check, size: 12, color: Colors.white),
                ),
              ),
          ],
        ),
      ),
    );
  }

  Widget _buildPromoButton(
      BuildContext context, MapPassengerController controller) {
    if (controller.promoTaken) return const SizedBox.shrink();

    return Padding(
      padding: const EdgeInsets.fromLTRB(20, 10, 20, 5),
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: () => _showPromoCodeDialog(context, controller),
          borderRadius: BorderRadius.circular(14),
          child: Container(
            padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 16),
            decoration: BoxDecoration(
              color: Colors.grey.withOpacity(0.05),
              borderRadius: BorderRadius.circular(14),
              border: Border.all(color: Colors.grey.withOpacity(0.2)),
            ),
            child: Row(
              children: [
                Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                      color: AppColor.primaryColor.withOpacity(0.1),
                      shape: BoxShape.circle),
                  child: Icon(Icons.confirmation_number_outlined,
                      color: AppColor.primaryColor, size: 20),
                ),
                const SizedBox(width: 14),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Promo Code'.tr,
                        style: AppStyle.subtitle.copyWith(
                            fontSize: 14, fontWeight: FontWeight.bold),
                      ),
                      Text(
                        'Have a promo code?'.tr,
                        style: AppStyle.subtitle.copyWith(
                            fontSize: 12, color: Colors.grey.shade600),
                      ),
                    ],
                  ),
                ),
                Icon(Icons.arrow_forward_ios_rounded,
                    size: 16, color: Colors.grey.shade400)
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildNegativeBalanceWarning(MapPassengerController controller) {
    final passengerWallet =
        double.tryParse(box.read(BoxName.passengerWalletTotal) ?? '0.0') ?? 0.0;
    if (passengerWallet < 0.0) {
      return Container(
        margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: AppColor.redColor.withOpacity(0.1),
          borderRadius: BorderRadius.circular(12),
          border: Border.all(color: AppColor.redColor.withOpacity(0.3)),
        ),
        child: Row(
          children: [
            Icon(Icons.info_outline_rounded,
                color: AppColor.redColor, size: 24),
            const SizedBox(width: 12),
            Expanded(
              child: Text(
                '${'You have a negative balance of'.tr} ${passengerWallet.toStringAsFixed(2)} ${'SYP'.tr}.',
                style: AppStyle.subtitle.copyWith(
                    color: AppColor.redColor,
                    fontWeight: FontWeight.w600,
                    fontSize: 13),
              ),
            ),
          ],
        ),
      );
    }
    return const SizedBox.shrink();
  }

  // --- Logic Helpers (Copied from your previous code to ensure functionality) ---

  String _getPassengerPriceText(
      CarType carType, MapPassengerController mapPassengerController) {
    double rawPrice;
    switch (carType.carType) {
      case 'Comfort':
        rawPrice = mapPassengerController.totalPassengerComfort;
        break;
      case 'Fixed Price':
        rawPrice = mapPassengerController.totalPassengerSpeed;
        break;
      case 'Electric':
        rawPrice = mapPassengerController.totalPassengerElectric;
        break;
      case 'Awfar Car':
        rawPrice = mapPassengerController.totalPassengerBalash;
        break;
      case 'Scooter':
      case 'Pink Bike':
        rawPrice = mapPassengerController.totalPassengerScooter;
        break;
      case 'Van':
        rawPrice = mapPassengerController.totalPassengerVan;
        break;
      case 'Lady':
        rawPrice = mapPassengerController.totalPassengerLady;
        break;
      case 'Rayeh Gai':
        rawPrice = mapPassengerController.totalPassengerRayehGai;
        break;
      default:
        return '...';
    }
    final int roundedPrice = rawPrice.round();
    final formatter = NumberFormat.decimalPattern();
    return formatter.format(roundedPrice);
  }

  // --- Dialogs (Styled consistently) ---

  void _showPromoCodeDialog(
      BuildContext context, MapPassengerController controller) {
    Get.dialog(
      Dialog(
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
        backgroundColor: AppColor.secondaryColor,
        elevation: 10,
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Form(
            key: controller.promoFormKey,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Icon(Icons.local_activity_outlined,
                    size: 40, color: AppColor.primaryColor),
                const SizedBox(height: 16),
                Text(
                  'Apply Promo Code'.tr,
                  textAlign: TextAlign.center,
                  style: AppStyle.headTitle.copyWith(fontSize: 20),
                ),
                const SizedBox(height: 8),
                Text(
                  'Enter your code below to apply the discount.'.tr,
                  textAlign: TextAlign.center,
                  style: AppStyle.subtitle
                      .copyWith(color: Colors.grey.shade600, fontSize: 14),
                ),
                const SizedBox(height: 24),
                MyTextForm(
                  controller: controller.promo,
                  label: 'Promo Code'.tr,
                  hint: 'Enter your promo code'.tr,
                  type: TextInputType.text,
                ),
                const SizedBox(height: 24),
                Row(
                  children: [
                    Expanded(
                      child: TextButton(
                        onPressed: () => Get.back(),
                        style: TextButton.styleFrom(
                          foregroundColor: Colors.grey,
                        ),
                        child: Text('Cancel'.tr),
                      ),
                    ),
                    const SizedBox(width: 16),
                    Expanded(
                      child: MyElevatedButton(
                        title: 'Apply'.tr,
                        onPressed: () {
                          if (controller.promoFormKey.currentState!
                              .validate()) {
                            controller.applyPromoCodeToPassenger(context);
                            Get.back();
                          }
                        },
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
      barrierColor: Colors.black.withOpacity(0.5),
    );
  }

  void _showCarDetailsDialog(
      BuildContext context,
      MapPassengerController mapPassengerController,
      CarType carType,
      TextToSpeechController textToSpeechController) {
    Get.dialog(
      Dialog(
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(28.0)),
        backgroundColor: Colors.transparent,
        child: Stack(
          clipBehavior: Clip.none,
          alignment: Alignment.topCenter,
          children: [
            Container(
              margin: const EdgeInsets.only(top: 60),
              padding: const EdgeInsets.fromLTRB(24, 70, 24, 24),
              decoration: BoxDecoration(
                color: AppColor.secondaryColor,
                borderRadius: BorderRadius.circular(28.0),
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        carType.carType.tr,
                        style: AppStyle.headTitle.copyWith(fontSize: 22),
                      ),
                      const SizedBox(width: 8),
                      InkWell(
                        onTap: () => textToSpeechController.speakText(
                            _getCarDescription(
                                mapPassengerController, carType)),
                        borderRadius: BorderRadius.circular(20),
                        child: Padding(
                          padding: const EdgeInsets.all(4.0),
                          child: Icon(Icons.volume_up_rounded,
                              color: AppColor.primaryColor, size: 24),
                        ),
                      )
                    ],
                  ),
                  const SizedBox(height: 16),
                  Container(
                    padding: const EdgeInsets.all(16),
                    decoration: BoxDecoration(
                        color: Colors.grey.withOpacity(0.05),
                        borderRadius: BorderRadius.circular(16)),
                    child: Text(
                      _getCarDescription(mapPassengerController, carType),
                      textAlign: TextAlign.center,
                      style: AppStyle.subtitle.copyWith(
                        color: Colors.black87,
                        fontSize: 15,
                        height: 1.4,
                      ),
                    ),
                  ),
                  const SizedBox(height: 24),
                  Row(
                    children: [
                      Expanded(
                        child: TextButton(
                          onPressed: () => Get.back(),
                          child: Text('Back'.tr,
                              style: TextStyle(color: Colors.grey.shade600)),
                        ),
                      ),
                      const SizedBox(width: 12),
                      Expanded(
                        flex: 2,
                        child: MyElevatedButton(
                          kolor: AppColor.greenColor,
                          title: 'Select This Ride'.tr,
                          onPressed: () {
                            Get.back();
                            _handleCarSelection(
                                context, mapPassengerController, carType);
                          },
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Positioned(
              top: 0,
              child: Hero(
                tag: 'car_${carType.carType}',
                child: Image.asset(carType.image, height: 130),
              ),
            ),
          ],
        ),
      ),
      barrierColor: Colors.black.withOpacity(0.6),
    );
  }

  // --- Logic Helpers (Keep unchanged) ---

  String _getCarDescription(
      MapPassengerController mapPassengerController, CarType carType) {
    switch (carType.carType) {
      case 'Comfort':
        return mapPassengerController.endNameAddress
                .toLowerCase()
                .contains("airport".tr)
            ? "Best choice for a comfortable car with a flexible route and stop points. This airport offers visa entry at this price."
                .tr
            : 'Best choice for comfort car and flexible route and stops point'
                .tr;
      case 'Fixed Price':
        return 'This trip goes directly from your starting point to your destination for a fixed price. The driver must follow the planned route'
            .tr;
      case 'Electric':
        return 'Travel in a modern, silent electric car. A premium, eco-friendly choice for a smooth ride.'
            .tr;
      case 'Scooter':
      case 'Van':
        return "Spacious van service ideal for families and groups. Comfortable, safe, and cost-effective travel together."
            .tr;
      case 'Pink Bike':
        return 'This is for delivery or a motorcycle.'.tr;
      case 'Mishwar Vip':
        return "Perfect for passengers seeking the latest car models with the freedom to choose any route they desire"
            .tr;
      case 'Awfar Car':
        return "Old and affordable, perfect for budget rides.".tr;
      case 'Lady':
        return "This trip is for women only".tr;
      case 'Rayeh Gai':
        return "Rayeh Gai: Round trip service for convenient travel between cities, easy and reliable."
            .tr;
      default:
        return '';
    }
  }

  void _handleCarSelection(BuildContext context,
      MapPassengerController mapPassengerController, CarType carType) {
    box.write(BoxName.carType, carType.carType);
    mapPassengerController.totalPassenger =
        _getOriginalPrice(carType, mapPassengerController);
    if (carType.carType == 'Mishwar Vip') {
      Get.back();
      mapPassengerController.mishwariOption();
    } else if (carType.carType == 'Lady') {
      if (box.read(BoxName.gender).toString() != '') {
        mapPassengerController.isBottomSheetShown = false;
        mapPassengerController.update();
        mapPassengerController.changeCashConfirmPageShown();
      } else {
        MyDialog().getDialog('Idintify gender',
            'You should ideintify your gender for this type of trip!'.tr, () {
          Get.to(() => PassengerProfilePage());
        });
      }
    } else if (carType.carType == 'Rayeh Gai') {
      Get.defaultDialog(
          barrierDismissible: false,
          title: "Select betweeen types".tr,
          content:
              Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
            _buildRayehGaiOption(mapPassengerController, 'Awfar Car',
                mapPassengerController.totalPassengerRayehGaiBalash),
            _buildRayehGaiOption(mapPassengerController, 'Fixed Price',
                mapPassengerController.totalPassengerRayehGai),
            _buildRayehGaiOption(mapPassengerController, 'Comfort',
                mapPassengerController.totalPassengerRayehGaiComfort)
          ]),
          cancel: MyElevatedButton(
              kolor: AppColor.redColor,
              title: 'Cancel'.tr,
              onPressed: () => Get.back()),
          confirm: MyElevatedButton(
              kolor: AppColor.greenColor,
              title: 'Next'.tr,
              onPressed: () {
                mapPassengerController.isBottomSheetShown = false;
                mapPassengerController.update();
                mapPassengerController.changeCashConfirmPageShown();
              }));
    } else {
      mapPassengerController.isBottomSheetShown = false;
      mapPassengerController.update();
      mapPassengerController.changeCashConfirmPageShown();
    }
  }

  double _getOriginalPrice(
      CarType carType, MapPassengerController mapPassengerController) {
    switch (carType.carType) {
      case 'Comfort':
        return mapPassengerController.totalPassengerComfort;
      case 'Fixed Price':
        return mapPassengerController.totalPassengerSpeed;
      case 'Electric':
        return mapPassengerController.totalPassengerElectric;
      case 'Awfar Car':
        return mapPassengerController.totalPassengerBalash;
      case 'Van':
        return mapPassengerController.totalPassengerVan;
      case 'Lady':
        return mapPassengerController.totalPassengerLady;
      default:
        return 0.0;
    }
  }

  Widget _buildRayehGaiOption(MapPassengerController mapPassengerController,
      String carTypeName, double price) {
    return GestureDetector(
      onTap: () {
        Get.back();
        mapPassengerController.totalPassenger = price;
        mapPassengerController.isBottomSheetShown = false;
        mapPassengerController.update();
        mapPassengerController.changeCashConfirmPageShown();
      },
      child: Container(
          decoration: AppStyle.boxDecoration1,
          padding: const EdgeInsets.all(8.0),
          child: Column(children: [
            Text(carTypeName.tr),
            Text(price.toStringAsFixed(0))
          ])),
    );
  }
}

// --- BurcMoney Widget (Unchanged) ---
class BurcMoney extends StatelessWidget {
  const BurcMoney({super.key});

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MapPassengerController>(
      builder: (mapPassengerController) {
        final passengerWallet =
            double.tryParse(box.read(BoxName.passengerWalletTotal) ?? '0.0') ??
                0.0;

        return mapPassengerController.data.isNotEmpty &&
                mapPassengerController.isBottomSheetShown &&
                !mapPassengerController.rideConfirm &&
                passengerWallet < 0.0
            ? Positioned(
                bottom: Get.height * .41,
                left: 16,
                right: 16,
                child: Container(
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    color: AppColor.redColor.withOpacity(0.8),
                    borderRadius: BorderRadius.circular(8),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.1),
                        blurRadius: 4,
                        offset: const Offset(0, 2),
                      ),
                    ],
                  ),
                  child: Row(
                    children: [
                      const Icon(
                        Icons.warning_amber_rounded,
                        color: Colors.white,
                        size: 24,
                      ),
                      const SizedBox(width: 8),
                      Expanded(
                        child: Text.rich(
                          TextSpan(
                            children: [
                              TextSpan(
                                text: '${'Negative Balance:'.tr} ',
                                style: AppStyle.subtitle.copyWith(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              TextSpan(
                                text:
                                    '${'You have a balance of'.tr} ${passengerWallet.toStringAsFixed(2)} ${box.read(BoxName.countryCode) == 'Egypt' ? 'LE'.tr : 'SYP'.tr} ${'due to a previous trip.'.tr}',
                                style: AppStyle.subtitle.copyWith(
                                  color: Colors.white,
                                ),
                              ),
                            ],
                          ),
                          textAlign: TextAlign.start,
                        ),
                      ),
                      const SizedBox(width: 8),
                      GestureDetector(
                        onTap: () async =>
                            await Get.find<TextToSpeechController>().speakText(
                                '${'you have a negative balance of'.tr}${passengerWallet.toStringAsFixed(2)}${' in your'.tr} ${AppInformation.appName}${' wallet due to a previous trip.'.tr}'),
                        child: const Icon(
                          Icons.headphones,
                          color: Colors.white,
                        ),
                      ),
                    ],
                  ),
                ),
              )
            : const SizedBox();
      },
    );
  }
}
