import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:hmg_patient_app_new/core/app_assets.dart';
import 'package:hmg_patient_app_new/core/app_state.dart';
import 'package:hmg_patient_app_new/core/dependencies.dart';
import 'package:hmg_patient_app_new/core/enums.dart';
import 'package:hmg_patient_app_new/core/utils/size_utils.dart';
import 'package:hmg_patient_app_new/core/utils/utils.dart';
import 'package:hmg_patient_app_new/core/utils/validation_utils.dart';
import 'package:hmg_patient_app_new/extensions/context_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/generated/locale_keys.g.dart';
import 'package:hmg_patient_app_new/presentation/authentication/register.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';
import 'package:hmg_patient_app_new/widgets/appbar/app_bar_widget.dart';
import 'package:hmg_patient_app_new/widgets/bottomsheet/generic_bottom_sheet.dart';
import 'package:hmg_patient_app_new/widgets/buttons/custom_button.dart';
import 'package:hmg_patient_app_new/widgets/input_widget.dart';
import 'package:provider/provider.dart';

class LoginScreen extends StatefulWidget {
  const LoginScreen({super.key});

  @override
  LoginScreenState createState() => LoginScreenState();
}

class LoginScreenState extends State<LoginScreen> {
  late FocusNode _nationalIdFocusNode;

  @override
  void initState() {
    super.initState();
    _nationalIdFocusNode = FocusNode();
  }

  @override
  void dispose() {
    _nationalIdFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    AuthenticationViewModel authVm = context.read<AuthenticationViewModel>();
    return Scaffold(
      backgroundColor: AppColors.bgScaffoldColor,
      appBar: CustomAppBar(
        onBackPressed: () {
          Navigator.of(context).pop();
        },
        onLanguageChanged: (String value) {
          context.setLocale(value == 'en' ? Locale('en', 'US') : Locale('ar', 'SA'));
        },
      ),
      body: GestureDetector(
        onTap: () {
          // Dismiss the keyboard and unfocus any focused widget when tapping outside
          _nationalIdFocusNode.unfocus();
          FocusScope.of(context).unfocus();
        },
        child: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 24.h),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Utils.showLottie(context: context, assetPath: AppAnimations.login, width: 200.h, height: 200.h, repeat: true, fit: BoxFit.cover),
                SizedBox(height: 130.h), // Adjusted to sizer unit
                LocaleKeys.welcomeToDrSulaiman.tr().toText32(isBold: true, color: AppColors.textColor),
                SizedBox(height: 32.h),
                TextInputWidget(
                  labelText: "${LocaleKeys.nationalId.tr()} / ${LocaleKeys.fileNo.tr()}",
                  hintText: "xxxxxxxxx",
                  controller: authVm.nationalIdController,
                  focusNode: _nationalIdFocusNode,
                  keyboardType: TextInputType.number,
                  isEnable: true,
                  prefix: null,
                  autoFocus: true,
                  isAllowRadius: true,
                  isBorderAllowed: false,
                  isAllowLeadingIcon: true,
                  padding: EdgeInsets.symmetric(vertical: 8.h, horizontal: 10.h),
                  leadingIcon: AppAssets.student_card,
                  errorMessage: "Please enter a valid national ID or file number",
                  hasError: false,
                ),
                SizedBox(height: 16.h), // Adjusted to sizer unit (approx 16px)
                CustomButton(
                  height: 50.h,
                  text: LocaleKeys.login.tr(),
                  icon: AppAssets.login1,
                  iconColor: Colors.white,
                  onPressed: () {
                    _nationalIdFocusNode.unfocus();
                    FocusScope.of(context).unfocus();

                    if (ValidationUtils.isValidatedId(
                        nationalId: authVm.nationalIdController.text,
                        onOkPress: () {
                          Navigator.of(context).pop();
                        })) {
                      showLoginModelSheet(context: context, phoneNumberController: authVm.phoneNumberController, authViewModel: authVm);
                    }
                  },
                ),
                SizedBox(height: 10.h), // Adjusted to sizer unit (approx 14px)
                Center(
                  child: RichText(
                    textAlign: TextAlign.center,
                    text: TextSpan(
                      style: context.dynamicTextStyle(
                        color: Colors.black,
                        fontSize: 14.f, // Adjusted to sizer unit
                        height: 26 / 16, // This height is a ratio, may need re-evaluation
                        fontWeight: FontWeight.w500,
                      ),
                      children: <TextSpan>[
                        TextSpan(text: LocaleKeys.dontHaveAccount.tr(), style: context.dynamicTextStyle()),
                        TextSpan(text: "  "),
                        TextSpan(
                          text: LocaleKeys.registernow.tr(),
                          style: context.dynamicTextStyle(
                              color: AppColors.primaryRedColor,
                              fontSize: 14.f, // Adjusted to sizer unit
                              height: 26 / 16, // Ratio
                              fontWeight: FontWeight.w500),
                          recognizer: TapGestureRecognizer()
                            ..onTap = () {
                              Navigator.of(context).push(
                                MaterialPageRoute(builder: (BuildContext context) => RegisterNew()),
                              );
                            },
                        ),
                      ],
                    ),
                  ).withVerticalPadding(2), // Adjusted to sizer unit
                ),
                SizedBox(height: 20.h), // Adjusted to sizer unit (approx 14px)
              ],
            ),
          ),
        ),
      ),
    );
  }

  void showLoginModelSheet({
    required BuildContext context,
    required TextEditingController? phoneNumberController,
    required AuthenticationViewModel authViewModel,
  }) {
    AppState appState = getIt<AppState>();
    context.showBottomSheet(
        isScrollControlled: true,
        isDismissible: false,
        useSafeArea: true,
        constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width),
        backgroundColor: AppColors.transparent,
        child: StatefulBuilder(builder: (BuildContext context, StateSetter setModalState) {
          return Padding(
            padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
            child: SingleChildScrollView(
              child: GenericBottomSheet(
                countryCode: authViewModel.selectedCountrySignup.countryCode,
                initialPhoneNumber: "",
                textController: phoneNumberController,
                isEnableCountryDropdown: true,
                onCountryChange: authViewModel.onCountryChange,
                onChange: authViewModel.onPhoneNumberChange,
                buttons: [
                  Padding(
                    padding: EdgeInsets.only(bottom: 10.h),
                    child: CustomButton(
                      text: LocaleKeys.sendOTPSMS.tr(),
                      onPressed: () async {
                        if (ValidationUtils.isValidatePhone(
                            phoneNumber: phoneNumberController!.text,
                            onOkPress: () {
                              Navigator.of(context).pop();
                            })) {
                          Navigator.of(context).pop();
                          appState.setSelectDeviceByImeiRespModelElement(null);
                          await authViewModel.checkUserAuthentication(otpTypeEnum: OTPTypeEnum.sms);
                        }
                      },
                      backgroundColor: AppColors.primaryRedColor,
                      borderColor: AppColors.primaryRedBorderColor,
                      textColor: AppColors.whiteColor,
                      icon: AppAssets.message,
                    ),
                  ),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 8.h),
                        child: LocaleKeys.oR.tr().toText16(color: AppColors.textColor),
                      ),
                    ],
                  ),
                  Padding(
                    padding: EdgeInsets.only(bottom: 10.h, top: 10.h),
                    child: CustomButton(
                      text: LocaleKeys.sendOTPWHATSAPP.tr(),
                      onPressed: () async {
                        if (ValidationUtils.isValidatePhone(
                            phoneNumber: phoneNumberController!.text,
                            onOkPress: () {
                              Navigator.of(context).pop();
                            })) {
                          Navigator.of(context).pop();
                          appState.setSelectDeviceByImeiRespModelElement(null);
                          await authViewModel.checkUserAuthentication(otpTypeEnum: OTPTypeEnum.whatsapp);
                        }
                      },
                      backgroundColor: Colors.white,
                      borderColor: AppColors.borderOnlyColor,
                      textColor: AppColors.textColor,
                      icon: AppAssets.whatsapp,
                      iconColor: null,
                    ),
                  ),
                ],
              ),
            ),
          );
        }));
  }
}