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

{% block title %}Reset Password - Accounts{% endblock %}

{% block extra_head %}
<style>
.reset-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.reset-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    max-width: 500px;
    width: 100%;
}

.reset-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    text-align: center;
}

.reset-body {
    padding: 2rem;
}

.form-floating {
    margin-bottom: 1rem;
}

.btn-reset {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-reset:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

.security-info {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.security-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.security-step:last-child {
    margin-bottom: 0;
}

.security-step .step-number {
    background: #667eea;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    margin-right: 1rem;
    flex-shrink: 0;
}

.reset-footer {
    text-align: center;
    padding: 1rem 2rem 2rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.reset-footer a {
    color: #667eea;
    text-decoration: none;
}

.reset-footer a:hover {
    text-decoration: underline;
}

.success-animation {
    animation: bounceIn 0.6s ease-out;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.email-sent {
    text-align: center;
    padding: 2rem;
}

.email-sent i {
    font-size: 4rem;
    color: #28a745;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .reset-container {
        padding: 1rem;
    }
    
    .reset-card {
        margin: 0;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="reset-container">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6 col-lg-5">
                <div class="reset-card">
                    {% if not email_sent %}
                    <div class="reset-header">
                        <h2 class="mb-0">
                            <i class="fas fa-key me-2"></i>
                            Reset Password
                        </h2>
                        <p class="mb-0 mt-2 opacity-75">Enter your email to reset your password</p>
                    </div>
                    
                    <div class="reset-body">
                        {% if messages %}
                            {% for message in messages %}
                                <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            {% endfor %}
                        {% endif %}
                        
                        {% if form.non_field_errors %}
                            <div class="alert alert-danger">
                                {{ form.non_field_errors }}
                            </div>
                        {% endif %}
                        
                        <form method="post" id="resetForm">
                            {% csrf_token %}
                            
                            <div class="form-floating">
                                <input type="email" class="form-control {% if form.email.errors %}is-invalid{% endif %}" 
                                       id="id_email" name="email" placeholder="Email address" 
                                       value="{{ form.email.value|default:'' }}" required>
                                <label for="id_email">Email address</label>
                                <div class="form-text">Enter the email address associated with your account</div>
                                {% if form.email.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.email.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>
                            
                            <button type="submit" class="btn btn-primary btn-reset w-100" id="resetButton">
                                <span class="spinner-border spinner-border-sm me-2 d-none" id="resetSpinner"></span>
                                <i class="fas fa-paper-plane me-2"></i>
                                Send Reset Link
                            </button>
                        </form>
                        
                        <div class="security-info">
                            <h6 class="mb-3"><i class="fas fa-shield-alt me-2"></i>How it works</h6>
                            <div class="security-step">
                                <div class="step-number">1</div>
                                <div>
                                    <strong>Enter your email</strong><br>
                                    We'll check if an account exists with this email address.
                                </div>
                            </div>
                            <div class="security-step">
                                <div class="step-number">2</div>
                                <div>
                                    <strong>Check your inbox</strong><br>
                                    We'll send a secure reset link to your email.
                                </div>
                            </div>
                            <div class="security-step">
                                <div class="step-number">3</div>
                                <div>
                                    <strong>Create new password</strong><br>
                                    Click the link and set a new secure password.
                                </div>
                            </div>
                        </div>
                    </div>
                    {% else %}
                    <div class="reset-header bg-success">
                        <h2 class="mb-0">
                            <i class="fas fa-check-circle me-2"></i>
                            Email Sent
                        </h2>
                        <p class="mb-0 mt-2 opacity-75">Check your inbox for reset instructions</p>
                    </div>
                    
                    <div class="email-sent success-animation">
                        <i class="fas fa-envelope-open"></i>
                        <h4 class="mb-3">Reset link sent!</h4>
                        <p class="mb-3">
                            We've sent password reset instructions to:
                        </p>
                        <div class="alert alert-info">
                            <strong>{{ email }}</strong>
                        </div>
                        <p class="mb-3">
                            Please check your email and click the reset link to continue.
                        </p>
                        
                        <div class="alert alert-warning">
                            <h6><i class="fas fa-clock me-2"></i>Important Notes:</h6>
                            <ul class="mb-0 text-start">
                                <li>The reset link will expire in <strong>1 hour</strong></li>
                                <li>Check your spam/junk folder if you don't see the email</li>
                                <li>You can only use the reset link once</li>
                            </ul>
                        </div>
                        
                        <div class="mt-3">
                            <button type="button" class="btn btn-outline-primary me-2" onclick="resendResetEmail()">
                                <i class="fas fa-redo me-1"></i>Resend Email
                            </button>
                            <a href="{% url 'accounts:login' %}" class="btn btn-primary">
                                <i class="fas fa-arrow-left me-1"></i>Back to Login
                            </a>
                        </div>
                    </div>
                    {% endif %}
                    
                    <div class="reset-footer">
                        <p class="mb-2">
                            Remember your password? 
                            <a href="{% url 'accounts:login' %}">Sign in here</a>
                        </p>
                        <p class="mb-0">
                            <a href="{% url 'accounts:help' %}">Need help?</a> • 
                            <a href="{% url 'accounts:contact' %}">Contact Support</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Rate Limit Modal -->
<div class="modal fade" id="rateLimitModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Too Many Requests
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-3">
                    <i class="fas fa-clock text-warning" style="font-size: 3rem;"></i>
                </div>
                <p class="text-center mb-3">
                    You've made too many password reset requests. Please wait before trying again.
                </p>
                <div class="alert alert-info">
                    <h6><i class="fas fa-info-circle me-2"></i>Security Notice:</h6>
                    <p class="mb-0">
                        This limit helps protect your account from automated attacks. 
                        You can try again in <strong id="waitTime">--</strong> minutes.
                    </p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <a href="{% url 'accounts:contact' %}" class="btn btn-primary">
                    <i class="fas fa-envelope me-1"></i>Contact Support
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Account Not Found Modal -->
<div class="modal fade" id="accountNotFoundModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title">
                    <i class="fas fa-search me-2"></i>
                    Account Information
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-3">
                    <i class="fas fa-user-slash text-muted" style="font-size: 3rem;"></i>
                </div>
                <p class="text-center mb-3">
                    We couldn't find an account with that email address.
                </p>
                <div class="alert alert-light border">
                    <h6><i class="fas fa-lightbulb me-2"></i>What you can do:</h6>
                    <ul class="mb-0">
                        <li>Double-check the email address for typos</li>
                        <li>Try a different email address you might have used</li>
                        <li>Create a new account if you don't have one</li>
                        <li>Contact support if you need assistance</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Try Again</button>
                <a href="{% url 'accounts:register' %}" class="btn btn-success">
                    <i class="fas fa-user-plus me-1"></i>Create Account
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Form submission handling
document.getElementById('resetForm')?.addEventListener('submit', function(e) {
    e.preventDefault();
    
    const button = document.getElementById('resetButton');
    const spinner = document.getElementById('resetSpinner');
    const form = this;
    const email = document.getElementById('id_email').value;
    
    // Validate email
    if (!email || !isValidEmail(email)) {
        showError('Please enter a valid email address');
        return;
    }
    
    // Show loading state
    button.disabled = true;
    spinner.classList.remove('d-none');
    button.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Sending...';
    
    // Submit form data
    const formData = new FormData(form);
    
    fetch(form.action || window.location.href, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Redirect to success page or reload
            if (data.redirect_url) {
                window.location.href = data.redirect_url;
            } else {
                window.location.reload();
            }
        } else if (data.rate_limited) {
            // Show rate limit modal
            document.getElementById('waitTime').textContent = data.wait_time || '15';
            new bootstrap.Modal(document.getElementById('rateLimitModal')).show();
        } else if (data.account_not_found) {
            // Show account not found modal
            new bootstrap.Modal(document.getElementById('accountNotFoundModal')).show();
        } else {
            // Show error message
            showError(data.error || 'An error occurred. Please try again.');
        }
    })
    .catch(error => {
        showError('Network error. Please check your connection and try again.');
    })
    .finally(() => {
        // Reset button state
        button.disabled = false;
        spinner.classList.add('d-none');
        button.innerHTML = '<i class="fas fa-paper-plane me-2"></i>Send Reset Link';
    });
});

// Email validation
function isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

// Real-time email validation
document.getElementById('id_email')?.addEventListener('input', function() {
    const email = this.value;
    if (email && !isValidEmail(email)) {
        this.classList.add('is-invalid');
        
        let errorDiv = this.parentNode.querySelector('.invalid-feedback');
        if (!errorDiv) {
            errorDiv = document.createElement('div');
            errorDiv.className = 'invalid-feedback';
            this.parentNode.appendChild(errorDiv);
        }
        errorDiv.textContent = 'Please enter a valid email address';
    } else {
        this.classList.remove('is-invalid');
    }
});

// Resend reset email
function resendResetEmail() {
    const email = '{{ email|default:"" }}';
    
    if (!email) {
        alert('Email address not found. Please try again.');
        return;
    }
    
    fetch('{% url "accounts:password_reset" %}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]')?.value || getCookie('csrftoken')
        },
        body: JSON.stringify({ email: email, resend: true })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showSuccess('Reset email sent successfully!');
        } else if (data.rate_limited) {
            document.getElementById('waitTime').textContent = data.wait_time || '15';
            new bootstrap.Modal(document.getElementById('rateLimitModal')).show();
        } else {
            showError(data.error || 'Error sending email. Please try again.');
        }
    })
    .catch(error => {
        showError('Network error. Please try again.');
    });
}

// Show error message
function showError(message) {
    // Remove existing alerts
    document.querySelectorAll('.alert-danger').forEach(alert => alert.remove());
    
    // Create new alert
    const alertDiv = document.createElement('div');
    alertDiv.className = 'alert alert-danger alert-dismissible fade show';
    alertDiv.innerHTML = `
        <i class="fas fa-exclamation-circle me-2"></i>${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    // Insert at top of form or body
    const form = document.getElementById('resetForm');
    const resetBody = document.querySelector('.reset-body');
    const target = form || resetBody;
    
    if (target) {
        target.insertBefore(alertDiv, target.firstChild);
    }
}

// Show success message
function showSuccess(message) {
    // Remove existing alerts
    document.querySelectorAll('.alert-success').forEach(alert => alert.remove());
    
    // Create new alert
    const alertDiv = document.createElement('div');
    alertDiv.className = 'alert alert-success alert-dismissible fade show';
    alertDiv.innerHTML = `
        <i class="fas fa-check-circle me-2"></i>${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    // Insert at top of body
    const resetBody = document.querySelector('.reset-body') || document.querySelector('.email-sent');
    if (resetBody) {
        resetBody.insertBefore(alertDiv, resetBody.firstChild);
    }
}

// Get CSRF cookie
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// Auto-focus on email field
document.addEventListener('DOMContentLoaded', function() {
    const emailField = document.getElementById('id_email');
    if (emailField) {
        emailField.focus();
        
        // Pre-fill email from URL parameter if available
        const urlParams = new URLSearchParams(window.location.search);
        const emailParam = urlParams.get('email');
        if (emailParam && isValidEmail(emailParam)) {
            emailField.value = emailParam;
        }
    }
    
    // Add animation to success state
    const emailSent = document.querySelector('.email-sent');
    if (emailSent) {
        emailSent.classList.add('success-animation');
    }
});

// Handle Enter key
document.addEventListener('keypress', function(e) {
    if (e.key === 'Enter' && document.getElementById('resetForm')) {
        document.getElementById('resetForm').dispatchEvent(new Event('submit'));
    }
});

// Prevent multiple submissions
let isSubmitting = false;
document.getElementById('resetForm')?.addEventListener('submit', function(e) {
    if (isSubmitting) {
        e.preventDefault();
        return false;
    }
    isSubmitting = true;
    
    // Reset flag after 3 seconds
    setTimeout(() => {
        isSubmitting = false;
    }, 3000);
});
</script>
{% endblock %}