import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_app/features/app_layout/bloc/home_cubit.dart';
import 'package:syncrow_app/features/menu/view/widgets/securty/bloc/security_bloc.dart';
import 'package:syncrow_app/features/menu/view/widgets/securty/bloc/security_event.dart';
import 'package:syncrow_app/features/menu/view/widgets/securty/bloc/security_state.dart';
import 'package:syncrow_app/features/menu/view/widgets/securty/view/set_password_page.dart';
import 'package:syncrow_app/features/shared_widgets/default_scaffold.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
import 'package:pin_code_fields/pin_code_fields.dart';

class VerificationCodePage extends StatelessWidget {
  const VerificationCodePage({super.key});

  @override
  Widget build(BuildContext context) {
    String otp = '';
    return BlocProvider<SecurityBloc>(
      create: (context) => SecurityBloc()..add(StartTimerEvent()),
      child: BlocConsumer<SecurityBloc, SecurityState>(
        listener: (context, state) {
          if (state is SuccessForgetState) {
            Navigator.of(context).push(MaterialPageRoute(
              builder: (context) => SetPasswordPage(
                otpCode: otp,
              ),
            ));
          }
        },
        builder: (context, state) {
          final _bloc = BlocProvider.of<SecurityBloc>(context);

          return DefaultScaffold(
            title: 'Change Password',
            child: Column(
              children: [
                const SizedBox(height: 55),
                const Padding(
                  padding: EdgeInsets.all(8.0),
                  child: BodyMedium(
                    text: 'Verification Code',
                    fontWeight: FontWeight.w700,
                    fontSize: 18,
                  ),
                ),
                const BodyMedium(
                  text: 'We have sent the verification code',
                  fontWeight: FontWeight.w400,
                  fontSize: 16,
                ),
                const SizedBox(height: 4),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const BodyMedium(
                      text: 'to ',
                      fontWeight: FontWeight.w400,
                      fontSize: 14,
                    ),
                    BodyMedium(
                      text: HomeCubit.user!.email!,
                      fontWeight: FontWeight.w700,
                      fontSize: 14,
                    ),
                  ],
                ),
                const SizedBox(height: 40),
                BlocBuilder<SecurityBloc, SecurityState>(
                  builder: (context, state) {
                    return Center(
                      child: PinCodeTextField(
                        hintCharacter: '0',
                        appContext: context,
                        length: 6,
                        mainAxisAlignment: MainAxisAlignment.center,
                        backgroundColor: Colors.transparent,
                        enableActiveFill: true,
                        pinTheme: PinTheme(
                          shape: PinCodeFieldShape.box,
                          activeColor: Colors.white,
                          selectedColor: Colors.white,
                          inactiveColor: Colors.white,
                          inactiveFillColor: Colors.white70,
                          selectedFillColor: Colors.white70,
                          activeFillColor: Colors.white,
                          errorBorderColor: Colors.white,
                          fieldHeight: 55.0,
                          fieldWidth: 55.0,
                          fieldOuterPadding: const EdgeInsets.only(right: 8),
                          borderRadius: BorderRadius.circular(17),
                          borderWidth: 1,
                        ),
                        cursorWidth: 1,
                        keyboardType: TextInputType.number,
                        onChanged: (value) {
                          // Update OTP code in the bloc when user enters a pin
                          _bloc.otpCode = value;
                          otp = value;
                        },
                      ),
                    );
                  },
                ),
                const SizedBox(height: 55),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                        child: InkWell(
                      onTap:
                          state is TimerState && !state.isButtonEnabled && state.remainingTime != 1
                              ? null
                              : () {
                                  _bloc.add(StartTimerEvent());
                                },
                      child: Container(
                        padding: const EdgeInsets.only(right: 20, left: 20, top: 15, bottom: 15),
                        decoration: BoxDecoration(
                            color: state is TimerState && !state.isButtonEnabled
                                ? ColorsManager.blueButton
                                : ColorsManager.blueColor,
                            borderRadius: BorderRadius.all(Radius.circular(20))),
                        child: Center(
                          child: Center(
                            child: Text(
                              '${state is TimerState && !state.isButtonEnabled && state.remainingTime != 1 ? "${_bloc.formattedTime(state.remainingTime)} " : "Resend"}',
                              style: TextStyle(
                                fontSize: 16,
                                fontWeight: FontWeight.w700,
                                color: state is TimerState && !state.isButtonEnabled
                                    ? Colors.white
                                    : ColorsManager.onPrimaryColor,
                              ),
                            ),
                          ),
                        ),
                      ),
                    )),
                    const SizedBox(width: 20),
                    Expanded(
                      child: InkWell(
                        onTap: () {
                          context.read<SecurityBloc>().add(VerifyPassCodeEvent());
                        },
                        child: Container(
                          padding: const EdgeInsets.only(right: 20, left: 20, top: 15, bottom: 15),
                          decoration: const BoxDecoration(
                              color: ColorsManager.blueColor,
                              borderRadius: BorderRadius.all(Radius.circular(20))),
                          child: const Center(
                            child: Text(
                              "Verify",
                              style: TextStyle(
                                  fontSize: 16, color: Colors.white, fontWeight: FontWeight.w700),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
