{% extends 'base.html' %}
{% load static %}

{% block title %}Esqueci minha senha - Allure{% endblock %}

{% block extra_css %}
<style>
    .forgot-password-container {
        min-height: calc(100vh - 160px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 0;
    }
    
    .forgot-password-card {
        background: white;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-medium);
        padding: 3rem;
        width: 100%;
        max-width: 500px;
        position: relative;
        overflow: hidden;
    }
    
    .forgot-password-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--primary-gradient);
    }
    
    .forgot-password-header {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .forgot-password-logo {
        font-size: 2.5rem;
        font-weight: 900;
        background: var(--primary-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 0.5rem;
        letter-spacing: -1px;
    }
    
    .forgot-password-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 0.5rem;
    }
    
    .forgot-password-subtitle {
        color: var(--text-light);
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 0;
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-label {
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 0.5rem;
        display: block;
    }
    
    .form-control {
        width: 100%;
        padding: 1rem;
        border: 2px solid var(--border-color);
        border-radius: var(--border-radius);
        font-size: 1rem;
        transition: all 0.3s ease;
        background: white;
    }
    
    .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25);
        outline: none;
    }
    
    .input-group {
        position: relative;
    }
    
    .input-icon {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-light);
        z-index: 10;
    }
    
    .form-control.with-icon {
        padding-left: 3rem;
    }
    
    .btn-reset {
        width: 100%;
        background: var(--primary-gradient);
        border: none;
        color: white;
        padding: 1rem;
        border-radius: var(--border-radius);
        font-size: 1.1rem;
        font-weight: 600;
        transition: all 0.3s ease;
        margin-bottom: 1.5rem;
    }
    
    .btn-reset:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-medium);
    }
    
    .btn-reset:disabled {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }
    
    .back-to-login {
        text-align: center;
        margin-top: 2rem;
    }
    
    .back-link {
        color: var(--primary-color);
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .back-link:hover {
        color: var(--dark-color);
        text-decoration: underline;
    }
    
    .info-card {
        background: var(--light-color);
        border-radius: var(--border-radius);
        padding: 1.5rem;
        margin-top: 2rem;
        border-left: 4px solid var(--primary-color);
    }
    
    .info-title {
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .info-text {
        color: var(--text-light);
        line-height: 1.6;
        margin-bottom: 0;
    }
    
    .success-message {
        background: #d4edda;
        border: 1px solid #c3e6cb;
        color: #155724;
        padding: 1rem;
        border-radius: var(--border-radius);
        margin-bottom: 1.5rem;
        display: none;
    }
    
    .error-message {
        background: #f8d7da;
        border: 1px solid #f5c6cb;
        color: #721c24;
        padding: 1rem;
        border-radius: var(--border-radius);
        margin-bottom: 1.5rem;
        display: none;
    }
    
    .steps-list {
        list-style: none;
        padding: 0;
        margin: 1rem 0 0 0;
    }
    
    .steps-list li {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
        color: var(--text-light);
    }
    
    .steps-list li:last-child {
        margin-bottom: 0;
    }
    
    .step-number {
        background: var(--primary-color);
        color: white;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 700;
        flex-shrink: 0;
        margin-top: 0.1rem;
    }
    
    @media (max-width: 768px) {
        .forgot-password-card {
            padding: 2rem;
            margin: 1rem;
        }
        
        .forgot-password-logo {
            font-size: 2rem;
        }
        
        .forgot-password-title {
            font-size: 1.3rem;
        }
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .forgot-password-card {
        animation: fadeInUp 0.6s ease-out;
    }
</style>
{% endblock %}

{% block content %}
<div class="forgot-password-container">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="forgot-password-card">
                    <div class="forgot-password-header">
                        <h1 class="forgot-password-logo">ALLURE</h1>
                        <h2 class="forgot-password-title">Esqueci minha senha</h2>
                        <p class="forgot-password-subtitle">
                            Digite seu e-mail cadastrado e enviaremos instruções para redefinir sua senha
                        </p>
                    </div>
                    
                    <!-- Success Message -->
                    <div class="success-message" id="success_message">
                        <i class="fas fa-check-circle me-2"></i>
                        E-mail enviado com sucesso! Verifique sua caixa de entrada.
                    </div>
                    
                    <!-- Error Message -->
                    <div class="error-message" id="error_message">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        <span id="error_text">Ocorreu um erro. Tente novamente.</span>
                    </div>
                    
                    <form method="post" id="reset_form">
                        {% csrf_token %}
                        
                        <div class="form-group">
                            <label for="email" class="form-label">E-mail</label>
                            <div class="input-group">
                                <i class="fas fa-envelope input-icon"></i>
                                <input type="email" 
                                       class="form-control with-icon" 
                                       id="email" 
                                       name="email" 
                                       placeholder="Digite seu e-mail cadastrado"
                                       required>
                            </div>
                        </div>
                        
                        <button type="submit" class="btn-reset" id="reset_btn">
                            <i class="fas fa-paper-plane me-2"></i>
                            Enviar instruções
                        </button>
                    </form>
                    
                    <div class="back-to-login">
                        <a href="{% url 'accounts:login' %}" class="back-link">
                            <i class="fas fa-arrow-left"></i>
                            Voltar para o login
                        </a>
                    </div>
                </div>
                
                <!-- Information Card -->
                <div class="info-card">
                    <h3 class="info-title">
                        <i class="fas fa-info-circle"></i>
                        Como funciona?
                    </h3>
                    <p class="info-text">
                        Após enviar seu e-mail, você receberá um link seguro para redefinir sua senha. 
                        O link expira em 24 horas por segurança.
                    </p>
                    
                    <ol class="steps-list">
                        <li>
                            <div class="step-number">1</div>
                            <div>Digite seu e-mail cadastrado</div>
                        </li>
                        <li>
                            <div class="step-number">2</div>
                            <div>Receba o e-mail com o link de redefinição</div>
                        </li>
                        <li>
                            <div class="step-number">3</div>
                            <div>Clique no link e crie uma nova senha</div>
                        </li>
                        <li>
                            <div class="step-number">4</div>
                            <div>Faça login com sua nova senha</div>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Form submission handling
    document.getElementById('reset_form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const email = document.getElementById('email').value.trim();
        const resetBtn = document.getElementById('reset_btn');
        const successMessage = document.getElementById('success_message');
        const errorMessage = document.getElementById('error_message');
        
        // Hide previous messages
        successMessage.style.display = 'none';
        errorMessage.style.display = 'none';
        
        // Validate email
        if (!email) {
            showError('Por favor, digite seu e-mail.');
            return;
        }
        
        if (!isValidEmail(email)) {
            showError('Por favor, digite um e-mail válido.');
            return;
        }
        
        // Show loading state
        resetBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Enviando...';
        resetBtn.disabled = true;
        
        // Simulate form submission (replace with actual AJAX call)
        setTimeout(() => {
            // For demo purposes, show success message
            showSuccess();
            
            // Reset form
            document.getElementById('reset_form').reset();
            
            // Reset button
            resetBtn.innerHTML = '<i class="fas fa-paper-plane me-2"></i>Enviar instruções';
            resetBtn.disabled = false;
        }, 2000);
    });
    
    // Email validation
    function isValidEmail(email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }
    
    // Show success message
    function showSuccess() {
        const successMessage = document.getElementById('success_message');
        successMessage.style.display = 'block';
        
        // Scroll to message
        successMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
    
    // Show error message
    function showError(message) {
        const errorMessage = document.getElementById('error_message');
        const errorText = document.getElementById('error_text');
        
        errorText.textContent = message;
        errorMessage.style.display = 'block';
        
        // Reset button
        const resetBtn = document.getElementById('reset_btn');
        resetBtn.innerHTML = '<i class="fas fa-paper-plane me-2"></i>Enviar instruções';
        resetBtn.disabled = false;
        
        // Scroll to message
        errorMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
    
    // Auto-focus on email input
    document.getElementById('email').focus();
    
    // Enter key submission
    document.getElementById('email').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            document.getElementById('reset_form').dispatchEvent(new Event('submit'));
        }
    });
</script>
{% endblock %}