@extends('layouts.auth')

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

@section('content')
    <div class="welcome-message fade-in-delay-2">
        <p>
            Esta é uma <span class="magic-text">área protegida</span>.
            Por favor, confirme sua senha para continuar.
        </p>
    </div>

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

        <div class="form-group fade-in-delay-3">
            <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" autofocus>
                <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>

        <button type="submit" class="btn-primary fade-in-delay-4" id="confirmBtn">
            <span class="btn-content">
                <span class="spinner"></span>
                <i class="bi bi-shield-check btn-icon btn-text"></i>
                <span class="btn-text">Confirmar</span>
            </span>
        </button>
    </form>
@endsection

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

            var DOM = {};

            function initDOM() {
                DOM.confirmForm = document.getElementById('confirmForm');
                DOM.confirmBtn = document.getElementById('confirmBtn');
                DOM.passwordInput = document.getElementById('password');
                DOM.passwordToggle = document.getElementById('passwordToggle');
                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');
                },

                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 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 ConfirmForm = {
                isSubmitting: false,

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

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

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

                    if (this.isSubmitting) {
                        return;
                    }

                    var password = DOM.passwordInput ? DOM.passwordInput.value : '';

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

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

                    DOM.confirmForm.submit();
                }
            };

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

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