import 'package:auth/src/features/link_phone/presentation/state/link_phone_view_model.dart';
import 'package:auth/src/features/link_phone/presentation/widgets/link_phone_code_input.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';

class VerifyLinkPhoneCodeScreen extends ConsumerWidget {
  final NavigationContract navigationContract;

  const VerifyLinkPhoneCodeScreen({
    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: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            spacing: 48,
            children: [
              Column(
                children: [
                  Text(
                    context.translate(I18n.connect),
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
                  ),
                  const SizedBox(height: 24),
                  Text.rich(
                    TextSpan(
                      text: context.translate(I18n.verificationCodeSentTo),
                      children: [
                        TextSpan(
                          text: '${viewState.dialCode}${viewState.phoneNumber}',
                          style: const TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 18,
                          ),
                        ),
                      ],
                    ),
                    textAlign: TextAlign.center,
                  ),
                  const SizedBox(height: 48),
                  Text(
                    context.translate(I18n.enterCodeHere),
                    style: TextStyle(fontSize: 16),
                  ),
                  const SizedBox(height: 24),

                  LinkPhoneCodeInput(
                    length: 6,
                    onCodeChanged: viewModel.updateCode,
                  ),

                  if (viewState.errorMessage.isNotEmpty) ...[
                    const SizedBox(height: 8),
                    Text(
                      viewState.errorMessage,
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        color: Color.fromRGBO(239, 17, 17, 1),
                        fontSize: 12,
                      ),
                    ),
                  ],
                ],
              ),
              Column(
                children: [
                  PrimaryButton(
                    onPressed: () async {
                      await viewModel.verifyCode();
                      final updatedState = ref.read(linkPhoneViewModelProvider);

                      if (updatedState.codeVerified) {
                        navigationContract.pushTo(AppRoutes.login);
                      }
                    },
                    text: context.translate(I18n.enter),
                    color: theme.getColorFor(ThemeCode.buttonPrimary),
                  ),
                  const SizedBox(height: 24),
                  Text(
                    context.translate(I18n.didNotReceiveIt),
                    style: TextStyle(
                      fontSize: 18,
                      letterSpacing: 0,
                      height: 1.5,
                    ),
                  ),
                  const SizedBox(height: 8),
                  CustomTextButton(
                    onPressed: () => navigationContract.goBack(),
                    text: context.translate(I18n.tryAgain),
                    size: 18,
                    weight: FontWeight.w500,
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}
