import 'package:cheminova/screens/verify_code_screen.dart';
import 'package:cheminova/widgets/common_background.dart';
import 'package:cheminova/widgets/common_elevated_button.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import '../widgets/common_text_form_field.dart';

// Main widget for the phone number verification screen
class VerifyPhoneScreen extends StatefulWidget {
  const VerifyPhoneScreen({super.key});

  @override
  State<VerifyPhoneScreen> createState() => _VerifyPhoneScreenState();
}

class _VerifyPhoneScreenState extends State<VerifyPhoneScreen> {
  @override
  Widget build(BuildContext context) {
    // Builds the phone verification screen
    return CommonBackground(
      isFullWidth: false,
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          leading: InkWell(
            onTap: () => Navigator.pop(context), // Navigate back
            child: Image.asset('assets/Back_attendance.png'),
          ),
          backgroundColor: Colors.transparent,
        ),
        body: Center(
          child: SingleChildScrollView(
            child: Container(
              padding: const EdgeInsets.all(20.0).copyWith(top: 30, bottom: 30),
              margin: const EdgeInsets.symmetric(horizontal: 30.0),
              decoration: BoxDecoration(
                border: Border.all(color: Colors.white),
                color: const Color(0xffB4D1E5).withOpacity(0.9),
                borderRadius: BorderRadius.circular(26.0),
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  // Phone icon
                  Align(
                    alignment: Alignment.topLeft,
                    child: Image.asset(
                      'assets/phone.png',
                      height: 50.0,
                      width: 50.0,
                    ),
                  ),
                  const SizedBox(height: 20),
                  // Title for the screen
                  const Text(
                    'Verify Phone Number',
                    style: TextStyle(
                      fontSize: 30,
                      color: Colors.black,
                      fontWeight: FontWeight.w500,
                      fontFamily: 'Anek',
                    ),
                  ),
                  const SizedBox(height: 10),
                  // Instructional text
                  const Text(
                    'Please enter your phone number\nto receive one time password',
                    style: TextStyle(
                      fontSize: 14,
                      color: Colors.black,
                      fontWeight: FontWeight.w400,
                      fontFamily: 'Anek',
                    ),
                  ),
                  const SizedBox(height: 25),
                  // Input field for mobile number
                  CommonTextFormField(
                    title: ' Enter Your Mobile Number',
                    inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                    keyboardType: TextInputType.number,
                  ),
                  const SizedBox(height: 60),
                  // Button to submit phone number and request OTP
                  Align(
                    alignment: Alignment.center,
                    child: CommonElevatedButton(
                      backgroundColor: const Color(0xff004791),
                      borderRadius: 30,
                      width: double.infinity,
                      height: kToolbarHeight - 10,
                      text: 'GET OTP',
                      onPressed: () {
                        // Navigate to OTP screen
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => const VerifyCodeScreen(),
                          ),
                        );
                        print('OTP submitted'); // Debugging line
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}