import 'package:prosapp_web_app/providers/auth_provider.dart';
import 'package:prosapp_web_app/providers/login_form_provider.dart';
import 'package:prosapp_web_app/router/router.dart';
import 'package:prosapp_web_app/ui/buttons/custom_outlined_button.dart';
import 'package:prosapp_web_app/ui/buttons/link_text.dart';
import 'package:prosapp_web_app/ui/inputs/custom_inputs.dart';
import 'package:email_validator/email_validator.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

  @override
  Widget build(BuildContext context) {
    final authProvider = Provider.of<AuthProvider>(context);

    return ChangeNotifierProvider(
      create: (_) => LoginFormProvider(),
      child: Builder(builder: (context) {
        final loginFormProvider =
            Provider.of<LoginFormProvider>(context, listen: false);

        return Container(
          margin: const EdgeInsets.only(top: 100),
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Center(
            child: ConstrainedBox(
              constraints: const BoxConstraints(maxWidth: 370),
              child: Form(
                autovalidateMode: AutovalidateMode.onUserInteraction,
                key: loginFormProvider.formKey,
                child: Column(
                  children: [
                    // Email
                    TextFormField(
                      onFieldSubmitted: (_) =>
                          onFormSubmit(loginFormProvider, authProvider),
                      validator: (value) {
                        if (!EmailValidator.validate(value ?? '')) {
                          return 'Email no válido';
                        }
                        return null;
                      },
                      onChanged: (value) => loginFormProvider.email = value,
                      decoration: CustomInputs.loginInputDecoration(
                        hint: 'Ingresa tu correo',
                        label: 'Email',
                        icon: Icons.email_outlined,
                      ),
                    ),

                    const SizedBox(height: 20),

                    // Password
                    TextFormField(
                      onFieldSubmitted: (_) =>
                          onFormSubmit(loginFormProvider, authProvider),
                      validator: (value) {
                        if (value == null || value.isEmpty) {
                          return "Ingresa tu contraseña";
                        }

                        if (value.length < 8) {
                          return "La contraseña debe tener al menos 8 caracteres";
                        }

                        return null; // Válido
                      },
                      onChanged: (value) => loginFormProvider.password = value,
                      obscureText: true,
                      decoration: CustomInputs.loginInputDecoration(
                        hint: 'Ingresa tu contraseña',
                        label: 'Contraseña',
                        icon: Icons.lock_outline,
                      ),
                    ),

                    const SizedBox(height: 20),

                    CustomOutlinedButton(
                      onPressed: () =>
                          onFormSubmit(loginFormProvider, authProvider),
                      text: "Ingresar",
                      color: Colors.blue,
                    ),
                    const SizedBox(height: 20),

                    LinkText(
                      text: "Nueva cuenta",
                      onPressed: () {
                        Navigator.pushReplacementNamed(
                            context, Flurorouter.registerRoute);
                      },
                    ),
                    const SizedBox(height: 5),

                    LinkText(
                      text: "Entrar con celular",
                      onPressed: () {
                        Navigator.pushReplacementNamed(
                            context, Flurorouter.phoneLoginRoute);
                      },
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }),
    );
  }

  void onFormSubmit(
      LoginFormProvider loginFormProvider, AuthProvider authProvider) async {
    final isValid = loginFormProvider.validateForm();
    if (isValid) {
      await authProvider.login(
        loginFormProvider.email,
        loginFormProvider.password,
      );
    }
  }
}