import 'package:auth/src/features/link_phone/presentation/state/link_phone_view_model.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:navigation/navigation.dart';
import 'package:sf_localizations/sf_localizations.dart';

class RequestLinkPhoneScreen extends ConsumerWidget {
  final NavigationContract navigationContract;

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final theme = ref.watch(themePortProvider);

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

    return Scaffold(
      backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              context.translate(I18n.linkPhoneTitle),
              textAlign: TextAlign.center,
              style: const TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.w500,
                letterSpacing: 0,
              ),
            ),
            const SizedBox(height: 24),
            Text(
              context.translate(I18n.linkPhoneSubtitle),
              textAlign: TextAlign.center,
              style: const TextStyle(fontSize: 16, letterSpacing: 0),
            ),
            const SizedBox(height: 48),

            Column(
              spacing: 8,
              children: [
                Align(
                  alignment: Alignment.bottomLeft,
                  child: Text(
                    context.translate(I18n.mobilePhone),
                    style: const TextStyle(fontSize: 14, letterSpacing: 0),
                  ),
                ),
                Row(
                  spacing: 10,
                  children: [
                    CountryPrefixPicker(
                      headerText: context.translate(I18n.selectYourCountry),
                      initialCountryCode: viewState.dialCode,
                      onChanged: (country) {
                        viewModel.updateDialCode(
                          country.dialCode ?? viewState.dialCode,
                        );
                      },
                    ),
                    Expanded(
                      child: CustomTextField(
                        controller: viewModel.phoneNumberController,
                        hint: context.translate(I18n.phoneNumber),
                        keyboardType: TextInputType.number,
                      ),
                    ),
                  ],
                ),
              ],
            ),

            const SizedBox(height: 16),

            if (viewState.errorMessage.isNotEmpty) ...[
              const SizedBox(height: 4),
              Text(
                viewState.errorMessage,
                textAlign: TextAlign.center,
                style: const TextStyle(
                  color: Color.fromRGBO(239, 17, 17, 1),
                  fontSize: 12,
                ),
              ),
            ],

            const SizedBox(height: 24),

            PrimaryButton(
              onPressed: () async {
                await viewModel.requestCode();
                final updatedState = ref.read(linkPhoneViewModelProvider);
                if (updatedState.errorMessage.isEmpty) {
                  navigationContract.pushTo(AppRoutes.phoneCode);
                }
              },
              text: context.translate(I18n.next),
              color: theme.getColorFor(ThemeCode.buttonPrimary),
            ),
          ],
        ),
      ),
    );
  }
}
