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

{% block title %}Setup Two-Factor Authentication - Stream Processor{% endblock %}

{% block page_title %}
    <div class="flex items-center">
        <i class="fas fa-mobile-alt mr-3 text-primary-600"></i>
        Setup Two-Factor Authentication
    </div>
{% endblock %}

{% block extra_head %}
<style>
    
    .step-indicator {
        display: flex;
        justify-content: center;
        margin-bottom: 3rem;
    }
    
    .step {
        display: flex;
        align-items: center;
        margin: 0 1rem;
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #e2e8f0;
        color: #64748b;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin-right: 0.5rem;
    }
    
    .step.active .step-number {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    
    .qr-section {
        text-align: center;
        margin-bottom: 2rem;
        padding: 2rem;
        background: #f8fafc;
        border-radius: 12px;
        border: 2px dashed #e2e8f0;
    }
    
    .qr-code {
        display: inline-block;
        padding: 1rem;
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        margin-bottom: 1rem;
    }
    
    .secret-key {
        background: #1f2937;
        color: #f9fafb;
        padding: 1rem;
        border-radius: 8px;
        font-family: 'Courier New', monospace;
        font-size: 0.9rem;
        word-break: break-all;
        margin: 1rem 0;
        position: relative;
    }
    
    .copy-btn {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        background: #374151;
        color: white;
        border: none;
        padding: 0.5rem;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.8rem;
    }
    
    .copy-btn:hover {
        background: #4b5563;
    }
    
    .verification-input {
        width: 100%;
        padding: 1rem;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        font-size: 1.2rem;
        text-align: center;
        letter-spacing: 0.3rem;
        font-family: 'Courier New', monospace;
        font-weight: bold;
        transition: all 0.3s ease;
        background: #f8fafc;
        margin-bottom: 1.5rem;
    }
    
    .verification-input:focus {
        outline: none;
        border-color: #667eea;
        background: white;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
    
    .setup-btn {
        width: 100%;
        padding: 1rem;
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .setup-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
    }
    
    .info-box {
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        color: #1e40af;
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
    }
    
    .warning-box {
        background: #fef3c7;
        border: 1px solid #fcd34d;
        color: #92400e;
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
    }
    
    .instruction-list {
        list-style: none;
        padding: 0;
    }
    
    .instruction-list li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 1rem;
        padding: 0.5rem;
        background: #f8fafc;
        border-radius: 8px;
    }
    
    .instruction-number {
        background: #667eea;
        color: white;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: bold;
        margin-right: 1rem;
        flex-shrink: 0;
    }
    
    .error-message {
        background: #fee2e2;
        border: 1px solid #fecaca;
        color: #dc2626;
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
    }
    
    .loading {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .setup-btn.loading .btn-text {
        opacity: 0;
    }
    
    .setup-btn.loading .loading {
        display: block;
    }
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="bg-white shadow rounded-lg mb-6">
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                                <i class="fas fa-shield-alt text-blue-600"></i>
                            </div>
                        </div>
                        <div class="ml-4">
                            <h1 class="text-lg font-medium text-gray-900">Setup Two-Factor Authentication</h1>
                            <p class="text-sm text-gray-500">Secure your account with an additional layer of protection</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Info Panel -->
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-info-circle text-blue-400"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-blue-700">
                        Two-factor authentication adds an extra layer of security to your account. You'll need an authenticator app to complete this setup.
                    </p>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-6 py-6">
        
                <!-- Step Indicator -->
                <div class="flex justify-center mb-8">
                    <div class="flex items-center space-x-8">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-medium">
                                1
                            </div>
                            <span class="ml-2 text-sm font-medium text-gray-900">Scan QR Code</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-sm font-medium">
                                2
                            </div>
                            <span class="ml-2 text-sm font-medium text-gray-500">Verify Setup</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-sm font-medium">
                                3
                            </div>
                            <span class="ml-2 text-sm font-medium text-gray-500">Save Backup Codes</span>
                        </div>
                    </div>
                </div>
        
                {% if messages %}
                    {% for message in messages %}
                        <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-exclamation-triangle text-red-400"></i>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm text-red-700">{{ message }}</p>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                {% endif %}
                
                {% if form.non_field_errors %}
                    <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-exclamation-triangle text-red-400"></i>
                            </div>
                            <div class="ml-3">
                                {% for error in form.non_field_errors %}
                                    <p class="text-sm text-red-700">{{ error }}</p>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% endif %}
                
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-info-circle text-blue-400"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-blue-700">
                                <strong>Step 1:</strong> Install an authenticator app like Google Authenticator, Authy, or Microsoft Authenticator on your mobile device.
                            </p>
                        </div>
                    </div>
                </div>
        
                <!-- QR Code Section -->
                <div class="text-center bg-gray-50 rounded-lg p-6 mb-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">
                        <i class="fas fa-qrcode mr-2 text-gray-600"></i>
                        Scan QR Code
                    </h3>
                    
                    <div class="inline-block p-4 bg-white rounded-lg shadow-sm border mb-4">
                        <img src="{{ qr_code_url }}" alt="QR Code for 2FA Setup" class="w-48 h-48">
                    </div>
                    
                    <p class="text-sm text-gray-600 mb-4">
                        Scan this QR code with your authenticator app
                    </p>
                    
                    <details class="text-left">
                        <summary class="cursor-pointer text-blue-600 hover:text-blue-800 mb-2 text-sm">
                            <i class="fas fa-key mr-1"></i>
                            Can't scan? Enter this secret key manually
                        </summary>
                        <div class="bg-gray-900 text-white p-3 rounded font-mono text-sm break-all relative mt-2">
                            {{ secret }}
                            <button type="button" class="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white px-2 py-1 rounded text-xs" onclick="copySecret()">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                        <p class="text-xs text-gray-500 mt-2">
                            Account: {{ user.username }}<br>
                            Issuer: Stream Processor
                        </p>
                    </details>
                </div>
                
                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-triangle text-yellow-400"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-yellow-700">
                                <strong>Important:</strong> Make sure to save your backup codes after setup. They're your only way to access your account if you lose your authenticator device.
                            </p>
                        </div>
                    </div>
                </div>
        
                <h3 class="text-lg font-medium text-gray-900 mb-4">
                    <i class="fas fa-check-circle mr-2 text-green-600"></i>
                    Verify Setup
                </h3>
                
                <div class="space-y-4 mb-6">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <div class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-medium">
                                1
                            </div>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900">Open your authenticator app</p>
                            <p class="text-sm text-gray-500">Launch the app you just installed</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <div class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-medium">
                                2
                            </div>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900">Add new account</p>
                            <p class="text-sm text-gray-500">Tap the + button or "Add account"</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <div class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-medium">
                                3
                            </div>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900">Scan the QR code above</p>
                            <p class="text-sm text-gray-500">Point your camera at the QR code</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <div class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-medium">
                                4
                            </div>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900">Enter the 6-digit code</p>
                            <p class="text-sm text-gray-500">Type the code shown in your app below</p>
                        </div>
                    </div>
                </div>
        
                <form method="post" id="setupForm">
                    {% csrf_token %}
                    
                    <div class="mb-4">
                        <input type="text" 
                               name="{{ form.token.name }}" 
                               id="{{ form.token.id_for_label }}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg text-center text-lg font-mono tracking-widest focus:ring-2 focus:ring-blue-500 focus:border-blue-500{% if form.token.errors %} border-red-500{% endif %}"
                               placeholder="000000"
                               maxlength="6"
                               pattern="[0-9]{6}"
                               autocomplete="one-time-code"
                               required
                               autofocus>
                        
                        {% if form.token.errors %}
                            <div class="mt-2 text-sm text-red-600">
                                {% for error in form.token.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    
                    <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition duration-150 ease-in-out" id="setupBtn">
                        <span class="btn-text">
                            <i class="fas fa-shield-alt mr-2"></i>
                            Enable Two-Factor Authentication
                        </span>
                        <div class="loading hidden">
                            <i class="fas fa-spinner fa-spin"></i>
                        </div>
                    </button>
                </form>
                
                <div class="text-center mt-6">
                    <a href="{% url 'core:security_settings' %}" class="text-sm text-gray-500 hover:text-gray-700">
                        <i class="fas fa-arrow-left mr-1"></i>
                        Back to Security Settings
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Auto-format token input
document.getElementById('{{ form.token.id_for_label }}').addEventListener('input', function(e) {
    // Only allow numbers
    e.target.value = e.target.value.replace(/[^0-9]/g, '');
});

// Form submission loading state
document.getElementById('setupForm').addEventListener('submit', function() {
    const setupBtn = document.getElementById('setupBtn');
    setupBtn.classList.add('loading');
    setupBtn.disabled = true;
});

// Copy secret key function
function copySecret() {
    const secret = '{{ secret }}';
    navigator.clipboard.writeText(secret).then(function() {
        const copyBtn = document.querySelector('.copy-btn');
        const originalText = copyBtn.innerHTML;
        copyBtn.innerHTML = '<i class="fas fa-check"></i>';
        copyBtn.style.background = '#10b981';
        
        setTimeout(() => {
            copyBtn.innerHTML = originalText;
            copyBtn.style.background = '#374151';
        }, 2000);
    }).catch(function() {
        // Fallback for older browsers
        const textArea = document.createElement('textarea');
        textArea.value = secret;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        
        alert('Secret key copied to clipboard!');
    });
}

// Auto-submit when 6 digits are entered
document.getElementById('{{ form.token.id_for_label }}').addEventListener('input', function(e) {
    if (e.target.value.length === 6) {
        // Add a small delay to allow user to see the complete code
        setTimeout(() => {
            if (e.target.value.length === 6) {
                document.getElementById('setupForm').submit();
            }
        }, 1000);
    }
});
</script>
{% endblock %}