import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:hmg_patient_app_new/core/app_assets.dart';
import 'package:hmg_patient_app_new/core/common_models/smart_watch.dart';
import 'package:hmg_patient_app_new/core/dependencies.dart';
import 'package:hmg_patient_app_new/core/utils/size_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/smartwatch_health_data/health_provider.dart';
import 'package:hmg_patient_app_new/generated/locale_keys.g.dart';
import 'package:hmg_patient_app_new/presentation/smartwatches/smartwatch_instructions_page.dart';
import 'package:hmg_patient_app_new/presentation/smartwatches/widgets/supported_watches_list.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:provider/provider.dart';

import '../../core/utils/utils.dart';

class SmartwatchHomePage extends StatelessWidget {
  const SmartwatchHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.bgScaffoldColor,
      body: CollapsingListView(
        title: LocaleKeys.smartWatches.tr(),
        bottomChild: Container(
          decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
            color: AppColors.whiteColor,
            borderRadius: 24.r,
          ),
          child: CustomButton(
            text: LocaleKeys.supportedSmartWatches.tr(context: context),
            onPressed: () {
              showCommonBottomSheetWithoutHeight(
                title: LocaleKeys.supportedSmartWatches.tr(context: context),
                context,
                child: SupportedWatchesList(),
                callBackFunc: () {},
                isFullScreen: false,
                isCloseButtonVisible: true,
              );
            },
            backgroundColor: AppColors.infoColor.withAlpha(40),
            borderColor: AppColors.infoColor.withAlpha(0),
            textColor: AppColors.infoColor,
            fontSize: 16.f,
            isBold: true,
            borderRadius: 12.r,
            height: 50.h,
            icon: AppAssets.ask_doctor_icon,
            iconColor: AppColors.infoColor,
            iconSize: 18.h,
          ).paddingSymmetrical(24.w, 30.h),
        ),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 24.h),
                child: GridView(
                  padding: EdgeInsets.zero,
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    crossAxisSpacing: 16.h, 
                    mainAxisSpacing: 16.w,
                    childAspectRatio: isFoldable ? 1.1 : (isTablet ? 1.3 : 0.7),
                  ),
                  children: [
                    Container(
                      decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                        color: AppColors.whiteColor,
                        borderRadius: 24.r,
                      ),
                      child: Column(
                        children: [
                          Utils.buildImgWithAssets(icon: "assets/images/png/smartwatches/apple-watch-5.jpg", width: 136.h, height: 136.h).paddingSymmetrical(24.w, 8.h),
                          "Apple Watch".needTranslation.toText16(isBold: true),
                          CustomButton(
                            text: LocaleKeys.selectSmartWatch.tr(context: context),
                            onPressed: () {
                              context
                                  .read<HealthProvider>()
                                  .setSelectedWatchType(SmartWatchTypes.apple, "assets/images/png/smartwatches/apple-watch-5.jpg");
                              getIt.get<NavigationService>().pushPage(
                                      page: SmartwatchInstructionsPage(
                                    smartwatchDetails: SmartwatchDetails(
                                        SmartWatchTypes.apple,
                                        "assets/images/png/smartwatches/apple-watch-5.jpg",
                                        AppAssets.bluetooth,
                                        LocaleKeys.applehealthapplicationshouldbeinstalledinyourphone.tr(context: context),
                                        LocaleKeys.unabletodetectapplicationinstalledpleasecomebackonceinstalled.tr(context: context),
                                        LocaleKeys.applewatchshouldbeconnected.tr(context: context)),
                                  ));
                            },
                            backgroundColor: AppColors.primaryRedColor.withAlpha(40),
                            borderColor: AppColors.primaryRedColor.withAlpha(0),
                            textColor: AppColors.primaryRedColor,
                            fontSize: 14.f,
                            isBold: true,
                            borderRadius: 12.r,
                            height: 40.h,
                          ).paddingSymmetrical(16.w, 12.h),
                        ],
                      ),
                    ),
                    Container(
                      decoration: RoundedRectangleBorder().toSmoothCornerDecoration(color: AppColors.whiteColor, borderRadius: 24.r),
                      child: Column(
                        children: [
                          Utils.buildImgWithAssets(icon: "assets/images/png/smartwatches/galaxy_watch_8_classic.jpeg", fit: BoxFit.contain, width: 136.w, height: 136.h)
                              .paddingSymmetrical(24.w, 8.h),
                          "Samsung Watch".needTranslation.toText16(isBold: true),
                          CustomButton(
                            text: LocaleKeys.selectSmartWatch.tr(context: context),
                            onPressed: () {
                              context
                                  .read<HealthProvider>()
                                  .setSelectedWatchType(SmartWatchTypes.samsung, "assets/images/png/smartwatches/galaxy_watch_8_classic.jpeg");
                              getIt.get<NavigationService>().pushPage(
                                      page: SmartwatchInstructionsPage(
                                    smartwatchDetails: SmartwatchDetails(
                                        SmartWatchTypes.samsung,
                                        "assets/images/png/smartwatches/galaxy_watch_8_classic.jpeg",
                                        AppAssets.bluetooth,
                                        LocaleKeys.samsunghealthapplicationshouldbeinstalledinyourphone.tr(context: context),
                                        LocaleKeys.unabletodetectapplicationinstalledpleasecomebackonceinstalled.tr(context: context),
                                        LocaleKeys.samsungwatchshouldbeconnected.tr(context: context)),
                                  ));
                            },
                            backgroundColor: AppColors.primaryRedColor.withAlpha(40),
                            borderColor: AppColors.primaryRedColor.withAlpha(0),
                            textColor: AppColors.primaryRedColor,
                            fontSize: 14.f,
                            isBold: true,
                            borderRadius: 12.r,
                            height: 40.h,
                          ).paddingSymmetrical(16.w, 12.h),
                        ],
                      ),
                    ),
                    Container(
                      decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                        color: AppColors.whiteColor,
                        borderRadius: 24.r,
                      ),
                      child: Column(
                        children: [
                          Utils.buildImgWithAssets(icon: "assets/images/png/smartwatches/Huawei_Watch.png", width: 136.w, height: 136.h).paddingSymmetrical(24.w, 8.h),
                          "Huawei Watch".needTranslation.toText16(isBold: true),
                          CustomButton(
                            text: LocaleKeys.selectSmartWatch.tr(context: context),
                            onPressed: () {
                              // context.read<HealthProvider>().setSelectedWatchType(SmartWatchTypes.huawei, "assets/images/png/smartwatches/Huawei_Watch.png");
                              // getIt.get<NavigationService>().pushPage(page: SmartwatchInstructionsPage(
                              //   smartwatchDetails: SmartwatchDetails(SmartWatchTypes.huawei,
                              //       "assets/images/png/smartwatches/Huawei_Watch.png",
                              //       AppAssets.bluetooth,
                              //       LocaleKeys.huaweihealthapplicationshouldbeinstalledinyourphone.tr(context: context),
                              //       LocaleKeys.unabletodetectapplicationinstalledpleasecomebackonceinstalled.tr(context: context),
                              //       LocaleKeys.huaweiwatchshouldbeconnected.tr(context: context)),
                              // ));
                              showUnavailableDialog(context);
                            },
                            backgroundColor: AppColors.primaryRedColor.withAlpha(40),
                            borderColor: AppColors.primaryRedColor.withAlpha(0),
                            textColor: AppColors.primaryRedColor,
                            fontSize: 14.f,
                            isBold: true,
                            borderRadius: 12.r,
                            height: 40.h,
                          ).paddingSymmetrical(16.w, 12.h),
                        ],
                      ),
                    ),
                    Container(
                      decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                        color: AppColors.whiteColor,
                        borderRadius: 24.r,
                      ),
                      child: Column(
                        children: [
                          Utils.buildImgWithAssets(icon: "assets/images/png/smartwatches/Whoop_Watch.png", width: 136.w, height: 136.h).paddingSymmetrical(24.w, 8.h),
                          "Whoop Watch".needTranslation.toText16(isBold: true),
                          CustomButton(
                            text: LocaleKeys.selectSmartWatch.tr(context: context),
                            onPressed: () {
                              showUnavailableDialog(context);
                              // context.read<HealthProvider>().setSelectedWatchType(SmartWatchTypes.whoop, "assets/images/png/smartwatches/Whoop_Watch.png");
                              // getIt.get<NavigationService>().pushPage(page: SmartwatchInstructionsPage(
                              //   smartwatchDetails: SmartwatchDetails(SmartWatchTypes.whoop,
                              //       "assets/images/png/smartwatches/Whoop_Watch.png",
                              //       AppAssets.bluetooth,
                              //       LocaleKeys.whoophealthapplicationshouldbeinstalledinyourphone.tr(context: context),
                              //       LocaleKeys.unabletodetectapplicationinstalledpleasecomebackonceinstalled.tr(context: context),
                              //       LocaleKeys.whoopwatchshouldbeconnected.tr(context: context)),
                              // ));
                            },
                            backgroundColor: AppColors.primaryRedColor.withAlpha(40),
                            borderColor: AppColors.primaryRedColor.withAlpha(0),
                            textColor: AppColors.primaryRedColor,
                            fontSize: 14.f,
                            isBold: true,
                            borderRadius: 12.r,
                            height: 40.h,
                          ).paddingSymmetrical(16.w, 12.h),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void showUnavailableDialog(BuildContext context) {
    showCommonBottomSheetWithoutHeight(
      title: LocaleKeys.notice.tr(context: context),
      context,
      child: Utils.getWarningWidget(
          loadingText: LocaleKeys.featureComingSoonDescription.tr(context: context),
          isShowActionButtons: false,
          showOkButton: true,
          onConfirmTap: () async {
            context.pop();
          }),
      callBackFunc: () {},
      isFullScreen: false,
      isCloseButtonVisible: true,
    );
  }
}
