@extends('layouts.auth')

@section('title', 'Esqueceu a Senha')

@section('content')
    <div class="welcome-message fade-in-delay-2">
        <p>
            Esqueceu sua senha? Sem problemas! Informe seu <span class="magic-text">e-mail institucional</span>
            e enviaremos um link para redefinir sua senha.
        </p>
    </div>

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

        <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"
                    value="{{ old('email') }}" required autofocus autocomplete="username">

                <div class="email-autocomplete" id="emailAutocomplete">
                    <div class="email-autocomplete-item" data-domain="@assembleia.pr.leg.br">
                        <i class="bi bi-building"></i>
                        <span><span class="user-text"></span><span class="domain">@assembleia.pr.leg.br</span></span>
                    </div>
                    <div class="email-autocomplete-hint">
                        <kbd>Tab</kbd> ou <kbd>Enter</kbd> para completar
                    </div>
                </div>
            </div>
            @error('email')
                <div class="error-message">
                    <i class="bi bi-exclamation-circle"></i>
                    <span>{{ $message }}</span>
                </div>
            @enderror
        </div>

        <button type="submit" class="btn-primary fade-in-delay-4" id="forgotBtn">
            <span class="btn-content">
                <span class="spinner"></span>
                <i class="bi bi-envelope-paper btn-icon btn-text"></i>
                <span class="btn-text">Enviar Link de Redefinição</span>
            </span>
        </button>

        <div class="form-options fade-in-delay-5" style="justify-content: center; margin-top: 20px; margin-bottom: 0;">
            <a href="{{ route('login') }}" class="forgot-link">
                <i class="bi bi-arrow-left" style="margin-right: 4px;"></i>
                Voltar para o Login
            </a>
        </div>
    </form>
@endsection

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

            var CONFIG = {
                emailDomain: '@assembleia.pr.leg.br'
            };

            var DOM = {};

            function initDOM() {
                DOM.forgotForm = document.getElementById('forgotForm');
                DOM.forgotBtn = document.getElementById('forgotBtn');
                DOM.emailInput = document.getElementById('email');
                DOM.emailAutocomplete = document.getElementById('emailAutocomplete');
            }

            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
                    };
                }
            };

            var EmailAutocomplete = {
                domain: CONFIG.emailDomain,
                isVisible: false,
                userTextEl: null,

                init: function() {
                    if (!DOM.emailAutocomplete || !DOM.emailInput) return;
                    this.userTextEl = DOM.emailAutocomplete.querySelector('.user-text');
                    this.bindEvents();
                },

                bindEvents: function() {
                    var self = this;

                    DOM.emailInput.addEventListener('input', function() {
                        Validator.removeError(DOM.emailInput);
                        self.handleInput();
                    });

                    DOM.emailInput.addEventListener('keydown', function(e) {
                        self.handleKeydown(e);
                    });

                    DOM.emailInput.addEventListener('focus', function() {
                        self.handleFocus();
                    });

                    DOM.emailInput.addEventListener('blur', function() {
                        self.handleBlur();
                    });

                    var autocompleteItem = DOM.emailAutocomplete.querySelector('.email-autocomplete-item');
                    if (autocompleteItem) {
                        autocompleteItem.addEventListener('mousedown', function(e) {
                            e.preventDefault();
                            self.complete();
                        });
                    }
                },

                handleInput: function() {
                    var value = DOM.emailInput.value.trim();
                    if (value && value.indexOf('@') === -1) {
                        if (this.userTextEl) {
                            this.userTextEl.textContent = value;
                        }
                        this.show();
                    } else {
                        this.hide();
                    }
                },

                handleKeydown: function(e) {
                    var value = DOM.emailInput.value.trim();
                    if ((e.key === 'Tab' || e.key === 'Enter' || e.key === '@') && this.isVisible && value &&
                        value.indexOf('@') === -1) {
                        e.preventDefault();
                        this.complete();
                    }
                },

                handleFocus: function() {
                    var value = DOM.emailInput.value.trim();
                    if (value && value.indexOf('@') === -1) {
                        if (this.userTextEl) {
                            this.userTextEl.textContent = value;
                        }
                        this.show();
                    }
                },

                handleBlur: function() {
                    var self = this;
                    setTimeout(function() {
                        self.hide();
                    }, 150);
                },

                show: function() {
                    DOM.emailAutocomplete.classList.add('show');
                    this.isVisible = true;
                },

                hide: function() {
                    DOM.emailAutocomplete.classList.remove('show');
                    this.isVisible = false;
                },

                complete: function() {
                    var value = DOM.emailInput.value.trim();
                    if (value && value.indexOf('@') === -1) {
                        DOM.emailInput.value = value + this.domain;
                        this.hide();
                    }
                }
            };

            var ForgotForm = {
                isSubmitting: false,

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

                bindEvents: function() {
                    var self = this;
                    DOM.forgotForm.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 emailValidation = Validator.validateEmail(email);
                    if (!emailValidation.valid) {
                        Validator.showError(DOM.emailInput, emailValidation.message);
                        return;
                    }

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

                    DOM.forgotForm.submit();
                }
            };

            function init() {
                initDOM();
                EmailAutocomplete.init();
                ForgotForm.init();
            }

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