import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:onufitness/screens/echoboard/widget/image_zoom.dart';
import 'package:shimmer/shimmer.dart';
import 'package:onufitness/constants/asset_constants.dart';
import 'package:onufitness/constants/color_constant.dart';
import 'package:onufitness/routes/route_constant.dart';
import 'package:onufitness/screens/accounts/Controllers/edit_account_controller.dart';
import 'package:onufitness/utils/helper_function.dart';

Widget profileCard() {
  return GetBuilder<EditAccountController>(
    init: EditAccountController(),
    builder: (controller) {
      final userData = controller.userDetailsResponseModel.data;

      if (controller.fetchUserDetailsLoading.value == true) {
        return Shimmer.fromColors(
          baseColor: Colors.grey.shade300,
          highlightColor: Colors.grey.shade100,
          child: Container(
            padding: EdgeInsets.symmetric(
              vertical: isTablet ? 18.sp : 24.sp,
              horizontal: 10.sp,
            ),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(12.r),
            ),
            child: Row(
              children: [
                CircleAvatar(
                  radius: 30.r,
                  backgroundColor: Colors.grey.shade300,
                ),
                SizedBox(width: 12.w),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        width: 150.w,
                        height: 16.h,
                        color: Colors.grey.shade300,
                      ),
                      SizedBox(height: 8.h),
                      Container(
                        width: 100.w,
                        height: 12.h,
                        color: Colors.grey.shade300,
                      ),
                    ],
                  ),
                ),
                Container(
                  height: isTablet ? 50.h : 40.h,
                  width: isTablet ? 50.w : 40.w,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.grey.shade300,
                  ),
                ),
              ],
            ),
          ),
        );
      }

      return Container(
        padding: EdgeInsets.symmetric(
          vertical: isTablet ? 18.sp : 24.sp,
          horizontal: 10.sp,
        ),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [
              becomeACoachGradient2,
              becomeACoachGradient2,
              becomeACoachGradient1.withValues(alpha: 0.5),
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomRight,
          ),
          borderRadius: BorderRadius.circular(12.r),
          boxShadow: [
            BoxShadow(
              blurRadius: 1,
              color: Color(outlineButtonBorderColorSky),
              spreadRadius: 1,
              offset: Offset(0, 3),
            ),
          ],
        ),
        child: Row(
          children: [
            InkWell(
              onTap: () {
                if (controller.hasNetworkImage) {
                  Get.to(
                    () => ImageZoomWidget(
                      imageUrl: controller.userProfileImageUrl!,
                    ),
                  );
                }
              },
              child: CircleAvatar(
                radius: 30.r,
                backgroundColor: Colors.grey.shade200,
                child: ClipOval(
                  child:
                      controller.hasNetworkImage
                          ? CachedNetworkImage(
                            imageUrl: controller.userProfileImageUrl!,
                            width: 60.r,
                            height: 60.r,
                            fit: BoxFit.cover,
                            key: ValueKey(controller.userProfileImageUrl),
                            errorWidget:
                                (context, url, error) => Icon(
                                  Icons.person,
                                  size: 30.r,
                                  color: Color(darkGreyColor),
                                ),
                            placeholder:
                                (context, url) => SizedBox(
                                  width: 60.r,
                                  height: 60.r,
                                  child: Center(
                                    child: CircularProgressIndicator(
                                      strokeWidth: 2,
                                      color: Color(darkGreyColor),
                                    ),
                                  ),
                                ),
                          )
                          : Icon(
                            Icons.person,
                            size: 30.r,
                            color: Color(darkGreyColor),
                          ),
                ),
              ),
            ),

            SizedBox(width: 12.w),

            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    userData?.fullName?.isNotEmpty == true
                        ? userData!.fullName!
                        : '${userData?.firstName ?? ''} ${userData?.lastName ?? ''}'
                            .trim()
                            .isNotEmpty
                        ? '${userData?.firstName ?? ''} ${userData?.lastName ?? ''}'
                            .trim()
                        : 'Unknown User',
                    style: TextStyle(
                      fontSize: isTablet ? 24.sp : 18.sp,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  if (userData?.email?.isNotEmpty == true) ...[
                    SizedBox(height: 2.h),
                    Text(
                      userData?.email ?? "",
                      style: TextStyle(
                        fontSize: isTablet ? 19.sp : 14.sp,
                        color: Colors.grey,
                      ),
                    ),
                  ],
                ],
              ),
            ),

            IconButton(
              icon: Container(
                height: isTablet ? 50.h : 40.h,
                width: isTablet ? 50.w : 40.w,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.black,
                ),
                child: Padding(
                  padding: EdgeInsets.all(12.sp),
                  child: Image.asset(
                    AssetConstants.editIcon,
                    fit: BoxFit.contain,
                  ),
                ),
              ),
              onPressed: () async {
                await Get.toNamed(RouteConstant.traineeCoachEditProfile);
              },
            ),
          ],
        ),
      );
    },
  );
}