import 'dart:ui';
import 'package:cheminova/screens/authentication/controller/auth_controller.dart';
import 'package:cheminova/screens/authentication/forget_password_screen.dart';
import 'package:cheminova/screens/authentication/verify_phone_screen.dart';
import 'package:cheminova/widgets/custom_button.dart';
import 'package:cheminova/widgets/input_field.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';

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

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

class _LoginScreenState extends State<LoginScreen> {
  final formKey = GlobalKey<FormState>();
  final authController = Get.put(AuthController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.topCenter,
        children: [
          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,
            ),
          ),
          SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(height: Get.height * 0.1),
                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),
                    ),
                  ),
                ),
                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),
                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: [
                        Container(
                          alignment: Alignment.centerLeft,
                          padding: const EdgeInsets.only(bottom: 10),
                          child: SvgPicture.asset(
                            'assets/svg/login.svg',
                            height: Get.height * 0.05,
                          ),
                        ),
                        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,
                            ),
                          ),
                        ),
                        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,
                            ),
                          ),
                        ),
                        InputField(
                          hintText: "Email",
                          labelText: "Email",
                          controller: authController.emailController,
                          keyboardType: TextInputType.emailAddress,
                        ),
                        InputField(
                          hintText: "Password",
                          labelText: "Password",
                          controller: authController.passwordController,
                          obscureText: true,
                        ),
                        const SizedBox(height: 30),
                        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: 30),
                        Obx(
                          () => CustomButton(
                            text: "Login",
                            onPressed: () => authController.login(),
                            isLoading: authController.isLoading.value,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}