@extends('layouts.auth')

@section('title', 'Login')

@section('content')
    <div class="welcome-message fade-in-delay-2">
        <p>
            Saudações! Apresente suas <span class="magic-text">credenciais</span>
            para acessar os sistemas integrados da Assembleia.
        </p>
    </div>

    <form method="POST" action="{{ route('login') }}" id="loginForm" 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>

        <div class="form-group fade-in-delay-4">
            <label for="password" class="form-label">
                <i class="bi bi-key"></i>
                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 senha"
                    required autocomplete="current-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>
            <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-options fade-in-delay-4">
            @if (Route::has('password.request'))
                <a href="{{ route('password.request') }}" class="forgot-link">
                    Esqueceu a senha?
                </a>
            @endif
        </div>

        <button type="submit" class="btn-primary fade-in-delay-5" id="loginBtn">
            <span class="btn-content">
                <span class="spinner"></span>
                <i class="bi bi-box-arrow-in-right btn-icon btn-text"></i>
                <span class="btn-text">Entrar no Sistema</span>
            </span>
        </button>
    </form>
@endsection

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

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

            var DOM = {};

            function initDOM() {
                DOM.loginForm = document.getElementById('loginForm');
                DOM.loginBtn = document.getElementById('loginBtn');
                DOM.passwordInput = document.getElementById('password');
                DOM.passwordToggle = document.getElementById('passwordToggle');
                DOM.emailInput = document.getElementById('email');
                DOM.emailAutocomplete = document.getElementById('emailAutocomplete');
                DOM.capsLockWarning = document.getElementById('capsLockWarning');
            }

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

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

                    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();
                        if (DOM.passwordInput) {
                            DOM.passwordInput.focus();
                        }
                    }
                }
            };

            var PasswordToggle = {
                isVisible: false,

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

                bindEvents: function() {
                    var self = this;

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

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

                toggle: function() {
                    this.isVisible = !this.isVisible;
                    DOM.passwordInput.type = this.isVisible ? 'text' : 'password';
                    DOM.passwordToggle.setAttribute('data-visible', this.isVisible.toString());
                    DOM.passwordToggle.setAttribute('aria-label', this.isVisible ? 'Ocultar senha' :
                        'Mostrar senha');
                }
            };

            var CapsLockDetector = {
                init: function() {
                    if (!DOM.passwordInput || !DOM.capsLockWarning) return;
                    this.bindEvents();
                },

                bindEvents: function() {
                    var self = this;
                    DOM.passwordInput.addEventListener('keyup', function(e) {
                        self.check(e);
                    });
                    DOM.passwordInput.addEventListener('keydown', function(e) {
                        self.check(e);
                    });
                    DOM.passwordInput.addEventListener('blur', function() {
                        self.hide();
                    });
                },

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

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

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

            var LoginForm = {
                isSubmitting: false,

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

                bindEvents: function() {
                    var self = this;
                    DOM.loginForm.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 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;
                    }

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

                    DOM.loginForm.submit();
                }
            };

            function init() {
                initDOM();
                EmailAutocomplete.init();
                PasswordToggle.init();
                CapsLockDetector.init();
                LoginForm.init();
            }

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