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

{% block title %}Email Verification - {{ block.super }}{% endblock %}

{% block content %}
<div class="verification-container">
    <div class="verification-card">
        <div class="logo-container">
            <img src="{% static 'images/logo.png' %}" alt="Logo" class="logo">
        </div>
        {% if verification_success %}
            <!-- Successful Verification -->
            <div class="text-center">
                <i class="fas fa-check-circle fa-4x text-success mb-4"></i>
                <h1 class="text-success mb-3">Email Verified!</h1>
                <p class="lead mb-4">
                    Your email address has been successfully verified.
                </p>
                
                <div class="security-badge mb-4">
                    <small>
                        <i class="fas fa-shield-alt me-2"></i>
                        <strong>Account Activated</strong> - You now have full access to all features.
                    </small>
                </div>
                        
                <div class="d-grid gap-2 mt-4">
                    {% if user.is_authenticated %}
                        <a href="{% url 'accounts:dashboard' %}" class="btn btn-verification">
                            <i class="fas fa-tachometer-alt me-2"></i>Go to Dashboard
                        </a>
                        <a href="{% url 'accounts:profile_edit' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-user-edit me-2"></i>Complete Your Profile
                        </a>
                    {% else %}
                        <a href="{% url 'accounts:login' %}" class="btn btn-verification">
                            <i class="fas fa-sign-in-alt me-2"></i>Sign In to Your Account
                        </a>
                        <a href="/" class="btn btn-outline-secondary">
                            <i class="fas fa-home me-2"></i>Go to Homepage
                        </a>
                    {% endif %}
                </div>
                        
                <!-- Welcome Message -->
                <div class="security-badge mt-4">
                    <small>
                        <i class="fas fa-star me-2"></i>
                        <strong>Welcome to Our Community!</strong><br>
                        Thank you for verifying your email. You're now part of our growing community.
                    </small>
                </div>
            </div>
        {% elif verification_failed %}
            <!-- Failed Verification -->
            <div class="text-center">
                <i class="fas fa-exclamation-triangle fa-4x text-danger mb-4"></i>
                <h1 class="text-danger mb-3">Verification Failed</h1>
                <p class="mb-4">
                    We couldn't verify your email address. The verification link may be invalid or expired.
                </p>
                
                <div class="security-badge mb-4">
                    <small>
                        <i class="fas fa-clock me-2"></i>
                        <strong>Possible reasons:</strong><br>
                        Link expired • Already used • Copied incorrectly • Email already verified
                    </small>
                </div>
                        
                <div class="d-grid gap-2 mt-4">
                    <button class="btn btn-verification" onclick="resendVerification()" id="resendBtn">
                        <span class="btn-text">
                            <i class="fas fa-paper-plane me-2"></i>Send New Verification Email
                        </span>
                        <span class="btn-loading d-none">
                            <span class="loading me-2"></span>Sending...
                        </span>
                    </button>
                    
                    <div class="divider"></div>
                    
                    <a href="{% url 'accounts:login' %}" class="login-link">
                        <i class="fas fa-sign-in-alt me-2"></i>Back to Login
                    </a>
                </div>
            </div>
        {% else %}
            <!-- Verification Pending -->
            <div class="text-center">
                <i class="fas fa-envelope fa-3x text-info mb-4"></i>
                <h1 class="mb-3">Verify Your Email</h1>
                <p class="text-muted mb-4">
                    Please check your email and click the verification link to activate your account.
                </p>
                        
                {% if user.is_authenticated and not user.email_verified %}
                    <div class="security-badge mb-4">
                        <small>
                            <i class="fas fa-info-circle me-2"></i>
                            <strong>Verification email sent to:</strong><br>
                            <span class="fw-bold">{{ user.email }}</span>
                        </small>
                    </div>
                    
                    <div class="d-grid gap-2 mt-4">
                        <button class="btn btn-verification" onclick="resendVerification()" id="resendBtn">
                            <span class="btn-text">
                                <i class="fas fa-redo me-2"></i>Resend Verification Email
                            </span>
                            <span class="btn-loading d-none">
                                <span class="loading me-2"></span>Sending...
                            </span>
                        </button>
                        
                        <div class="divider"></div>
                        
                        <a href="{% url 'accounts:dashboard' %}" class="login-link">
                            <i class="fas fa-tachometer-alt me-2"></i>Go to Dashboard
                        </a>
                    </div>
                            
                    <!-- Timer for resend button -->
                    <div class="mt-3">
                        <small class="text-muted" id="resendTimer">
                            <i class="fas fa-clock me-1"></i>
                            You can request another email in <span id="countdown" class="fw-bold">60</span> seconds
                        </small>
                    </div>
                {% else %}
                    <div class="security-badge mb-4">
                        <small>
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            <strong>Account not found or already verified</strong><br>
                            Please sign in to check your verification status.
                        </small>
                    </div>
                    
                    <div class="d-grid gap-2 mt-4">
                        <a href="{% url 'accounts:login' %}" class="btn btn-verification">
                            <i class="fas fa-sign-in-alt me-2"></i>Sign In
                        </a>
                        
                        <div class="divider"></div>
                        
                        <a href="{% url 'accounts:register' %}" class="login-link">
                            <i class="fas fa-user-plus me-2"></i>Create Account
                        </a>
                    </div>
                {% endif %}
            </div>
        {% endif %}
        
        <!-- Security Notice -->
        {% if not verification_success %}
            <div class="security-badge mt-4">
                <small>
                    <i class="fas fa-shield-alt me-2"></i>
                    <strong>Why verify your email?</strong><br>
                    Security • Notifications • Password recovery • Prevent spam
                </small>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.verification-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color, #667eea) 0%, var(--secondary-color, #764ba2) 100%);
    padding: 20px;
}

.verification-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    animation: fadeInUp 0.6s ease-out;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.logo-container {
    text-align: center;
    margin-bottom: 30px;
}

.logo {
    height: 60px;
    width: auto;
}

.btn-verification {
    background: linear-gradient(135deg, var(--primary-color, #667eea) 0%, var(--secondary-color, #764ba2) 100%);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-verification:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
    color: white;
}

.btn-verification:active {
    transform: translateY(0);
}

.btn-verification.loading {
    pointer-events: none;
}

.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #ddd, transparent);
    margin: 20px 0;
}

.login-link {
    color: var(--primary-color, #667eea);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 8px;
}

.login-link:hover {
    color: var(--secondary-color, #764ba2);
    background: rgba(102, 126, 234, 0.1);
    text-decoration: none;
}

.security-badge {
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 12px;
    padding: 15px;
    color: var(--primary-color, #667eea);
    text-align: center;
}

.loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .verification-container {
        padding: 10px;
    }
    
    .verification-card {
        padding: 30px 20px;
        margin: 10px;
    }
}
</style>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Countdown timer for resend button
    let countdown = 60;
    let canResend = false;
    const countdownElement = document.getElementById('countdown');
    const resendTimer = document.getElementById('resendTimer');
    const resendBtn = document.getElementById('resendBtn');
    
    function updateCountdown() {
        if (countdown > 0 && countdownElement) {
            countdownElement.textContent = countdown;
            countdown--;
            setTimeout(updateCountdown, 1000);
        } else if (resendTimer) {
            resendTimer.innerHTML = `
                <i class="fas fa-check me-1"></i>
                <span class="text-success">You can now request another email</span>
            `;
            canResend = true;
            
            // Update button appearance
            if (resendBtn) {
                resendBtn.classList.remove('disabled');
                resendBtn.querySelector('.btn-text i').className = 'fas fa-paper-plane me-2';
            }
        }
    }
    
    // Start countdown if elements exist
    if (countdownElement) {
        updateCountdown();
    } else {
        canResend = true;
    }
    
    // Enhanced resend verification function
    window.resendVerification = function(event) {
        if (!canResend && countdownElement) {
            showAlert('Please wait before requesting another email.', 'warning');
            return;
        }
        
        const btnText = resendBtn.querySelector('.btn-text');
        const btnLoading = resendBtn.querySelector('.btn-loading');
        
        // Add ripple effect
        if (event) {
            createRipple(event, resendBtn);
        }
        
        // Show loading state
        btnText.classList.add('d-none');
        btnLoading.classList.remove('d-none');
        resendBtn.disabled = true;
        resendBtn.classList.add('loading');
        
        // Simulate API call
        fetch('{% url "accounts:resend_verification" %}', {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('Verification email sent successfully!', 'success');
                // Reset countdown
                countdown = 60;
                canResend = false;
                if (countdownElement) {
                    updateCountdown();
                }
            } else {
                showAlert(data.message || 'Failed to send verification email.', 'danger');
            }
        })
        .catch(error => {
            showAlert('An error occurred. Please try again.', 'danger');
        })
        .finally(() => {
            // Reset button state
            btnText.classList.remove('d-none');
            btnLoading.classList.add('d-none');
            resendBtn.disabled = false;
            resendBtn.classList.remove('loading');
        });
    };
    
    // Create ripple effect
    function createRipple(event, element) {
        const ripple = document.createElement('span');
        const rect = element.getBoundingClientRect();
        const size = Math.max(rect.width, rect.height);
        const x = event.clientX - rect.left - size / 2;
        const y = event.clientY - rect.top - size / 2;
        
        ripple.style.width = ripple.style.height = size + 'px';
        ripple.style.left = x + 'px';
        ripple.style.top = y + 'px';
        ripple.classList.add('ripple');
        
        element.appendChild(ripple);
        
        setTimeout(() => {
            ripple.remove();
        }, 600);
    }
    
    function showAlert(message, type) {
        // Remove existing alerts
        const existingAlerts = document.querySelectorAll('.error-message');
        existingAlerts.forEach(alert => alert.remove());
        
        const alertDiv = document.createElement('div');
        alertDiv.className = 'error-message';
        alertDiv.style.cssText = `
            background: ${type === 'success' ? 'rgba(40, 167, 69, 0.1)' : 'rgba(220, 53, 69, 0.1)'};
            border: 1px solid ${type === 'success' ? 'rgba(40, 167, 69, 0.2)' : 'rgba(220, 53, 69, 0.2)'};
            color: ${type === 'success' ? '#28a745' : '#dc3545'};
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 20px;
            text-align: center;
            font-size: 14px;
            animation: fadeInUp 0.3s ease;
        `;
        alertDiv.innerHTML = `
            <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'} me-2"></i>
            ${message}
        `;
        
        const verificationCard = document.querySelector('.verification-card');
        verificationCard.insertBefore(alertDiv, verificationCard.firstChild);
        
        // Auto-hide after 5 seconds
        setTimeout(() => {
            alertDiv.style.opacity = '0';
            alertDiv.style.transform = 'translateY(-10px)';
            setTimeout(() => {
                alertDiv.remove();
            }, 300);
        }, 5000);
    }
    
    // Enhanced input interactions
    const buttons = document.querySelectorAll('.btn-verification');
    buttons.forEach(button => {
        button.addEventListener('click', function(e) {
            if (!this.disabled) {
                createRipple(e, this);
            }
        });
    });
    
    // Add success confetti effect if verification was successful
    if (document.querySelector('.text-success')) {
        setTimeout(() => {
            createConfetti();
        }, 500);
    }
    
    function createConfetti() {
        const colors = ['#28a745', '#17a2b8', '#ffc107', '#dc3545', '#6f42c1'];
        
        for (let i = 0; i < 30; i++) {
            const confetti = document.createElement('div');
            confetti.style.position = 'fixed';
            confetti.style.width = '8px';
            confetti.style.height = '8px';
            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() * 2000 + 1500,
                easing: 'cubic-bezier(0.5, 0, 0.5, 1)'
            });
            
            animation.onfinish = () => confetti.remove();
        }
    }
});
</script>
{% endblock %}