import 'package:auth/src/features/recover_password/presentation/state/recover_password_view_model.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:get_it/get_it.dart';
import 'package:navigation/navigation.dart';
import 'package:sf_localizations/sf_localizations.dart';
import 'package:utils/utils.dart';

class NewPasswordScreen extends ConsumerWidget {
  final NavigationContract navigationContract;

  const NewPasswordScreen({super.key, required this.navigationContract});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final NavigationContract navigationContract = GetIt.I<NavigationContract>();
    final theme = ref.watch(themePortProvider);

    final viewModel = ref.read(recoverPasswordViewModelProvider.notifier);
    final viewState = ref.watch(recoverPasswordViewModelProvider);

    return Scaffold(
      backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
      body: Container(
        margin: const EdgeInsets.symmetric(horizontal: 24),
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  context.translate(I18n.recoverPasswordTitle),
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontWeight: FontWeight.w500,
                    fontSize: SizeUtils.getByScreen(small: 30, big: 30, xl: 26),
                    letterSpacing: 0,
                  ),
                ),
                SizedBox(height: SizeUtils.getByScreen(small: 42, big: 32)),
                CustomTextField(
                  showPassword: viewState.passwordVisible,
                  label: context.translate(I18n.newPassword),
                  labelSize: SizeUtils.getByScreen(small: 14, big: 14, xl: 12),
                  hint: '********',
                  controller: viewModel.passwordController,
                  // onVisibilityChanged: viewModel.togglePasswordVisible,
                ),
                SizedBox(height: 16),
                CustomTextField(
                  showPassword: viewState.passwordVisible,
                  label: context.translate(I18n.repeatPassword),
                  labelSize: SizeUtils.getByScreen(small: 14, big: 14, xl: 12),
                  hint: '********',
                  controller: viewModel.repeatedPasswordController,
                  // onVisibilityChanged: viewModel.togglePasswordVisible,
                  // color: viewState.equalPasswords ? const Color(0xFF4B4B4B) : const Color.fromRGBO(239, 17, 17, 1),
                ),
                if (!viewState.equalPasswords) ...[
                  SizedBox(height: 4),
                  Row(
                    spacing: 8,
                    children: [
                      const Icon(
                        Icons.info_outline_rounded,
                        color: Color.fromRGBO(239, 17, 17, 1),
                        size: 16,
                      ),
                      Text(
                        context.translate(I18n.errorMessageUnequalPasswords),
                        textAlign: TextAlign.left,
                        style: TextStyle(
                          color: Color.fromRGBO(239, 17, 17, 1),
                          fontSize: 10,
                        ),
                      ),
                      Spacer(),
                    ],
                  ),
                ],
                SizedBox(height: 12),
                Row(
                  spacing: 8,
                  children: [
                    Icon(
                      Icons.check,
                      color: theme.getColorFor(
                        viewState.securityChecks['min']!
                            ? ThemeCode.buttonPrimary
                            : ThemeCode.buttonSecondary,
                      ),
                    ),
                    Text(
                      context.translate(I18n.passwordLength),
                      style: TextStyle(
                        fontSize: SizeUtils.getByScreen(
                          small: 14,
                          big: 14,
                          xl: 12,
                        ),
                      ),
                    ),
                  ],
                ),
                SizedBox(height: SizeUtils.getByScreen(small: 2, big: 4)),
                Row(
                  spacing: 8,
                  children: [
                    Icon(
                      Icons.check,
                      color: theme.getColorFor(
                        viewState.securityChecks['capital']!
                            ? ThemeCode.buttonPrimary
                            : ThemeCode.buttonSecondary,
                      ),
                    ),
                    Text(
                      context.translate(I18n.passwordCapital),
                      style: TextStyle(
                        fontSize: SizeUtils.getByScreen(
                          small: 14,
                          big: 14,
                          xl: 12,
                        ),
                      ),
                    ),
                  ],
                ),
                SizedBox(height: SizeUtils.getByScreen(small: 2, big: 4)),
                Row(
                  spacing: 8,
                  children: [
                    Icon(
                      Icons.check,
                      color: theme.getColorFor(
                        viewState.securityChecks['number']!
                            ? ThemeCode.buttonPrimary
                            : ThemeCode.buttonSecondary,
                      ),
                    ),
                    Text(
                      context.translate(I18n.passwordNumber),
                      style: TextStyle(
                        fontSize: SizeUtils.getByScreen(
                          small: 14,
                          big: 14,
                          xl: 12,
                        ),
                      ),
                    ),
                  ],
                ),
                SizedBox(height: SizeUtils.getByScreen(small: 2, big: 4)),
                Row(
                  spacing: 8,
                  children: [
                    Icon(
                      Icons.check,
                      color: theme.getColorFor(
                        viewState.securityChecks['special']!
                            ? ThemeCode.buttonPrimary
                            : ThemeCode.buttonSecondary,
                      ),
                    ),
                    Text(
                      context.translate(I18n.passwordSpecial),
                      style: TextStyle(
                        fontSize: SizeUtils.getByScreen(
                          small: 14,
                          big: 14,
                          xl: 12,
                        ),
                      ),
                    ),
                  ],
                ),
                SizedBox(
                  height: SizeUtils.getByScreen(small: 32, big: 32, xl: 24),
                ),
                Align(
                  alignment: Alignment.bottomLeft,
                  child: Text(
                    context.translate(I18n.mobilePhone),
                    style: TextStyle(
                      fontSize: SizeUtils.getByScreen(
                        small: 14,
                        big: 14,
                        xl: 12,
                      ),
                      letterSpacing: 0,
                    ),
                  ),
                ),
                SizedBox(height: 8),
                Row(
                  spacing: 8,
                  children: [
                    CountryPrefixPicker(
                      headerText: context.translate(I18n.selectYourCountry),
                      width: 80,
                      onChanged: (country) {
                        viewModel.updateDialCode(
                          country.dialCode ?? viewState.dialCode,
                        );
                      },
                    ),
                    Expanded(
                      child: CustomTextField(
                        hint: context.translate(I18n.phoneNumber),
                        keyboardType: TextInputType.number,
                        controller: viewModel.newPhoneNumberController,
                      ),
                    ),
                  ],
                ),
                if (viewState.errorMessage.isNotEmpty) ...[
                  SizedBox(height: 10),
                  Text(
                    context.translate(viewState.errorMessage),
                    textAlign: TextAlign.center,
                    style: const TextStyle(
                      color: Color.fromRGBO(239, 17, 17, 1),
                      fontSize: 12,
                    ),
                  ),
                ],
                SizedBox(height: 56),
                PrimaryButton(
                  onPressed: () async {
                    await viewModel.recoverPassword();
                    final updatedState = ref.read(
                      recoverPasswordViewModelProvider,
                    );
                    if (updatedState.passwordChanged) {
                      navigationContract.goTo(AppRoutes.dashboardHome);
                    }
                  },
                  text: context.translate(I18n.accept),
                  color: theme.getColorFor(ThemeCode.buttonPrimary),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
