import 'package:email_validator/email_validator.dart';
import 'package:flutter/material.dart';
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: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 Center(
          child: ConstrainedBox(
            constraints: const BoxConstraints(maxWidth: 400),
            child: SingleChildScrollView(
              padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 16),
              child: Form(
                autovalidateMode: AutovalidateMode.onUserInteraction,
                key: loginFormProvider.formKey,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text('Iniciar sesión',
                        style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                    const SizedBox(height: 4),
                    const Text('Ingresa con tu cuenta de email',
                        style: TextStyle(color: Colors.grey, fontSize: 13)),
                    const SizedBox(height: 28),

                    // Email
                    TextFormField(
                      keyboardType: TextInputType.emailAddress,
                      onFieldSubmitted: (_) => _submit(loginFormProvider, authProvider),
                      validator: (v) => EmailValidator.validate(v ?? '') ? null : 'Email no válido',
                      onChanged: (v) => loginFormProvider.email = v,
                      decoration: _inputDecoration('Email', 'correo@ejemplo.com', Icons.email_outlined),
                    ),
                    const SizedBox(height: 16),

                    // Password
                    TextFormField(
                      obscureText: true,
                      onFieldSubmitted: (_) => _submit(loginFormProvider, authProvider),
                      validator: (v) {
                        if (v == null || v.isEmpty) return 'Ingresa tu contraseña';
                        if (v.length < 6) return 'Mínimo 6 caracteres';
                        return null;
                      },
                      onChanged: (v) => loginFormProvider.password = v,
                      decoration: _inputDecoration('Contraseña', '••••••••', Icons.lock_outline),
                    ),
                    const SizedBox(height: 24),

                    SizedBox(
                      width: double.infinity,
                      child: ElevatedButton(
                        onPressed: () => _submit(loginFormProvider, authProvider),
                        style: ElevatedButton.styleFrom(
                          backgroundColor: const Color(0xFF42A4EF),
                          foregroundColor: Colors.white,
                          padding: const EdgeInsets.symmetric(vertical: 16),
                          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                          elevation: 0,
                        ),
                        child: const Text('Ingresar',
                            style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600)),
                      ),
                    ),
                    const SizedBox(height: 24),

                    Row(children: const [
                      Expanded(child: Divider()),
                      Padding(
                          padding: EdgeInsets.symmetric(horizontal: 12),
                          child: Text('o', style: TextStyle(color: Colors.grey))),
                      Expanded(child: Divider()),
                    ]),
                    const SizedBox(height: 16),

                    SizedBox(
                      width: double.infinity,
                      child: OutlinedButton.icon(
                        onPressed: () =>
                            Navigator.pushReplacementNamed(context, Flurorouter.phoneLoginRoute),
                        icon: const Icon(Icons.phone_android, color: Color(0xFF42A4EF)),
                        label: const Text('Ingresar con celular',
                            style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600)),
                        style: OutlinedButton.styleFrom(
                          padding: const EdgeInsets.symmetric(vertical: 14),
                          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                          side: const BorderSide(color: Color(0xFF42A4EF)),
                        ),
                      ),
                    ),
                    const SizedBox(height: 12),

                    Center(
                      child: TextButton(
                        onPressed: () =>
                            Navigator.pushReplacementNamed(context, Flurorouter.registerRoute),
                        child: RichText(
                          text: const TextSpan(
                            style: TextStyle(color: Colors.grey, fontSize: 13),
                            children: [
                              TextSpan(text: '¿No tienes cuenta? '),
                              TextSpan(
                                text: 'Regístrate',
                                style: TextStyle(
                                    color: Color(0xFF42A4EF), fontWeight: FontWeight.w600),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }),
    );
  }

  InputDecoration _inputDecoration(String label, String hint, IconData icon) {
    return InputDecoration(
      labelText: label,
      hintText: hint,
      prefixIcon: Icon(icon, color: const Color(0xFF42A4EF)),
      filled: true,
      fillColor: const Color(0xFFF5F8FF),
      border: OutlineInputBorder(borderRadius: BorderRadius.circular(10), borderSide: BorderSide.none),
      enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(10),
          borderSide: const BorderSide(color: Color(0xFFE0E7FF))),
      focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(10),
          borderSide: const BorderSide(color: Color(0xFF42A4EF), width: 2)),
      errorBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(10),
          borderSide: const BorderSide(color: Colors.red)),
      focusedErrorBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(10),
          borderSide: const BorderSide(color: Colors.red, width: 2)),
    );
  }

  void _submit(LoginFormProvider form, AuthProvider auth) async {
    if (form.validateForm()) {
      await auth.login(form.email, form.password);
    }
  }
}