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

import '../state/recover_password_view_model.dart';

class RequestRecoveryScreen extends ConsumerWidget {
  final NavigationContract navigationContract;

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    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: EdgeInsets.all(SizeUtils.getByScreen(small: 30, big: 30, xl: 20)),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                context.translate(I18n.recoverPasswordTitle),
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: SizeUtils.getByScreen(small: 29, big: 29, xl: 26)),
              ),
              SizedBox(height: SizeUtils.getByScreen(small: 24, big: 32)),
              Text(
                context.translate(I18n.recoverPasswordSubtitle),
                textAlign: TextAlign.center,
                style: TextStyle(letterSpacing: 0, fontSize: SizeUtils.getByScreen(small: 18, big: 18, xl: 16)),
              ),
              SizedBox(height: SizeUtils.getByScreen(small: 56, big: 48)),
              CustomTextField(
                label: context.translate(I18n.email),
                hint: context.translate(I18n.email),
                controller: viewModel.emailController,
              ),
              SizedBox(height: SizeUtils.getByScreen(small: 40, big: 40, xl: 28)),
              Align(
                alignment: Alignment.bottomLeft,
                child: Text(
                  context.translate(I18n.mobilePhone),
                  style: TextStyle(fontSize: 14, letterSpacing: 0),
                ),
              ),
              SizedBox(height: 8),
              Row(
                children: [
                  CountryPrefixPicker(
                    headerText: context.translate(I18n.selectYourCountry),
                    initialCountryCode: viewState.dialCode,
                    onChanged: (country) {
                      viewModel.updateDialCode(
                        country.dialCode ?? viewState.dialCode,
                      );
                    },
                    width: 80,
                  ),
                  SizedBox(width: SizeUtils.getByScreen(small: 10, big: 10, xl: 6)),
                  Expanded(
                    child: CustomTextField(
                      hint: context.translate(I18n.phoneNumber),
                      keyboardType: TextInputType.number,
                      controller: viewModel.phoneNumberController,
                    ),
                  ),
                ],
              ),
              SizedBox(height: SizeUtils.getByScreen(small: 40, big: 40, xl: 28)),
              if (viewState.errorMessage.isNotEmpty) ...[
                  Text(
                    context.translate(viewState.errorMessage),
                    textAlign: TextAlign.center,
                    style: const TextStyle(
                      color: Color.fromRGBO(239, 17, 17, 1),
                      fontSize: 12,
                    ),
                  ),
                  SizedBox(height: 40),
                ],
              Row(
                children: [
                  Expanded(
                    child: SecondaryButton(
                      onPressed: () => {Navigator.pop(context)},
                      text: context.translate(I18n.back),
                      size: SizeUtils.getByScreen(small: 16, big: 16, xl: 14),
                    ),
                  ),
                  SizedBox(width: SizeUtils.getByScreen(small: 20, big: 20, xl: 10)),
                  Expanded(
                    child: PrimaryButton(
                      onPressed: () async {
                        await viewModel.requestRecovery();
                        final updatedState = ref.read(recoverPasswordViewModelProvider);
                        if (updatedState.recoveryRequested) {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (_) => SentScreen(navigationContract: navigationContract),
                            ),
                          );
                        }
                      },
                      text: context.translate(I18n.send),
                      size: SizeUtils.getByScreen(small: 16, big: 16, xl: 14),
                      color: theme.getColorFor(ThemeCode.buttonSecondary),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}
