{% extends "base/base.html" %}
{% load i18n static %}

{% block title %}{% trans "Confirm Email Address" %}{% endblock %}

{% block extra_css %}
<style>
    .verification-container {
        max-width: 500px;
        margin: 4rem auto;
        padding: 2.5rem;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        text-align: center;
    }
    
    .verification-icon {
        font-size: 4rem;
        color: #1a365d;
        margin-bottom: 1.5rem;
    }
    
    .verification-success {
        color: #198754;
    }
    
    .verification-error {
        color: #dc3545;
    }
    
    .verification-title {
        font-size: 1.75rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        color: #1a365d;
    }
    
    .verification-message {
        font-size: 1.1rem;
        line-height: 1.6;
        margin-bottom: 2rem;
        color: #4a5568;
    }
    
    .resend-form {
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid #e2e8f0;
    }
    
    .form-control {
        border-radius: 8px;
        padding: 0.75rem 1rem;
        border: 1px solid #e2e8f0;
        transition: all 0.2s ease;
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .form-control:focus {
        border-color: #1a365d;
        box-shadow: 0 0 0 0.25rem rgba(26, 54, 93, 0.15);
    }
    
    .btn {
        display: inline-block;
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        user-select: none;
        border: 1px solid transparent;
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: 8px;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
    }
    
    .btn-primary {
        background-color: #1a365d;
        color: white;
        border: none;
    }
    
    .btn-primary:hover {
        background-color: #142a4a;
        transform: translateY(-1px);
    }
    
    .btn-primary:disabled {
        background-color: #cbd5e0;
        cursor: not-allowed;
        transform: none;
    }
    
    .btn-outline-primary {
        color: #1a365d;
        border-color: #1a365d;
        background: transparent;
    }
    
    .btn-outline-primary:hover {
        background-color: rgba(26, 54, 93, 0.1);
    }
    
    .countdown {
        display: inline-block;
        font-weight: 600;
        color: #1a365d;
        margin-top: 1rem;
    }
    
    .alert {
        padding: 1rem;
        margin-bottom: 1.5rem;
        border: 1px solid transparent;
        border-radius: 8px;
    }
    
    .alert-warning {
        background-color: #fff3cd;
        border-color: #ffeeba;
        color: #856404;
    }
    
    .input-group {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        width: 100%;
    }
    
    .input-group > .form-control {
        position: relative;
        flex: 1 1 auto;
        width: 1%;
        margin-bottom: 0;
    }
    
    .input-group > .btn {
        position: relative;
        z-index: 2;
        margin-left: -1px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    
    .spinner-border {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        vertical-align: text-bottom;
        border: 0.2em solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: spinner-border 0.75s linear infinite;
    }
    
    @keyframes spinner-border {
        to { transform: rotate(360deg); }
    }
    
    .text-muted {
        color: #6c757d !important;
    }
    
    .mb-3 {
        margin-bottom: 1rem !important;
    }
    
    .mt-2 {
        margin-top: 0.5rem !important;
    }
    
    .mt-4 {
        margin-top: 1.5rem !important;
    }
    
    .d-none {
        display: none !important;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="verification-container">
        {% if confirmation %}
            <div class="verification-icon">
                <i class="fas fa-envelope-circle-check"></i>
            </div>
            <h1 class="verification-title">{% trans "Verify Your Email" %}</h1>
            <p class="verification-message">
                {% blocktrans with email=confirmation.email_address.email %}
                    Please confirm that <strong>{{ email }}</strong> is your email address by clicking the button below.
                {% endblocktrans %}
            </p>
            <form method="post" action="{% url 'account_confirm_email' confirmation.key %}" class="mb-4">
                {% csrf_token %}
                <button type="submit" class="btn btn-primary btn-lg">
                    {% trans 'Confirm Email' %}
                </button>
            </form>
            
            <div class="resend-form">
                <p class="text-muted mb-3">
                    {% trans "Didn't receive a verification email?" %}
                </p>
                <form method="post" action="{% url 'account_confirm_email' %}" id="resend-form">
                    {% csrf_token %}
                    <div class="input-group">
                        <input type="email" 
                               name="email" 
                               class="form-control" 
                               placeholder="{% trans 'Enter your email' %}" 
                               required
                               value="{{ confirmation.email_address.email|default:'' }}">
                        <button type="submit" 
                                name="resend" 
                                class="btn btn-outline-primary"
                                id="resend-button">
                            {% trans 'Resend Email' %}
                        </button>
                    </div>
                </form>
                <div id="countdown" class="mt-2 d-none">
                    {% trans "Resend available in " %}<span class="countdown">05:00</span>
                </div>
            </div>
            
        {% else %}
            <div class="verification-icon verification-error">
                <i class="fas fa-exclamation-circle"></i>
            </div>
            <h1 class="verification-title verification-error">{% trans "Invalid or Expired Link" %}</h1>
            <p class="verification-message">
                {% url 'account_email' as email_url %}
                {% blocktrans %}
                    This email confirmation link has expired or is invalid. You can request a new verification email below.
                {% endblocktrans %}
            </p>
            
            <div class="resend-form">
                <form method="post" action="{% url 'account_confirm_email' %}" id="resend-form">
                    {% csrf_token %}
                    <div class="input-group">
                        <input type="email" 
                               name="email" 
                               class="form-control" 
                               placeholder="{% trans 'Enter your email' %}" 
                               required>
                        <button type="submit" 
                                name="resend" 
                                class="btn btn-outline-primary"
                                id="resend-button">
                            {% trans 'Resend Verification Email' %}
                        </button>
                    </div>
                </form>
                <div id="countdown" class="mt-2 d-none">
                    {% trans "Resend available in " %}<span class="countdown">05:00</span>
                </div>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const resendForm = document.getElementById('resend-form');
    const resendButton = document.getElementById('resend-button');
    const emailInput = document.querySelector('input[name="email"]');
    const countdownElement = document.getElementById('countdown');
    const countdownDisplay = document.querySelector('.countdown');
    let countdownInterval;
    
    // Check if we should show the cooldown
    const defaultCooldown = parseInt('{{ cooldown|default:300 }}', 10) || 300;  // Default to 5 minutes
    const lastSent = localStorage.getItem('verificationEmailLastSent');
    let cooldown = defaultCooldown;
    
    if (lastSent) {
        const now = new Date().getTime();
        const timeLeft = Math.ceil((parseInt(lastSent) + cooldown * 1000 - now) / 1000);
        
        if (timeLeft > 0) {
            startCountdown(timeLeft);
        }
    }
    
    function startCountdown(seconds) {
        let remaining = seconds;
        updateCountdown(remaining);
        
        countdownElement.classList.remove('d-none');
        resendButton.disabled = true;
        
        countdownInterval = setInterval(function() {
            remaining--;
            updateCountdown(remaining);
            
            if (remaining <= 0) {
                clearInterval(countdownInterval);
                countdownElement.classList.add('d-none');
                resendButton.disabled = false;
                localStorage.removeItem('verificationEmailLastSent');
            }
        }, 1000);
    }
    
    function updateCountdown(seconds) {
        const minutes = Math.floor(seconds / 60);
        const remainingSeconds = seconds % 60;
        countdownDisplay.textContent = 
            `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
    }
    
    if (resendForm) {
        resendForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const email = emailInput.value.trim();
            if (!email) {
                showAlert('Please enter your email address', 'error');
                return;
            }
            
            const originalText = resendButton.innerHTML;
            resendButton.disabled = true;
            resendButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Sending...';
            
            // Send AJAX request
            fetch('{% url "accounts:resend_verification_email" %}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                body: new URLSearchParams({ email })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Store the current time in localStorage
                    const now = new Date().getTime();
                    localStorage.setItem('verificationEmailLastSent', now.toString());
                    
                    // Update cooldown from server response if available
                    cooldown = data.cooldown || 300; // Default to 5 minutes if not provided
                    startCountdown(cooldown);
                    
                    showAlert(data.message || 'Verification email has been resent.', 'success');
                    
                    // If email is already verified, redirect to login
                    if (data.verified) {
                        setTimeout(() => {
                            window.location.href = '{% url "account_login" %}';
                        }, 2000);
                    }
                } else {
                    showAlert(data.error || 'Failed to resend verification email. Please try again.', 'error');
                    resendButton.disabled = false;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showAlert('An error occurred. Please try again later.', 'error');
                resendButton.disabled = false;
            })
            .finally(() => {
                resendButton.innerHTML = originalText;
            });
        });
    }
    
    function showAlert(message, type = 'info') {
        // Remove any existing alerts
        const existingAlert = document.querySelector('.alert-dismissible');
        if (existingAlert) {
            existingAlert.remove();
        }
        
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
        alertDiv.role = 'alert';
        alertDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        `;
        
        // Insert the alert before the form
        resendForm.parentNode.insertBefore(alertDiv, resendForm);
        
        // Auto-dismiss after 5 seconds
        setTimeout(function() {
            if (typeof bootstrap !== 'undefined' && bootstrap.Alert) {
                const bsAlert = new bootstrap.Alert(alertDiv);
                bsAlert.close();
            } else {
                // Fallback if Bootstrap is not available
                alertDiv.style.display = 'none';
            }
        }, 5000);
    }
});
</script>
{% endblock %}