// ConfirmPriceWidget - Fixed version
import 'package:wanisdriver/utils/colors.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:provider/provider.dart';

import '../../Provider/RideStatusProvider.dart';
import '../../config/enum/ride_enum.dart';
import '../custom_text.dart';

class ConfirmPriceWidget extends StatefulWidget {
  final String clientName;
  final double price;
  final String currency;
  final VoidCallback onConfirmTpePressed;
  final VoidCallback onConfirmCashPressed;
  final bool laodingCash;
  final bool laodingTpe;

  const ConfirmPriceWidget({
    Key? key,
    required this.clientName,
    required this.price,
    required this.laodingCash,
    required this.laodingTpe,
    required this.currency,
    required this.onConfirmTpePressed,
    required this.onConfirmCashPressed,
  }) : super(key: key);

  @override
  State<ConfirmPriceWidget> createState() => _ConfirmPriceWidgetState();
}

class _ConfirmPriceWidgetState extends State<ConfirmPriceWidget>
    with WidgetsBindingObserver {
  bool _isActive = true;
  bool _hasPopped = false; // NEW: Prevent double popping

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _listenToRideStatusChanges();
  }

  void _listenToRideStatusChanges() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (mounted) {
        context.read<RideStatusProvider>().addListener(_onRideStatusChanged);
      }
    });
  }

  void _onRideStatusChanged() {
    if (!mounted || !_isActive || _hasPopped) return; // Check _hasPopped

    final rideStatus = context.read<RideStatusProvider>().ridestatus;
    if (rideStatus == RideEnum.idle) {
      _closeModal();
    }
  }

  void _closeModal() {
    if (_isActive && mounted && Navigator.canPop(context) && !_hasPopped) {
      _hasPopped = true; // Mark as popped
      _isActive = false;

      // Use a small delay to ensure we're not in the middle of another navigation
      Future.microtask(() {
        if (mounted && Navigator.canPop(context)) {
          Navigator.of(context).pop();
        }
      });
    }
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);

    if (state == AppLifecycleState.paused ||
        state == AppLifecycleState.inactive ||
        state == AppLifecycleState.detached) {
      _closeModal();
    }

    if (state == AppLifecycleState.resumed) {
      final rideStatus = context.read<RideStatusProvider>().ridestatus;
      if (rideStatus == RideEnum.idle) {
        _closeModal();
      }
    }
  }

  @override
  void dispose() {
    _isActive = false;
    try {
      context.read<RideStatusProvider>().removeListener(_onRideStatusChanged);
    } catch (e) {
      // Provider might already be disposed
    }
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // Simplified Consumer - only listen, don't act immediately
    return Consumer<RideStatusProvider>(
      builder: (context, rideStatusProvider, child) {
        // Only schedule the close, don't do it synchronously in build
        if (rideStatusProvider.ridestatus == RideEnum.idle &&
            _isActive &&
            !_hasPopped) {
          WidgetsBinding.instance.addPostFrameCallback((_) {
            _closeModal();
          });
        }

        return WillPopScope(
          onWillPop: () async {
            _hasPopped = true; // Mark as manually popped
            _isActive = false;
            return true; // Allow the pop
          },
          child: Padding(
            padding: EdgeInsets.only(
              bottom: MediaQuery.of(context).viewPadding.bottom > 0
                  ? MediaQuery.of(context).viewPadding.bottom
                  : 1,
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                // Confirm Price Title
                const Txt(
                  text: "Confirm Payment",
                  style: TextStyle(
                    fontFamily: 'Poppins',
                    fontSize: 22,
                    fontWeight: FontWeight.bold,
                    color: Colors.black,
                  ),
                ),

                const SizedBox(height: 8.0),

                // Collection Instruction
                Txt(
                  text: "Collect cash from ${widget.clientName}",
                  style: const TextStyle(
                    fontFamily: 'Poppins',
                    fontSize: 16,
                    fontWeight: FontWeight.normal,
                    color: Colors.grey,
                  ),
                  textAlign: TextAlign.center,
                ),

                const SizedBox(height: 16.0),

                SvgPicture.asset(
                  "assets/icons/collectMony.svg",
                  width: 110,
                  height: 120,
                ),
                const SizedBox(height: 16.0),

                // Price Display
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Txt(
                      text:
                          "${widget.price.toStringAsFixed(2)} ${widget.currency}",
                      style: TextStyle(
                        fontFamily: 'Poppins',
                        fontSize: 22,
                        fontWeight: FontWeight.bold,
                        color: Theme.of(context).brightness == Brightness.dark
                            ? AppColors.darkPrimaryColor
                            : AppColors.primaryColor,
                      ),
                      textAlign: TextAlign.center,
                    ),
                    const SizedBox(width: 8.0),
                    Txt(
                      text: "+ tarif compteur",
                      style: TextStyle(
                        fontFamily: 'Poppins',
                        fontSize: 22,
                        fontWeight: FontWeight.bold,
                        color: Theme.of(context).brightness == Brightness.dark
                            ? AppColors.darkPrimaryColor
                            : AppColors.primaryColor,
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ],
                ),

                const SizedBox(height: 8.0),

                // Cash Label
                const Txt(
                  text: "Select payment methode",
                  style: TextStyle(
                    fontFamily: 'Poppins',
                    fontSize: 16,
                    fontWeight: FontWeight.normal,
                    color: Colors.grey,
                  ),
                  textAlign: TextAlign.center,
                ),

                const SizedBox(height: 16.0),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Expanded(
                        child: GestureDetector(
                          onTap: _isActive && !_hasPopped
                              ? widget.onConfirmTpePressed
                              : null,
                          child: Container(
                            padding: const EdgeInsets.symmetric(
                                vertical: 15.0, horizontal: 30.0),
                            decoration: BoxDecoration(
                              color: Theme.of(context).brightness ==
                                      Brightness.dark
                                  ? AppColors.darkPrimaryColor
                                  : AppColors.primaryColor,
                              borderRadius: BorderRadius.circular(10.0),
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Padding(
                                  padding: const EdgeInsets.only(right: 10),
                                  child:
                                      SvgPicture.asset("assets/icons/Tpe.svg"),
                                ),
                                Center(
                                  child: widget.laodingTpe
                                      ? const Center(
                                          child: SizedBox(
                                            height: 20,
                                            width: 20,
                                            child: CircularProgressIndicator(
                                              strokeWidth: 2.5,
                                              color: Colors.white,
                                            ),
                                          ),
                                        )
                                      : const Txt(
                                          text: "TPE",
                                          style: TextStyle(
                                            color: Colors.white,
                                            fontSize: 16,
                                            fontFamily: 'Poppins',
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(width: 10.0),
                      Expanded(
                        child: GestureDetector(
                          onTap: _isActive && !_hasPopped
                              ? widget.onConfirmCashPressed
                              : null,
                          child: Container(
                            padding: const EdgeInsets.symmetric(
                                vertical: 15.0, horizontal: 30.0),
                            decoration: BoxDecoration(
                              color: Theme.of(context).brightness ==
                                      Brightness.dark
                                  ? AppColors.darkPrimaryColor
                                  : AppColors.primaryColor,
                              borderRadius: BorderRadius.circular(10.0),
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Padding(
                                  padding: const EdgeInsets.only(right: 10),
                                  child:
                                      SvgPicture.asset("assets/icons/Cash.svg"),
                                ),
                                widget.laodingCash
                                    ? const Center(
                                        child: SizedBox(
                                        height: 20,
                                        width: 20,
                                        child: CircularProgressIndicator(
                                          strokeWidth: 2.5,
                                          color: Colors.white,
                                        ),
                                      ))
                                    : const Expanded(
                                        child: Center(
                                          child: Txt(
                                            text: "CASH",
                                            style: TextStyle(
                                              color: Colors.white,
                                              fontSize: 16,
                                              fontFamily: 'Poppins',
                                              fontWeight: FontWeight.bold,
                                            ),
                                            maxLines: 1,
                                          ),
                                        ),
                                      ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}