@extends('layouts.auth')

@section('title', 'Redefinir Senha')

@section('content')
    <div class="welcome-message fade-in-delay-2">
        <p>
            Defina uma nova <span class="magic-text">senha segura</span>
            para sua conta. Use uma combinação forte de caracteres.
        </p>
    </div>

    <form method="POST" action="{{ route('password.store') }}" id="resetForm" novalidate>
        @csrf

        <input type="hidden" name="token" value="{{ $request->route('token') }}">

        <div class="form-group fade-in-delay-3">
            <label for="email" class="form-label">
                <i class="bi bi-envelope"></i>
                E-mail Institucional
            </label>
            <div class="input-wrapper">
                <i class="bi bi-at input-icon"></i>
                <input type="email" id="email" name="email"
                    class="form-control-custom @error('email') is-invalid @enderror"
                    placeholder="seunome@assembleia.pr.leg.br" value="{{ old('email', $request->email) }}" required
                    autofocus autocomplete="username">
                <div class="input-glow-line"></div>
            </div>
            @error('email')
                <div class="error-message">
                    <i class="bi bi-exclamation-circle"></i>
                    <span>{{ $message }}</span>
                </div>
            @enderror
        </div>

        <div class="form-group fade-in-delay-4">
            <label for="password" class="form-label">
                <i class="bi bi-key"></i>
                Nova Senha
            </label>
            <div class="input-wrapper">
                <i class="bi bi-lock input-icon"></i>
                <input type="password" id="password" name="password"
                    class="form-control-custom @error('password') is-invalid @enderror" placeholder="Digite sua nova senha"
                    required autocomplete="new-password">
                <button type="button" class="password-toggle" id="passwordToggle" data-visible="false"
                    aria-label="Mostrar senha">
                    <i class="bi bi-eye icon-eye"></i>
                    <i class="bi bi-eye-slash icon-eye-slash"></i>
                </button>
                <div class="input-glow-line"></div>
            </div>
            <div class="caps-lock-warning" id="capsLockWarning">
                <i class="bi bi-exclamation-triangle"></i>
                <span>Caps Lock está ativado</span>
            </div>
            @error('password')
                <div class="error-message">
                    <i class="bi bi-exclamation-circle"></i>
                    <span>{{ $message }}</span>
                </div>
            @enderror
        </div>

        <div class="form-group fade-in-delay-5">
            <label for="password_confirmation" class="form-label">
                <i class="bi bi-key-fill"></i>
                Confirmar Nova Senha
            </label>
            <div class="input-wrapper">
                <i class="bi bi-shield-lock input-icon"></i>
                <input type="password" id="password_confirmation" name="password_confirmation" class="form-control-custom"
                    placeholder="Confirme sua nova senha" required autocomplete="new-password">
                <button type="button" class="password-toggle" id="passwordConfirmToggle" data-visible="false"
                    aria-label="Mostrar senha">
                    <i class="bi bi-eye icon-eye"></i>
                    <i class="bi bi-eye-slash icon-eye-slash"></i>
                </button>
                <div class="input-glow-line"></div>
            </div>
            <div class="caps-lock-warning" id="capsLockWarningConfirm">
                <i class="bi bi-exclamation-triangle"></i>
                <span>Caps Lock está ativado</span>
            </div>
        </div>

        <button type="submit" class="btn-primary fade-in-delay-5" id="resetBtn" style="margin-top: 24px;">
            <span class="btn-content">
                <span class="spinner"></span>
                <i class="bi bi-shield-check btn-icon btn-text"></i>
                <span class="btn-text">Redefinir Senha</span>
            </span>
        </button>
    </form>
@endsection

@section('scripts')
    <script>
        (function() {
            'use strict';

            var DOM = {};

            function initDOM() {
                DOM.resetForm = document.getElementById('resetForm');
                DOM.resetBtn = document.getElementById('resetBtn');
                DOM.emailInput = document.getElementById('email');
                DOM.passwordInput = document.getElementById('password');
                DOM.passwordConfirmInput = document.getElementById('password_confirmation');
                DOM.passwordToggle = document.getElementById('passwordToggle');
                DOM.passwordConfirmToggle = document.getElementById('passwordConfirmToggle');
                DOM.capsLockWarning = document.getElementById('capsLockWarning');
                DOM.capsLockWarningConfirm = document.getElementById('capsLockWarningConfirm');
            }

            var Validator = {
                showError: function(input, message) {
                    this.removeError(input);

                    var errorDiv = document.createElement('div');
                    errorDiv.className = 'error-message';
                    errorDiv.innerHTML = '<i class="bi bi-exclamation-circle"></i><span>' + message + '</span>';

                    var wrapper = input.closest('.input-wrapper') || input.parentElement;
                    wrapper.parentElement.appendChild(errorDiv);

                    input.classList.add('is-invalid');
                    input.focus();
                },

                removeError: function(input) {
                    var formGroup = input.closest('.form-group');
                    var existingError = formGroup.querySelector('.error-message:not(.error-message[style])');
                    if (existingError) {
                        existingError.remove();
                    }
                    input.classList.remove('is-invalid');
                },

                validateEmail: function(email) {
                    if (!email || email.trim() === '') {
                        return {
                            valid: false,
                            message: 'Por favor, informe seu e-mail institucional'
                        };
                    }

                    var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    if (!emailRegex.test(email)) {
                        return {
                            valid: false,
                            message: 'Por favor, informe um e-mail válido'
                        };
                    }

                    if (!email.endsWith('@assembleia.pr.leg.br')) {
                        return {
                            valid: false,
                            message: 'Use seu e-mail institucional (@assembleia.pr.leg.br)'
                        };
                    }

                    return {
                        valid: true
                    };
                },

                validatePassword: function(password) {
                    if (!password || password.trim() === '') {
                        return {
                            valid: false,
                            message: 'Por favor, informe sua nova senha'
                        };
                    }

                    if (password.length < 8) {
                        return {
                            valid: false,
                            message: 'A senha deve ter no mínimo 8 caracteres'
                        };
                    }

                    return {
                        valid: true
                    };
                },

                validatePasswordConfirmation: function(password, confirmation) {
                    if (!confirmation || confirmation.trim() === '') {
                        return {
                            valid: false,
                            message: 'Por favor, confirme sua nova senha'
                        };
                    }

                    if (password !== confirmation) {
                        return {
                            valid: false,
                            message: 'As senhas não coincidem'
                        };
                    }

                    return {
                        valid: true
                    };
                }
            };

            var PasswordToggle = {
                init: function() {
                    if (DOM.passwordToggle && DOM.passwordInput) {
                        this.bindToggle(DOM.passwordToggle, DOM.passwordInput);
                    }
                    if (DOM.passwordConfirmToggle && DOM.passwordConfirmInput) {
                        this.bindToggle(DOM.passwordConfirmToggle, DOM.passwordConfirmInput);
                    }
                },

                bindToggle: function(toggle, input) {
                    var self = this;

                    toggle.addEventListener('click', function() {
                        self.toggle(toggle, input);
                    });

                    input.addEventListener('input', function() {
                        Validator.removeError(input);
                    });
                },

                toggle: function(toggle, input) {
                    var isVisible = toggle.getAttribute('data-visible') === 'true';
                    isVisible = !isVisible;

                    input.type = isVisible ? 'text' : 'password';
                    toggle.setAttribute('data-visible', isVisible.toString());
                    toggle.setAttribute('aria-label', isVisible ? 'Ocultar senha' : 'Mostrar senha');
                }
            };

            var CapsLockDetector = {
                init: function() {
                    if (DOM.passwordInput && DOM.capsLockWarning) {
                        this.bindDetector(DOM.passwordInput, DOM.capsLockWarning);
                    }
                    if (DOM.passwordConfirmInput && DOM.capsLockWarningConfirm) {
                        this.bindDetector(DOM.passwordConfirmInput, DOM.capsLockWarningConfirm);
                    }
                },

                bindDetector: function(input, warning) {
                    var self = this;

                    input.addEventListener('keyup', function(e) {
                        self.check(e, warning);
                    });

                    input.addEventListener('keydown', function(e) {
                        self.check(e, warning);
                    });

                    input.addEventListener('blur', function() {
                        self.hide(warning);
                    });
                },

                check: function(e, warning) {
                    var isCapsLock = false;
                    try {
                        isCapsLock = e.getModifierState && e.getModifierState('CapsLock');
                    } catch (err) {}

                    if (isCapsLock) {
                        warning.classList.add('show');
                    } else {
                        warning.classList.remove('show');
                    }
                },

                hide: function(warning) {
                    warning.classList.remove('show');
                }
            };

            var ResetForm = {
                isSubmitting: false,

                init: function() {
                    if (!DOM.resetForm) return;
                    this.bindEvents();
                },

                bindEvents: function() {
                    var self = this;
                    DOM.resetForm.addEventListener('submit', function(e) {
                        self.handleSubmit(e);
                    });
                },

                handleSubmit: function(e) {
                    e.preventDefault();

                    if (this.isSubmitting) {
                        return;
                    }

                    var email = DOM.emailInput ? DOM.emailInput.value.trim() : '';
                    var password = DOM.passwordInput ? DOM.passwordInput.value : '';
                    var passwordConfirm = DOM.passwordConfirmInput ? DOM.passwordConfirmInput.value : '';

                    var emailValidation = Validator.validateEmail(email);
                    if (!emailValidation.valid) {
                        Validator.showError(DOM.emailInput, emailValidation.message);
                        return;
                    }

                    var passwordValidation = Validator.validatePassword(password);
                    if (!passwordValidation.valid) {
                        Validator.showError(DOM.passwordInput, passwordValidation.message);
                        return;
                    }

                    var passwordConfirmValidation = Validator.validatePasswordConfirmation(password,
                        passwordConfirm);
                    if (!passwordConfirmValidation.valid) {
                        Validator.showError(DOM.passwordConfirmInput, passwordConfirmValidation.message);
                        return;
                    }

                    this.isSubmitting = true;
                    if (DOM.resetBtn) {
                        DOM.resetBtn.classList.add('loading');
                        DOM.resetBtn.disabled = true;
                    }

                    DOM.resetForm.submit();
                }
            };

            function init() {
                initDOM();
                PasswordToggle.init();
                CapsLockDetector.init();
                ResetForm.init();
            }

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', init);
            } else {
                init();
            }
        })();
    </script>
@endsection