import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.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 theme = ref.watch(themePortProvider);

    return Scaffold(
      body: Container(
        margin: const EdgeInsets.all(30),
        child: Center(
          child: Column(
            spacing: 10,
            children: [
              const Spacer(flex: 4),
              const Text(
                'Recuperar contraseña',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
              ),
              TextField(
                obscureText: !passwordVisible,
                enableSuggestions: false,
                autocorrect: false,
                decoration: InputDecoration(
                  labelText: 'Nueva contraseña',
                  hintText: '********',
                  border: const OutlineInputBorder(),
                  suffixIcon: IconButton(
                    icon: Icon(
                      passwordVisible ? Icons.visibility : Icons.visibility_off,
                    ),
                    onPressed: () {
                      setState(() {
                        passwordVisible = !passwordVisible;
                      });
                    },
                  ),
                ),
                onChanged: (value) {
                  setState(() {
                    password = value;
                    securityChecks = checkSecurity(value);
                  });
                },
              ),
              TextField(
                obscureText: !passwordVisible,
                enableSuggestions: false,
                autocorrect: false,
                decoration: InputDecoration(
                  labelText: 'Repetir contraseña',
                  hintText: '********',
                  border: const OutlineInputBorder(),
                  suffixIcon: IconButton(
                    icon: Icon(
                      passwordVisible ? Icons.visibility : Icons.visibility_off,
                    ),
                    onPressed: () {
                      setState(() {
                        passwordVisible = !passwordVisible;
                      });
                    },
                  ),
                ),
                onChanged: (value) {
                  setState(() {
                    equalPasswords = password == value;
                  });
                },
              ),
              Row(
                children: [
                  Icon(
                    securityChecks['min']!
                        ? Icons.check
                        : Icons.cancel_outlined,
                    color: securityChecks['min']!
                        ? theme.getColorFor(ThemeCode.buttonPrimary)
                        : theme.getColorFor(ThemeCode.buttonSecondary),
                  ),
                  const SizedBox(width: 8),
                  const Text('Al menos 8 caracteres'),
                ],
              ),
              Row(
                children: [
                  Icon(
                    securityChecks['capital']!
                        ? Icons.check
                        : Icons.cancel_outlined,
                    color: securityChecks['capital']!
                        ? theme.getColorFor(ThemeCode.buttonPrimary)
                        : theme.getColorFor(ThemeCode.buttonSecondary),
                  ),
                  const SizedBox(width: 8),
                  const Text('Una mayúscula'),
                ],
              ),
              Row(
                children: [
                  Icon(
                    securityChecks['number']!
                        ? Icons.check
                        : Icons.cancel_outlined,
                    color: securityChecks['number']!
                        ? theme.getColorFor(ThemeCode.buttonPrimary)
                        : theme.getColorFor(ThemeCode.buttonSecondary),
                  ),
                  const SizedBox(width: 8),
                  const Text('Un número'),
                ],
              ),
              Row(
                children: [
                  Icon(
                    securityChecks['special']!
                        ? Icons.check
                        : Icons.cancel_outlined,
                    color: securityChecks['special']!
                        ? theme.getColorFor(ThemeCode.buttonPrimary)
                        : theme.getColorFor(ThemeCode.buttonSecondary),
                  ),
                  const SizedBox(width: 8),
                  const Text('Un carácter especial'),
                ],
              ),
              const Spacer(flex: 1),
              FilledButton(
                onPressed:
                    equalPasswords &&
                        securityChecks.values.every((check) => check)
                    ? () {}
                    : null,
                child: Container(
                  width: double.infinity,
                  padding: const EdgeInsets.all(20),
                  child: const Center(child: Text('Aceptar')),
                ),
              ),
              const Spacer(flex: 4),
            ],
          ),
        ),
      ),
    );
  }

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