import 'package:flutter/material.dart';
import 'package:prosapp_web_app/providers/auth_provider.dart';
import 'package:prosapp_web_app/providers/email_form_provider.dart';
import 'package:prosapp_web_app/providers/phone_form_provider.dart';
import 'package:prosapp_web_app/ui/buttons/custom_outlined_button.dart';
import 'package:prosapp_web_app/ui/cards/white_card.dart';
import 'package:prosapp_web_app/ui/inputs/custom_inputs.dart';
import 'package:provider/provider.dart';

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

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

    final TextEditingController _emailController = TextEditingController();
    final TextEditingController _passwordController = TextEditingController();
    final TextEditingController _confirmPasswordController =
        TextEditingController();

    final RegExp emailRegex =
        RegExp(r"^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$");

    RegExp passwordRegex = RegExp(r'^(?=.*?[0-9])');

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

        return ListView(
          physics: const ClampingScrollPhysics(),
          children: [
            Center(
              child: ConstrainedBox(
                constraints: const BoxConstraints(maxWidth: 900),
                child: WhiteCard(
                  child: Column(
                    children: [
                      Container(
                        margin: const EdgeInsets.only(top: 40),
                        padding: const EdgeInsets.symmetric(horizontal: 20),
                        child: Center(
                          child: ConstrainedBox(
                            constraints: const BoxConstraints(maxWidth: 370),
                            child: Form(
                              autovalidateMode:
                                  AutovalidateMode.onUserInteraction,
                              key: emailFormProvider.formKey,
                              child: Column(
                                children: [
                                  TextFormField(
                                    controller: _emailController,
                                    validator: (value) {
                                      if (value == null || value.isEmpty) {
                                        return 'Ingresa un email';
                                      }

                                      if (!emailRegex.hasMatch(value)) {
                                        return 'Ingresa un email válido';
                                      }
                                      return null;
                                    },
                                    onChanged: (email) =>
                                        emailFormProvider.email = email,
                                    decoration:
                                        CustomInputs.loginInputDecoration(
                                      hint: 'Ingresa tu email',
                                      label: 'Email',
                                      icon: Icons.email_outlined,
                                    ),
                                  ),
                                  const SizedBox(height: 20),
                                  TextFormField(
                                    controller: _passwordController,
                                    obscureText: true,
                                    onChanged: (value) =>
                                        emailFormProvider.password = value,
                                    validator: (value) {
                                      if (value == null || value.isEmpty) {
                                        return 'Ingresa una contraseña';
                                      }

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

                                      if (!passwordRegex.hasMatch(value)) {
                                        return 'La contraseña debe tener al menos un número';
                                      }
                                      return null;
                                    },
                                    decoration:
                                        CustomInputs.loginInputDecoration(
                                      hint: 'Ingresa tu contraseña',
                                      label: 'Contraseña',
                                      icon: Icons.lock_outline,
                                    ),
                                  ),
                                  const SizedBox(height: 20),
                                  TextFormField(
                                    obscureText: true,
                                    controller: _confirmPasswordController,
                                    onChanged: (value) =>
                                        emailFormProvider.password = value,
                                    validator: (value) {
                                      if (value != _passwordController.text) {
                                        return 'Las contraseñas no coinciden';
                                      }
                                      if (value!.isEmpty) {
                                        return 'La contraseña es obligatoria';
                                      }
                                      return null;
                                    },
                                    decoration:
                                        CustomInputs.loginInputDecoration(
                                      hint: 'Confirma tu contraseña',
                                      label: 'Confirmar contraseña',
                                      icon: Icons.lock_outline,
                                    ),
                                  ),
                                  const SizedBox(height: 20),
                                  CustomOutlinedButton(
                                    onPressed: () async {
                                      final isValid =
                                          emailFormProvider.validateForm();
                                      if (isValid) {
                                        await authProvider.addEmailAndPassword(
                                            emailFormProvider.email,
                                            emailFormProvider.password);
                                      }
                                    },
                                    text: "Guardar",
                                    color: Colors.blue,
                                  ),
                                  const SizedBox(height: 20),
                                ],
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        );
      }),
    );
  }
}