{% extends "base.html" %}

{% block title %}Restablecer Contraseña - TallArt{% endblock %}

{% block content %}
<style>
    .card {
        max-width: 480px;
        margin: 0 auto;
    }
    .card-body {
        padding: 3rem 2.5rem;
    }
    .form-control {
        font-size: 1rem;
        padding: 0.75rem;
    }
    .btn-lg {
        padding: 0.75rem;
        font-size: 1.1rem;
    }
    .password-strength {
        height: 5px;
        margin-top: 10px;
        border-radius: 3px;
        background-color: #e9ecef;
        overflow: hidden;
    }
    .password-strength-bar {
        height: 100%;
        transition: width 0.3s, background-color 0.3s;
        width: 0%;
    }
    .success-box {
        background-color: #d1ecf1;
        border-left: 4px solid #0c5460;
        padding: 15px;
        margin: 20px 0;
        border-radius: 4px;
    }
</style>

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-5">
            <div class="card shadow">
                <div class="card-body p-5">
                    <div class="text-center mb-4">
                        <div class="mb-3">
                            <i class="fas fa-lock fa-3x text-success"></i>
                        </div>
                        <h2 class="card-title text-primary">Restablecer Contraseña</h2>
                        <p class="text-muted">Crea tu nueva contraseña segura</p>
                    </div>

                    {% with messages = get_flashed_messages(with_categories=true) %}
                        {% if messages %}
                            {% for category, message in messages %}
                                <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}

                    {% if user %}
                    <div class="success-box">
                        <p class="mb-0" style="color: #0c5460;">
                            <i class="fas fa-user-check"></i>
                            Restableciendo contraseña para: <strong>{{ user.get('NombreCompleto') or user.get('Username') }}</strong>
                        </p>
                    </div>
                    {% endif %}

                    <form method="POST" action="{{ url_for('auth.reset_password', token=token) }}" id="resetForm">
                        <div class="mb-3">
                            <label for="new_password" class="form-label">
                                <i class="fas fa-key"></i> Nueva Contraseña
                            </label>
                            <input type="password" 
                                   class="form-control" 
                                   id="new_password" 
                                   name="new_password" 
                                   required>
                            <div class="password-strength">
                                <div class="password-strength-bar" id="strengthBar"></div>
                            </div>
                            <div id="strengthText" class="form-text"></div>
                            <div class="form-text">Mínimo 6 caracteres</div>
                        </div>

                        <div class="mb-4">
                            <label for="confirm_password" class="form-label">
                                <i class="fas fa-check-circle"></i> Confirmar Nueva Contraseña
                            </label>
                            <input type="password" 
                                   class="form-control" 
                                   id="confirm_password" 
                                   name="confirm_password" 
                                   required>
                            <div id="matchFeedback" class="form-text"></div>
                        </div>

                        <div class="d-grid mb-3">
                            <button type="submit" class="btn btn-success btn-lg" id="submitBtn">
                                <i class="fas fa-check"></i> Restablecer Contraseña
                            </button>
                        </div>
                    </form>

                    <div class="text-center mt-4">
                        <p class="mb-0">
                            <a href="{{ url_for('auth.login') }}" class="text-primary">
                                <i class="fas fa-arrow-left"></i> Volver al inicio de sesión
                            </a>
                        </p>
                    </div>

                    <div class="mt-4 p-3" style="background-color: #fff3cd; border-radius: 4px; border-left: 4px solid #ffc107;">
                        <p class="mb-0" style="color: #856404; font-size: 0.85rem;">
                            <i class="fas fa-info-circle"></i> <strong>Consejo:</strong> Usa una combinación de letras, números y caracteres especiales para mayor seguridad.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('resetForm');
    const newPassword = document.getElementById('new_password');
    const confirmPassword = document.getElementById('confirm_password');
    const strengthBar = document.getElementById('strengthBar');
    const strengthText = document.getElementById('strengthText');
    const matchFeedback = document.getElementById('matchFeedback');
    const submitBtn = document.getElementById('submitBtn');

    // Verificar fortaleza de contraseña
    newPassword.addEventListener('input', function() {
        const password = this.value;
        let strength = 0;
        let text = '';
        let color = '';

        if (password.length >= 6) strength += 25;
        if (password.length >= 8) strength += 25;
        if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength += 25;
        if (/[0-9]/.test(password)) strength += 15;
        if (/[^a-zA-Z0-9]/.test(password)) strength += 10;

        if (strength < 25) {
            text = 'Muy débil';
            color = '#dc3545';
        } else if (strength < 50) {
            text = 'Débil';
            color = '#ffc107';
        } else if (strength < 75) {
            text = 'Media';
            color = '#17a2b8';
        } else {
            text = 'Fuerte';
            color = '#28a745';
        }

        strengthBar.style.width = Math.min(strength, 100) + '%';
        strengthBar.style.backgroundColor = color;
        strengthText.textContent = text;
        strengthText.style.color = color;
    });

    // Verificar que las contraseñas coincidan
    function checkPasswordMatch() {
        if (confirmPassword.value === '') {
            matchFeedback.textContent = '';
            matchFeedback.className = 'form-text';
            return;
        }

        if (newPassword.value === confirmPassword.value) {
            matchFeedback.textContent = '✓ Las contraseñas coinciden';
            matchFeedback.className = 'form-text text-success';
        } else {
            matchFeedback.textContent = '✗ Las contraseñas no coinciden';
            matchFeedback.className = 'form-text text-danger';
        }
    }

    newPassword.addEventListener('input', checkPasswordMatch);
    confirmPassword.addEventListener('input', checkPasswordMatch);

    // Validar antes de enviar
    form.addEventListener('submit', function(e) {
        if (newPassword.value !== confirmPassword.value) {
            e.preventDefault();
            alert('❌ Las contraseñas no coinciden');
            confirmPassword.focus();
            return false;
        }

        if (newPassword.value.length < 6) {
            e.preventDefault();
            alert('❌ La contraseña debe tener al menos 6 caracteres');
            newPassword.focus();
            return false;
        }

        // Deshabilitar botón para evitar doble envío
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Procesando...';
    });
});
</script>
{% endblock %}