import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:go_router/go_router.dart';
import 'package:pinput/pinput.dart';
import 'package:provider/provider.dart';
import 'package:tm_app/core/routes/app_routes.dart';
import 'package:tm_app/core/utils/size_config.dart';

import '../../../core/constants/assets.dart';
import '../../../core/theme/colors.dart';
import '../../../core/utils/app_toast.dart';
import '../../../view_models/auth_view_model.dart';
import '../../shared/base_button.dart';
import '../strings/forgot_password_otp_strings.dart';

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

  @override
  State<MobileForgotPasswordOtpPage> createState() =>
      _MobileForgotPasswordOtpPageState();
}

class _MobileForgotPasswordOtpPageState
    extends State<MobileForgotPasswordOtpPage> {
  late final AuthViewModel viewModel;

  @override
  void initState() {
    super.initState();
    viewModel = context.read<AuthViewModel>();
    viewModel.addListener(_viewModelListener);
  }

  void _viewModelListener() {
    if (viewModel.errorMessageOtp != null) {
      AppToast.error(context, viewModel.errorMessageOtp!);
    } else if (!viewModel.isLoadingOtp &&
        viewModel.verifyOtpSuccess &&
        viewModel.resetToken != null) {
      const ForgotPasswordCreateRouteData().pushReplacement(context);
      viewModel.clearOtpFlow();
    }
  }

  @override
  void dispose() {
    viewModel.removeListener(_viewModelListener);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.backgroundColor,
      body: SafeArea(
        child: Center(
          child: SingleChildScrollView(
            padding: EdgeInsets.symmetric(horizontal: 24.0.w()),
            child: Consumer<AuthViewModel>(
              builder: (context, viewModel, _) {
                return Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 22.0.w()),
                      child: SvgPicture.asset(
                        AssetsManager.logoBig,
                        width: double.infinity,
                        height: 50.0.h(),
                      ),
                    ),
                    SizedBox(height: 72.0.h()),
                    Text(
                      ForgotPasswordOtpStrings.forgotPasswordTitle,
                      style: TextStyle(
                        fontSize: 28.0.sp(),
                        fontWeight: FontWeight.bold,
                        color: AppColors.grey80,
                      ),
                    ),
                    SizedBox(height: 16.0.h()),
                    Text(
                      ForgotPasswordOtpStrings.forgotPasswordSubtitle,
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 14.0.sp(),
                        fontWeight: FontWeight.w400,
                        color: AppColors.grey60,
                      ),
                    ),
                    SizedBox(height: 40.0.h()),
                    Pinput(
                      controller: viewModel.otpController,
                      length: 6,
                      pinAnimationType: PinAnimationType.scale,
                      defaultPinTheme: PinTheme(
                        width: 50.0.w(),
                        height: 50.0.h(),
                        textStyle: TextStyle(
                          fontSize: 20.0.sp(),
                          fontWeight: FontWeight.bold,
                        ),
                        decoration: BoxDecoration(
                          color: AppColors.grey0,
                          borderRadius: BorderRadius.circular(10),
                          border: Border.all(color: AppColors.grey40),
                        ),
                      ),
                    ),
                    SizedBox(height: 24.0.h()),
                    viewModel.isLoadingOtp
                        ? BaseButton(
                          isEnabled: viewModel.isOtpValid,
                          text: ForgotPasswordOtpStrings.resetLink,
                          onPressed: null,
                          isLoading: true,
                        )
                        : BaseButton(
                          isEnabled: viewModel.canSubmitOtpPage,
                          text: ForgotPasswordOtpStrings.resetLink,
                          onPressed:
                              viewModel.canSubmitOtpPage
                                  ? () async {
                                    await viewModel.verifyOtp(context);
                                  }
                                  : null,
                        ),
                    TextButton(
                      onPressed: () {
                        context.pop();
                      },
                      child: Text(
                        ForgotPasswordOtpStrings.backToSignInButton,
                        style: TextStyle(
                          fontSize: 14.0.sp(),
                          fontWeight: FontWeight.w500,
                          color: AppColors.mainBlue,
                        ),
                      ),
                    ),
                  ],
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}
