CityCards_Customer_Flutter/lib/login/view/verify_otp_bottomsheet.dart

import 'package:citycards_customer/common_packages/custom_filled_button.dart';
import 'package:citycards_customer/common_packages/custom_text.dart';
import 'package:citycards_customer/postcard/blocs/myPostCards/my_postcard_bloc.dart';
import 'package:citycards_customer/profile/bloc/profile/profile_bloc.dart';
import 'package:citycards_customer/profile/bloc/profile/profile_event.dart';
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 '../../core/route_constants.dart';
import '../../localPreference/local_preference.dart';
import '../../postcard/blocs/myPostCards/my_postcard_event.dart';
import '../bloc/verify/verify_bloc.dart';
import '../bloc/verify/verify_event.dart';
import '../bloc/verify/verify_state.dart';

class VerifyOtpBottomsheet extends StatefulWidget {
  final String emailAddress;

  const VerifyOtpBottomsheet({
    super.key,
    required this.emailAddress,
  });

  @override
  State<VerifyOtpBottomsheet> createState() => _VerifyOtpBottomsheetState();
}

class _VerifyOtpBottomsheetState extends State<VerifyOtpBottomsheet> {
  String _otpCode = '';

  @override
  Widget build(BuildContext context) {
    return BlocListener<VerifyOtpBloc, VerifyOtpState>(
      listener: (context, state) async {
        if (state is VerifyOtpSuccess) {
          Navigator.pop(context); // Close the bottom sheet

          if (state.response.userExists) {
            await LocalPreference.setLogin(true);
            final userId = await LocalPreference.getUserId();
            context.read<ProfileBloc>().add(FetchProfileEvent(userId: userId!));
            context.read<ProfileBloc>().add(CheckLoginStatusEvent());
            context.read<MyPostCardBloc>().add(CheckLoginStatus());
            context.read<MyPostCardBloc>().add(FetchDraftPostCards());
            context.read<MyPostCardBloc>().add(RefreshDraftPostCards());
            context.read<MyPostCardBloc>().add(RefreshOrderPostCards());
            context.read<MyPostCardBloc>().add(FetchOrderPostCards());
            // User exists - navigate to home/dashboard
            // Navigator.of(context).pushReplacementNamed(RouteConstants.home);
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(
                content: Text('OTP verified successfully!'),
                backgroundColor: Colors.green,
              ),
            );
          } else {
            // User doesn't exist - navigate to create account
            Navigator.of(context).pushReplacementNamed(RouteConstants.createAcct,arguments: widget.emailAddress);
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(
                content: Text('Please complete your profile'),
                backgroundColor: Colors.orange,
              ),
            );
          }
        } else if (state is ResendOtpSuccess) {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(
              content: Text('OTP resent successfully!'),
              backgroundColor: Colors.green,
            ),
          );
        } else if (state is VerifyOtpError) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: Text(state.errorMessage),
              backgroundColor: Colors.red,
            ),
          );
        }
      },
      child: AnimatedPadding(
        duration: const Duration(milliseconds: 250),
        curve: Curves.easeOut,
        padding: EdgeInsets.only(
          top: 24.h,
          left: 20.h,
          right: 20.h,
          bottom: MediaQuery.of(context).viewInsets.bottom,
        ),
        child: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Image.asset("assets/logo/logo_city_cards_orange.png", scale: 4),
              SizedBox(height: 8.h),
              CustomText(
                text: "Verify your phone",
                size: 18.sp,
                weight: FontWeight.w500,
              ),
              SizedBox(height: 42.h),
              Text.rich(
                TextSpan(
                  children: [
                    TextSpan(
                      text: "Enter the verification code sent to your email id",
                      style: TextStyle(
                        fontSize: 14.sp,
                        color: Colors.black.withOpacity(0.6),
                      ),
                    ),
                    TextSpan(
                      text: " ${widget.emailAddress}",
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w500,
                        color: Colors.black,
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: 15.h),
              OtpTextField(
                numberOfFields: 6,
                borderWidth: 0.4.w,
                fieldWidth: 48.w,
                fieldHeight: 60.h,
                borderRadius: BorderRadius.circular(8.r),
                filled: true,
                fillColor: const Color(0xFFFFF5F5),
                borderColor: const Color(0xFFBB474A),
                cursorColor: const Color(0xFFF95F62),
                showFieldAsBox: true,
                textStyle: TextStyle(
                  fontSize: 18.sp,
                  fontWeight: FontWeight.w500,
                ),
                onCodeChanged: (code) {
                  _otpCode = code;
                },
                onSubmit: (code) {
                  _otpCode = code;
                  debugPrint("OTP entered: $code");
                },
              ),
              // SizedBox(height: 20.h),
              // BlocBuilder<VerifyOtpBloc, VerifyOtpState>(
              //   builder: (context, state) {
              //     final isResending = state is ResendOtpLoading;
              //     return InkWell(
              //       onTap: isResending
              //           ? null
              //           : () {
              //         context.read<VerifyOtpBloc>().add(
              //           ResendOtpEvent(emailAddress: widget.emailAddress),
              //         );
              //       },
              //       child: Text(
              //         isResending ? "Resending..." : "Resend OTP",
              //         style: TextStyle(
              //           color: isResending
              //               ? Colors.grey
              //               : const Color(0xFFF95F62),
              //           fontSize: 12.sp,
              //           fontWeight: FontWeight.w600,
              //         ),
              //       ),
              //     );
              //   },
              // ),
              SizedBox(height: 22.h),
              BlocBuilder<VerifyOtpBloc, VerifyOtpState>(
                builder: (context, state) {
                  final isLoading = state is VerifyOtpLoading;
                  return CustomFilledButton(
                    onTap: () {
                      if (isLoading) return;

                      if (_otpCode.isEmpty || _otpCode.length < 6) {
                        ScaffoldMessenger.of(context).showSnackBar(
                          const SnackBar(
                            content: Text('Please enter complete OTP'),
                            backgroundColor: Colors.red,
                          ),
                        );
                        return;
                      }

                      context.read<VerifyOtpBloc>().add(
                        VerifyEmailOtpEvent(
                          emailAddress: widget.emailAddress,
                          otp: _otpCode,
                        ),
                      );
                    },
                    label: isLoading ? "Verifying..." : "Continue",
                    width: double.infinity,
                  );
                },
              ),
              // SizedBox(height: 20.h),
              // InkWell(
              //   onTap: () {
              //     Navigator.of(context).pushNamed(RouteConstants.createAcct);
              //   },
              //   child: Text.rich(
              //     TextSpan(
              //       children: [
              //         TextSpan(
              //           text: "Already have an account?",
              //           style: TextStyle(
              //             color: Colors.black.withOpacity(0.6),
              //             fontSize: 12.sp,
              //             fontWeight: FontWeight.w400,
              //           ),
              //         ),
              //         TextSpan(
              //           text: " Sign in",
              //           style: TextStyle(
              //             color: const Color(0xFFF95F62),
              //             fontSize: 12.sp,
              //             fontWeight: FontWeight.w600,
              //           ),
              //         ),
              //       ],
              //     ),
              //   ),
              // ),
              SizedBox(height: 15.h),
            ],
          ),
        ),
      ),
    );
  }
}