import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:get_it/get_it.dart';
import 'package:navigation/navigation.dart';

class NewPasswordScreen extends ConsumerStatefulWidget {
  const NewPasswordScreen({super.key});

  @override
  ConsumerState<NewPasswordScreen> createState() => NewPasswordScreenState();
}

class NewPasswordScreenState extends ConsumerState<NewPasswordScreen> {
  bool passwordVisible = false;
  bool equalPasswords = false;
  String password = '';

  Map<String, bool> securityChecks = {
    'min': false,
    'capital': false,
    'number': false,
    'special': false,
  };

  @override
  void initState() {
    super.initState();
    passwordVisible = false;
    equalPasswords = false;
    password = '';
    securityChecks = {
      'min': false,
      'capital': false,
      'number': false,
      'special': false,
    };
  }

  @override
  Widget build(BuildContext context) {
    final NavigationContract navigationContract = GetIt.I<NavigationContract>();
    final theme = ref.watch(themePortProvider);

    return Scaffold(
      backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
      body: Container(
        margin: const EdgeInsets.all(24),
        child: Center(
          child: Column(
            spacing: 48,
            children: [
              const Spacer(),
              Column(
                spacing: 32,
                children: [
                  const Text(
                    "Recuperar contraseña",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontWeight: FontWeight.w500,
                      fontSize: 30,
                      letterSpacing: 0,
                    ),
                  ),
                  Column(
                    spacing: 16,
                    children: [
                      CustomTextField(
                        showPassword: passwordVisible,
                        label: "Nueva contraseña",
                        hint: "********",
                        onChanged: (value) => {
                          setState(() {
                            password = value;
                            securityChecks = checkSecurity(value);
                          }),
                        },
                      ),
                      CustomTextField(
                        showPassword: passwordVisible,
                        label: "Repetir contraseña",
                        hint: "********",
                        onChanged: (value) => {
                          setState(() {
                            equalPasswords = password == value;
                          }),
                        },
                      ),
                      Column(
                        spacing: 4,
                        children: [
                          Row(
                            spacing: 8,
                            children: [
                              Icon(
                                Icons.check,
                                color: theme.getColorFor(
                                  securityChecks["min"]!
                                      ? ThemeCode.buttonPrimary
                                      : ThemeCode.buttonSecondary,
                                ),
                              ),
                              const Text(
                                "Al menos 8 caracteres",
                                style: TextStyle(fontSize: 14),
                              ),
                            ],
                          ),
                          Row(
                            spacing: 8,
                            children: [
                              Icon(
                                Icons.check,
                                color: theme.getColorFor(
                                  securityChecks["capital"]!
                                      ? ThemeCode.buttonPrimary
                                      : ThemeCode.buttonSecondary,
                                ),
                              ),
                              const Text(
                                "Una mayúscula",
                                style: TextStyle(fontSize: 14),
                              ),
                            ],
                          ),
                          Row(
                            spacing: 8,
                            children: [
                              Icon(
                                Icons.check,
                                color: theme.getColorFor(
                                  securityChecks["number"]!
                                      ? ThemeCode.buttonPrimary
                                      : ThemeCode.buttonSecondary,
                                ),
                              ),
                              const Text(
                                "Un número",
                                style: TextStyle(fontSize: 14),
                              ),
                            ],
                          ),
                          Row(
                            spacing: 8,
                            children: [
                              Icon(
                                Icons.check,
                                color: theme.getColorFor(
                                  securityChecks["special"]!
                                      ? ThemeCode.buttonPrimary
                                      : ThemeCode.buttonSecondary,
                                ),
                              ),
                              const Text(
                                "Un carácter especial",
                                style: TextStyle(fontSize: 14),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ],
                  ),
                  Column(
                    spacing: 8,
                    children: [
                      Align(
                        alignment: Alignment.bottomLeft,
                        child: const Text(
                          "Teléfono móvil",
                          style: TextStyle(fontSize: 14, letterSpacing: 0),
                        ),
                      ),
                      Row(
                        spacing: 8,
                        children: [
                          CustomDropdown(
                            value: 0,
                            items: [
                              Icon(Icons.outlined_flag),
                              Icon(Icons.outlined_flag),
                              Icon(Icons.outlined_flag),
                            ],
                            onChanged: (value) => {},
                            width: 80,
                          ),
                          Expanded(
                            child: CustomTextField(
                              hint: "Teléfono",
                              keyboardType: TextInputType.number,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
              PrimaryButton(
                onPressed: () => {
                  navigationContract.goTo(AppRoutes.dashboardHome),
                },
                text: "Aceptar",
                color: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              const Spacer(),
            ],
          ),
        ),
      ),
    );
  }

  //TODO: Extraer de la vista
  Map<String, bool> checkSecurity(String value) {
    return {
      'min': value.length >= 8,
      'capital': RegExp(r'[A-Z]').hasMatch(value),
      'number': RegExp(r'[0-9]').hasMatch(value),
      'special': RegExp(r'[^A-Za-z0-9]').hasMatch(value),
    };
  }
}
