import 'dart:ui';
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:google_fonts/google_fonts.dart';
import '../blocs/otp_bloc.dart';

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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => OtpBloc(),
      child: Scaffold(
        body: Stack(
          children: [
            Positioned.fill(
              child: Image.asset('assets/login/bg.png', fit: BoxFit.cover),
            ),
            Positioned.fill(
              child: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      Colors.black.withOpacity(0.3),
                      Colors.black.withOpacity(0.6),
                      Colors.black.withOpacity(1.0),
                    ],
                  ),
                ),
              ),
            ),

            // Foreground content
            Center(
              child: SingleChildScrollView(
                padding: const EdgeInsets.symmetric(horizontal: 18),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const SizedBox(height: 80),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(20),
                      child: BackdropFilter(
                        filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
                        child: Container(
                          padding: const EdgeInsets.all(24),
                          decoration: BoxDecoration(
                            color: Colors.black.withOpacity(0.4),
                            borderRadius: BorderRadius.circular(20),
                            border: Border.all(
                              color: Colors.white.withOpacity(0.2),
                            ),
                          ),
                          child: BlocConsumer<OtpBloc, OtpState>(
                            listener: (context, state) {
                              if (state.isVerified) {
                                Navigator.pushNamed(context, '/reset_password');
                              } else if (state.message.isNotEmpty &&
                                  !state.isLoading) {
                                ScaffoldMessenger.of(context).showSnackBar(
                                  SnackBar(
                                    content: Text(state.message),
                                    backgroundColor: state.isVerified
                                        ? Colors.green
                                        : Colors.redAccent,
                                  ),
                                );
                              }
                            },
                            builder: (context, state) {
                              final otpBloc = context.read<OtpBloc>();
                              return Column(
                                children: [
                                  Align(
                                    alignment: Alignment.center,
                                    child: Image.asset(
                                      "assets/login/app_icon.png",
                                      scale: 4,
                                    ),
                                  ),
                                  const SizedBox(height: 24),
                                  Text(
                                    "Verify OTP",
                                    style: GoogleFonts.poppins(
                                      color: Colors.white,
                                      fontSize: 24,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                  const SizedBox(height: 8),
                                  Text(
                                    "We’ve sent an OTP to your registered email. Please enter it below, or use the reset link included in the email.",
                                    textAlign: TextAlign.start,
                                    style: GoogleFonts.poppins(
                                      color: Colors.white,
                                      fontSize: 15,
                                      fontWeight: FontWeight.w400,
                                    ),
                                  ),
                                  const SizedBox(height: 30),

                                  // OTP input fields
                                  OtpTextField(
                                    borderRadius: BorderRadius.all(
                                      Radius.circular(6),
                                    ),
                                    numberOfFields: 6,
                                    fillColor: Color(0xff242628),
                                    cursorColor: Colors.white,
                                    borderColor: Colors.white,
                                    focusedBorderColor: const Color(0xFFFF4C4C),
                                    showFieldAsBox: true,
                                    fieldWidth: 45,
                                    textStyle: const TextStyle(
                                      color: Colors.white,
                                    ),
                                    onSubmit: (value) {
                                      otpBloc.add(OtpChanged(value));
                                      otpBloc.add(OtpVerify());
                                    },
                                    onCodeChanged: (value) {
                                      otpBloc.add(OtpChanged(value));
                                    },
                                  ),
                                  const SizedBox(height: 24),
                                ],
                              );
                            },
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(height: 60),
                    BlocBuilder<OtpBloc, OtpState>(
                      builder: (context, state) {
                        final otpBloc = context.read<OtpBloc>();
                        return SizedBox(
                          width: double.infinity,
                          child: ElevatedButton(
                            onPressed: state.isOtpFilled && !state.isLoading
                                ? () => otpBloc.add(OtpVerify())
                                : null,
                            style: ButtonStyle(
                              backgroundColor:
                                  MaterialStateProperty.resolveWith<Color>((
                                    states,
                                  ) {
                                    if (states.contains(
                                      MaterialState.disabled,
                                    )) {
                                      return const Color(
                                        0xFF9C3F42,
                                      ); // 👈 custom disabled color
                                    }
                                    return const Color(
                                      0xFFFF4C4C,
                                    ); // 👈 active color
                                  }),
                              padding: MaterialStateProperty.all(
                                const EdgeInsets.symmetric(vertical: 14),
                              ),
                              shape: MaterialStateProperty.all(
                                RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(12),
                                ),
                              ),
                            ),
                            child: Text(
                              "Verify",
                              style: GoogleFonts.poppins(
                                color: state.isOtpFilled?Colors.white:Color(0xff9D9F9F),
                                fontSize: 16,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),
                        );
                      },
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
