import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';
import '../../widgets/comman_text_from_filed.dart';
import '../../widgets/custom_button.dart';
import 'controller/auth_controller.dart';
import 'forget_password_screen.dart';
// Make sure you import HomeScreen

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

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  // Form key to manage the state of the form
  final formKey = GlobalKey<FormState>();

  // Instantiate the AuthController using GetX for state management
  final authController = Get.put(AuthController());

  // Regular expressions for validating email and password formats
  final String emailPattern = r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$';
  final String passwordPattern = r'^.{6,}$'; // At least 6 characters

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.topCenter,
        children: [
          // Background image and styling
          Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                fit: BoxFit.cover,
                image: AssetImage('assets/images/image_1.png'),
              ),
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(50.0),
                bottomRight: Radius.circular(50.0),
              ),
            ),
            child: SizedBox(
              width: Get.width,
              height: Get.height * 0.7,
            ),
          ),
          // Form for user login
          SingleChildScrollView(
            child: Form(
              key: formKey, // Link the form to the GlobalKey
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  SizedBox(height: Get.height * 0.1), // Spacer for top
                  // Welcome message
                  Container(
                    margin: const EdgeInsets.symmetric(vertical: 20),
                    child: Text(
                      'Welcome',
                      style: GoogleFonts.getFont(
                        'Roboto',
                        fontWeight: FontWeight.w400,
                        fontSize: 24,
                        height: 1.5,
                        color: const Color(0xFFFFFFFF),
                      ),
                    ),
                  ),
                  // Logo container
                  Container(
                    decoration: BoxDecoration(
                      color: const Color(0xFFFFFFFF),
                      borderRadius: BorderRadius.circular(14),
                    ),
                    child: Container(
                      width: Get.width * 0.7,
                      height: Get.height * 0.07,
                      padding: const EdgeInsets.all(10),
                      child: Container(
                        decoration: const BoxDecoration(
                          image: DecorationImage(
                            fit: BoxFit.fill,
                            image: AssetImage(
                              'assets/images/px_cheminova_svg.png',
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(height: Get.height * 0.05), // Spacer
                  // Login Card
                  Card(
                    margin: const EdgeInsets.symmetric(horizontal: 24),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(19),
                      side: const BorderSide(color: Color(0xFFFDFDFD)),
                    ),
                    color: const Color(0xFFB4D1E5).withOpacity(0.9),
                    child: Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Column(
                        children: [
                          // Login icon
                          Container(
                            alignment: Alignment.centerLeft,
                            padding: const EdgeInsets.only(bottom: 10),
                            child: SvgPicture.asset(
                              'assets/svg/login.svg',
                              height: Get.height * 0.05,
                            ),
                          ),
                          // Login header
                          Container(
                            padding: const EdgeInsets.only(bottom: 10),
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'Login',
                              style: GoogleFonts.getFont(
                                'Roboto',
                                fontWeight: FontWeight.w500,
                                fontSize: 30,
                                height: 1.2,
                              ),
                            ),
                          ),
                          // Subheader
                          Container(
                            padding: const EdgeInsets.only(bottom: 10),
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'Sign in to Continue',
                              style: GoogleFonts.getFont(
                                'Roboto',
                                fontWeight: FontWeight.w300,
                                fontSize: 14,
                                height: 1.8,
                              ),
                            ),
                          ),
                          // Email input field
                          CommonTextFormField(
                            controller: authController.emailController,
                            keyboardType: TextInputType.emailAddress,
                            validator: (value) {
                              // Validate email input
                              if (value == null || value.isEmpty) {
                                return 'Please enter your email id';
                              }
                              if (!RegExp(emailPattern).hasMatch(value)) {
                                return 'Please Enter valid email';
                              }
                              return null;
                            },
                            title: 'Email',
                            label: "Email",
                          ),
                          const SizedBox(height: 15),
                          // Password input field
                          CommonTextFormField(
                            controller: authController.passwordController,
                            validator: (value) {
                              // Validate password input
                              if (value == null || value.isEmpty) {
                                return 'Please enter your password';
                              }
                              if (!RegExp(passwordPattern).hasMatch(value)) {
                                return 'Please Enter valid password';
                              }
                              return null;
                            },
                            obscureText: true, // Hide password text
                            title: 'Password',
                            maxLines: 1,
                            label: "Password",
                          ),
                          const SizedBox(height: 30),
                          // Link to forgot password screen
                          GestureDetector(
                            onTap: () =>
                                Get.to(() => const ForgetPasswordScreen()),
                            child: Text(
                              'Forgot password?',
                              style: GoogleFonts.getFont(
                                'Roboto',
                                fontWeight: FontWeight.w400,
                                fontSize: 20,
                                height: 1,
                                letterSpacing: -0.2,
                              ),
                            ),
                          ),
                          const SizedBox(height: 18),
                          // Login button with loading state
                          Obx(
                                () => CustomButton(
                              text: "Login",
                              onPressed: () {
                                // Validate form and perform login action
                                if (formKey.currentState!.validate()) {
                                  authController.login(); // Call login method
                                }
                              },
                              isLoading: authController.isLoading.value,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
