import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_otp_text_field/flutter_otp_text_field.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:google_fonts/google_fonts.dart';
import '../../constants/app_assets.dart';
import '../../constants/app_colors.dart';
import '../../core/app_router.dart';
import '../../custome_widgets/custom_button.dart';
import '../blocs/verify_otp/verify_otp_bloc.dart';

class OtpVerificationPage extends StatelessWidget {
  final String email;

  const OtpVerificationPage({super.key, required this.email});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
      behavior: HitTestBehavior.translucent,
      child: Scaffold(
        backgroundColor: AppColors.backgroundWhite,
        body: BlocConsumer<VerifyOtpBloc, VerifyOtpState>(
          listener: (context, state) {
            if (state.status == VerifyOtpStatus.success) {
              Navigator.pushReplacementNamed(
                context,
                AppRouter.resetPassword,
                arguments: email,
              );
            } else if (state.status == VerifyOtpStatus.failure) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text(state.errorMessage ?? "Verification failed"),
                  backgroundColor: Colors.redAccent,
                ),
              );
            }
          },
          builder: (context, state) {
            final isLoading = state.status == VerifyOtpStatus.loading;

            return SafeArea(
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 24.w),
                child: Column(
                  children: [
                    Expanded(
                      child: SingleChildScrollView(
                        child: Column(
                          children: [
                            SizedBox(height: 40.h),
                            // ===== LOGO SECTION =====
                            Center(
                              child: Column(
                                children: [
                                  Image.asset(
                                    AppAssets.appIcon,
                                    height: 60.h,
                                  ),
                                  SizedBox(height: 8.h),
                                  Text(
                                    "Partner's App",
                                    style: GoogleFonts.poppins(
                                      color: AppColors.primaryRed,
                                      fontSize: 20.sp,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            SizedBox(height: 60.h),

                            // ===== HEADER TEXT =====
                            Text(
                              "Verify OTP",
                              textAlign: TextAlign.center,
                              style: GoogleFonts.poppins(
                                color: AppColors.black,
                                fontSize: 24.sp,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                            SizedBox(height: 12.h),
                            Text(
                              "We've sent an OTP to your registered email. Please enter it below.",
                              textAlign: TextAlign.center,
                              style: GoogleFonts.poppins(
                                color: AppColors.textGrey,
                                fontSize: 16.sp,
                                height: 1.4,
                              ),
                            ),
                            SizedBox(height: 48.h),

                            // ===== OTP INPUT FIELDS =====
                            OtpTextField(
                              numberOfFields: 6,
                              borderColor: AppColors.borderGrey,
                              focusedBorderColor: AppColors.primaryRed,
                              showFieldAsBox: true,
                              fieldWidth: 45.w,
                              borderRadius: BorderRadius.circular(12.r),
                              enabledBorderColor: AppColors.borderGrey,
                              cursorColor: AppColors.primaryRed,
                              textStyle: GoogleFonts.poppins(
                                fontSize: 18.sp,
                                fontWeight: FontWeight.w600,
                                color: AppColors.black,
                              ),
                              onCodeChanged: (String code) {
                                context.read<VerifyOtpBloc>().add(
                                      OtpChanged(otp: code),
                                    );
                              },
                              onSubmit: (String verificationCode) {
                                context.read<VerifyOtpBloc>().add(
                                      OtpChanged(otp: verificationCode),
                                    );
                                context.read<VerifyOtpBloc>().add(
                                      VerifyOtpSubmitted(
                                        emailAddress: email,
                                        otp: verificationCode,
                                      ),
                                    );
                              },
                            ),
                          ],
                        ),
                      ),
                    ),

                    // ===== VERIFY BUTTON =====
                    CustomButton(
                      text: "Verify",
                      isLoading: isLoading,
                      onPressed: state.otp.length == 6
                          ? () {
                              context.read<VerifyOtpBloc>().add(
                                    VerifyOtpSubmitted(
                                      emailAddress: email,
                                      otp: state.otp,
                                    ),
                                  );
                            }
                          : null,
                    ),
                    SizedBox(height: 24.h),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}
