import 'package:cheminova/screens/authentication/verification_success_screen.dart';
import 'package:cheminova/widgets/custom_button.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:pin_code_fields/pin_code_fields.dart';

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

  @override
  State<VerifyOtpScreen> createState() => _VerifyOtpScreenState();
}

class _VerifyOtpScreenState extends State<VerifyOtpScreen> {
  // Controller for managing the OTP input
  final otpController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true, // Extend body behind app bar for a seamless design
      appBar: AppBar(
        backgroundColor: Colors.transparent, // Transparent background for the app bar
        elevation: 0, // No shadow
        leading: GestureDetector(
          onTap: () => Get.back(), // Navigate back on tap
          child: Padding(
            padding: const EdgeInsets.all(8.0), // Padding for the back arrow icon
            child: SizedBox(
              width: 24, // Icon width
              height: 24, // Icon height
              child: SvgPicture.asset(
                'assets/svg/back_arrow.svg', // Back arrow SVG asset
              ),
            ),
          ),
        ),
      ),
      body: Stack(
        alignment: Alignment.topCenter, // Align items to the top center
        children: [
          // Background image setup
          Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                fit: BoxFit.cover,
                image: AssetImage(
                  'assets/images/image_1.png', // Background image asset
                ),
              ),
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(50.0),
                bottomRight: Radius.circular(50.0),
              ),
            ),
            child: SizedBox(
              width: Get.width, // Full width
              height: Get.height * 0.7, // 70% height of the screen
            ),
          ),
          // Main content area
          Center(
            child: SingleChildScrollView(
              child: Card(
                margin: const EdgeInsets.symmetric(horizontal: 24), // Margin for the card
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(19), // Rounded corners
                  side: const BorderSide(color: Color(0xFFFDFDFD)), // Border color
                ),
                color: const Color(0xFFB4D1E5).withOpacity(0.9), // Background color with opacity
                child: Padding(
                  padding: const EdgeInsets.all(16.0), // Padding inside the card
                  child: Column(
                    children: [
                      // Verification icon
                      Container(
                        alignment: Alignment.centerLeft,
                        padding: const EdgeInsets.only(bottom: 10), // Padding below the icon
                        child: SvgPicture.asset(
                          'assets/svg/verify_otp.svg', // OTP verification icon asset
                          height: Get.height * 0.05, // Height of the icon
                        ),
                      ),
                      // Title for the OTP verification
                      Container(
                        padding: const EdgeInsets.only(bottom: 10), // Padding below the title
                        alignment: Alignment.centerLeft,
                        child: Text(
                          'Verification Code',
                          style: GoogleFonts.getFont(
                            'Roboto',
                            fontWeight: FontWeight.w500,
                            fontSize: 30,
                            height: 1.2,
                          ),
                        ),
                      ),
                      // Subtext for OTP instructions
                      Container(
                        padding: const EdgeInsets.only(bottom: 10), // Padding below the subtext
                        alignment: Alignment.centerLeft,
                        child: Text(
                          'OTP has sent to your registered mobile number, Please verify',
                          style: GoogleFonts.getFont(
                            'Roboto',
                            fontWeight: FontWeight.w300,
                            fontSize: 14,
                            height: 1.8,
                          ),
                        ),
                      ),
                      // Pin code input field for OTP
                      SizedBox(
                        width: Get.width * 0.8, // Width of the input field
                        child: PinCodeTextField(
                          appContext: context,
                          length: 6, // Length of the OTP
                          obscureText: false, // Not obscured
                          animationType: AnimationType.fade, // Fade animation
                          pinTheme: PinTheme(
                            shape: PinCodeFieldShape.box, // Shape of the pin fields
                            borderRadius: BorderRadius.circular(5), // Corner radius
                            fieldHeight: 50, // Height of each pin field
                            fieldWidth: 40, // Width of each pin field
                            activeFillColor: Colors.white, // Background color when active
                            inactiveFillColor: Colors.white, // Background color when inactive
                            selectedFillColor: Colors.white, // Background color when selected
                            activeColor: Colors.blue, // Border color when active
                            inactiveColor: Colors.grey, // Border color when inactive
                            selectedColor: Colors.blue, // Border color when selected
                          ),
                          animationDuration: const Duration(milliseconds: 300), // Animation duration
                          backgroundColor: Colors.transparent, // Transparent background
                          enableActiveFill: true, // Enable active fill color
                          controller: otpController, // Link the controller
                          onCompleted: (v) {
                            print("Completed: $v"); // Log when OTP is completed
                          },
                          onChanged: (value) {
                            print(value); // Log changes to the input
                          },
                        ),
                      ),
                      const SizedBox(height: 30), // Spacer
                      // Resend OTP timer text
                      Container(
                        alignment: Alignment.center,
                        child: Text(
                          'Resend in 30 seconds',
                          style: GoogleFonts.getFont(
                            'Roboto',
                            fontWeight: FontWeight.w300,
                            fontSize: 14,
                            height: 1.8,
                          ),
                        ),
                      ),
                      const SizedBox(height: 30), // Spacer
                      // Cancel button to go back
                      GestureDetector(
                        onTap: () => Get.back(), // Navigate back on tap
                        child: Text(
                          'Cancel',
                          style: GoogleFonts.getFont(
                            'Roboto',
                            fontWeight: FontWeight.w400,
                            fontSize: 20,
                            height: 1,
                            letterSpacing: -0.2,
                          ),
                        ),
                      ),
                      const SizedBox(height: 30), // Spacer
                      // Verify button to proceed
                      CustomButton(
                        text: "Verify",
                        onPressed: () => Get.to(
                              () => const VerificationSuccessScreen(), // Navigate to success screen
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}