import 'package:wanisdriver/utils/colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../config/AppSnackbar.dart';
import '../callPhone.dart';
import '../custom_text.dart';

class DriverArrivedWidget extends StatelessWidget {
  final String duration;
  final String clientname;
  final String driverphonenumber;
  final String distance;
  final VoidCallback onchangestate; // Callback function for state change
  final VoidCallback onCancel; // Callback function for state change
  final bool canChangeState;
  final int remainingSeconds;
  final bool isChangeStatusLoading;
  const DriverArrivedWidget({
    Key? key,
    required this.duration,
    required this.driverphonenumber,
    required this.onchangestate,
    required this.onCancel,
    required this.clientname,
    required this.distance,
    required this.canChangeState,
    required this.remainingSeconds,
    required this.isChangeStatusLoading,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        // Row with call button, duration, distance, and cancel button
        Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            // Green Call Button
            GestureDetector(
              onTap: () {
                print("Calling driver...");
                if (driverphonenumber.isNotEmpty) {
                  showContactOptions(context, driverphonenumber);
                } else {
                  AppSnackbar.showError("Error", "Phone number not available");
                }
              },
              child: Container(
                padding: const EdgeInsets.all(12),
                decoration: const BoxDecoration(
                  color: AppColors.greanColor,
                  shape: BoxShape.circle,
                ),
                child: Icon(
                  Icons.call,
                  color: Colors.white,
                  size: 16.sp,
                ),
              ),
            ),

            // Duration Information
            Row(
              children: [
                Text(
                  duration,
                  style:  TextStyle(
                    fontFamily: 'Poppins',
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: Theme.of(context).brightness == Brightness.dark ? AppColors.white : AppColors.black,
                 //   color: Colors.black,
                  ),
                ),
                const SizedBox(width: 5),
                const Icon(
                  Icons.timer,
                  size: 18,
               //   color: Colors.black,
                ),
              ],
            ),

            // Distance Information
            Row(
              children: [
                Text(
                  distance,
                  style:  TextStyle(
                    fontFamily: 'Poppins',
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: Theme.of(context).brightness == Brightness.dark ? AppColors.white : AppColors.black,
                  //  color: Colors.black,
                  ),
                ),
                const SizedBox(width: 5),
                const Icon(
                  Icons.directions_walk,
                  size: 18,
                 // color: Colors.black,
                ),
              ],
            ),
            GestureDetector(
              onTap:remainingSeconds != 0 ? null: onCancel,
              child: Container(
                padding: const EdgeInsets.all(10.0),
                decoration:  BoxDecoration(
                  color:remainingSeconds != 0? Colors.grey: Colors.red,
                  shape: BoxShape.circle,
                ),
                child:  Icon(
                  Icons.cancel,
                  color: Colors.white,
                  size: 20.sp,
                ),
              ),
            ),
          ],
        ),

        const SizedBox(height: 8.0),

        // Text Information for Pick-up
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const  Expanded(
              child:  Txt(
                text: "Notifying",
                style: TextStyle(
                  fontFamily: 'Poppins',
                  fontSize: 16,
                  fontWeight: FontWeight.normal,
                  color: Colors.grey,
                ),
                textAlign: TextAlign.center,
              ),
            ),
            Expanded(
              child: Txt(
                text: " $clientname ...",
                style: const TextStyle(
                  fontFamily: 'Poppins',
                  fontSize: 16,
                  fontWeight: FontWeight.normal,
                  color: Colors.grey,
                ),
                textAlign: TextAlign.center,
                maxLines: 1,
              ),
            ),
          ],
        ),

        const SizedBox(height: 16.0),

        // Arrived Button
        Padding(
          padding: EdgeInsets.only(left: 38.sp, right: 38.sp),
          child: GestureDetector(
            onTap: () =>
                onchangestate(), // Use the callback function to change state
            child: Container(
              width: double.infinity, // 👈 FULL WIDTH
              padding:
                  const EdgeInsets.symmetric(vertical: 12.0, horizontal: 16.0),
              decoration: BoxDecoration(
                color: !canChangeState ? Colors.grey : AppColors.greanColor,
                borderRadius: BorderRadius.circular(30.0),
              ),
              child:
                  // Row(
                  //   mainAxisSize: MainAxisSize.min, // To avoid taking up the full width
                  //   crossAxisAlignment: CrossAxisAlignment.center, // Align vertically center
                  //   children: [
                  // Transform.rotate(
                  //   angle: 0.785398, // Rotate the icon by 45 degrees (approx. π/4 radians)
                  //   child: const Icon(
                  //     Icons.map_outlined,
                  //     color: Colors.white,
                  //     size: 25,
                  //   ),
                  // ),
                  // const SizedBox(width: 8.0), // Add some spacing between the icon and the text
                  Center(
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    if (isChangeStatusLoading) ...[
                      const SizedBox(
                        width: 18,
                        height: 18,
                        child: CircularProgressIndicator(color: Colors.white),
                      ),
                      const SizedBox(width: 12),
                    ],
                    Flexible(
                      fit: FlexFit.loose,
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          const Txt(
                            text: 'Start Ride',
                            overflow: TextOverflow.ellipsis,
                            maxLines: 1,
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 18,
                                fontFamily: 'Poppins',
                                fontWeight: FontWeight.bold),
                          ),
                          Txt(
                            text: remainingSeconds != 0
                                ? ' (${remainingSeconds}s)'
                                : '',
                            overflow: TextOverflow.ellipsis,
                            maxLines: 1,
                            style: const TextStyle(
                                color: Colors.white,
                                fontSize: 18,
                                fontFamily: 'Poppins',
                                fontWeight: FontWeight.bold),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}