import 'package:flutter/material.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';
import 'package:responsive_builder/responsive_builder.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 ScreenTypeLayout.builder(
      mobile: (BuildContext context) => _mobileView(context),
      tablet: (BuildContext context) => _mobileView(context),
      desktop: (BuildContext context) => _desktopView(context),
    );
  }

  Widget _mobileView(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',
            keyboardType: TextInputType.number,
            onChanged: (phoneNo) {
              completePhoneNumber = phoneNo.completeNumber;
            },
            decoration: const InputDecoration(
              border: OutlineInputBorder(
                  borderSide: BorderSide(color: Color(0xFFECECEC)),
                  borderRadius: BorderRadius.all(
                    Radius.circular(50),
                  )),
              errorBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Color.fromARGB(255, 184, 0, 0)),
                  borderRadius: BorderRadius.all(
                    Radius.circular(50),
                  )),
              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),
        ButtonBottom(
            formKey: _formKey, completePhoneNumber: completePhoneNumber),
        const SizedBox(height: 20),
        const GestureBottom(),
        const SizedBox(height: 20),
        const RichTxTBottom(),
        const SizedBox(height: 20),
      ],
    );
  }

  Widget _desktopView(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      backgroundColor: const Color(0xFFD6F4FF),
      body: SizedBox(
        height: height,
        width: width,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Expanded(
              child: SizedBox(
                height: height,
                child: const Center(
                  child: Image(
                    image: AssetImage('images/logo_prosapp.png'),
                  ),
                ),
              ),
            ),
            Expanded(
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: width * 0.1),
                color: Colors.white,
                height: height,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  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: 20),
                    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',
                        keyboardType: TextInputType.number,
                        onChanged: (phoneNo) {
                          completePhoneNumber = phoneNo.completeNumber;
                        },
                        decoration: const InputDecoration(
                          border: OutlineInputBorder(
                              borderSide: BorderSide(color: Color(0xFFECECEC)),
                              borderRadius: BorderRadius.all(
                                Radius.circular(50),
                              )),
                          errorBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Color.fromARGB(255, 184, 0, 0)),
                              borderRadius: BorderRadius.all(
                                Radius.circular(50),
                              )),
                          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),
                    ButtonBottom(
                        formKey: _formKey,
                        completePhoneNumber: completePhoneNumber),
                    const SizedBox(height: 20),
                    const GestureBottom(),
                    const SizedBox(height: 20),
                    const RichTxTBottom(),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class ButtonBottom extends StatelessWidget {
  const ButtonBottom({
    super.key,
    required GlobalKey<FormState> formKey,
    required this.completePhoneNumber,
  }) : _formKey = formKey;

  final GlobalKey<FormState> _formKey;
  final String completePhoneNumber;

  @override
  Widget build(BuildContext context) {
    return PrimaryButtom(
      onPressed: () {
        if (_formKey.currentState!.validate()) {
          PhoneAuthController.instance.phoneAuthentication(
            completePhoneNumber.trim(),
          );
          Get.to(
            () => CodeValidationScreen(
              phoneNumber: completePhoneNumber.trim(),
            ),
          );
        }
      },
      label: 'Enviar código',
    );
  }
}

class GestureBottom extends StatelessWidget {
  const GestureBottom({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return 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
        ),
      ),
    );
  }
}

class RichTxTBottom extends StatelessWidget {
  const RichTxTBottom({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return 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,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}