import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.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/models/setting_model.dart';
import 'package:prosappco/src/screens/code_validation.dart';
import 'package:prosappco/src/screens/web_view.dart';
import 'package:responsive_builder/responsive_builder.dart';
import 'package:url_launcher/url_launcher.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 = '';
  bool _isChecked = false;
  SettingModel? settings;

  void _launchURL(String url) async {
    if (await canLaunch(url)) {
      await launch(url, forceSafariVC: false, forceWebView: false);
    } else {
      throw 'No se pudo abrir el enlace $url';
    }
  }

  @override
  void initState() {
    super.initState();
    if (settings == null) {
      SettingModel.getSettings().then(
        (SettingModel value) => setState(() {
          settings = value;
        }),
      );
    }
  }

  @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,
            inputFormatters: [FilteringTextInputFormatter.digitsOnly],
            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),
          ),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 20),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Checkbox(
                value: _isChecked,
                onChanged: (value) {
                  setState(() {
                    _isChecked = value!;
                  });
                },
              ),
              GestureDetector(
                onTap: () {
                  if (kIsWeb) {
                    _launchURL(settings?.terminosCondiciones ?? '');
                  } else {
                    Navigator.push(
                      context,
                      CupertinoPageRoute(
                        builder: (BuildContext context) {
                          return WebViewScreen(
                            label: 'Términos y condiciones',
                            link: settings?.terminosCondiciones ?? '',
                          );
                        },
                      ),
                    );
                  }
                },
                child: const Text(
                  'Acepto los términos y condiciones.',
                  style: TextStyle(
                    fontSize: 13.0,
                    color: Color(0xFF65676B),
                    decoration: TextDecoration.underline,
                  ),
                ),
              ),
            ],
          ),
        ),
        PrimaryButtom(
          onPressed: () {
            if (_formKey.currentState!.validate()) {
              PhoneAuthController.instance.phoneAuthentication(
                completePhoneNumber.trim(),
              );
              Get.to(
                () => CodeValidationScreen(
                  phoneNumber: completePhoneNumber.trim(),
                ),
              );
            }
          },
          isEnabled: _isChecked,
          label: 'Enviar código',
        ),
        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,
                        inputFormatters: [
                          FilteringTextInputFormatter.digitsOnly
                        ],
                        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),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 20),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Checkbox(
                            value: _isChecked,
                            onChanged: (value) {
                              setState(() {
                                _isChecked = value!;
                              });
                            },
                          ),
                          GestureDetector(
                            onTap: () {
                              if (kIsWeb) {
                                _launchURL(settings?.terminosCondiciones ?? '');
                              } else {
                                Navigator.push(
                                  context,
                                  CupertinoPageRoute(
                                    builder: (BuildContext context) {
                                      return WebViewScreen(
                                        label: 'Términos y condiciones',
                                        link:
                                            settings?.terminosCondiciones ?? '',
                                      );
                                    },
                                  ),
                                );
                              }
                            },
                            child: const Text(
                              'Acepto los términos y condiciones.',
                              style: TextStyle(
                                fontSize: 13.0,
                                color: Color(0xFF65676B),
                                decoration: TextDecoration
                                    .underline, // Add underline style
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    PrimaryButtom(
                      onPressed: () {
                        if (_formKey.currentState!.validate()) {
                          PhoneAuthController.instance.phoneAuthentication(
                            completePhoneNumber.trim(),
                          );
                          Get.to(
                            () => CodeValidationScreen(
                              phoneNumber: completePhoneNumber.trim(),
                            ),
                          );
                        }
                      },
                      isEnabled: _isChecked,
                      label: 'Enviar código',
                    ),
                    const SizedBox(height: 20),
                    const GestureBottom(),
                    const SizedBox(height: 20),
                    const RichTxTBottom(),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}