import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:get/get.dart';
import 'package:intl_phone_field/intl_phone_field.dart';
import 'package:prosappco/src/components/bottom_sheet.dart';
import 'package:prosappco/src/components/primary_btn.dart';
import 'package:prosappco/src/controllers/phone_auth_controller.dart';
import 'package:prosappco/src/screens/code_validation.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 BottomSheetExpanded(
      children: [
        const SizedBox(
          width: double.infinity,
          child: Text(
            'Iniciar sesión',
            style: TextStyle(
              color: Color(0xFF262626),
              fontSize: 38.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        const SizedBox(height: 10),
        const SizedBox(
          width: double.infinity,
          child: Text(
            'Numero de celular',
            style: TextStyle(
              fontSize: 18.0,
              color: Color(0xFF65676B),
            ),
          ),
        ),
        Form(
          key: _formKey,
          child: IntlPhoneField(
            controller: controller.phoneNo,
            initialCountryCode: 'CO',
            onChanged: (phoneNo) {
              completePhoneNumber = phoneNo.completeNumber;
            },
            decoration: const 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,
            ),
          ),
        ),
        const Text(
          'Un código será enviado a este numero de celular.',
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 13.0,
            color: Color(0xFF65676B),
          ),
        ),
        const SizedBox(height: 20),
        PrimaryButtom(
          onPressed: () {
            if (_formKey.currentState!.validate()) {
              PhoneAuthController.instance.phoneAuthentication(
                completePhoneNumber.trim(),
              );
              Get.to(
                () => CodeValidationScreen(
                  phoneNumber: completePhoneNumber.trim(),
                ),
              );
            }
          },
          label: 'Enviar código',
        ),
        const SizedBox(height: 20),
        GestureDetector(
          onTap: () {
            Navigator.pushNamed(context, '/login');
          },
          child: const Text(
            'Entrar con correo electronico',
            style: TextStyle(
              fontSize: 15.0, color: Color(0xFF65676B),
              decoration: TextDecoration.underline, // Subrayado
            ),
          ),
        ),
        const SizedBox(height: 20),
        RichText(
          text: TextSpan(
            style: const TextStyle(
              fontSize: 16.0,
              color: Color(0xFF65676B),
              fontFamily: 'Poppins',
            ),
            children: [
              const TextSpan(text: 'No estas registrado? '),
              WidgetSpan(
                child: GestureDetector(
                  onTap: () {
                    Navigator.pushNamed(context, '/register');
                  },
                  child: const Text(
                    'Registrarse',
                    style: TextStyle(
                      fontSize: 16.0,
                      color: Color(0xFF2BA4EC),
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        const SizedBox(height: 20),
      ],
    );
  }
}