import 'package:wanisdriver/widgets/custom_text.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../config/AppSnackbar.dart';
import '../../config/constants/app_constant.dart';
import '../../utils/colors.dart';
import '../callPhone.dart';

class ToClientWidget extends StatelessWidget {
  final String duration;
  final String clientname;
  final String distance;
  final String driverphonenumber;
  final String userimageurl;
  final VoidCallback onchangestate; // Callback function for state change
  final VoidCallback onCancel; // Callback function for state change
  final bool canChangeState;
  final bool isChangeStatusLoading;
  final int remainingSeconds;

  const ToClientWidget({
    Key? key,
    required this.duration,
    required this.clientname,
    required this.distance,
    required this.driverphonenumber,
    required this.userimageurl,
    required this.isChangeStatusLoading,
    required this.onCancel,
    required this.onchangestate,
    required this.canChangeState,
    required this.remainingSeconds,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text(
              duration,
              style:  TextStyle(
                fontFamily: 'Poppins',
                fontSize: 23,
                fontWeight: FontWeight.bold,
                color: Theme.of(context).brightness == Brightness.dark ? AppColors.white : AppColors.black,
              ),
            ),
            CircleAvatar(
              radius: 25,
              backgroundColor: Colors.grey.shade200, // visible while loading
              child: ClipOval(
                child: Image.network(
                  '$mediaUrl$userimageurl', // full URL
                  width: 50,
                  height: 50,
                  fit: BoxFit.cover,
                  errorBuilder: (_, __, ___) => Image.asset(
                    // ← fallback
                    'assets/images/user_avatar.png',
                    width: 50,
                    height: 50,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            Text(
              distance,
              style:  TextStyle(
                fontFamily: 'Poppins',
                fontSize: 23,
                fontWeight: FontWeight.bold,
                color: Theme.of(context).brightness == Brightness.dark ? AppColors.white : AppColors.black,
              ),
            ),
          ],
        ),
        const SizedBox(height: 16.0),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            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,
                ),
              ),
            ),
            const SizedBox(width: 6.0),
            Expanded(
              child: Center(
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const Txt(
                      text: "Picking up",
                      style: TextStyle(
                        fontFamily: 'Poppins',
                        fontSize: 14,
                        fontWeight: FontWeight.normal,
                        color: Colors.grey,
                      ),
                      textAlign: TextAlign.center,
                    ),
                    Flexible(
                      child: Txt(
                        text: " $clientname",
                        style: const TextStyle(
                          fontFamily: 'Poppins',
                          fontSize: 17,
                          fontWeight: FontWeight.w700,
                          color: Colors.grey,
                        ),
                        textAlign: TextAlign.center,
                        overflow: TextOverflow.ellipsis,
                        maxLines: 1,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(width: 6.0),
            // Red Cancel Button
            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: const Icon(
                  Icons.cancel,
                  color: Colors.white,
                  size: 30,
                ),
              ),
            ),
          ],
        ),
        const SizedBox(height: 16.0),
        GestureDetector(
          onTap: canChangeState
              ? onchangestate
              : null, // Use the callback function to change state
          child: Padding(
            padding: const EdgeInsets.only(left: 46, right: 46),
            child: Container(
              width: double.infinity,
              padding:
                  const EdgeInsets.symmetric(vertical: 12.0, horizontal: 16.0),
              decoration: BoxDecoration(
                color: !canChangeState ? Colors.grey : Colors.green,
                borderRadius: BorderRadius.circular(
                    30.0),
              ),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  if (isChangeStatusLoading) ...[
                    const SizedBox(
                      width: 18,
                      height: 18,
                      child: CircularProgressIndicator(color: Colors.white),
                    ),
                    const SizedBox(width: 6),
                  ],
                  // allow the text to shrink/wrap
                  Flexible(
                    fit: FlexFit.loose,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Txt(
                          text: "I have arrived",
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                          style:  TextStyle(
                              color: Colors.white,
                              fontSize: 22,
                              fontFamily: 'Poppins',
                              fontWeight: FontWeight.bold),
                        ),
                        Txt(
                         text:  " ${remainingSeconds != 0
                              ? " (${remainingSeconds}s)"
                              : ""}",
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                          style: const TextStyle(
                              color: Colors.white,
                              fontSize: 22,
                              fontFamily: 'Poppins',
                              fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}