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

{% block title %}Two-Factor Authentication Setup - Accounts{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'accounts:dashboard' %}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{% url 'accounts:settings' %}">Settings</a></li>
        <li class="breadcrumb-item active" aria-current="page">Two-Factor Authentication</li>
    </ol>
</nav>
{% endblock %}

{% block page_header %}
<div class="d-flex justify-content-between align-items-center">
    <div>
        <h1 class="h3 mb-0">
            <i class="fas fa-shield-alt text-primary me-2"></i>
            Two-Factor Authentication
        </h1>
        <p class="text-muted mb-0">Add an extra layer of security to your account</p>
    </div>
    <div>
        <a href="{% url 'accounts:settings' %}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i>
            Back to Settings
        </a>
    </div>
</div>
{% endblock %}

{% block extra_head %}
<style>
.tfa-container {
    max-width: 800px;
    margin: 0 auto;
}

.tfa-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    overflow: hidden;
    margin-bottom: 2rem;
}

.tfa-card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem;
    border-bottom: none;
}

.tfa-card-body {
    padding: 2rem;
}

.setup-steps {
    counter-reset: step-counter;
}

.setup-step {
    counter-increment: step-counter;
    position: relative;
    padding: 2rem;
    margin-bottom: 1.5rem;
    background: #f8f9fa;
    border-radius: 15px;
    border-left: 4px solid #667eea;
}

.setup-step.completed {
    background: #e8f5e8;
    border-left-color: #28a745;
}

.setup-step.active {
    background: #e7f3ff;
    border-left-color: #007bff;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.1);
}

.setup-step::before {
    content: counter(step-counter);
    position: absolute;
    top: -10px;
    left: -10px;
    width: 30px;
    height: 30px;
    background: #667eea;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}

.setup-step.completed::before {
    background: #28a745;
    content: '✓';
}

.setup-step.active::before {
    background: #007bff;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(0, 123, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
}

.qr-code-container {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 10px;
    border: 2px dashed #dee2e6;
    margin: 1.5rem 0;
}

.qr-code {
    max-width: 200px;
    height: auto;
    margin: 0 auto;
    display: block;
}

.backup-codes {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 10px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.backup-codes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
    margin-top: 1rem;
}

.backup-code {
    background: white;
    padding: 0.5rem;
    border-radius: 5px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    text-align: center;
    border: 1px solid #dee2e6;
    cursor: pointer;
    transition: all 0.3s ease;
}

.backup-code:hover {
    background: #f8f9fa;
    transform: translateY(-1px);
}

.backup-code.copied {
    background: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.verification-input {
    text-align: center;
    font-size: 1.5rem;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5rem;
    padding: 1rem;
    border-radius: 10px;
    border: 2px solid #dee2e6;
    transition: all 0.3s ease;
}

.verification-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.verification-input.is-valid {
    border-color: #28a745;
}

.verification-input.is-invalid {
    border-color: #dc3545;
}

.app-recommendations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.app-recommendation {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.app-recommendation:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
}

.app-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-enabled {
    background: #d4edda;
    color: #155724;
}

.status-disabled {
    background: #f8d7da;
    color: #721c24;
}

.security-benefits {
    background: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.benefit-item:last-child {
    margin-bottom: 0;
}

.benefit-item i {
    color: #0066cc;
    margin-right: 0.75rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.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);
    }
}

@media (max-width: 768px) {
    .tfa-card-body {
        padding: 1.5rem;
    }
    
    .setup-step {
        padding: 1.5rem;
    }
    
    .verification-input {
        font-size: 1.2rem;
        letter-spacing: 0.3rem;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="tfa-container">
    <!-- Current Status -->
    <div class="tfa-card">
        <div class="tfa-card-header">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h4 class="mb-0">
                        <i class="fas fa-mobile-alt me-2"></i>
                        Two-Factor Authentication Status
                    </h4>
                    <p class="mb-0 mt-2 opacity-75">Secure your account with an additional verification step</p>
                </div>
                <div>
                    {% if user.two_factor_enabled %}
                        <span class="status-indicator status-enabled">
                            <i class="fas fa-check-circle me-1"></i>
                            Enabled
                        </span>
                    {% else %}
                        <span class="status-indicator status-disabled">
                            <i class="fas fa-times-circle me-1"></i>
                            Disabled
                        </span>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <div class="tfa-card-body">
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show success-animation" role="alert">
                        <i class="fas fa-{% if message.tags == 'success' %}check-circle{% elif message.tags == 'error' %}exclamation-circle{% else %}info-circle{% endif %} me-2"></i>
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                {% endfor %}
            {% endif %}
            
            {% if not user.two_factor_enabled %}
                <!-- Security Benefits -->
                <div class="security-benefits">
                    <h6 class="mb-3"><i class="fas fa-shield-check me-2"></i>Why Enable Two-Factor Authentication?</h6>
                    <div class="benefit-item">
                        <i class="fas fa-lock"></i>
                        <div>
                            <strong>Enhanced Security:</strong> Even if someone knows your password, they can't access your account without your phone.
                        </div>
                    </div>
                    <div class="benefit-item">
                        <i class="fas fa-bell"></i>
                        <div>
                            <strong>Login Alerts:</strong> Get notified immediately when someone tries to access your account.
                        </div>
                    </div>
                    <div class="benefit-item">
                        <i class="fas fa-globe"></i>
                        <div>
                            <strong>Industry Standard:</strong> Used by major platforms like Google, Facebook, and banking institutions.
                        </div>
                    </div>
                    <div class="benefit-item">
                        <i class="fas fa-key"></i>
                        <div>
                            <strong>Backup Codes:</strong> Access your account even if you lose your phone with recovery codes.
                        </div>
                    </div>
                </div>
                
                <!-- Setup Steps -->
                <div class="setup-steps">
                    <!-- Step 1: Download App -->
                    <div class="setup-step {% if setup_step >= 1 %}active{% endif %}" id="step1">
                        <h5 class="mb-3">
                            <i class="fas fa-download me-2"></i>
                            Download an Authenticator App
                        </h5>
                        <p class="mb-3">
                            Choose and install one of these recommended authenticator apps on your smartphone:
                        </p>
                        
                        <div class="app-recommendations">
                            <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2" target="_blank" class="app-recommendation">
                                <div class="app-icon" style="background: #4285f4; color: white;">
                                    <i class="fab fa-google"></i>
                                </div>
                                <h6>Google Authenticator</h6>
                                <p class="text-muted mb-0">Free • Simple • Reliable</p>
                            </a>
                            
                            <a href="https://authy.com/download/" target="_blank" class="app-recommendation">
                                <div class="app-icon" style="background: #ec1c24; color: white;">
                                    <i class="fas fa-shield-alt"></i>
                                </div>
                                <h6>Authy</h6>
                                <p class="text-muted mb-0">Free • Cloud Backup • Multi-device</p>
                            </a>
                            
                            <a href="https://1password.com/" target="_blank" class="app-recommendation">
                                <div class="app-icon" style="background: #0f6cbd; color: white;">
                                    <i class="fas fa-key"></i>
                                </div>
                                <h6>1Password</h6>
                                <p class="text-muted mb-0">Premium • Password Manager</p>
                            </a>
                            
                            <a href="https://www.microsoft.com/en-us/security/mobile-authenticator-app" target="_blank" class="app-recommendation">
                                <div class="app-icon" style="background: #00bcf2; color: white;">
                                    <i class="fab fa-microsoft"></i>
                                </div>
                                <h6>Microsoft Authenticator</h6>
                                <p class="text-muted mb-0">Free • Push Notifications</p>
                            </a>
                        </div>
                        
                        <div class="mt-3">
                            <button type="button" class="btn btn-primary" onclick="nextStep(2)">
                                <i class="fas fa-check me-1"></i>
                                I've Downloaded an App
                            </button>
                        </div>
                    </div>
                    
                    <!-- Step 2: Scan QR Code -->
                    <div class="setup-step" id="step2" style="display: none;">
                        <h5 class="mb-3">
                            <i class="fas fa-qrcode me-2"></i>
                            Scan QR Code
                        </h5>
                        <p class="mb-3">
                            Open your authenticator app and scan this QR code to add your account:
                        </p>
                        
                        <div class="qr-code-container">
                            <div id="qrCodePlaceholder">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Generating QR code...</span>
                                </div>
                                <p class="mt-2 text-muted">Generating QR code...</p>
                            </div>
                        </div>
                        
                        <div class="alert alert-info">
                            <h6><i class="fas fa-info-circle me-2"></i>Can't scan the QR code?</h6>
                            <p class="mb-2">Manually enter this secret key in your authenticator app:</p>
                            <div class="input-group">
                                <input type="text" class="form-control" id="secretKey" value="{{ secret_key }}" readonly>
                                <button class="btn btn-outline-secondary" type="button" onclick="copySecretKey()">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="mt-3">
                            <button type="button" class="btn btn-primary" onclick="nextStep(3)">
                                <i class="fas fa-check me-1"></i>
                                I've Added the Account
                            </button>
                            <button type="button" class="btn btn-outline-secondary ms-2" onclick="previousStep(1)">
                                <i class="fas fa-arrow-left me-1"></i>
                                Back
                            </button>
                        </div>
                    </div>
                    
                    <!-- Step 3: Verify Code -->
                    <div class="setup-step" id="step3" style="display: none;">
                        <h5 class="mb-3">
                            <i class="fas fa-mobile-alt me-2"></i>
                            Verify Your Setup
                        </h5>
                        <p class="mb-3">
                            Enter the 6-digit code from your authenticator app to verify the setup:
                        </p>
                        
                        <form method="post" id="verificationForm">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="verify_setup">
                            
                            <div class="mb-3">
                                <input type="text" class="form-control verification-input" 
                                       id="verificationCode" name="verification_code" 
                                       placeholder="000000" maxlength="6" pattern="[0-9]{6}" 
                                       autocomplete="off" required>
                                <div class="form-text text-center mt-2">
                                    Enter the 6-digit code from your authenticator app
                                </div>
                            </div>
                            
                            <div class="text-center">
                                <button type="submit" class="btn btn-success btn-lg" id="verifyButton">
                                    <span class="spinner-border spinner-border-sm me-2 d-none" id="verifySpinner"></span>
                                    <i class="fas fa-check me-2"></i>
                                    Verify & Enable 2FA
                                </button>
                            </div>
                        </form>
                        
                        <div class="mt-3">
                            <button type="button" class="btn btn-outline-secondary" onclick="previousStep(2)">
                                <i class="fas fa-arrow-left me-1"></i>
                                Back
                            </button>
                        </div>
                    </div>
                    
                    <!-- Step 4: Backup Codes -->
                    <div class="setup-step" id="step4" style="display: none;">
                        <h5 class="mb-3">
                            <i class="fas fa-key me-2"></i>
                            Save Your Backup Codes
                        </h5>
                        <p class="mb-3">
                            Store these backup codes in a safe place. You can use them to access your account if you lose your phone:
                        </p>
                        
                        <div class="backup-codes">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="mb-0">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    Backup Recovery Codes
                                </h6>
                                <div>
                                    <button type="button" class="btn btn-sm btn-outline-primary me-2" onclick="downloadBackupCodes()">
                                        <i class="fas fa-download me-1"></i>
                                        Download
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="printBackupCodes()">
                                        <i class="fas fa-print me-1"></i>
                                        Print
                                    </button>
                                </div>
                            </div>
                            
                            <div class="backup-codes-grid" id="backupCodesGrid">
                                <!-- Backup codes will be inserted here -->
                            </div>
                            
                            <div class="mt-3">
                                <small class="text-muted">
                                    <i class="fas fa-info-circle me-1"></i>
                                    Each code can only be used once. Click on a code to copy it.
                                </small>
                            </div>
                        </div>
                        
                        <div class="text-center mt-4">
                            <button type="button" class="btn btn-success btn-lg" onclick="completeSetup()">
                                <i class="fas fa-check-circle me-2"></i>
                                Complete Setup
                            </button>
                        </div>
                    </div>
                </div>
            {% else %}
                <!-- 2FA Already Enabled -->
                <div class="alert alert-success">
                    <h5 class="alert-heading">
                        <i class="fas fa-check-circle me-2"></i>
                        Two-Factor Authentication is Enabled
                    </h5>
                    <p class="mb-3">
                        Your account is protected with two-factor authentication. You'll need to enter a code from your authenticator app when signing in.
                    </p>
                    <hr>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-outline-primary" onclick="showBackupCodes()">
                            <i class="fas fa-key me-1"></i>
                            View Backup Codes
                        </button>
                        <button type="button" class="btn btn-outline-warning" onclick="regenerateBackupCodes()">
                            <i class="fas fa-redo me-1"></i>
                            Regenerate Codes
                        </button>
                        <button type="button" class="btn btn-outline-danger" onclick="disable2FA()">
                            <i class="fas fa-times me-1"></i>
                            Disable 2FA
                        </button>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Disable 2FA Modal -->
<div class="modal fade" id="disable2FAModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Disable Two-Factor Authentication
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <h6><i class="fas fa-warning me-2"></i>Security Warning</h6>
                    <p class="mb-0">
                        Disabling two-factor authentication will make your account less secure. 
                        Are you sure you want to continue?
                    </p>
                </div>
                
                <form method="post" id="disable2FAForm">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="disable_2fa">
                    
                    <div class="mb-3">
                        <label for="confirmPassword" class="form-label">Confirm your password:</label>
                        <input type="password" class="form-control" id="confirmPassword" 
                               name="password" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="confirmCode" class="form-label">Enter current 2FA code:</label>
                        <input type="text" class="form-control verification-input" 
                               id="confirmCode" name="confirmation_code" 
                               placeholder="000000" maxlength="6" pattern="[0-9]{6}" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" form="disable2FAForm" class="btn btn-danger">
                    <i class="fas fa-times me-1"></i>
                    Disable 2FA
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Backup Codes Modal -->
<div class="modal fade" id="backupCodesModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-key me-2"></i>
                    Backup Recovery Codes
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <h6><i class="fas fa-exclamation-triangle me-2"></i>Important</h6>
                    <p class="mb-0">
                        Store these codes in a safe place. Each code can only be used once to access your account if you lose your authenticator device.
                    </p>
                </div>
                
                <div class="backup-codes">
                    <div class="backup-codes-grid" id="modalBackupCodesGrid">
                        <!-- Backup codes will be inserted here -->
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary" onclick="downloadBackupCodes()">
                    <i class="fas fa-download me-1"></i>
                    Download
                </button>
                <button type="button" class="btn btn-outline-secondary" onclick="printBackupCodes()">
                    <i class="fas fa-print me-1"></i>
                    Print
                </button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let currentStep = 1;
let backupCodes = [];

// Step navigation
function nextStep(step) {
    document.getElementById(`step${currentStep}`).style.display = 'none';
    document.getElementById(`step${currentStep}`).classList.remove('active');
    document.getElementById(`step${currentStep}`).classList.add('completed');
    
    currentStep = step;
    document.getElementById(`step${step}`).style.display = 'block';
    document.getElementById(`step${step}`).classList.add('active');
    
    if (step === 2) {
        generateQRCode();
    }
}

function previousStep(step) {
    document.getElementById(`step${currentStep}`).style.display = 'none';
    document.getElementById(`step${currentStep}`).classList.remove('active');
    
    currentStep = step;
    document.getElementById(`step${step}`).style.display = 'block';
    document.getElementById(`step${step}`).classList.add('active');
    document.getElementById(`step${step}`).classList.remove('completed');
}

// Generate QR code
function generateQRCode() {
    const placeholder = document.getElementById('qrCodePlaceholder');
    
    // Simulate QR code generation
    setTimeout(() => {
        placeholder.innerHTML = `
            <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjhmOWZhIi8+CiAgPHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzZjNzU3ZCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkdlbmVyYXRlZCBRUiBDb2RlPC90ZXh0Pgo8L3N2Zz4K" class="qr-code" alt="QR Code">
            <p class="mt-2 text-muted">Scan this code with your authenticator app</p>
        `;
    }, 1500);
}

// Copy secret key
function copySecretKey() {
    const secretKey = document.getElementById('secretKey');
    secretKey.select();
    document.execCommand('copy');
    
    // Show feedback
    const button = event.target.closest('button');
    const originalHTML = button.innerHTML;
    button.innerHTML = '<i class="fas fa-check"></i>';
    button.classList.add('btn-success');
    button.classList.remove('btn-outline-secondary');
    
    setTimeout(() => {
        button.innerHTML = originalHTML;
        button.classList.remove('btn-success');
        button.classList.add('btn-outline-secondary');
    }, 2000);
}

// Verification code input formatting
document.getElementById('verificationCode')?.addEventListener('input', function() {
    let value = this.value.replace(/\D/g, ''); // Remove non-digits
    this.value = value;
    
    // Validate length
    if (value.length === 6) {
        this.classList.add('is-valid');
        this.classList.remove('is-invalid');
    } else if (value.length > 0) {
        this.classList.add('is-invalid');
        this.classList.remove('is-valid');
    } else {
        this.classList.remove('is-valid', 'is-invalid');
    }
});

// Verification form submission
document.getElementById('verificationForm')?.addEventListener('submit', function(e) {
    e.preventDefault();
    
    const button = document.getElementById('verifyButton');
    const spinner = document.getElementById('verifySpinner');
    const code = document.getElementById('verificationCode').value;
    
    if (code.length !== 6) {
        showError('Please enter a 6-digit code');
        return;
    }
    
    // Show loading state
    button.disabled = true;
    spinner.classList.remove('d-none');
    button.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Verifying...';
    
    // Simulate verification
    setTimeout(() => {
        // Generate backup codes
        backupCodes = generateBackupCodes();
        displayBackupCodes(backupCodes);
        nextStep(4);
        
        // Reset button
        button.disabled = false;
        spinner.classList.add('d-none');
        button.innerHTML = '<i class="fas fa-check me-2"></i>Verify & Enable 2FA';
    }, 2000);
});

// Generate backup codes
function generateBackupCodes() {
    const codes = [];
    for (let i = 0; i < 10; i++) {
        codes.push(Math.random().toString(36).substr(2, 8).toUpperCase());
    }
    return codes;
}

// Display backup codes
function displayBackupCodes(codes) {
    const grid = document.getElementById('backupCodesGrid');
    grid.innerHTML = '';
    
    codes.forEach((code, index) => {
        const codeElement = document.createElement('div');
        codeElement.className = 'backup-code';
        codeElement.textContent = code;
        codeElement.onclick = () => copyBackupCode(codeElement, code);
        grid.appendChild(codeElement);
    });
}

// Copy backup code
function copyBackupCode(element, code) {
    navigator.clipboard.writeText(code).then(() => {
        element.classList.add('copied');
        element.textContent = 'Copied!';
        
        setTimeout(() => {
            element.classList.remove('copied');
            element.textContent = code;
        }, 2000);
    });
}

// Download backup codes
function downloadBackupCodes() {
    const content = `Two-Factor Authentication Backup Codes\n\nAccount: ${window.location.hostname}\nGenerated: ${new Date().toLocaleString()}\n\n${backupCodes.join('\n')}\n\nImportant:\n- Each code can only be used once\n- Store these codes in a safe place\n- Use them to access your account if you lose your authenticator device`;
    
    const blob = new Blob([content], { type: 'text/plain' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = '2fa-backup-codes.txt';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
}

// Print backup codes
function printBackupCodes() {
    const printContent = `
        <h2>Two-Factor Authentication Backup Codes</h2>
        <p><strong>Account:</strong> ${window.location.hostname}</p>
        <p><strong>Generated:</strong> ${new Date().toLocaleString()}</p>
        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 20px 0;">
            ${backupCodes.map(code => `<div style="padding: 10px; border: 1px solid #ccc; text-align: center; font-family: monospace; font-weight: bold;">${code}</div>`).join('')}
        </div>
        <h3>Important Notes:</h3>
        <ul>
            <li>Each code can only be used once</li>
            <li>Store these codes in a safe place</li>
            <li>Use them to access your account if you lose your authenticator device</li>
        </ul>
    `;
    
    const printWindow = window.open('', '_blank');
    printWindow.document.write(`
        <html>
            <head><title>2FA Backup Codes</title></head>
            <body>${printContent}</body>
        </html>
    `);
    printWindow.document.close();
    printWindow.print();
}

// Complete setup
function completeSetup() {
    // Redirect to settings or show success message
    window.location.href = '{% url "accounts:settings" %}?2fa_enabled=1';
}

// Show backup codes modal
function showBackupCodes() {
    // Load existing backup codes
    const modalGrid = document.getElementById('modalBackupCodesGrid');
    // This would typically fetch from server
    const existingCodes = generateBackupCodes(); // Placeholder
    
    modalGrid.innerHTML = '';
    existingCodes.forEach((code, index) => {
        const codeElement = document.createElement('div');
        codeElement.className = 'backup-code';
        codeElement.textContent = code;
        codeElement.onclick = () => copyBackupCode(codeElement, code);
        modalGrid.appendChild(codeElement);
    });
    
    new bootstrap.Modal(document.getElementById('backupCodesModal')).show();
}

// Regenerate backup codes
function regenerateBackupCodes() {
    if (confirm('Are you sure you want to regenerate your backup codes? This will invalidate all existing codes.')) {
        // This would typically make an API call
        showSuccess('Backup codes have been regenerated successfully.');
        showBackupCodes();
    }
}

// Disable 2FA
function disable2FA() {
    new bootstrap.Modal(document.getElementById('disable2FAModal')).show();
}

// Show error message
function showError(message) {
    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>
    `;
    
    const cardBody = document.querySelector('.tfa-card-body');
    cardBody.insertBefore(alertDiv, cardBody.firstChild);
}

// Show success message
function showSuccess(message) {
    const alertDiv = document.createElement('div');
    alertDiv.className = 'alert alert-success alert-dismissible fade show success-animation';
    alertDiv.innerHTML = `
        <i class="fas fa-check-circle me-2"></i>${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    const cardBody = document.querySelector('.tfa-card-body');
    cardBody.insertBefore(alertDiv, cardBody.firstChild);
}

// Auto-focus on verification code input
document.addEventListener('DOMContentLoaded', function() {
    // Focus on verification code when step 3 becomes active
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.target.id === 'step3' && mutation.target.style.display !== 'none') {
                setTimeout(() => {
                    document.getElementById('verificationCode')?.focus();
                }, 100);
            }
        });
    });
    
    const step3 = document.getElementById('step3');
    if (step3) {
        observer.observe(step3, { attributes: true, attributeFilter: ['style'] });
    }
});
</script>
{% endblock %}