import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
import 'package:get_it/get_it.dart';
import 'package:hmg_patient_app_new/core/api_consts.dart';
import 'package:hmg_patient_app_new/core/app_assets.dart';
import 'package:hmg_patient_app_new/core/app_export.dart';
import 'package:hmg_patient_app_new/core/app_state.dart';
import 'package:hmg_patient_app_new/core/enums.dart';
import 'package:hmg_patient_app_new/core/utils/utils.dart';
import 'package:hmg_patient_app_new/extensions/route_extensions.dart';
import 'package:hmg_patient_app_new/extensions/string_extensions.dart';
import 'package:hmg_patient_app_new/extensions/widget_extensions.dart';
import 'package:hmg_patient_app_new/features/authentication/authentication_view_model.dart';
import 'package:hmg_patient_app_new/features/blood_donation/blood_donation_view_model.dart';
import 'package:hmg_patient_app_new/features/book_appointments/book_appointments_view_model.dart';
import 'package:hmg_patient_app_new/features/emergency_services/emergency_services_view_model.dart';
import 'package:hmg_patient_app_new/features/habib_wallet/habib_wallet_view_model.dart';
import 'package:hmg_patient_app_new/features/hmg_services/models/ui_models/hmg_services_component_model.dart';
import 'package:hmg_patient_app_new/features/hospital/hospital_selection_view_model.dart';
import 'package:hmg_patient_app_new/features/medical_file/medical_file_view_model.dart';
import 'package:hmg_patient_app_new/features/water_monitor/water_monitor_view_model.dart';
import 'package:hmg_patient_app_new/features/weather/weather_view_model.dart';
import 'package:hmg_patient_app_new/generated/locale_keys.g.dart';
import 'package:hmg_patient_app_new/presentation/blood_donation/blood_donation_page.dart';
import 'package:hmg_patient_app_new/presentation/book_appointment/book_appointment_page.dart';
import 'package:hmg_patient_app_new/presentation/comprehensive_checkup/comprehensive_checkup_page.dart';
import 'package:hmg_patient_app_new/presentation/contact_us/contact_us.dart';
import 'package:hmg_patient_app_new/presentation/emergency_services/emergency_services_page.dart';
import 'package:hmg_patient_app_new/presentation/habib_wallet/habib_wallet_page.dart';
import 'package:hmg_patient_app_new/presentation/habib_wallet/recharge_wallet_page.dart';
import 'package:hmg_patient_app_new/presentation/hmg_services/services_view.dart';
import 'package:hmg_patient_app_new/presentation/hmg_services/widgets/weather_widget.dart';
import 'package:hmg_patient_app_new/presentation/home/data/landing_page_data.dart';
import 'package:hmg_patient_app_new/presentation/home/service_info_page.dart';
import 'package:hmg_patient_app_new/presentation/home/widgets/large_service_card.dart';
import 'package:hmg_patient_app_new/presentation/my_family/my_family.dart';
import 'package:hmg_patient_app_new/presentation/service_price/services_price_list_page.dart';
import 'package:hmg_patient_app_new/services/dialog_service.dart';
import 'package:hmg_patient_app_new/services/navigation_service.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';
import 'package:hmg_patient_app_new/widgets/appbar/collapsing_list_view.dart';
import 'package:hmg_patient_app_new/widgets/buttons/custom_button.dart';
import 'package:hmg_patient_app_new/widgets/common_bottom_sheet.dart';
import 'package:hmg_patient_app_new/widgets/loader/bottomsheet_loader.dart';
import 'package:hmg_patient_app_new/widgets/routes/custom_page_route.dart';
import 'package:provider/provider.dart';
import 'package:url_launcher/url_launcher.dart';

import '../../core/dependencies.dart';
import '../emergency_services/call_ambulance/widgets/HospitalBottomSheetBody.dart';

class ServicesPage extends StatefulWidget {
  final bool showBackIcon;

  const ServicesPage({super.key, this.showBackIcon = true});

  @override
  State<ServicesPage> createState() => _ServicesPageState();
}

class _ServicesPageState extends State<ServicesPage> {
  late BloodDonationViewModel bloodDonationViewModel;

  late MedicalFileViewModel medicalFileViewModel;

  late WeatherMonitorViewModel weatherVM;

  late final List<HmgServicesComponentModel> hmgServices = [
    HmgServicesComponentModel(
        11,
        LocaleKeys.emergencyServices.tr(),
        "",
        AppAssets.emergency_services_icon,
        bgColor: AppColors.primaryRedColor,
        true,
        route: null, onTap: () async {
      // if (getIt.get<AppState>().isAuthenticated) {
      // getIt.get<EmergencyServicesViewModel>().flushData();
      // getIt.get<EmergencyServicesViewModel>().getTransportationOrders(
      //       showLoader: false,
      //     );
      // getIt.get<EmergencyServicesViewModel>().getRRTOrders(
      //       showLoader: false,
      //     );
      Navigator.of(getIt.get<NavigationService>().navigatorKey.currentContext!).push(
        CustomPageRoute(
          page: EmergencyServicesPage(),
          settings: const RouteSettings(name: '/EmergencyServicesPage'),
        ),
      );
      // } else {
      //   await getIt.get<AuthenticationViewModel>().onLoginPressed();
      // }
    }),
    HmgServicesComponentModel(
        11,
        LocaleKeys.bookAppointmentService.tr(),
        "",
        AppAssets.appointment_calendar_icon,
        bgColor: AppColors.bookAppointment,
        true,
        route: null, onTap: () {
      getIt.get<BookAppointmentsViewModel>().onTabChanged(0);
      Navigator.of(getIt<NavigationService>().navigatorKey.currentContext!).push(CustomPageRoute(page: BookAppointmentPage()));
    }),
    HmgServicesComponentModel(
        5, LocaleKeys.completeCheckup.tr(), "", AppAssets.comprehensiveCheckup, bgColor: AppColors.bgGreenColor, true, route: null, onTap: () async {
      if (getIt.get<AppState>().isAuthenticated) {
        Navigator.of(getIt<NavigationService>().navigatorKey.currentContext!).push(CustomPageRoute(page: ComprehensiveCheckupPage()));
      } else {
        Navigator.of(getIt<NavigationService>().navigatorKey.currentContext!).push(
          CustomPageRoute(
            page: ServiceInfoPage(
                serviceName: LocaleKeys.comprehensiveMedicalCheckup.tr(),
                serviceHeader: LocaleKeys.cmcServiceHeader.tr(),
                serviceDescription: LocaleKeys.cmcServiceDescription.tr(),
                serviceImage: AppAssets.cmcService),
          ),
        );
      }
    }),
    HmgServicesComponentModel(
      11,
      LocaleKeys.indoorNavigation.tr(),
      "",
      AppAssets.indoor_nav_icon,
      bgColor: Color(0xff45A2F8),
      true,
      route: null,
      onTap: () {
        showCommonBottomSheetWithoutHeight(
          title: LocaleKeys.selectHospital.tr(),
          GetIt.instance<NavigationService>().navigatorKey.currentContext!,
          child: ChangeNotifierProvider(
            create: (context) => HospitalSelectionBottomSheetViewModel(getIt()),
            child: Consumer<HospitalSelectionBottomSheetViewModel>(
              builder: (_, vm, __) => HospitalBottomSheetBody(
                searchText: vm.searchController,
                displayList: vm.displayList,
                onFacilityClicked: (value) {
                  vm.setSelectedFacility(value);
                  vm.getDisplayList();
                },
                onHospitalClicked: (hospital) {
                  Navigator.pop(GetIt.instance<NavigationService>().navigatorKey.currentContext!);
                  vm.openPenguin(hospital);
                },
                onHospitalSearch: (value) {
                  vm.searchHospitals(value ?? "");
                },
                selectedFacility: vm.selectedFacility,
                hmcCount: vm.hmcCount,
                hmgCount: vm.hmgCount,
              ),
            ),
          ),
          isFullScreen: false,
          isCloseButtonVisible: true,
          hasBottomPadding: false,
          backgroundColor: AppColors.bottomSheetBgColor,
          callBackFunc: () {
            GetIt.instance<NavigationService>().navigatorKey.currentContext!.read<EmergencyServicesViewModel>().clearSearchText();
          },
        );
      },
    ),
    HmgServicesComponentModel(
        11, LocaleKeys.eReferralServices.tr(), "", AppAssets.eReferral, bgColor: AppColors.eReferralCardColor, true, route: null, onTap: () async {
      if (getIt.get<AppState>().isAuthenticated) {
        getIt.get<NavigationService>().pushPageRoute(AppRoutes.eReferralPage);
      } else {
        Navigator.of(getIt<NavigationService>().navigatorKey.currentContext!).push(
          CustomPageRoute(
            page: ServiceInfoPage(
                serviceName: LocaleKeys.eReferralServices.tr(),
                serviceHeader: LocaleKeys.eReferralServiceHeader.tr(),
                serviceDescription: LocaleKeys.eReferralServiceDescription.tr(),
                serviceImage: AppAssets.eReferralService),
          ),
        );
      }
    }),
    HmgServicesComponentModel(
        3,
        LocaleKeys.bloodDonationService.tr(context: getIt.get<NavigationService>().navigatorKey.currentContext!),
        "".needTranslation,
        AppAssets.blood_donation_icon,
        bgColor: AppColors.bloodDonationCardColor,
        true,
        route: null, onTap: () {
      if (getIt.get<AppState>().isAuthenticated) {
        Navigator.of(getIt<NavigationService>().navigatorKey.currentContext!).push(
          CustomPageRoute(
            page: BloodDonationPage(),
          ),
        );
      } else {
        Navigator.of(getIt<NavigationService>().navigatorKey.currentContext!).push(
          CustomPageRoute(
            page: ServiceInfoPage(
                serviceName: LocaleKeys.bloodDonation.tr(),
                serviceHeader: LocaleKeys.bloodDonationServiceHeader.tr(),
                serviceDescription: LocaleKeys.bloodDonationServiceDescription.tr(),
                serviceImage: AppAssets.bloodDonationService),
          ),
        );
      }
    }),
    HmgServicesComponentModel(
      113,
      LocaleKeys.servicePriceList.tr(context: getIt.get<NavigationService>().navigatorKey.currentContext!),
      "".needTranslation,
      AppAssets.saudi_riyal_icon,
      bgColor: AppColors.textColor,
      false,
      route: null,
      onTap: () {
        Navigator.of(getIt.get<NavigationService>().navigatorKey.currentContext!).push(
          CustomPageRoute(page: ServicesPriceListPage()),
        );
      },
    )
    // HmgServicesComponentModel(
    //   3,
    //   "My Child Vaccine".needTranslation,
    //   "".needTranslation,
    //   AppAssets.my_child_vaccine_icon,
    //   bgColor: AppColors.myChildVaccineCardColor,
    //   true,
    //   route: AppRoutes.myChildVaccine,
    // ),
// HmgServicesComponentModel(
//   11,
//   "Covid 19 Test".needTranslation,
//   "".needTranslation,
//   AppAssets.covid19icon,
//   bgColor: AppColors.covid29Color,
//   true,
//   route: AppRoutes.covid19Test,
// ),

    // HmgServicesComponentModel(
    //   11,
    //   "Vital Sign".needTranslation,
    //   "".needTranslation,
    //   AppAssets.covid19icon,
    //   bgColor: AppColors.covid29Color,
    //   true,
    //   route: AppRoutes.vitalSign,
    // )

    // HmgServicesComponentModel(
    //   3,
    //   "Home Health Care".needTranslation,
    //   "".needTranslation,
    //   AppAssets.homeBottom,
    //   bgColor: AppColors.primaryRedColor,
    //   true,
    //   route: AppRoutes.homeHealthCarePage,
    // ),
    // HmgServicesComponentModel(
    //   11,
    //   "Virtual Tour".needTranslation,
    //   "".needTranslation,
    //   AppAssets.my_address,
    //   bgColor: AppColors.quickLoginColor,
    //   true,
    //   route: null,
    //   onTap:(){
    //     Utils.openWebView(
    //       url: 'https://hmgwebservices.com/vt_mobile/html/index.html',
    //     );
    //   },
    // )
  ];

  late final List<HmgServicesComponentModel> hmgHealthToolServices = [
    HmgServicesComponentModel(
      11,
      LocaleKeys.healthTrackers.tr(),
      "",
      AppAssets.general_health,
      bgColor: AppColors.whiteColor,
      true,
      route: null,
      onTap: () async {
        if (getIt.get<AppState>().isAuthenticated) {
          getIt.get<NavigationService>().pushPageRoute(AppRoutes.healthTrackersPage);
        } else {
          Navigator.of(getIt<NavigationService>().navigatorKey.currentContext!).push(
            CustomPageRoute(
              page: ServiceInfoPage(
                  serviceName: LocaleKeys.healthTrackers.tr(),
                  serviceHeader: LocaleKeys.healthTrackersServiceHeader.tr(),
                  serviceDescription: LocaleKeys.healthTrackersServiceDescription.tr(),
                  serviceImage: AppAssets.healthTrackersService),
            ),
          );
        }
      },
    ),
    HmgServicesComponentModel(
      11,
      LocaleKeys.dailyWaterMonitor.tr(),
      "",
      AppAssets.daily_water_monitor_icon,
      bgColor: AppColors.whiteColor,
      true,
      route: null, // Set to null since we handle navigation in onTap
      onTap: () async {
        if (getIt.get<AppState>().isAuthenticated) {
          LoaderBottomSheet.showLoader(loadingText: LocaleKeys.fetchingYourWaterIntakeDetails.tr());
          final waterMonitorVM = getIt.get<WaterMonitorViewModel>();
          final context = getIt.get<NavigationService>().navigatorKey.currentContext!;
          await waterMonitorVM.fetchUserDetailsForMonitoring(
            onSuccess: (userDetail) {
              LoaderBottomSheet.hideLoader();
              if (userDetail == null) {
                waterMonitorVM.populateFromAuthenticatedUser();
                context.navigateWithName(AppRoutes.waterMonitorSettingsPage);
              } else {
                context.navigateWithName(AppRoutes.waterConsumptionPage);
              }
            },
            onError: (error) {
              LoaderBottomSheet.hideLoader();
              context.navigateWithName(AppRoutes.waterConsumptionPage);
            },
          );
        } else {
          Navigator.of(getIt<NavigationService>().navigatorKey.currentContext!).push(
            CustomPageRoute(
              page: ServiceInfoPage(
                  serviceName: LocaleKeys.waterConsumption.tr(),
                  serviceHeader: LocaleKeys.waterConsumptionServiceHeader.tr(),
                  serviceDescription: LocaleKeys.waterConsumptionServiceDescription.tr(),
                  serviceImage: AppAssets.waterConsumptionService),
            ),
          );
        }
      },
    ),
    HmgServicesComponentModel(
      11,
      LocaleKeys.healthCalculatorsServices.tr(),
      "",
      AppAssets.health_calculators_services_icon,
      bgColor: AppColors.whiteColor,
      true,
      route: AppRoutes.healthCalculatorsPage,
    ),
    HmgServicesComponentModel(
      5,
      LocaleKeys.healthConvertersServices.tr(),
      "",
      AppAssets.health_converters_icon,
      bgColor: AppColors.whiteColor,
      true,
      route: AppRoutes.healthConvertersPage,
    ),
    HmgServicesComponentModel(
      11,
      LocaleKeys.smartWatchesServices.tr(),
      "",
      AppAssets.smartwatch_icon,
      bgColor: AppColors.whiteColor,
      true,
      route: null,
      onTap: () async {
        if (getIt.get<AppState>().isAuthenticated) {
          getIt.get<NavigationService>().pushPageRoute(AppRoutes.smartWatches);
        } else {
          Navigator.of(getIt<NavigationService>().navigatorKey.currentContext!).push(
            CustomPageRoute(
              page: ServiceInfoPage(
                  serviceName: LocaleKeys.smartWatches.tr(),
                  serviceHeader: LocaleKeys.smartWatchServiceHeader.tr(),
                  serviceDescription: LocaleKeys.smartWatchServiceDescription.tr(),
                  serviceImage: AppAssets.smartWatchService),
            ),
          );
        }
        // if (getIt.get<AppState>().isAuthenticated) {
        //   getIt.get<NavigationService>().pushPageRoute(AppRoutes.smartWatches);
        // } else {
        //   await getIt.get<AuthenticationViewModel>().onLoginPressed();
        // }
      },
      // route: AppRoutes.huaweiHealthExample,
    ),
  ];

  late final List<HmgServicesComponentModel> socialLinkedinMessage = [
    HmgServicesComponentModel(
      101,
      LocaleKeys.followUsOnX.tr(),
      "",
      AppAssets.x,
      bgColor: AppColors.whiteColor,
      true,
      route: null,
      onTap: () async {
        launchUrl(Uri.parse("https://twitter.com/HMG"));
      },
    ),
    HmgServicesComponentModel(
      102,
      LocaleKeys.likeUsOnFB.tr(),
      "",
      AppAssets.fb,
      bgColor: AppColors.whiteColor,
      true,
      route: null, // Set to null since we handle navigation in onTap
      onTap: () async {
        launchUrl(Uri.parse("https://www.facebook.com/DrSulaimanAlHabib?ref=tn_tnmn"));
      },
    ),
    HmgServicesComponentModel(
        103,
        LocaleKeys.watchUsOnYoutube.tr(),
        "",
        AppAssets.youtube,
        bgColor: AppColors.whiteColor,
        true,
        onTap: () => launchUrl(Uri.parse("https://www.youtube.com/c/DrsulaimanAlhabibHospitals"))),
    HmgServicesComponentModel(
      104,
      LocaleKeys.connectOnLinkedin.tr(),
      "",
      AppAssets.linkedin,
      bgColor: AppColors.whiteColor,
      true,
      onTap: () => launchUrl(Uri.parse("https://www.linkedin.com/company/drsulaiman-alhabib-medical-group")),
    ),
  ];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    weatherVM = getIt<WeatherMonitorViewModel>();
    weatherVM.initiateFetchWeather();
  }

  @override
  Widget build(BuildContext context) {
    bloodDonationViewModel = Provider.of<BloodDonationViewModel>(context);
    medicalFileViewModel = Provider.of<MedicalFileViewModel>(context);
    hmgServices.removeWhere((element) => Utils.havePrivilege(element.action) == false);

    return ChangeNotifierProvider.value(
      value: weatherVM,
      child: Scaffold(
        backgroundColor: AppColors.bgScaffoldColor,
        body: CollapsingListView(
          title: LocaleKeys.exploreServices.tr(),
          isLeading: widget.showBackIcon,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const WeatherWidget(),
              SizedBox(height: 16.h),
              LocaleKeys.medicalAndCareServices.tr().toText18(isBold: true).paddingSymmetrical(24.w, 0),
              SizedBox(height: 16.h),
              GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: (isFoldable || isTablet) ? 5 : 4, // 4 icons per row
                ),
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemCount: hmgServices.length,
                padding: EdgeInsets.zero,
                itemBuilder: (BuildContext context, int index) {
                  return ServiceGridViewItem(hmgServices[index], index, false, isHealthToolIcon: false);
                },
              ).paddingSymmetrical(24.w, 0),
              SizedBox(height: 24.h),
              LocaleKeys.hmgServices.tr().toText18(isBold: true).paddingSymmetrical(24.w, 0),
              SizedBox(height: 16.h),
              ConstrainedBox(
                constraints: BoxConstraints(
                  minHeight: 320.h,
                  maxHeight: isFoldable ? 380.h : (isTablet ? 370.h : 340.h),
                ),
                child: ListView.separated(
                  scrollDirection: Axis.horizontal,
                  itemCount: LandingPageData.getServiceCardsList.length,
                  shrinkWrap: true,
                  padding: EdgeInsets.symmetric(horizontal: 24.w),
                  itemBuilder: (context, index) {
                    return AnimationConfiguration.staggeredList(
                      position: index,
                      duration: const Duration(milliseconds: 1000),
                      child: SlideAnimation(
                        horizontalOffset: 100.0,
                        child: FadeInAnimation(
                          child: LargeServiceCard(
                            serviceCardData: LandingPageData.getServiceCardsList[index],
                            image: LandingPageData.getServiceCardsList[index].icon,
                            title: LandingPageData.getServiceCardsList[index].title,
                            subtitle: LandingPageData.getServiceCardsList[index].subtitle,
                            icon: LandingPageData.getServiceCardsList[index].largeCardIcon,
                            isPNG: LandingPageData.getServiceCardsList[index].isPNG,
                          ),
                        ),
                      ),
                    );
                  },
                  separatorBuilder: (BuildContext cxt, int index) => SizedBox(width: 16.w),
                ),
              ),
              SizedBox(height: 24.h),
              getIt.get<AppState>().isAuthenticated
                  ? Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        LocaleKeys.personalServices.tr().toText18(isBold: true).paddingSymmetrical(24.w, 0),
                        SizedBox(height: 16.h),
                        Row(
                          children: [
                            Expanded(
                              child: Container(
                                height: 183.h,
                                width: 183.h,
                                padding: EdgeInsets.all(16.w),
                                decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                                  color: AppColors.whiteColor,
                                  borderRadius: 20.r,
                                  hasShadow: false,
                                ),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Row(
                                      spacing: 8.w,
                                      crossAxisAlignment: CrossAxisAlignment.center,
                                      children: [
                                        Utils.buildSvgWithAssets(icon: AppAssets.wallet, width: 40.w, height: 40.h, applyThemeColor: false),
                                        LocaleKeys.habibWallet.tr().toText14(isBold: true, maxlines: 2).expanded,
                                        Utils.buildSvgWithAssets(
                                            icon: getIt.get<AppState>().isArabic() ? AppAssets.arrow_back : AppAssets.arrow_forward),
                                      ],
                                    ),
                                    Spacer(),
                                    getIt.get<AppState>().isAuthenticated
                                        ? Consumer<HabibWalletViewModel>(builder: (context, habibWalletVM, child) {
                                            return Row(
                                              children: [
                                                Utils.buildSvgWithAssets(
                                                  icon: (getIt.get<AppState>().getAuthenticatedUser()!.outSa == 1) ? AppAssets.uae_dirham_symbol : AppAssets.saudi_riyal_icon,
                                                  iconColor: AppColors.inputLabelTextColor,
                                                  width: 24.h,
                                                  height: 24.h,
                                                  fit: BoxFit.contain,
                                                ),
                                                SizedBox(width: 8.h),
                                                NumberFormat.decimalPattern()
                                                    .format(habibWalletVM.habibWalletAmount)
                                                    .toString()
                                                    .toText28(isBold: true)
                                                    .toShimmer2(isShow: habibWalletVM.isWalletAmountLoading, radius: 12.h, width: 80.h, height: 40.h),
                                              ],
                                            );
                                            // Utils.getPaymentAmountWithSymbol2(num.parse(NumberFormat.decimalPattern().format(habibWalletVM.habibWalletAmount)),
                                            //       isExpanded: false, letterSpacing: -1)
                                            //   .toShimmer2(isShow: habibWalletVM.isWalletAmountLoading, radius: 12.r, width: 80.w, height: 24.h);
                                          })
                                        : LocaleKeys.loginToViewWalletBalance.tr().toText12(isBold: true, maxLine: 2),
                                    Spacer(),
                                    getIt.get<AppState>().isAuthenticated
                                        ? CustomButton(
                                            height: 40.h,
                                            icon: AppAssets.recharge_icon,
                                            iconSize: 24.w,
                                            iconColor: AppColors.infoColor,
                                            textColor: AppColors.infoColor,
                                            text: LocaleKeys.recharge.tr(),
                                            borderWidth: 0.w,
                                            isBold: true,
                                            borderColor: Colors.transparent,
                                            backgroundColor: Color(0xff45A2F8).withValues(alpha: 0.08),
                                            padding: EdgeInsets.all(8.w),
                                            fontSize: 14.f,
                                            onPressed: () {
                                              Navigator.of(context).push(CustomPageRoute(page: RechargeWalletPage()));
                                            },
                                          )
                                        : SizedBox.shrink(),
                                  ],
                                ).onPress(() async {
                                  if (getIt.get<AppState>().isAuthenticated) {
                                    Navigator.of(context).push(CustomPageRoute(page: HabibWalletPage()));
                                  } else {
                                    await getIt.get<AuthenticationViewModel>().onLoginPressed();
                                  }
                                }),
                              ),
                            ),
                            SizedBox(width: 16.w),
                            Expanded(
                              child: Container(
                                height: 183.h,
                                width: 183.h,
                                padding: EdgeInsets.all(16.w),
                                decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                                  color: AppColors.whiteColor,
                                  borderRadius: 20.r,
                                  hasShadow: false,
                                ),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Row(
                                      spacing: 8.w,
                                      crossAxisAlignment: CrossAxisAlignment.center,
                                      children: [
                                        Utils.buildSvgWithAssets(
                                            icon: AppAssets.services_medical_file_icon, width: 40.w, height: 40.h, applyThemeColor: false),
                                        LocaleKeys.familyTitle.tr().toText16(isBold: true, maxlines: 2).expanded,
                                        Utils.buildSvgWithAssets(
                                            icon: getIt.get<AppState>().isArabic() ? AppAssets.arrow_back : AppAssets.arrow_forward),
                                      ],
                                    ),
                                    Spacer(),
                                    getIt.get<AppState>().isAuthenticated
                                        ? Wrap(
                                            spacing: -12.h,
                                            // runSpacing: 0.h,
                                            children: [
                                              Utils.buildImgWithAssets(
                                                icon: AppAssets.babyGirlImg,
                                                height: 32.h,
                                                width: 32.w,
                                                border: 1,
                                                fit: BoxFit.contain,
                                                borderRadius: 50.r,
                                              ),
                                              Utils.buildImgWithAssets(
                                                icon: AppAssets.femaleImg,
                                                height: 32.h,
                                                width: 32.w,
                                                border: 1,
                                                borderRadius: 50.r,
                                                fit: BoxFit.contain,
                                              ),
                                              Utils.buildImgWithAssets(
                                                icon: AppAssets.maleImg,
                                                height: 32.h,
                                                width: 32.w,
                                                border: 1,
                                                borderRadius: 50.r,
                                                fit: BoxFit.contain,
                                              ),
                                            ],
                                          )
                                        : LocaleKeys.loginToViewMedicalFile.tr().toText12(isBold: true, maxLine: 2),
                                    Spacer(),
                                    getIt.get<AppState>().isAuthenticated
                                        ? CustomButton(
                                            height: 40.h,
                                            icon: AppAssets.add_icon,
                                            iconSize: 24.h,
                                            iconColor: AppColors.primaryRedColor,
                                            textColor: AppColors.primaryRedColor,
                                            text: getIt.get<AppState>().isArabic() ? LocaleKeys.add.tr() : LocaleKeys.addMember.tr(),
                                            borderWidth: 0.w,
                                            isBold: true,
                                            borderColor: Colors.transparent,
                                            backgroundColor: AppColors.primaryRedColor.withValues(alpha: 0.08),
                                            padding: EdgeInsets.all(8.w),
                                            fontSize: 14.f,
                                            onPressed: () {
                                              DialogService dialogService = getIt.get<DialogService>();
                                              medicalFileViewModel.clearAuthValues();
                                              dialogService.showAddFamilyFileSheet(
                                                  label: LocaleKeys.addFamilyMember.tr(),
                                                  message: LocaleKeys.pleaseFillBelowFieldToAddNewFamilyMember.tr(),
                                                  onVerificationPress: () {
                                                    medicalFileViewModel.addFamilyFile(otpTypeEnum: OTPTypeEnum.sms);
                                                  });
                                            },
                                          )
                                        : SizedBox.shrink(),
                                  ],
                                ).onPress(() async {
                                  if (getIt.get<AppState>().isAuthenticated) {
                                    // Navigator.of(context).push(
                                    //   CustomPageRoute(
                                    //     page: MedicalFilePage(),
                                    //   ),
                                    // );
                                    Navigator.of(context).push(
                                      CustomPageRoute(
                                        direction: AxisDirection.down,
                                        page: FamilyMedicalScreen(),
                                      ),
                                    );
                                  } else {
                                    await getIt.get<AuthenticationViewModel>().onLoginPressed();
                                  }
                                }),
                              ),
                            ),
                          ],
                        ).paddingSymmetrical(24.w, 0),
                      ],
                    )
                  : SizedBox(),
              SizedBox(height: 24.h),
              LocaleKeys.healthTools.tr().toText18(isBold: true).paddingSymmetrical(24.w, 0),
              SizedBox(height: 16.h),
              GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: (isFoldable || isTablet) ? 5 : 4, // 4 icons per row
                  mainAxisSpacing: 18.h,
                ),
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemCount: hmgHealthToolServices.length,
                padding: EdgeInsets.zero,
                itemBuilder: (BuildContext context, int index) {
                  return ServiceGridViewItem(
                    hmgHealthToolServices[index],
                    index,
                    false,
                    isHealthToolIcon: true,
                  );
                },
              ).paddingSymmetrical(24.w, 0),
              SizedBox(height: 24.h),
              LocaleKeys.supportServices.tr().toText18(isBold: true).paddingSymmetrical(24.w, 0),
              SizedBox(height: 16.h),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(height: 16.h),
                  Row(
                    children: [
                      Expanded(
                        child: Container(
                          decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                            color: AppColors.whiteColor,
                            borderRadius: 12.h,
                            hasShadow: false,
                          ),
                          child: Padding(
                            padding: EdgeInsets.all(16.h),
                            child: Row(
                              children: [
                                Utils.buildSvgWithAssets(
                                  icon: AppAssets.latest_news_icon,
                                  width: 32.h,
                                  height: 32.h,
                                  fit: BoxFit.contain,
                                ),
                                SizedBox(width: 8.w),
                                LocaleKeys.latestNews.tr().toText14(isBold: true)
                              ],
                            ),
                          ),
                        ).onPress(() {
                          Utils.openWebView(
                            url: 'https://x.com/HMG',
                          );
                        }),
                      ),
                      SizedBox(width: 16.w),
                      Expanded(
                        child: Container(
                          decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                            color: AppColors.whiteColor,
                            borderRadius: 12.h,
                            hasShadow: false,
                          ),
                          child: Padding(
                            padding: EdgeInsets.all(16.h),
                            child: Row(
                              children: [
                                Utils.buildSvgWithAssets(
                                  icon: AppAssets.hmg_contact_icon,
                                  width: 32.h,
                                  height: 32.h,
                                  fit: BoxFit.contain,
                                ),
                                SizedBox(width: 8.w),
                                Expanded(child: LocaleKeys.hmgContact.tr().toText14(isBold: true))
                              ],
                            ),
                          ),
                        ).onPress(() {
                          showCommonBottomSheetWithoutHeight(
                            context,
                            title: LocaleKeys.contactUs.tr(),
                            child: ContactUs(),
                            callBackFunc: () {},
                            isFullScreen: false,
                          );
                        }),
                      )
                    ],
                  ),
                  SizedBox(height: 24.h),
                  LocaleKeys.hmgPolicies.tr().toText18(weight: FontWeight.bold),
                  SizedBox(height: 16.h),
                  Row(
                    children: [
                      Expanded(
                        child: Container(
                          decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                            color: AppColors.whiteColor,
                            borderRadius: 12.h,
                            hasShadow: false,
                          ),
                          child: Padding(
                            padding: EdgeInsets.all(16.h),
                            child: Row(
                              children: [
                                Utils.buildSvgWithAssets(
                                    icon: AppAssets.privacy_terms, width: 32.w, height: 32.h, fit: BoxFit.contain, iconColor: AppColors.blackColor),
                                SizedBox(width: 8.w),
                                Expanded(child: LocaleKeys.termsConditoins.tr().toText14(isBold: true))
                              ],
                            ),
                          ),
                        ).onPress(() {
                          Utils.openWebView(
                            url: AppUrls.hmgTermsUrlEn,
                          );
                        }),
                      ),
                      SizedBox(width: 16.w),
                      Expanded(
                        child: Container(
                          decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                            color: AppColors.whiteColor,
                            borderRadius: 12.h,
                            hasShadow: false,
                          ),
                          child: Padding(
                            padding: EdgeInsets.all(16.h),
                            child: Row(
                              children: [
                                Utils.buildSvgWithAssets(
                                    icon: AppAssets.privacy_terms, width: 32.w, height: 32.h, fit: BoxFit.contain, iconColor: AppColors.blackColor),
                                SizedBox(width: 8.w),
                                Expanded(child: LocaleKeys.privacyPolicy.tr().toText14(isBold: true))
                              ],
                            ),
                          ),
                        ).onPress(() {
                          Utils.openWebView(
                            url: AppUrls.hmgPrivacyUrlEn,
                          );
                        }),
                      )
                    ],
                  )
                ],
              ).paddingSymmetrical(24.w, 0),
              SizedBox(height: 16.h),
              GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: (isFoldable || isTablet) ? 5 : 4, // 4 icons per row
                  mainAxisSpacing: 18.h,
                ),
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemCount: socialLinkedinMessage.length,
                padding: EdgeInsets.zero,
                itemBuilder: (BuildContext context, int index) {
                  return ServiceGridViewItem(
                    socialLinkedinMessage[index],
                    index,
                    false,
                    isHealthToolIcon: true,
                  );
                },
              ).paddingSymmetrical(24.w, 0),
              SizedBox(height: 24.h),
            ],
          ),
        ),
      ),
    );
  }
}
