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

{% block title %}Password Reset Complete - {{ block.super }}{% endblock %}

{% block content %}
<div class="complete-container">
    <div class="complete-card">
        <div class="logo-container">
            <img src="{% static 'images/logo.png' %}" alt="Logo" class="logo">
        </div>
        <div class="text-center">
            <i class="fas fa-check-circle fa-4x text-success mb-4"></i>
            <h1 class="mb-3">Password Reset Complete!</h1>
            <p class="lead mb-4">
                Your password has been successfully updated.
            </p>
            
            <div class="security-badge">
                <i class="fas fa-shield-alt me-2"></i>
                <strong>Your account is now secure</strong><br>
                <small>You can now sign in with your new password.</small>
            </div>
                
            <div class="d-grid gap-2 mt-4">
                <a href="{% url 'auth:login' %}" class="btn-verification" id="loginBtn">
                    <i class="fas fa-sign-in-alt me-2"></i>Sign In Now
                </a>
                <a href="/" class="login-link">
                    <i class="fas fa-home me-2"></i>Go to Homepage
                </a>
            </div>
            
            <div class="divider"></div>
                
            <!-- Security Recommendations -->
            <div class="security-badge text-start">
                <h6 class="mb-3">
                    <i class="fas fa-lightbulb me-2"></i>Security Recommendations
                </h6>
                    
                    <div class="row g-3">
                        <div class="col-12">
                            <div class="d-flex align-items-start p-3 bg-light rounded">
                                <i class="fas fa-mobile-alt text-primary me-3 mt-1"></i>
                                <div>
                                    <h6 class="mb-1">Enable Two-Factor Authentication</h6>
                                    <small class="text-muted">
                                        Add an extra layer of security to your account
                                    </small>
                                    <div class="mt-2">
                                        <a href="#" class="btn btn-sm btn-outline-primary" onclick="showTwoFactorInfo()">
                                            <i class="fas fa-info-circle me-1"></i>Learn More
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-12">
                            <div class="d-flex align-items-start p-3 bg-light rounded">
                                <i class="fas fa-key text-warning me-3 mt-1"></i>
                                <div>
                                    <h6 class="mb-1">Use a Password Manager</h6>
                                    <small class="text-muted">
                                        Store and generate strong, unique passwords
                                    </small>
                                    <div class="mt-2">
                                        <a href="#" class="btn btn-sm btn-outline-warning" onclick="showPasswordManagerInfo()">
                                            <i class="fas fa-external-link-alt me-1"></i>Recommendations
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-12">
                            <div class="d-flex align-items-start p-3 bg-light rounded">
                                <i class="fas fa-bell text-info me-3 mt-1"></i>
                                <div>
                                    <h6 class="mb-1">Review Account Activity</h6>
                                    <small class="text-muted">
                                        Check for any suspicious login attempts
                                    </small>
                                    <div class="mt-2">
                                        <a href="{% url 'core:dashboard' %}" class="btn btn-sm btn-outline-info">
                                            <i class="fas fa-chart-line me-1"></i>View Activity
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            <!-- Quick Actions -->
            <div class="mt-4">
                <h6 class="mb-3">
                    <i class="fas fa-bolt me-2"></i>Quick Actions
                </h6>
                
                <div class="row g-2">
                    <div class="col-6">
                        <a href="{% url 'accounts:profile_edit' %}" class="login-link btn-sm w-100">
                            <i class="fas fa-user-edit me-1"></i>Edit Profile
                        </a>
                    </div>
                    <div class="col-6">
                        <a href="#" class="login-link btn-sm w-100" onclick="showSecuritySettings()">
                            <i class="fas fa-cog me-1"></i>Security Settings
                        </a>
                    </div>
                </div>
            </div>
        </div>
                
        <!-- Important Notice -->
        <div class="security-badge mt-4">
            <h6 class="text-warning mb-2">
                <i class="fas fa-exclamation-triangle me-2"></i>Important Notice
            </h6>
            <small>
                If you didn't request this password reset, please contact our support team immediately. 
                Your account security is our top priority.
            </small>
            <div class="mt-2">
                <a href="mailto:security@example.com" class="btn btn-sm btn-warning">
                    <i class="fas fa-envelope me-1"></i>Report Security Issue
                </a>
            </div>
        </div>
        
        <!-- Auto-redirect Notice -->
        <div class="mt-4">
            <small class="text-muted">
                <i class="fas fa-clock me-1"></i>
                You will be automatically redirected to the login page in 
                <span id="countdown" class="fw-bold text-primary">30</span> seconds.
                <button class="btn btn-link btn-sm p-0 ms-1" onclick="cancelRedirect()">
                    Cancel
                </button>
            </small>
        </div>
    </div>
</div>
        
        <!-- Success Animation -->
        <div class="text-center mt-3">
            <div class="success-animation">
                <div class="checkmark">
                    <div class="checkmark_stem"></div>
                    <div class="checkmark_kick"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modals -->
<!-- Two-Factor Authentication Info Modal -->
<div class="modal fade" id="twoFactorModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-mobile-alt me-2"></i>Two-Factor Authentication
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Two-factor authentication (2FA) adds an extra layer of security to your account by requiring a second form of verification.</p>
                
                <h6>Benefits:</h6>
                <ul>
                    <li>Protects against password theft</li>
                    <li>Prevents unauthorized access</li>
                    <li>Meets security compliance requirements</li>
                </ul>
                
                <h6>Available Methods:</h6>
                <div class="row g-2">
                    <div class="col-12">
                        <div class="border rounded p-2">
                            <i class="fas fa-mobile me-2 text-primary"></i>
                            <strong>SMS Text Messages</strong>
                            <small class="d-block text-muted">Receive codes via text message</small>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="border rounded p-2">
                            <i class="fas fa-qrcode me-2 text-success"></i>
                            <strong>Authenticator Apps</strong>
                            <small class="d-block text-muted">Google Authenticator, Authy, etc.</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <a href="#" class="btn btn-primary">Enable 2FA</a>
            </div>
        </div>
    </div>
</div>

<!-- Password Manager Info Modal -->
<div class="modal fade" id="passwordManagerModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-key me-2"></i>Password Manager Recommendations
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Password managers help you create and store strong, unique passwords for all your accounts.</p>
                
                <h6>Recommended Password Managers:</h6>
                <div class="row g-2">
                    <div class="col-12">
                        <div class="border rounded p-2">
                            <strong>1Password</strong>
                            <small class="d-block text-muted">Premium option with excellent security</small>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="border rounded p-2">
                            <strong>Bitwarden</strong>
                            <small class="d-block text-muted">Open-source with free tier</small>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="border rounded p-2">
                            <strong>LastPass</strong>
                            <small class="d-block text-muted">Popular choice with good features</small>
                        </div>
                    </div>
                </div>
                
                <div class="alert alert-info mt-3">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Tip:</strong> Most browsers also have built-in password managers that can help you get started.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
/* Success Animation Styles */
.success-animation {
    margin: 20px auto;
    width: 60px;
    height: 60px;
}

.checkmark {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: block;
    stroke-width: 3;
    stroke: #28a745;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #28a745;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    position: relative;
}

.checkmark_stem {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
    position: absolute;
    top: 30px;
    left: 20px;
    width: 15px;
    height: 3px;
    background: #28a745;
    transform: rotate(45deg);
}

.checkmark_kick {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.9s forwards;
    position: absolute;
    top: 35px;
    left: 13px;
    width: 25px;
    height: 3px;
    background: #28a745;
    transform: rotate(-45deg);
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #28a745;
    }
}

/* Pulse animation for main icon */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.fa-check-circle {
    animation: pulse 2s infinite;
}
</style>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-redirect countdown
    let countdown = 30;
    let redirectTimer;
    let isRedirectCancelled = false;
    const countdownElement = document.getElementById('countdown');
    const loginBtn = document.getElementById('loginBtn');
    
    function updateCountdown() {
        if (countdown > 0 && !isRedirectCancelled) {
            countdownElement.textContent = countdown;
            countdown--;
            redirectTimer = setTimeout(updateCountdown, 1000);
        } else if (!isRedirectCancelled) {
            // Redirect to login
            window.location.href = '{% url "auth:login" %}';
        }
    }
    
    // Start countdown
    updateCountdown();
    
    // Cancel redirect function
    window.cancelRedirect = function() {
        isRedirectCancelled = true;
        clearTimeout(redirectTimer);
        countdownElement.parentElement.innerHTML = `
            <i class="fas fa-check me-1"></i>
            Auto-redirect cancelled. You can stay on this page.
        `;
        countdownElement.parentElement.className = 'text-success';
    };
    
    // Add fade-in animation
    const card = document.querySelector('.card');
    card.style.opacity = '0';
    card.style.transform = 'translateY(20px)';
    
    setTimeout(() => {
        card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        card.style.opacity = '1';
        card.style.transform = 'translateY(0)';
    }, 100);
    
    // Modal functions
    window.showTwoFactorInfo = function() {
        const modal = new bootstrap.Modal(document.getElementById('twoFactorModal'));
        modal.show();
    };
    
    window.showPasswordManagerInfo = function() {
        const modal = new bootstrap.Modal(document.getElementById('passwordManagerModal'));
        modal.show();
    };
    
    window.showSecuritySettings = function() {
        // Placeholder for security settings
        alert('Security settings page coming soon!');
    };
    
    // Add keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        // Enter to go to login
        if (e.key === 'Enter') {
            window.location.href = '{% url "auth:login" %}';
        }
        
        // Escape to cancel redirect
        if (e.key === 'Escape') {
            cancelRedirect();
        }
        
        // Space to go to homepage
        if (e.key === ' ') {
            e.preventDefault();
            window.location.href = '/';
        }
    });
    
    // Add hover effects to recommendation cards
    const recommendationCards = document.querySelectorAll('.bg-light.rounded');
    recommendationCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-2px)';
            this.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
            this.style.transition = 'all 0.3s ease';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = 'none';
        });
    });
    
    // Add click tracking for analytics (placeholder)
    loginBtn.addEventListener('click', function() {
        // Track successful password reset completion
        console.log('Password reset completed - user proceeding to login');
    });
    
    // Show success message after animation
    setTimeout(() => {
        const successMessage = document.createElement('div');
        successMessage.className = 'alert alert-success alert-dismissible fade show mt-3';
        successMessage.innerHTML = `
            <i class="fas fa-check-circle me-2"></i>
            <strong>Welcome back!</strong> Your account is now more secure than ever.
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        const cardBody = document.querySelector('.card-body');
        cardBody.insertBefore(successMessage, cardBody.children[3]);
        
        // Auto-hide after 5 seconds
        setTimeout(() => {
            if (successMessage.parentNode) {
                successMessage.remove();
            }
        }, 5000);
    }, 2000);
    
    // Add confetti effect (simple version)
    function createConfetti() {
        const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7'];
        
        for (let i = 0; i < 50; i++) {
            const confetti = document.createElement('div');
            confetti.style.position = 'fixed';
            confetti.style.width = '10px';
            confetti.style.height = '10px';
            confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
            confetti.style.left = Math.random() * 100 + 'vw';
            confetti.style.top = '-10px';
            confetti.style.zIndex = '9999';
            confetti.style.pointerEvents = 'none';
            confetti.style.borderRadius = '50%';
            
            document.body.appendChild(confetti);
            
            // Animate confetti falling
            const animation = confetti.animate([
                { transform: 'translateY(0) rotate(0deg)', opacity: 1 },
                { transform: `translateY(100vh) rotate(360deg)`, opacity: 0 }
            ], {
                duration: Math.random() * 3000 + 2000,
                easing: 'cubic-bezier(0.5, 0, 0.5, 1)'
            });
            
            animation.onfinish = () => confetti.remove();
        }
    }
    
    // Trigger confetti after page load
    setTimeout(createConfetti, 500);
});
</script>
{% endblock %}