import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:intl_phone_field/intl_phone_field.dart';
import 'package:prosappco/src/authentication/authentication_repository.dart';
import 'package:prosappco/src/controllers/phone_auth_controller.dart';
import 'package:prosappco/src/screens/code_validation.dart';
import 'package:prosappco/src/screens/login_email.dart';
import 'package:prosappco/src/screens/register.dart';

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

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

class _LoginScreenState extends State<LoginScreen> {
  final controller = Get.put(PhoneAuthController());
  final _formKey = GlobalKey<FormState>();
  String completePhoneNumber = '';

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Color(0xFFD6F4FF),
      body: Stack(
        children: [
          Container(
            margin: const EdgeInsets.only(top: 280),
            width: double.infinity,
            height: 600,
            decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                    topRight: Radius.circular(50),
                    topLeft: Radius.circular(50))),
          ),
          Container(
            margin: const EdgeInsets.only(top: 120, left: 70, right: 70),
            child: const Image(image: AssetImage('images/logo_prosapp.png')),
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20),
            margin: const EdgeInsets.only(top: 280, left: 30, right: 50),
            child: Column(children: const [
              Align(
                alignment: Alignment.topLeft,
                child: Text(
                  'Iniciar sesión',
                  style: TextStyle(
                    color: Color(0xFF262626),
                    fontSize: 38.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ]),
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20),
            margin: const EdgeInsets.only(top: 350, left: 50, right: 50),
            child: Column(children: [
              const Padding(
                  padding: EdgeInsets.only(bottom: 5),
                  child: Align(
                    alignment: Alignment.topLeft,
                    child: Text('Numero de celular',
                        style: TextStyle(
                            fontSize: 18.0, color: Color(0xFF65676B))),
                  )),
              Form(
                key: _formKey,
                child: Padding(
                  padding: EdgeInsets.only(bottom: 5),
                  child: IntlPhoneField(
                    controller: controller.phoneNo,
                    initialCountryCode: 'CO',
                    onChanged: (phoneNo) {
                      completePhoneNumber = phoneNo.completeNumber;
                    },
                    decoration: InputDecoration(
                      enabledBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Color(0xFFECECEC)),
                          borderRadius: BorderRadius.all(
                            Radius.circular(50),
                          )),
                      focusedBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Color(0xFFECECEC)),
                          borderRadius: BorderRadius.all(
                            Radius.circular(50),
                          )),
                      fillColor: Color.fromARGB(255, 239, 239, 239),
                      filled: true,
                    ),
                  ),
                  // child: TextFormField(
                  //   controller: controller.phoneNo,
                  //   decoration: InputDecoration(
                  //       enabledBorder: OutlineInputBorder(
                  //           borderSide: BorderSide(color: Color(0xFFECECEC)),
                  //           borderRadius: BorderRadius.all(
                  //             Radius.circular(50),
                  //           )),
                  //       focusedBorder: OutlineInputBorder(
                  //           borderSide: BorderSide(color: Color(0xFFECECEC)),
                  //           borderRadius: BorderRadius.all(
                  //             Radius.circular(50),
                  //           )),
                  //       hintText: '+57',
                  //       fillColor: Color.fromARGB(255, 239, 239, 239),
                  //       filled: true,
                  //       prefixIcon: Icon(Icons.phone_android_outlined)),
                  // ),
                ),
              ),
              const Padding(
                padding: EdgeInsets.only(bottom: 30),
                child: Text('Un código será enviado a este numero de celular.',
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 13.0, color: Color(0xFF65676B))),
              ),
              Padding(
                padding: EdgeInsets.only(bottom: 30),
                child: Center(
                    child: ElevatedButton(
                  onPressed: () {
                    if (_formKey.currentState!.validate()) {
                      PhoneAuthController.instance.phoneAuthentication(
                        completePhoneNumber.trim(),
                      );
                      Get.to(() => CodeValidationScreen(
                            phoneNumber: completePhoneNumber.trim(),
                          ));
                    }
                  },
                  child: Text(
                    'Enviar código',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 18,
                    ),
                  ),
                  style: ElevatedButton.styleFrom(
                    primary: Color(0xFF2BA4EC), // Color del botón
                    shape: RoundedRectangleBorder(
                      borderRadius:
                          BorderRadius.circular(50), // Bordes redondeados
                    ),
                    elevation: 0,
                    minimumSize: Size(230, 60), // Tamaño mínimo del botón
                  ),
                )),
              ),
              Padding(
                padding: EdgeInsets.only(bottom: 27),
                child: GestureDetector(
                  onTap: () {
                    Navigator.pushNamed(context, '/login');
                  },
                  child: Text(
                    'Entrar con correo electronico',
                    style: TextStyle(
                      fontSize: 15.0, color: Color(0xFF65676B),
                      decoration: TextDecoration.underline, // Subrayado
                    ),
                  ),
                ),
              ),
              RichText(
                text: TextSpan(
                  style: TextStyle(
                    fontSize: 16.0,
                    color: Color(0xFF65676B),
                    fontFamily: 'Poppins',
                  ),
                  children: [
                    TextSpan(text: 'No estas registrado? '),
                    WidgetSpan(
                      child: GestureDetector(
                        onTap: () {
                          Navigator.pushNamed(context, '/register');
                        },
                        child: Text(
                          'Registrarse',
                          style: TextStyle(
                            fontSize: 16.0,
                            color: Color(0xFF2BA4EC),
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              )
            ]),
          ),
        ],
      ),
    ));
  }
}